start docs for booking

docs/.vitepress/config.js

@@ -4,7 +4,7 @@ import { defineConfig } from 'vitepress'
 export default defineConfig({
   outDir: './public',
   lang: 'ru-RU',
-  title: "Чат Виджет",
+  title: "НСБ Виджет",
   description: "Документация",
   markdown: {
     lineNumbers: true
@@ -17,6 +17,7 @@ export default defineConfig({
         items: [
           { text: 'Все настройки', link: '/settings' },
           { text: 'Настройки чата', link: '/chat-settings' },
+          { text: 'Настройки формы бронирования', link: '/book-settings' },
           { text: 'Настройки окон', link: '/win-settings' },
           { text: 'Настройки телефонии', link: '/backcall-settings' },
           { text: 'Настройки автоответа в чате', link: '/contacts-dialog-settings' },

docs/book-settings.md

@@ -0,0 +1,331 @@
+# Настройки Формы Бронирования
+
+Настройки формы бронирования устанавливаются в разделе `booking_form` настроек виджета.
+
+## use
+
+Использовать форму бронирования в этом виджете.
+`false` - не использовать. `true` - использовать.  
+По умолчанию `true`
+Также форма не будет использоваться если не найден элемент для встранивания (mountPoint)
+
+```json
+{
+  "booking_form": {
+    "use": true
+  }  
+}
+```
+
+## hide_place
+
+Скрывать поле выбора отеля.
+`false` - не скрывать. `true` - скрывать.    
+Также поле будет скрыто если id отеля уже передан через параметры  
+По умолчанию `false`
+
+```json
+{
+  "booking_form": {
+    "hide_place": true
+  }  
+}
+```
+
+## hide_images
+
+Скрывать изображения.
+`false` - не скрывать. `true` - скрывать.
+По умолчанию `true`
+
+```json
+{
+  "booking_form": {
+    "hide_images": true
+  }  
+}
+```
+
+## mount_point
+
+Селектор элемента для встраивания формы.  
+По умолчанию `"[data-name=\\"booking-form\\"]"` 
+
+```json
+{
+  "booking_form": {
+    "mount_point": "[data-name=\\"booking-form\\"]"
+  }  
+}
+```
+
+## embed_type
+
+Вариант встраивания формы в контент.
+`"content-modal"` - первый шаг в теле страницы, дальше в модальном окне  
+`"content"` - все шаги в теле страницы    
+`"modal"` - все шаги в модальном окне   
+По умолчанию `"content-modal"` 
+
+```json
+{
+  "booking_form": {
+    "embed_type": "content-modal"
+  }  
+}
+```
+
+## style
+
+CSS стили для переопределения встроенных
+
+
+```json
+{
+  "booking_form": {
+    "style": ".input-cont__button {background-color: red;}"
+  }  
+}
+```
+
+## container_min_height
+
+Минимальный размер контейнера формы.  
+Когда нет контента (подгружается следующий шаг) для высоты контейнера применяется это значение  
+Настройка состоит из двух значений:  
+`initial` - мин. высота для начального экрана (выбор даты и кол-ва человек)  
+`other` - для остальных экранов  
+По умолчанию `"initial": "60px", "other": "60svh"` 
+
+
+```json
+{
+  "booking_form": {
+    "container_min_height": {
+      "initial": "60px",
+      "other": "60svh"
+    }
+  }  
+}
+```
+
+## container_max_height
+
+Максимальный размер контейнера формы.  
+Можно ограничить высоту контейнера формы чтобы показывать контент с прокруткой  
+По умолчанию `null`
+
+```json
+{
+  "booking_form": {
+    "container_max_height": "900px"
+  }  
+}
+```
+
+## scroll_y_offset
+
+При переходах по шагам происходит скрол наверх формы.  
+`scroll_y_offset` может использоваться для корректирования позиции куда скроллить
+По умолчанию `0`
+
+```json
+{
+  "booking_form": {
+    "scroll_y_offset": "0"
+  }  
+}
+```
+
+## win_settings
+
+Настройки окна в котором будет показана форма если встраивание `modal` или `content-modal`  
+`max_width` - максимальная ширина окна  
+`min_height` - минимальная ширина окна  
+`max_height` - максимальная высота окна  
+`height` - высота окна  
+`v_align` - вертикальное выравнивание контента в окне  
+
+```json
+{
+  "booking_form": {
+    "max_width": "80svw",
+    "min_height": "80svh",
+    "max_height": "80svh",
+    "height": "100%",
+    "v_align": "flex-start"
+  }  
+}
+```
+
+## win_info_settings
+
+Настройки информационных окон (информация о категории, программе)  
+`max_width` - максимальная ширина окна
+`min_height`: минимальная ширина окна
+
+```json
+{
+  "booking_form": {
+    "max_width": "900px",
+    "min_height": "500px"
+  }  
+}
+```
+
+## win_info_settings
+
+Настройки информационных окон (информация о категории, программе)  
+`max_width` - максимальная ширина окна
+`min_height`: минимальная ширина окна
+
+```json
+{
+  "booking_form": {
+    "max_width": "900px",
+    "min_height": "500px"
+  }  
+}
+```
+
+## text
+
+Текст названий, тултипов, предупреждающих сообщений и тп.    
+Приведены значения по умолчанию    
+В настройки вожно вносить не все поля а только те, которые нужно изменить.  
+
+```json
+{
+  "text": {
+    "search_button":{
+      "next":"Бронировать",
+      "update":"Обновить"
+    },
+    "guests_button":"Применить",
+    "guests_title":"Количество гостей",
+    "category_select":{
+      "header_title":"Выбор номера",
+      "select":"Выбрать",
+      "select_another":"Выбрать другую категорию",
+      "book_type":{
+        "bed_only":"Бронирование только по одному месту",
+        "bed":"Доступно бронирование мест по-одному",
+        "whole":"Бронируется номер целиком"
+      },
+      "default_program_note":"Стандартная программа уже включена в бронирование.<br>Вы сможете выбрать индивидуальные программы на следующем этапе.",
+      "no_price_note":"Вы можете выбрать этот номер и мы перезвоним Вам с актуальными ценами"},
+    "program_select":{
+      "main_title":"Ваше бронирование",
+      "header_title":"Программы пребывания",
+      "sub_title":"Программы пребывания",
+      "price_sub_title":"Стоимость",
+      "book_button":"Продолжить бронирование",
+      "programs_list_title":"Доступные программы",
+      "program_not_selected":"Программа не выбрана",
+      "program_not_selected_price":"Выберите программу",
+      "warn":{
+        "no_age":"Данная программа ограничена по возрасту<br>Укажите возраст",
+        "no_gender":"Данная программа ограничена<br>Укажите пол",
+        "by_category":"Данная программа недоступна для выбранного номера",
+        "by_duration":"{{MIN_MAX}} срок пребывания по этой программе ограничен {{DAYS}}",
+        "by_age":"Доступно для возраста {{AGE}}",
+        "by_gender":"Доступно только для {{GENDER}}"}},
+    "no_price_label":"Цена под запрос",
+    "warn":{
+      "no_location":"Город не выбран",
+      "no_hotel":"Отель не выбран",
+      "no_date":"Даты не выбраны",
+      "no_guest":"Отдыхающие не выбраны",
+      "no_category":"Номер не выбран",
+      "not_complete_guest":"Заполните все параметры бронирования, возраст, пол и выберите программу пребывания"
+    },
+    "book":{
+      "header_title":"Бронирование",
+      "main_title":"Ваше бронирование",
+      "sub_title":"Отдыхающие",
+      "contacts_title":"Контактные данные заказчика",
+      "customer_select_title":"Выберите заказчика",
+      "select_social":"Выберите социальную группу",
+      "customer_select":"Другой заказчик",
+      "comment_title":"Ваши пожелания",
+      "price_title":"Общая стоимость путевки",
+      "no_price_note":"Нажмите забронировать и мы перезвоним Вам с актуальными ценами",
+      "book_button":"Забронировать",
+      "placeholders":{
+        "name":"Имя",
+        "surname":"Фамилия",
+        "patronymic":"Отчество",
+        "phone":"Телефон в международном формате",
+        "email":"Электронная почта",
+        "whatsapp":"Whatsapp",
+        "telegram":"Telegram"
+      },
+      "warn":{
+        "guests_input_incomplete":"Заполните данные отдыхающих!",
+        "customer_input_incomplete":"Заполните или исправьте данные заказчика!",
+        "customer_not_selected":"Выберите заказчика!",
+        "required":"Заполните обязательное поле {{FIELD}}",
+        "required_optional":"Заполните одно из обязательных полей: {{FIELDS}}",
+        "incorrect":"Неправильно заполнено поле {{FIELD}}"
+      },
+      "error":{
+        "book_error":"Ошибка при отправке заявки"
+      }
+    },
+    "book_complete":{
+      "heading":"Ваше заявка отправлена!",
+      "text":"Наш менеджер свяжется с Вами в ближайшее время для уточнения всех деталей.","book_button":"Забронировать ещё"
+    }
+  }  
+}
+```
+
+## initial_data
+
+Начальные значения для полей на первом экране  
+`hotel` - отель (необязательный). Если устанавливается то все его параметры обязательны `data_type`, `generic_title`, `id`  
+`dates` - даты (необязательный). Если устанавливается то все его параметры обязательны `start`, `end`    
+`guests` - туристы (необязательный). Параметры не обязательны `adults`, `kids`  
+Туристы добавляются как объекы в них можно предустановить возраст, пол
+
+```json
+{
+  "booking_form": {
+    "initial_data": {
+      "hotel": {
+        "data_type": "refbook__hotel",
+        "generic_title": "Санаторий Целебный Нарзан, Кисловодск",
+        "id": 100034
+      },
+      "dates": {
+        "start": "2023-11-18",
+        "end": "2023-11-22"
+      },
+      "guests": {
+        "adults": [{}],
+        "kids": [{"age": 2, "gender": "M"}, {"age": 6, "gender": "F"}]
+      }
+    }
+  }
+}
+```
+
+## initial_align
+
+Начальные значения для полей на первом экране  
+`hotel` - отель (необязательный). Если устанавливается то все его параметры обязательны `data_type`, `generic_title`, `id`  
+`dates` - даты (необязательный). Если устанавливается то все его параметры обязательны `start`, `end`    
+`guests` - туристы (необязательный). Параметры не обязательны `adults`, `kids`  
+Туристы добавляются как объекы в них можно предустановить возраст, пол
+
+```json
+{
+  "booking_form": {
+    initial_align: {
+      content: 'center',
+      modal: 'center'
+    }
+  }  
+}
+```
+

docs/embedding.md

@@ -78,4 +78,11 @@
 </div>
 ```
 
+## Встраивание формы бронирования
+
+Для встраивания формы бронирования на странице должен присутствовать элемент указанный в настройках формы `mount_point`  
+Если `mount_point` в настройках не указан, то по умолчанию это элемент:  
+`<div data-name="booking-form"></div>`   
+Если этот элемент есть на странице форма встроится в него.
+
 

docs/index.md

@@ -1,6 +1,10 @@
-# Чат Виджет
+# НСБ Виджет
 
-Настраиваемый скрипт чата и окон заказа обратного звонка для встраивания в сайт. 
+Настраиваемый скрипт для добавления в сайт.  
+Содержит:  
+* чат
+* окна заказа обратного звонка
+* форма бронирования