docs: updates from Linear tasks

docs/docs/components/components-message.md

@@ -12,7 +12,254 @@ The `Custom Message` component is used to customize a message in Webchat: you ca
 |----------|--------|-----------------------|----------|---------------|
 | children | String | Show a custom message | Yes      | -             |
 
-## Example
+## Example 1: Map
+
+If you want to add a "map message" where the user can see a location on a map, create a js file and add something like in our example: `example-nlu/src/webchat/map-message.js`:
+
+
+```javascript
+import { customMessage, WebchatContext } from '@botonic/react'
+import React from 'react'
+
+let MapContainer, TileLayer
+if (typeof window !== 'undefined') {
+  MapContainer = require('react-leaflet').MapContainer
+  TileLayer = require('react-leaflet').TileLayer
+}
+
+class MapMessage extends React.Component {
+  static contextType = WebchatContext
+  constructor(props) {
+    super(props)
+  }
+
+  render() {
+    if (typeof window !== 'undefined')
+      return (
+        <MapContainer
+          center={[this.props.lat, this.props.lon]}
+          zoom={14}
+          scrollWheelZoom={false}
+          style={{ height: 200, width: 200 }}
+        >
+          <TileLayer
+            attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+            url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+          />
+        </MapContainer>
+      )
+    else return null
+  }
+}
+
+export default customMessage({
+  name: 'map-message',
+  component: MapMessage,
+  defaultProps: {
+    style: {
+      maxWidth: '90%',
+      borderColor: 'black',
+    },
+  },
+})
+```
+
+
+## Example 2: Hotel form
+
+If you want to add a "booking form message" where the user can book a hotel, create a js file and add something like in our example: `example-hotel-reservation/src/webchat/hotel-form-message.js`:
+
+```javascript
+import React from 'react'
+import styled from 'styled-components'
+import { WebchatContext, customMessage } from '@botonic/react'
+import {
+  MuiPickersUtilsProvider,
+  KeyboardDatePicker,
+} from '@material-ui/pickers'
+import DateFnsUtils from '@date-io/date-fns'
+import deLocale from 'date-fns/locale/en-US'
+import Autocomplete from '@material-ui/lab/Autocomplete'
+import { MyTextField } from '../utils'
+
+const Form = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`
+
+const Button = styled.button`
+  height: 40px;
+  background: #2f2f2f;
+  border-radius: 8px;
+  margin-top: 5px;
+  text-align: center;
+  color: white;
+`
+
+class HoltelForm extends React.Component {
+  static contextType = WebchatContext
+  constructor(props) {
+    super(props)
+    this.state = {
+      phone: '',
+      guests: '',
+      date: null,
+      error: false,
+      edit: true,
+    }
+  }
+
+  formatDate(date) {
+    return date.toISOString().substring(0, 10).split('-').reverse().join('/')
+  }
+
+  close() {
+    if (this.verifiedForm()) {
+      const date = this.formatDate(this.state.date)
+      const payload = `enviar_${this.state.phone}_${this.state.guests}_${date}`
+      this.setState({ edit: false, error: false })
+      const formInfo = {
+        hotel: this.props.hotel,
+        guests: this.state.guests,
+        date: date,
+        phone: this.state.phone,
+      }
+      const hotels = this.context.webchatState.session.user.extra_data.hotels
+      hotels.unshift(formInfo)
+      this.context.updateUser({
+        extra_data: { hotels },
+      })
+      this.context.sendPayload(payload)
+    } else {
+      this.setState({ error: true })
+    }
+  }
+
+  verifiedForm() {
+    if (
+      this.state.phone === '' ||
+      this.state.guests === '' ||
+      this.state.date === null
+    )
+      return false
+    return true
+  }
+
+  handlePhone = (event) => {
+    this.setState({ phone: event.target.value })
+  }
+
+  handleDate = (date) => {
+    this.setState({ date: date })
+  }
+
+  handleGuests = (value) => {
+    this.setState({ guests: value ? value.guests : '' })
+  }
+
+  render() {
+    const guestsOptions = [
+      { guests: '1' },
+      { guests: '2' },
+      { guests: '3' },
+      { guests: '4' },
+      { guests: '5' },
+    ]
+    return (
+      <Form>
+        <MyTextField
+          required={true}
+          label='Phone'
+          onChange={this.handlePhone}
+          value={this.state.phone}
+          error={this.state.error}
+          disabled={!this.state.edit}
+        />
+        <Autocomplete
+          disabled={!this.state.edit}
+          options={guestsOptions}
+          getOptionLabel={(option) => option.guests}
+          getOptionSelected={(option, value) => option.guests == value.guests}
+          onChange={(event, newValue) => {
+            this.handleGuests(newValue)
+          }}
+          style={{
+            width: '100%',
+            padding: '0px 0px 5px 63px',
+          }}
+          renderInput={(params) => (
+            <MyTextField
+              required={true}
+              label='Guests'
+              params={params}
+              value={this.state.guests}
+              error={this.state.error}
+              disabled={!this.state.edit}
+            />
+          )}
+        />
+        <MuiPickersUtilsProvider utils={DateFnsUtils} locale={deLocale}>
+          <KeyboardDatePicker
+            required={true}
+            label='Date'
+            disabled={!this.state.edit}
+            inputVariant='filled'
+            onChange={this.handleDate}
+            value={this.state.date}
+            ampm={false}
+            disablePast
+            format='dd/MM/yyyy'
+            error={this.state.date === null && this.state.error === true}
+            helperText={
+              this.state.date === null && this.state.error === true
+                ? 'This field is required'
+                : ' '
+            }
+            style={{
+              width: '80%',
+            }}
+          />
+        </MuiPickersUtilsProvider>
+        {this.state.edit ? (
+          <Button onClick={() => this.close()}>BOOK</Button>
+        ) : (
+          <Button
+            style={{
+              background: '#808080',
+            }}
+          >
+            COMPLETED
+          </Button>
+        )}
+      </Form>
+    )
+  }
+}
+
+export default customMessage({
+  name: 'hotel-form',
+  component: HoltelForm,
+  defaultProps: {
+    style: {
+      width: '100%',
+      backgroundColor: '#ffffff',
+      border: 'none',
+      boxShadow: 'none',
+      paddingLeft: '5px',
+    },
+    imageStyle: { display: 'none' },
+    blob: false,
+    enableTimestamps: false,
+  },
+})
+```
+
+## Example 3: Calendar
+
+If you want to add a "calendar custom message" where the user can select a date, create a js file and add something like:
 
 ```javascript
 import React from 'react'

docs/docs/concepts/17.routes.md

@@ -45,6 +45,7 @@ There are 5 different ways of passing these tests:
 - **Function:** Passes if the function returns true
 - **Input:** Passes if the input satisfies the condition
 - **Session:** Passes if the condition of the session is met
+- **Request:** Passes if the route path does exist
 
 The rules are tested in such a way that, if the first rule matches, Botonic does not test
 other routes and executes the first action.
@@ -118,6 +119,17 @@ the `404` action, it would be the equivalent to:
 {path: '404', type: /^.*$/, action: NotFound}
 ```
 
+The Request Matcher is used to define and check that the route path does exist. It avoids potential issues in the logical flow of your bot. To use this new matcher, you can add something like the following:
+
+```javascript
+{
+    path: 'step',
+    request: request =>
+      request.input.data === 'trousers' && request.session.user.id === '1234' && request.lastRoutePath === 'shopping',
+    action: CustomizedSuggestion,
+  },
+```
+
 ## Dynamic Routes
 
 At times, you might want to render only some routes in function of a certain condition,

docs/docs/deployment/standalone-js-bundle.md

@@ -195,7 +195,7 @@ module.exports = function (env) {
 ```
   "scripts": {
     ...
-    "build:self-hosted": "webpack --env.target=self-hosted --mode=production",
+    "build:self-hosted": "webpack --env target=self-hosted --mode=production",
   },
 ```
 

docs/docs/concepts/18.webchat.md → docs/docs/webchat/webchat-compatibility.md

@@ -1,22 +1,9 @@
 ---
-id: webchat
-title: Webchat
+id: webchat-compatibility
+title: Browser Compatibility
 ---
 
-## What is Webchat?
-
-Bots developed with Botonic can be easily deployed to different messaging channels.
-Indeed, Botonic's components are specifically treated in order to be executed in a server environment such as Node.Js.
-As they are based on React, Botonic components are the perfect fit in order to offer you applications such as Webchat. Webchat is a system that allows you to embed your bots in a web page without requiring any third-party messaging provider.
-
-<details>
-<summary>Examples  where embedded Webchats can be triggered by clicking the chat bubble.</summary>
-
-![](https://botonic-doc-static.netlify.com/images/webchat_usage.png)
-
-</details>
-
-## Browser Versions Supported by Default
+## Supported Browsers
 
 Botonic supports the following browsers:
 
@@ -31,11 +18,11 @@ Botonic supports the following browsers:
 | Internet Explorer     | **[11 (with polyfills)](#how-to-make-your-bot-compatible-with-ie11)** |
 
 
-## How to make your bot compatible with IE11
+
+## IE 11 Compatibility
 
 To make a bot compatible with IE11, its javascript code must be compliant with ES5. To do so, babel is used to transpile all the code.
 
-### Prepare the bot
 
 To make the bot work in IE11:
 
@@ -143,7 +130,7 @@ Before: `exclude: /node_modules[\/\\](?!(styled-components|@emotion|@rehooks|@bo
 
 After: `exclude: /node_modules[\/\\](?!(axios|styled-components|@emotion|@rehooks|@botonic\/(core|react|plugin-google-analytics))[\/\\])/,`
 
-### Known IE11 issues
+## Known IE11 issues
 
 - **SCRIPT445: Object doesn't support this action:** This error may appear due to the use of the `babel-plugin-add-module-exports` plugin. If the bot is using this plugin try to remove it and see if the error disappears"
 - **Parameter properties (typescript):** If [parameter properties](https://www.typescriptlang.org/docs/handbook/classes.html#parameter-properties) are used in the bot's implementation, they must be removed. All the attributes must be explicitly initialized in the constructor itself to work properly in IE11.
@@ -178,21 +165,3 @@ After: `exclude: /node_modules[\/\\](?!(axios|styled-components|@emotion|@rehook
   ```
 
 - **SCRIPT5009**: 'Proxy' is not defined: `framer-motion` doesn't have IE11 support in newer versions ^2.6.6 so an older version has to be installed (^1.11.1 for example) in the project itself and aliased in `resolveConfig`: `'framer-motion': path.resolve(__dirname, 'node_modules', 'framer-motion'),`
-
-## Storage
-
-By default, Botonic stores its state in the [**localStorage**](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) browser where the data doesn't expire.
-
-However, for security and privacy reasons, you may have to avoid storing bot data.
-
-That's why Botonic also allows you to store on the [**sessionStorage**](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) where everything is cleared once the webchat window is closed or reloaded.
-
-If you don't want to store anything in the browser, the **`null`** variable is recommended.
-
-To specify the required storage type, add:
-
-```javascript
-export const webchat = {
-  storage: {localStorage|sessionStorage|null}
-}
-```