https://alcaldiasoacha.gov.co/SiteAssets/V1/componentes/chat-bot/flows/canales-atencion-flow.js

1import { ChatMessageComponent } from "../components/ChatMessage.js";
2import { CHATBOT_DATA } from "../data/chatbot-data.js";
3
4const canalesAtencionFlow = (container) => {
5  const chatMessages =
6    container.querySelector(".chat-messages");
7
8  const { whatsapp, phone } =
9    CHATBOT_DATA.channels;
10
11  disableInput(container);
12
13  const message = document.createElement("div");
14
15  message.className =
16    "message received bg-[#f7f7f7] text-black p-3 rounded-lg mb-2 max-w-[90%] animate-message-response";
17
18  message.innerHTML = `
19    <p class="font-semibold mb-3">
20      Canales de atención
21    </p>
22
23    <div class="border border-gray-200 rounded-lg p-3 mb-3">
24      <p class="font-semibold text-sm mb-1">
25        ${whatsapp.name}
26      </p>
27
28      <p class="text-sm leading-relaxed mb-2">
29        ${whatsapp.description}
30      </p>
31
32      <a
33        href="https://wa.me/57${whatsapp.number}"
34        target="_blank"
35        rel="noopener noreferrer"
36        class="inline-block bg-color1 text-white py-2 px-4 rounded-lg hover:opacity-90 transition-opacity text-sm"
37      >
38        ${whatsapp.number}
39      </a>
40    </div>
41
42    <div class="border border-gray-200 rounded-lg p-3">
43      <p class="font-semibold text-sm mb-1">
44        ${phone.name}
45      </p>
46
47      <p class="text-sm leading-relaxed mb-2">
48        ${phone.description}
49      </p>
50
51      <a
52        href="tel:${phone.number}"
53        class="inline-block bg-color1 text-white py-2 px-4 rounded-lg hover:opacity-90 transition-opacity text-sm"
54      >
55        ${phone.number}
56      </a>
57    </div>
58  `;
59
60  chatMessages.appendChild(message);
61
62  setTimeout(() => {
63    const followUp = ChatMessageComponent(
64      "¿Desea realizar otra consulta?",
65      "received"
66    );
67
68    chatMessages.appendChild(followUp);
69
70    const options = createOptions(container);
71
72    chatMessages.appendChild(options);
73
74    smoothScrollToBottom(chatMessages);
75  }, 500);
76
77  smoothScrollToBottom(chatMessages);
78};
79
80const createOptions = (container) => {
81  const wrapper = document.createElement("div");
82
83  wrapper.className =
84    "flex flex-col gap-2 mb-3 max-w-[90%] animate-message-response";
85
86  wrapper.innerHTML = `
87    <button
88      type="button"
89      class="return-menu bg-color1 text-white px-4 py-2 rounded-lg border-none cursor-pointer hover:opacity-90 transition-opacity text-sm"
90    >
91      Volver al menú principal
92    </button>
93  `;
94
95  const returnMenuButton =
96    wrapper.querySelector(".return-menu");
97
98  returnMenuButton.addEventListener("click", () => {
99    returnMenuButton.disabled = true;
100
101    returnMenuButton.classList.add(
102      "opacity-50",
103      "cursor-not-allowed"
104    );
105
106    showMainMenu(container);
107  });
108
109  return wrapper;
110};
111
112const showMainMenu = (container) => {
113  disableInput(container);
114
115  container.dispatchEvent(
116    new CustomEvent("chatbot:show-main-menu")
117  );
118};
119
120const disableInput = (container) => {
121  const input = container.querySelector(".chat-input");
122  const button = container.querySelector(".chat-send");
123
124  input.disabled = true;
125  input.value = "";
126  input.placeholder = "Seleccione una opción";
127  button.disabled = true;
128};
129
130const smoothScrollToBottom = (element) => {
131  element.scrollTo({
132    top: element.scrollHeight,
133    behavior: "smooth",
134  });
135};
136
137export { canalesAtencionFlow };