beem-component 2.1.19 → 2.1.21

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/components/ChatComponents/ChatBody/chatBody.js +177 -69
  2. package/dist/components/Modals/modals.stories.js +13 -6
  3. package/package.json +1 -1
  4. package/src/App.js +553 -1686
  5. package/src/lib/components/ChatComponents/ChatBody/chatBody.js +257 -56
package/src/App.js CHANGED
@@ -1,54 +1,24 @@
1
1
  /* eslint-disable jsx-a11y/control-has-associated-label */
2
2
  // * eslint-disable func-style *
3
3
  /* eslint-disable jsx-a11y/media-has-caption */
4
- import React, { useState } from 'react';
4
+ import React from 'react';
5
5
  // import AbcIcon from '@mui/icons-material/Abc';
6
6
  // import LocalOfferOutlinedIcon from '@mui/icons-material/LocalOfferOutlined';
7
- import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
8
- import AccessTimeIcon from '@mui/icons-material/AccessTime';
9
- // import PersonIcon from '@mui/icons-material/Person';
10
- import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
11
-
12
- import GroupIcon from '@mui/icons-material/Group';
7
+ // import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
8
+ // import AccessTimeIcon from '@mui/icons-material/AccessTime';
9
+ // import PersonIcon from '@mui/icons-material/Per
13
10
  // import BusinessIcon from '@mui/icons-material/Business';
14
11
 
15
- import CheckIcon from '@mui/icons-material/Check';
16
- import EditIcon from '@mui/icons-material/Edit';
17
- import DeleteIcon from '@mui/icons-material/Delete';
12
+ // import CheckIcon from '@mui/icons-material/Check';
13
+ // import EditIcon from '@mui/icons-material/Edit';
14
+ // import DeleteIcon from '@mui/icons-material/Delete';
18
15
  // import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
19
16
  // import { Tooltip } from '@mui/material';
20
- import PeopleIcon from '@mui/icons-material/People';
17
+ // import PeopleIcon from '@mui/icons-material/People';
21
18
  // import BusinessIcon from '@mui/icons-material/Business';
22
19
 
23
- import {
24
- BmChat,
25
- GlobalStyle,
26
- BmTag,
27
- BmChatAccordion,
28
- BmAccordion,
29
- BmChatForm,
30
- // BmButton,
31
- // BmButtonDropDown,
32
- // BmBtnIcon,
33
- BmContactCard,
34
- BmModal,
35
- // BmContactCheckbox,
36
- // BmCounter,
37
- // BmProfileIcon,
38
- BmProgressIndicator,
39
- BmLabelWithIcon,
40
- BmCardv2,
41
- BmInfoPanel,
42
- BmButton,
43
- BmSelectionNotice,
44
- BmSelector,
45
- BmCustomCardTitle,
46
- BmDepartmentCard,
47
- BmResourceCard,
48
- BmCustomTab,
49
- BmHorizontalCard,
50
- } from './lib/components';
51
- import AlertBox from './lib/components/Alert/Alert';
20
+ import { BmChat, GlobalStyle } from './lib/components';
21
+ // import AlertBox from './lib/components/Alert/Alert';
52
22
 
53
23
  // import ProgressIndicator from './lib/components/newProgress';
54
24
 
@@ -70,48 +40,22 @@ import AlertBox from './lib/components/Alert/Alert';
70
40
  // },
71
41
  // });
72
42
  // console.log(datsa);
73
- const tabs = [
74
- { value: 'departments', label: 'Departments' },
75
- { value: 'resources', label: 'Resources', icon: GroupIcon },
76
- { value: 'events', label: 'Events', icon: CalendarTodayOutlinedIcon },
77
- ];
43
+
78
44
  const Chat = () => {
79
- const message = {
80
- id: 75681,
81
- message:
82
- // '{"dotgoV2":{"type":"quick_reply","content":{"type":"text","header":"","text":"We value your opinion! Would you be willing to take a short survey to help us improve?","caption":""},"options":[{"type":"text","title":"Give Feedback","postbackText":"bm-feedback|0|181661e8-9209-4665-ad19-680981136ae8"},{"type":"text","title":"No Thank you","postbackText":"dev-defined-postback2"}]}}',
83
- '{"dotgoV2":{"type":"order","catalog":{"id":"3987644271555185","order":{"items":[{"id":"107","currency":"TZS","amount":"8000","quantity":"1"},{"id":"109","currency":"TZS","amount":"12000","quantity":"1"},{"id":"111","currency":"TZS","amount":"7000","quantity":"1"}]}},"forwarded":false,"frequently_forwarded":false}}',
84
- // '{"dotgoV2":{"type":"product_details","subType":"product_list","catalogId":"3987644271555185","header":{"text":"Our Food Menu"},"body":{"text":"*Terms and Conditions for Delivery* \\n- Though we try our best to deliver your food in time, there might be delays\\n- Prices might differ from the ones on the website \\n- Packing charges will be added on the prices \\n- Minimum delivery order TZS 13,000"},"footer":{"text":"Powered by Beem"},"sections":[{"title":"South Indian","productList":[{"productId":95},{"productId":96},{"productId":97},{"productId":98},{"productId":99},{"productId":100},{"productId":101},{"productId":105}]},{"title":"Soups","productList":[{"productId":102},{"productId":103},{"productId":104}]},{"title":"Paratha","productList":[{"productId":106},{"productId":107},{"productId":108},{"productId":109}]},{"title":"Starters & Chaat","productList":[{"productId":110},{"productId":111}]},{"title":"Extras","productList":[{"productId":112},{"productId":113},{"productId":114}]},{"title":"Thali","productList":[{"productId":115},{"productId":116},{"productId":117},{"productId":118}]}]}}',
85
- time: '2025-03-19T13:44:25.000Z',
86
- direction: 'outbound',
87
- message_type: 'order',
88
- messageId: null,
89
- is_live_agent: 0,
90
- is_deleted: 0,
91
- is_comment: 0,
92
- channel: 'whatsapp',
93
- sent_to_vendor: 1,
94
- replyMessageId: '0499863a-e784-4404-ae8a-a95f617b9fbe',
95
- agent_name: null,
96
- df_agent_name: null,
97
- resolve_time: null,
98
- metadata: null,
99
- statusDetails: {
100
- statusCode: 3,
101
- },
102
- };
103
- // {
104
- // id: 59605,
45
+ // const metaQuickReply = [
46
+ // {
47
+ // id: 104342,
105
48
  // message:
106
- // '{\n "dotgoV2": {\n "type": "list",\n "title": "FAQs",\n "body": "Here\'s a list of our Frequently Asked Questions",\n "msgid": "services",\n "globalButtons": [\n {\n "type": "text",\n "title": "View FAQs"\n }\n ],\n "items": [\n {\n "title": "",\n "subtitle": "",\n "options": [\n {\n "type": "text",\n "title": "Location",\n "description": "",\n "postbackText": "section 1 row 1 postback payload"\n },\n {\n "type": "text",\n "title": "Visiting Times",\n "description": "",\n "postbackText": "section 1 row 2 postback payload"\n },\n {\n "type": "text",\n "title": "Doctors Available",\n "description": "",\n "postbackText": "section 1 row 3 postback payload"\n },\n {\n "type": "text",\n "title": "Specialities ",\n "description": "",\n "postbackText": "section 1 row 4 postback payload"\n },\n {\n "type": "text",\n "title": "Go back",\n "description": "",\n "postbackText": "section 1 row 5 postback payload"\n }\n ]\n }\n ]\n }\n}',
107
- // time: '2025-01-29T05:59:46.000Z',
108
- // direction: 'outbound',
109
- // message_type: 'text',
110
- // messageId: null,
49
+ // '{\n "type":"list",\n "body":{\n "text":"Please select a service from the options below:"\n },\n "footer":{\n "text":"You can only select one option"\n },\n "action":{\n "button":"Choose Service",\n "sections":[\n {\n "title":"Financial Services",\n "rows":[\n {\n "id":"loan_services",\n "title":"Loan Services",\n "description":"Get personal or business loans"\n },\n {\n "id":"savings_services",\n "title":"Savings & Investments",\n "description":"Grow your money with our plans"\n }\n ]\n },\n {\n "title":"Customer Support",\n "rows":[\n {\n "id":"support_faq",\n "title":"FAQ",\n "description":"Common questions answered"\n },\n {\n "id":"contact_agent",\n "title":"Contact an Agent",\n "description":"Chat with a live support agent"\n }\n ]\n },\n {\n "title":"Promotions",\n "rows":[\n {\n "id":"discounts",\n "title":"Discounts & Offers",\n "description":"Check out latest promotions"\n }\n ]\n }\n ]\n }\n}',
50
+
51
+ // time: '2025-09-17T10:08:10.000Z',
52
+ // direction: 'inbound',
53
+ // message_type: 'interactive',
54
+ // messageId: 'ac498221-3dd9-4b09-ad2b-826c0d1e3e29',
111
55
  // is_live_agent: 0,
112
56
  // is_deleted: 0,
113
57
  // is_comment: 0,
114
- // channel: 'facebook',
58
+ // channel: 'whatsapp',
115
59
  // sent_to_vendor: 1,
116
60
  // replyMessageId: null,
117
61
  // agent_name: null,
@@ -121,238 +65,44 @@ const Chat = () => {
121
65
  // statusDetails: {
122
66
  // statusCode: 3,
123
67
  // },
124
- // };
125
- const x = {
126
- id: 64816,
127
- message: 'Give Feedback',
128
- time: '2025-02-13T11:19:42.000Z',
129
- direction: 'inbound',
130
- message_type: 'text',
131
- messageId: null,
132
- is_live_agent: 1,
133
- is_deleted: 0,
134
- is_comment: 0,
135
- channel: 'whatsapp',
136
- sent_to_vendor: 1,
137
- replyMessageId: '035a7484-ee02-4829-8cb5-33c4623f1c8a',
138
- agent_name: null,
139
- df_agent_name: null,
140
- resolve_time: null,
141
- metadata: {
142
- id: '6538d48e-1b17-45e8-8e44-be457d3695c0',
143
- prev_message:
144
- // '{"dotgoV2":{"type":"product_details","subType":"product_list","catalogId":"3987644271555185","header":{"text":"Our Food Menu"},"body":{"text":"*Terms and Conditions for Delivery* \\n- Though we try our best to deliver your food in time, there might be delays\\n- Prices might differ from the ones on the website \\n- Packing charges will be added on the prices \\n- Minimum delivery order TZS 13,000"},"footer":{"text":"Powered by Beem"},"sections":[{"title":"South Indian","productList":[{"productId":95},{"productId":96},{"productId":97},{"productId":98},{"productId":99},{"productId":100},{"productId":101},{"productId":105}]},{"title":"Soups","productList":[{"productId":102},{"productId":103},{"productId":104}]},{"title":"Paratha","productList":[{"productId":106},{"productId":107},{"productId":108},{"productId":109}]},{"title":"Starters & Chaat","productList":[{"productId":110},{"productId":111}]},{"title":"Extras","productList":[{"productId":112},{"productId":113},{"productId":114}]},{"title":"Thali","productList":[{"productId":115},{"productId":116},{"productId":117},{"productId":118}]}]}}',
145
- // '{"dotgoV2":{"type":"quick_reply","content":{"type":"text","header":"HELOOOOOOOOOO", "url": "https://i.imgur.com/BZylAb1.jpeg","text":"We value your opinion! Would you be willing to take a short survey to help us improve?","caption":""},"options":[{"type":"text","title":"Give Feedback","postbackText":"bm-feedback|0|181661e8-9209-4665-ad19-680981136ae8"},{"type":"text","title":"No Thank you","postbackText":"dev-defined-postback2"}]}}',
146
- // '{"dotgoV2":{"type":"quick_reply","content":{"type":"text","header":"","text":"Thank you we have received your order\\n\\n• 1 X 20\\" Zuri Wig Straight Mirna Caramel Brown - USD 505\\n• 1 X 14\\" Zuri Wig Straight Miss Van Platinum Blonde - USD 960\\n• 1 X 18\\" Zuri Wig Straight Miss Van Platinum Blonde - USD 960\\n• 1 X 10\\" Zuri Wig Straight Monroe Platinum Blonde - USD 505\\n\\n\\n*Proceed to payment to complete order process*","caption":""},"options":[{"type":"text","title":"Proceed to payment","postbackText":"option-defined-postback1"},{"type":"text","title":"Main menu","postbackText":"option-defined-postback2"}]}}',
147
- '{"dotgoV2":{"type":"list","title":"","body":"Hey Abdallah,\\n\\n*Welcome to Zuri House Of Beauty* \\n\\nWe offer a range of styles designed by Black women for Black women. Our platform, brand, and financing solutions promote economic mobility for Black women entrepreneurs. \\n\\nHow can I assist you today?","globalButtons":[{"type":"text","title":"Browse Services"}],"items":[{"title":"Browse Services","subtitle":"","options":[{"type":"text","title":"View Products","description":"","postbackText":"section 1 row 1 postback payload"},{"type":"text","title":"Track Order","description":"Enter order id for status","postbackText":"section 1 row 1 postback payload"},{"type":"text","title":"Support","description":"","postbackText":"section 1 row 1 postback payload"},{"type":"text","title":"Feedback","description":"Give feedback","postbackText":"bm-feedback|0|bf5ff7a3-6425-484e-9b7b-6104ec774bff"},{"type":"text","title":"Ask us anything","description":"","postbackText":"section 1 row 1 postback payload"}]}]}}',
148
- },
149
- };
150
- const steps = [
151
- { key: 'step1', label: 'Start' },
152
- { key: 'step2', label: 'Details' },
153
- { key: 'step3', label: 'Review' },
154
- { key: 'step4', label: 'Complete' },
155
- ];
156
-
157
- const messages = [
158
- {
159
- id: 78741,
160
- message:
161
- 'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/0c8f668d-f5e6-4325-aa76-4d9af8dd79a7.docx',
162
- time: '2025-04-03T05:55:39.000Z',
163
- direction: 'inbound',
164
- message_type:
165
- 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
166
- messageId: null,
167
- is_live_agent: 0,
168
- is_deleted: 0,
169
- is_comment: 0,
170
- channel: 'whatsapp',
171
- sent_to_vendor: 1,
172
- replyMessageId: null,
173
- agent_name: null,
174
- df_agent_name: null,
175
- resolve_time: null,
176
- metadata: null,
177
- },
178
-
179
- {
180
- id: 78739,
181
- message:
182
- 'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/5f0c7de7-c42b-4a94-b1cd-9fe3554da93d.pdf',
183
- time: '2025-04-03T05:50:02.000Z',
184
- direction: 'inbound',
185
- message_type: 'application/pdf',
186
- messageId: null,
187
- is_live_agent: 0,
188
- is_deleted: 0,
189
- is_comment: 0,
190
- channel: 'whatsapp',
191
- sent_to_vendor: 1,
192
- replyMessageId: null,
193
- agent_name: null,
194
- df_agent_name: null,
195
- resolve_time: null,
196
- metadata: null,
197
- },
198
- ];
199
- // const msg = [
200
- // {
201
- // message: 'Me as user replying to the beem message',
202
- // id: 20278,
203
- // time: '2024-01-22T11:59:08.000Z',
204
- // direction: 'inbound',
205
- // message_type: 'text',
206
- // messageId: null,
207
- // is_live_agent: true,
208
- // is_deleted: false,
209
- // is_comment: false,
210
- // channel: 'whatsapp',
211
- // sent_to_vendor: true,
212
- // replyMessageId: 'b0a6b554-0cc3-4e45-83b2-3cada229a82c',
213
- // agent_name: null,
214
- // df_agent_name: null,
215
- // resolve_time: null,
216
- // metadata: {
217
- // id: 'b0a6b554-0cc3-4e45-83b2-3cada229a82c',
218
- // prev_message: 'this is message from beem',
219
- // },
220
68
  // },
221
69
  // {
222
- // message: 'this is message from beem',
223
- // id: 20277,
224
- // time: '2024-01-22T11:56:41.000Z',
225
- // direction: 'outbound',
226
- // message_type: null,
227
- // messageId: 'b0a6b554-0cc3-4e45-83b2-3cada229a82c',
228
- // is_live_agent: true,
229
- // is_deleted: false,
230
- // is_comment: false,
231
- // channel: 'whatsapp',
232
- // sent_to_vendor: true,
233
- // replyMessageId: null,
234
- // agent_name: 'arl@beem.co.tz',
235
- // df_agent_name: 'Dev arl',
236
- // resolve_time: null,
237
- // metadata: null,
238
- // statusDetails: {
239
- // statusCode: 3,
240
- // },
241
- // },
242
- // {
243
- // message: 'hi',
244
- // id: 20276,
245
- // time: '2024-01-22T11:20:21.000Z',
246
- // direction: 'outbound',
247
- // message_type: null,
248
- // messageId: '86ffe4bd-145e-4f50-83ef-83248b05c43a',
249
- // is_live_agent: true,
250
- // is_deleted: false,
251
- // is_comment: false,
252
- // channel: 'whatsapp',
253
- // sent_to_vendor: true,
254
- // replyMessageId: null,
255
- // agent_name: 'arl@beem.co.tz',
256
- // df_agent_name: 'Dev arl',
257
- // resolve_time: null,
258
- // metadata: null,
259
- // statusDetails: {
260
- // statusCode: 3,
261
- // },
262
- // },
263
- // {
264
- // message: 'hi',
265
- // id: 20270,
266
- // time: '2024-01-22T10:19:57.000Z',
267
- // direction: 'outbound',
268
- // message_type: null,
269
- // messageId: '0e165d59-8300-4cd2-883d-dcb076c6f235',
270
- // is_live_agent: true,
271
- // is_deleted: false,
272
- // is_comment: false,
273
- // channel: 'whatsapp',
274
- // sent_to_vendor: true,
275
- // replyMessageId: null,
276
- // agent_name: 'arl@beem.co.tz',
277
- // df_agent_name: 'Dev arl',
278
- // resolve_time: null,
279
- // metadata: null,
280
- // statusDetails: {
281
- // statusCode: 3,
282
- // },
283
- // },
284
- // {
285
- // message: 'oh i am good',
286
- // id: 20269,
287
- // time: '2024-01-22T10:04:05.000Z',
288
- // direction: 'inbound',
289
- // message_type: 'text',
290
- // messageId: null,
291
- // is_live_agent: true,
292
- // is_deleted: false,
293
- // is_comment: false,
294
- // channel: 'whatsapp',
295
- // sent_to_vendor: true,
296
- // replyMessageId: null,
297
- // agent_name: null,
298
- // df_agent_name: null,
299
- // resolve_time: null,
300
- // metadata: {
301
- // id: 'ABEGJVeCJwBSAhB3WfEzKswmhITnP0z8qo12',
302
- // prev_message: 'how are you????????',
303
- // },
304
- // },
305
- // {
306
- // message: 'how are you????????',
307
- // id: 20268,
308
- // time: '2024-01-22T10:03:23.000Z',
70
+ // id: 104342,
71
+
72
+ // message:
73
+ // '{"type":"button","header":{"type":"image","image":{"link":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/cook.jpg"}},"body":{"text":"Hey there! This is a Breakfast bot. \\nWhat would you like to have?"},"action":{"buttons":[{"type":"reply","reply":{"id":"dev-defined-postback1","title":"Tea"}},{"type":"reply","reply":{"id":"dev-defined-postback2","title":"Coffee"}},{"type":"reply","reply":{"id":"dev-defined-postback3","title":"Chat with Agent"}}]}}',
74
+
75
+ // time: '2025-09-17T10:08:10.000Z',
309
76
  // direction: 'inbound',
310
- // message_type: 'text',
311
- // messageId: null,
312
- // is_live_agent: true,
313
- // is_deleted: false,
314
- // is_comment: false,
77
+ // message_type: 'interactive',
78
+ // messageId: 'ac498221-3dd9-4b09-ad2b-826c0d1e3e29',
79
+ // is_live_agent: 0,
80
+ // is_deleted: 0,
81
+ // is_comment: 0,
315
82
  // channel: 'whatsapp',
316
- // sent_to_vendor: true,
83
+ // sent_to_vendor: 1,
317
84
  // replyMessageId: null,
318
85
  // agent_name: null,
319
86
  // df_agent_name: null,
320
87
  // resolve_time: null,
321
88
  // metadata: null,
322
- // },
323
- // {
324
- // message: 'hi\n',
325
- // id: 20267,
326
- // time: '2024-01-22T10:03:01.000Z',
327
- // direction: 'outbound',
328
- // message_type: null,
329
- // messageId: 'f38be83c-92b1-47a7-9e6a-0d209da0ad86',
330
- // is_live_agent: false,
331
- // is_deleted: false,
332
- // is_comment: false,
333
- // channel: 'whatsapp',
334
- // sent_to_vendor: true,
335
- // replyMessageId: null,
336
- // agent_name: 'arl@beem.co.tz',
337
- // df_agent_name: 'Dev arl',
338
- // resolve_time: null,
339
- // metadata: null,
340
89
  // statusDetails: {
341
90
  // statusCode: 3,
342
91
  // },
343
92
  // },
344
93
  // {
345
- // message: 'Sorry, what was that?',
346
- // id: 20266,
347
- // time: '2024-01-22T10:02:36.000Z',
348
- // direction: 'outbound',
349
- // message_type: 'text',
350
- // messageId: null,
351
- // is_live_agent: false,
352
- // is_deleted: false,
353
- // is_comment: false,
94
+ // id: 104342,
95
+ // message:
96
+ // '{\n "type":"button",\n "body":{\n "text":"Hey there! This is a Breakfast bot. \\nWhat would you like to have?"\n },\n "action":{\n "buttons":[\n {\n "type":"reply",\n "reply":{\n "id":"dev-defined-postback1",\n "title":"Tea"\n }\n },\n {\n "type":"reply",\n "reply":{\n "id":"dev-defined-postback2",\n "title":"Coffee"\n }\n },\n {\n "type":"reply",\n "reply":{\n "id":"dev-defined-postback3",\n "title":"Chat with Agent"\n }\n }\n ]\n }\n}',
97
+ // time: '2025-09-17T10:08:10.000Z',
98
+ // direction: 'inbound',
99
+ // message_type: 'interactive',
100
+ // messageId: 'ac498221-3dd9-4b09-ad2b-826c0d1e3e29',
101
+ // is_live_agent: 0,
102
+ // is_deleted: 0,
103
+ // is_comment: 0,
354
104
  // channel: 'whatsapp',
355
- // sent_to_vendor: true,
105
+ // sent_to_vendor: 1,
356
106
  // replyMessageId: null,
357
107
  // agent_name: null,
358
108
  // df_agent_name: null,
@@ -362,36 +112,20 @@ const Chat = () => {
362
112
  // statusCode: 3,
363
113
  // },
364
114
  // },
115
+
365
116
  // {
366
- // message: 'how are you?',
367
- // id: 20265,
368
- // time: '2024-01-22T10:02:17.000Z',
369
- // direction: 'inbound',
370
- // message_type: 'text',
371
- // messageId: null,
372
- // is_live_agent: false,
373
- // is_deleted: false,
374
- // is_comment: false,
375
- // channel: 'whatsapp',
376
- // sent_to_vendor: true,
377
- // replyMessageId: null,
378
- // agent_name: null,
379
- // df_agent_name: null,
380
- // resolve_time: null,
381
- // metadata: null,
382
- // },
383
- // {
384
- // message: 'thank you for chatting with us!!! -Dev',
385
- // id: 20264,
386
- // time: '2024-01-22T09:55:00.000Z',
117
+ // id: 104342,
118
+ // message:
119
+ // '{"dotgoV2":{"type":"quick_reply","content":{"type":"text","header":"","text":"We value your opinion! Would you be willing to take a short survey to help us improve?","caption":""},"options":[{"type":"text","title":"Give Feedback","postbackText":"bm-feedback|0|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"No Thank You","postbackText":"dev-defined-postback2"}]}}',
120
+ // time: '2025-09-17T10:08:10.000Z',
387
121
  // direction: 'outbound',
388
- // message_type: null,
389
- // messageId: null,
390
- // is_live_agent: true,
391
- // is_deleted: false,
392
- // is_comment: false,
122
+ // message_type: 'interactive',
123
+ // messageId: 'ac498221-3dd9-4b09-ad2b-826c0d1e3e29',
124
+ // is_live_agent: 0,
125
+ // is_deleted: 0,
126
+ // is_comment: 0,
393
127
  // channel: 'whatsapp',
394
- // sent_to_vendor: true,
128
+ // sent_to_vendor: 1,
395
129
  // replyMessageId: null,
396
130
  // agent_name: null,
397
131
  // df_agent_name: null,
@@ -402,17 +136,18 @@ const Chat = () => {
402
136
  // },
403
137
  // },
404
138
  // {
405
- // message: 'One more time?',
406
- // id: 20223,
407
- // time: '2024-01-19T11:00:59.000Z',
139
+ // id: 104342,
140
+ // message:
141
+ // '{"dotgoV2":{"type":"list","title":"Question 3 of 7","body":"No oh ny","globalButtons":[{"type":"text","title":"Responses"}],"items":[{"title":"Responses","subtitle":"","options":[{"type":"text","title":"1","postbackText":"bm-feedback|3|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"2","postbackText":"bm-feedback|3|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"3","postbackText":"bm-feedback|3|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"4","postbackText":"bm-feedback|3|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"5","postbackText":"bm-feedback|3|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"6","postbackText":"bm-feedback|3|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"7","postbackText":"bm-feedback|3|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"8","postbackText":"bm-feedback|3|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"9","postbackText":"bm-feedback|3|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"10","postbackText":"bm-feedback|3|fd4858ed-0fbd-4da1-9453-ecf3a1371874"}]}]}}',
142
+ // time: '2025-09-17T10:08:10.000Z',
408
143
  // direction: 'outbound',
409
- // message_type: 'text',
410
- // messageId: null,
411
- // is_live_agent: false,
412
- // is_deleted: false,
413
- // is_comment: false,
144
+ // message_type: 'interactive',
145
+ // messageId: 'ac498221-3dd9-4b09-ad2b-826c0d1e3e29',
146
+ // is_live_agent: 0,
147
+ // is_deleted: 0,
148
+ // is_comment: 0,
414
149
  // channel: 'whatsapp',
415
- // sent_to_vendor: true,
150
+ // sent_to_vendor: 1,
416
151
  // replyMessageId: null,
417
152
  // agent_name: null,
418
153
  // df_agent_name: null,
@@ -423,56 +158,18 @@ const Chat = () => {
423
158
  // },
424
159
  // },
425
160
  // {
426
- // message: 'i am good',
427
- // id: 20222,
428
- // time: '2024-01-19T11:00:55.000Z',
429
- // direction: 'inbound',
430
- // message_type: 'text',
431
- // messageId: null,
432
- // is_live_agent: false,
433
- // is_deleted: false,
434
- // is_comment: false,
435
- // channel: 'whatsapp',
436
- // sent_to_vendor: true,
437
- // replyMessageId: null,
438
- // agent_name: null,
439
- // df_agent_name: null,
440
- // resolve_time: null,
441
- // metadata: {
442
- // id: 'ABEGJVaCQwSAAhCt33VV1Zivq9-48AP8bs_t',
443
- // prev_message: 'if it doesnt exists then to fetch',
444
- // },
445
- // },
446
- // {
447
- // message: 'how are you?',
448
- // id: 20220,
449
- // time: '2024-01-19T10:59:48.000Z',
450
- // direction: 'inbound',
451
- // message_type: 'text',
452
- // messageId: null,
453
- // is_live_agent: false,
454
- // is_deleted: false,
455
- // is_comment: false,
456
- // channel: 'whatsapp',
457
- // sent_to_vendor: true,
458
- // replyMessageId: null,
459
- // agent_name: null,
460
- // df_agent_name: null,
461
- // resolve_time: null,
462
- // metadata: null,
463
- // },
464
- // {
465
- // message: 'thank you for chatting with us!!! -Dev',
466
- // id: 20217,
467
- // time: '2024-01-19T09:55:00.000Z',
161
+ // id: 104342,
162
+ // message:
163
+ // '{"dotgoV2":{"type":"quick_reply","content":{"type":"image","header":"yest","url":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/cook.jpg","text":"We value your opinion! Would you be willing to take a short survey to help us improve?","caption":""},"options":[{"type":"text","title":"Give Feedback","postbackText":"bm-feedback|0|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"No Thank You","postbackText":"dev-defined-postback2"}]}}',
164
+ // time: '2025-09-17T10:08:10.000Z',
468
165
  // direction: 'outbound',
469
- // message_type: null,
470
- // messageId: null,
471
- // is_live_agent: true,
472
- // is_deleted: false,
473
- // is_comment: false,
166
+ // message_type: 'interactive',
167
+ // messageId: 'ac498221-3dd9-4b09-ad2b-826c0d1e3e29',
168
+ // is_live_agent: 0,
169
+ // is_deleted: 0,
170
+ // is_comment: 0,
474
171
  // channel: 'whatsapp',
475
- // sent_to_vendor: true,
172
+ // sent_to_vendor: 1,
476
173
  // replyMessageId: null,
477
174
  // agent_name: null,
478
175
  // df_agent_name: null,
@@ -483,1432 +180,602 @@ const Chat = () => {
483
180
  // },
484
181
  // },
485
182
  // {
486
- // message: 'if it doesnt exists then to fetch',
487
- // id: 20208,
488
- // time: '2024-01-19T08:54:12.000Z',
183
+ // id: 104429,
184
+ // message: 'Give Feedback',
185
+ // time: '2025-09-18T02:48:51.000Z',
489
186
  // direction: 'inbound',
490
187
  // message_type: 'text',
491
- // messageId: null,
492
- // is_live_agent: true,
493
- // is_deleted: false,
494
- // is_comment: false,
495
- // channel: 'whatsapp',
496
- // sent_to_vendor: true,
497
- // replyMessageId: null,
498
- // agent_name: null,
499
- // df_agent_name: null,
500
- // resolve_time: null,
501
- // metadata: null,
502
- // },
503
- // {
504
- // message: 'hi',
505
- // id: 20207,
506
- // time: '2024-01-19T08:49:23.000Z',
507
- // direction: 'inbound',
508
- // message_type: 'text',
509
- // messageId: null,
510
- // is_live_agent: true,
511
- // is_deleted: false,
512
- // is_comment: false,
188
+ // messageId:
189
+ // 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNBRTE0QjVENTkxM0ZDNDUxMkY3RTA0NEU4NzEyQzUA',
190
+ // is_live_agent: 1,
191
+ // is_deleted: 0,
192
+ // is_comment: 0,
513
193
  // channel: 'whatsapp',
514
- // sent_to_vendor: true,
515
- // replyMessageId: null,
194
+ // sent_to_vendor: 1,
195
+ // replyMessageId: 'eaf92cdf-32c7-4524-a11e-dd9cdf37d717',
516
196
  // agent_name: null,
517
197
  // df_agent_name: null,
518
198
  // resolve_time: null,
519
199
  // metadata: null,
520
200
  // },
521
201
  // {
522
- // message: 'hi',
523
- // id: 20206,
524
- // time: '2024-01-19T08:46:09.000Z',
202
+ // id: 104429,
203
+ // message:
204
+ // '{"catalog_id":"3567267706900621","product_items":[{"id":182,"currency":"TZS","amount":10000,"quantity":1,"description":"1 Burger Kalimiz Burger Philly Beef","imgURL":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/a6176a3a-a918-4623-b22d-99ceca7b9fad 1.jpg"},{"id":181,"currency":"TZS","amount":10000,"quantity":1,"description":"1 Burger Kalimiz Burger Bollywood Paneer","imgURL":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/fed84589-31c5-4ea9-8505-75ceb4932906 1.jpg"}],"type":"order"}',
205
+ // time: '2025-09-18T02:48:51.000Z',
525
206
  // direction: 'inbound',
526
- // message_type: 'text',
527
- // messageId: null,
528
- // is_live_agent: true,
529
- // is_deleted: false,
530
- // is_comment: false,
207
+ // message_type: 'order',
208
+ // messageId:
209
+ // 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNBRTE0QjVENTkxM0ZDNDUxMkY3RTA0NEU4NzEyQzUA',
210
+ // is_live_agent: 1,
211
+ // is_deleted: 0,
212
+ // is_comment: 0,
531
213
  // channel: 'whatsapp',
532
- // sent_to_vendor: true,
533
- // replyMessageId: null,
214
+ // sent_to_vendor: 1,
215
+ // replyMessageId: 'eaf92cdf-32c7-4524-a11e-dd9cdf37d717',
534
216
  // agent_name: null,
535
217
  // df_agent_name: null,
536
218
  // resolve_time: null,
537
219
  // metadata: null,
538
220
  // },
539
221
  // {
540
- // message: 'hi',
541
- // id: 20205,
542
- // time: '2024-01-19T08:43:58.000Z',
543
- // direction: 'inbound',
544
- // message_type: 'text',
545
- // messageId: null,
546
- // is_live_agent: true,
547
- // is_deleted: false,
548
- // is_comment: false,
222
+ // id: 104429,
223
+ // message:
224
+ // '{"dotgoV2":{"type":"order","catalog":{"id":"3567267706900621","order":{"items":[{"id":181,"currency":"TZS","amount":"10000","quantity":"1","description":"1 Burger Kalimiz Burger Bollywood Paneer","imgURL":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/fed84589-31c5-4ea9-8505-75ceb4932906 1.jpg"},{"id":182,"currency":"TZS","amount":"10000","quantity":"1","description":"1 Burger Kalimiz Burger Philly Beef","imgURL":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/a6176a3a-a918-4623-b22d-99ceca7b9fad 1.jpg"}]}},"forwarded":false,"frequently_forwarded":false}}',
225
+ // time: '2025-09-18T02:48:51.000Z',
226
+ // direction: 'outbound',
227
+ // message_type: 'order',
228
+ // messageId:
229
+ // 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNBRTE0QjVENTkxM0ZDNDUxMkY3RTA0NEU4NzEyQzUA',
230
+ // is_live_agent: 1,
231
+ // is_deleted: 0,
232
+ // is_comment: 0,
549
233
  // channel: 'whatsapp',
550
- // sent_to_vendor: true,
551
- // replyMessageId: null,
234
+ // sent_to_vendor: 1,
235
+ // replyMessageId: 'eaf92cdf-32c7-4524-a11e-dd9cdf37d717',
552
236
  // agent_name: null,
553
237
  // df_agent_name: null,
554
238
  // resolve_time: null,
555
239
  // metadata: null,
556
240
  // },
557
241
  // {
558
- // message: 'hi',
559
- // id: 20204,
560
- // time: '2024-01-19T08:41:43.000Z',
561
- // direction: 'inbound',
562
- // message_type: 'text',
563
- // messageId: null,
564
- // is_live_agent: true,
565
- // is_deleted: false,
566
- // is_comment: false,
242
+ // id: 104429,
243
+
244
+ // message:
245
+ // '{"dotgoV2":{"type":"product_details","subType":"product_list","catalogId":"3567267706900621","header":{"text":"View Menu"},"body":{"text":"Menu included \\n "},"footer":{"text":"sdefsdfsdf"},"sections":[{"title":"Title 1","productList":[{"productId":181},{"productId":182},{"productId":183}]}]}}',
246
+ // time: '2025-09-18T02:48:51.000Z',
247
+ // direction: 'outbound',
248
+ // message_type: 'interactive',
249
+ // messageId:
250
+ // 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNBRTE0QjVENTkxM0ZDNDUxMkY3RTA0NEU4NzEyQzUA',
251
+ // is_live_agent: 1,
252
+ // is_deleted: 0,
253
+ // is_comment: 0,
567
254
  // channel: 'whatsapp',
568
- // sent_to_vendor: true,
569
- // replyMessageId: null,
255
+ // sent_to_vendor: 1,
256
+ // replyMessageId: 'eaf92cdf-32c7-4524-a11e-dd9cdf37d717',
570
257
  // agent_name: null,
571
258
  // df_agent_name: null,
572
259
  // resolve_time: null,
573
260
  // metadata: null,
574
261
  // },
575
262
  // {
576
- // message: 'hi',
577
- // id: 20201,
578
- // time: '2024-01-19T08:40:27.000Z',
263
+ // id: 104704,
264
+ // message: '3',
265
+ // time: '2025-09-19T03:51:43.000Z',
579
266
  // direction: 'inbound',
580
267
  // message_type: 'text',
581
- // messageId: null,
582
- // is_live_agent: true,
583
- // is_deleted: false,
584
- // is_comment: false,
268
+ // messageId:
269
+ // 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNEMkRFMTEyQUI1OTMxQTQwMzc1Rjk1QjY4M0MyNjYA',
270
+ // is_live_agent: 1,
271
+ // is_deleted: 0,
272
+ // is_comment: 0,
585
273
  // channel: 'whatsapp',
586
- // sent_to_vendor: true,
587
- // replyMessageId: null,
274
+ // sent_to_vendor: 1,
275
+ // replyMessageId: 'c39b331f-629d-4244-98a2-eeda660fcd7d',
588
276
  // agent_name: null,
589
277
  // df_agent_name: null,
590
278
  // resolve_time: null,
591
- // metadata: null,
279
+ // metadata: {
280
+ // id: 'c39b331f-629d-4244-98a2-eeda660fcd7d',
281
+ // prev_message:
282
+ // '{"type":"list","header":{"type":"text","text":"Question 1 of 7"},"body":{"text":"No wway"},"footer":{"text":"Responses"},"action":{"button":"Select an option","sections":[{"title":"Responses","rows":[{"id":"bm-feedback|1|fd4858ed-0fbd-4da1-9453-ecf3a1371874|0","title":"1","description":""},{"id":"bm-feedback|1|fd4858ed-0fbd-4da1-9453-ecf3a1371874|1","title":"2","description":""},{"id":"bm-feedback|1|fd4858ed-0fbd-4da1-9453-ecf3a1371874|2","title":"3","description":""},{"id":"bm-feedback|1|fd4858ed-0fbd-4da1-9453-ecf3a1371874|3","title":"4","description":""},{"id":"bm-feedback|1|fd4858ed-0fbd-4da1-9453-ecf3a1371874|4","title":"5","description":""},{"id":"bm-feedback|1|fd4858ed-0fbd-4da1-9453-ecf3a1371874|5","title":"6","description":""},{"id":"bm-feedback|1|fd4858ed-0fbd-4da1-9453-ecf3a1371874|6","title":"7","description":""},{"id":"bm-feedback|1|fd4858ed-0fbd-4da1-9453-ecf3a1371874|7","title":"8","description":""},{"id":"bm-feedback|1|fd4858ed-0fbd-4da1-9453-ecf3a1371874|8","title":"9","description":""},{"id":"bm-feedback|1|fd4858ed-0fbd-4da1-9453-ecf3a1371874|9","title":"10","description":""}]}]}}',
283
+ // },
592
284
  // },
593
285
  // {
594
- // message: 'hi',
595
- // id: 20200,
596
- // time: '2024-01-19T08:39:19.000Z',
597
- // direction: 'inbound',
286
+ // id: 104702,
287
+ // message: 'Give Feedback',
288
+ // time: '2025-09-19T03:51:23.000Z',
289
+ // direction: 'outbound',
598
290
  // message_type: 'text',
599
- // messageId: null,
600
- // is_live_agent: true,
601
- // is_deleted: false,
602
- // is_comment: false,
291
+ // messageId:
292
+ // 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM0RkMzNERFODBCQTI3RTdBMUQzMUY4MzEyQ0FBNzgA',
293
+ // is_live_agent: 1,
294
+ // is_deleted: 0,
295
+ // is_comment: 0,
603
296
  // channel: 'whatsapp',
604
- // sent_to_vendor: true,
605
- // replyMessageId: null,
297
+ // sent_to_vendor: 1,
298
+ // replyMessageId: '283d451e-3fe2-478c-8d7a-433a703dbab4',
606
299
  // agent_name: null,
607
300
  // df_agent_name: null,
608
301
  // resolve_time: null,
609
- // metadata: null,
302
+ // metadata: {
303
+ // id: '283d451e-3fe2-478c-8d7a-433a703dbab4',
304
+ // prev_message:
305
+ // '{"dotgoV2":{"type":"quick_reply","content":{"type":"text","header":"","text":"We value your opinion! Would you be willing to take a short survey to help us improve?","caption":""},"options":[{"type":"text","title":"Give Feedback","postbackText":"bm-feedback|0|fd4858ed-0fbd-4da1-9453-ecf3a1371874"},{"type":"text","title":"No Thank You","postbackText":"dev-defined-postback2"}]}}',
306
+ // },
610
307
  // },
611
308
  // {
612
- // message: 'hi',
613
- // id: 20199,
614
- // time: '2024-01-19T08:37:26.000Z',
309
+ // id: 104709,
310
+ // message: 'Test',
311
+ // time: '2025-09-19T04:16:06.000Z',
615
312
  // direction: 'inbound',
616
313
  // message_type: 'text',
617
- // messageId: null,
618
- // is_live_agent: true,
619
- // is_deleted: false,
620
- // is_comment: false,
314
+ // messageId:
315
+ // 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMxQkQ0NzRGNjBBMkU2NDcwNjEzNTQ1NUJGMzYzNjIA',
316
+ // is_live_agent: 1,
317
+ // is_deleted: 0,
318
+ // is_comment: 0,
621
319
  // channel: 'whatsapp',
622
- // sent_to_vendor: true,
623
- // replyMessageId: null,
320
+ // sent_to_vendor: 1,
321
+ // replyMessageId: 'f556a647-a115-453f-8461-c2caafc6aeaf',
624
322
  // agent_name: null,
625
323
  // df_agent_name: null,
626
324
  // resolve_time: null,
627
- // metadata: null,
325
+ // metadata: {
326
+ // id: 'f556a647-a115-453f-8461-c2caafc6aeaf',
327
+ // prev_message:
328
+ // '{"dotgoV2":{"type":"product_details","subType":"product_list","catalogId":"3567267706900621","header":{"text":"View Menu"},"body":{"text":"Menu included \\n "},"footer":{"text":"sdefsdfsdf"},"sections":[{"title":"Title 1","productList":[{"productId":182}]}]}}',
329
+ // },
628
330
  // },
629
331
  // {
630
- // message: 'hi',
631
- // id: 20198,
632
- // time: '2024-01-19T08:36:57.000Z',
332
+ // id: 104729,
333
+ // message: 'Test',
334
+ // time: '2025-09-19T04:36:32.000Z',
633
335
  // direction: 'inbound',
634
336
  // message_type: 'text',
635
- // messageId: null,
636
- // is_live_agent: true,
637
- // is_deleted: false,
638
- // is_comment: false,
337
+ // messageId:
338
+ // 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM1QTU1MTBBM0M2MkE1NUY3M0YyMzI1NkU1RTVEQjQA',
339
+ // is_live_agent: 0,
340
+ // is_deleted: 0,
341
+ // is_comment: 0,
639
342
  // channel: 'whatsapp',
640
- // sent_to_vendor: true,
641
- // replyMessageId: null,
343
+ // sent_to_vendor: 1,
344
+ // replyMessageId:
345
+ // 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNFODBDNTNBREMyRDFCODNBNEM1NzI4QTgxNERGMTgA',
642
346
  // agent_name: null,
643
347
  // df_agent_name: null,
644
348
  // resolve_time: null,
645
- // metadata: null,
349
+ // metadata: {
350
+ // id: 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNFODBDNTNBREMyRDFCODNBNEM1NzI4QTgxNERGMTgA',
351
+ // prev_message:
352
+ // '{"catalog_id":"3567267706900621","product_items":[{"id":193,"currency":"TZS","amount":10000,"quantity":1,"description":"1 Salad Kalimiz Salad Assian Noodle Salad","imgURL":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/384d26b3-87cd-407f-a9d3-7b2977ab0a22 1.jpg"}],"type":"order"}',
353
+ // },
646
354
  // },
647
355
  // {
648
- // message: 'hi',
649
- // id: 20150,
650
- // time: '2024-01-18T12:47:26.000Z',
356
+ // id: 104729,
357
+ // message: 'Test',
358
+ // time: '2025-09-19T04:36:32.000Z',
651
359
  // direction: 'inbound',
652
360
  // message_type: 'text',
653
- // messageId: null,
654
- // is_live_agent: true,
655
- // is_deleted: false,
656
- // is_comment: false,
361
+ // messageId:
362
+ // 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM1QTU1MTBBM0M2MkE1NUY3M0YyMzI1NkU1RTVEQjQA',
363
+ // is_live_agent: 0,
364
+ // is_deleted: 0,
365
+ // is_comment: 0,
657
366
  // channel: 'whatsapp',
658
- // sent_to_vendor: true,
659
- // replyMessageId: null,
367
+ // sent_to_vendor: 1,
368
+ // replyMessageId:
369
+ // 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNFODBDNTNBREMyRDFCODNBNEM1NzI4QTgxNERGMTgA',
660
370
  // agent_name: null,
661
371
  // df_agent_name: null,
662
372
  // resolve_time: null,
663
- // metadata: null,
664
- // },
665
- // {
666
- // message: 'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/short.jpg',
667
- // id: 20147,
668
- // time: '2024-01-18T09:57:52.000Z',
669
- // direction: 'outbound',
670
- // message_type: 'image/png',
671
- // messageId: 'ea15131f-2c55-43a3-b166-c38a2c4314b1',
672
- // is_live_agent: true,
673
- // is_deleted: false,
674
- // is_comment: false,
675
- // channel: 'whatsapp',
676
- // sent_to_vendor: true,
677
- // replyMessageId: null,
678
- // agent_name: 'arl@beem.co.tz',
679
- // df_agent_name: 'Dev arl',
680
- // resolve_time: null,
681
- // metadata: null,
682
- // statusDetails: {
683
- // statusCode: 3,
373
+ // metadata: {
374
+ // id: 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNFODBDNTNBREMyRDFCODNBNEM1NzI4QTgxNERGMTgA',
375
+ // prev_message:
376
+ // '{"dotgoV2":{"type":"order","catalog":{"id":"3567267706900621","order":{"items":[{"id":181,"currency":"TZS","amount":"10000","quantity":"1","description":"1 Burger Kalimiz Burger Bollywood Paneer","imgURL":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/fed84589-31c5-4ea9-8505-75ceb4932906 1.jpg"},{"id":182,"currency":"TZS","amount":"10000","quantity":"1","description":"1 Burger Kalimiz Burger Philly Beef","imgURL":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/a6176a3a-a918-4623-b22d-99ceca7b9fad 1.jpg"}]}},"forwarded":false,"frequently_forwarded":false}}',
684
377
  // },
685
378
  // },
686
379
  // ];
687
380
 
688
- // const parsed = JSON.stringify(message.message);
689
- // const dotGoV2Content = parsed?.dotgoV2;
690
-
691
- // const data = {
692
- // type: 'list',
693
- // title: 'Our services',
694
- // body: 'Need to schedule an appointment or request a home service? We’ve got you covered! tap to check out the menu below \n \n👇🏼👇🏼👇🏼👇🏼👇🏼👇🏼👇🏼',
695
- // msgid: 'services',
696
- // globalButtons: [
697
- // {
698
- // type: 'text',
699
- // title: 'Services',
700
- // },
701
- // ],
702
- // items: [
703
- // {
704
- // title: 'Services menu',
705
- // subtitle: '',
706
- // options: [
707
- // {
708
- // type: 'text',
709
- // title: 'Announcements',
710
- // description: 'Incoming doctors',
711
- // postbackText: 'section 1 row 1 postback payload',
712
- // },
713
- // {
714
- // type: 'text',
715
- // title: 'Appointments',
716
- // description: 'Bookings',
717
- // postbackText: 'section 1 row 2 postback payload',
718
- // },
719
- // {
720
- // type: 'text',
721
- // title: 'Home Services',
722
- // description: '',
723
- // postbackText: 'section 1 row 3 postback payload',
724
- // },
725
- // {
726
- // type: 'text',
727
- // title: 'FAQ’s',
728
- // description: 'Frequently Asked Questions',
729
- // postbackText: 'section 1 row 4 postback payload',
730
- // },
731
- // {
732
- // type: 'text',
733
- // title: 'Speak to agent',
734
- // description: '',
735
- // postbackText: 'section 1 row 5 postback payload',
736
- // },
737
- // {
738
- // type: 'text',
739
- // title: 'Go back',
740
- // description: '',
741
- // postbackText: 'section 1 row 6 postback payload',
742
- // },
743
- // ],
744
- // },
745
- // ],
746
- // };
381
+ const metaQuickReply = [
382
+ {
383
+ id: 104759,
384
+ message: 'Second outbound',
385
+ time: '2025-09-20T05:22:38.000Z',
386
+ direction: 'inbound',
387
+ message_type: 'text',
388
+ messageId:
389
+ 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM4M0JFNzM1QjI4QkQzQjcyQUE4ODdBQzJGMDBBQjQA',
390
+ is_live_agent: 0,
391
+ is_deleted: 0,
392
+ is_comment: 0,
393
+ channel: 'whatsapp',
394
+ sent_to_vendor: 1,
395
+ replyMessageId: '36222689-a3e0-4597-8872-9af486fd1fd7',
396
+ agent_name: null,
397
+ df_agent_name: null,
398
+ resolve_time: null,
399
+ metadata: {
400
+ id: '36222689-a3e0-4597-8872-9af486fd1fd7',
401
+ prev_message: 'second outbound initiated',
402
+ },
403
+ },
404
+ {
405
+ id: 104758,
406
+ message: 'Bounce',
407
+ time: '2025-09-20T05:19:44.000Z',
408
+ direction: 'inbound',
409
+ message_type: 'text',
410
+ messageId:
411
+ 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMxMjAyOUQ0MDQ4MUVBNDM4NTdGNTE2NTlFMUY3REUA',
412
+ is_live_agent: 0,
413
+ is_deleted: 0,
414
+ is_comment: 0,
415
+ channel: 'whatsapp',
416
+ sent_to_vendor: 1,
417
+ replyMessageId:
418
+ 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM2M0Y2OUI3RkU0RDI2MjFBMDVGRDg1N0RBQkQyMEUA',
419
+ agent_name: null,
420
+ df_agent_name: null,
421
+ resolve_time: null,
422
+ metadata: {
423
+ id: 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM2M0Y2OUI3RkU0RDI2MjFBMDVGRDg1N0RBQkQyMEUA',
424
+ prev_message: 'Refeto secomd',
425
+ },
426
+ },
427
+ {
428
+ id: 104757,
429
+ message: 'Chai',
430
+ time: '2025-09-20T05:15:05.000Z',
431
+ direction: 'inbound',
432
+ message_type: 'text',
433
+ messageId:
434
+ 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNFNzhDMkRBOUU5OEVDQzhBNThCODhDMzg2RTNCREEA',
435
+ is_live_agent: 0,
436
+ is_deleted: 0,
437
+ is_comment: 0,
438
+ channel: 'whatsapp',
439
+ sent_to_vendor: 1,
440
+ replyMessageId: '65352cb5-3800-4e78-aaba-f01dc9aadd58',
441
+ agent_name: null,
442
+ df_agent_name: null,
443
+ resolve_time: null,
444
+ metadata: {
445
+ id: '65352cb5-3800-4e78-aaba-f01dc9aadd58',
446
+ prev_message:
447
+ '{\n "type":"button",\n "header":{\n "type":"image",\n "image":{\n "link":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/cook.jpg"\n }\n },\n "body":{\n "text":"Hey there! This is a Breakfast bot. \\nWhat would you like to have?"\n },\n "action":{\n "buttons":[\n {\n "type":"reply",\n "reply":{\n "id":"dev-defined-postback1",\n "title":"Tea"\n }\n },\n {\n "type":"reply",\n "reply":{\n "id":"dev-defined-postback2",\n "title":"Coffee"\n }\n },\n {\n "type":"reply",\n "reply":{\n "id":"dev-defined-postback3",\n "title":"Chat with Agent"\n }\n }\n ]\n }\n}',
448
+ },
449
+ },
450
+ {
451
+ id: 104756,
452
+ message: 'Price',
453
+ time: '2025-09-20T05:11:36.000Z',
454
+ direction: 'inbound',
455
+ message_type: 'text',
456
+ messageId:
457
+ 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNFMkM5NTA0NzU2MTU2RjA2MTEwRDBDM0QxOTQxODIA',
458
+ is_live_agent: 0,
459
+ is_deleted: 0,
460
+ is_comment: 0,
461
+ channel: 'whatsapp',
462
+ sent_to_vendor: 1,
463
+ replyMessageId:
464
+ 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMwMzk1RjQxQjg1RTU5QzAwM0M5Q0FFMTg2NEFCNDgA',
465
+ agent_name: null,
466
+ df_agent_name: null,
467
+ resolve_time: null,
468
+ metadata: {
469
+ id: 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMwMzk1RjQxQjg1RTU5QzAwM0M5Q0FFMTg2NEFCNDgA',
470
+ prev_message:
471
+ '{"catalog_id":"3567267706900621","product_items":[{"id":193,"currency":"TZS","amount":10000,"quantity":2,"description":"1 Salad Kalimiz Salad Assian Noodle Salad","imgURL":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/384d26b3-87cd-407f-a9d3-7b2977ab0a22 1.jpg"}],"type":"order"}',
472
+ },
473
+ },
474
+ {
475
+ id: 104755,
476
+ message: 'Test',
477
+ time: '2025-09-20T05:11:22.000Z',
478
+ direction: 'inbound',
479
+ message_type: 'text',
480
+ messageId:
481
+ 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMxMERENThDNDk0QjExNTE5MUFFNjgwM0M1OUU3NTMA',
482
+ is_live_agent: 0,
483
+ is_deleted: 0,
484
+ is_comment: 0,
485
+ channel: 'whatsapp',
486
+ sent_to_vendor: 1,
487
+ replyMessageId: '47a32fc1-7684-47e7-bff7-6eb0951663cb',
488
+ agent_name: null,
489
+ df_agent_name: null,
490
+ resolve_time: null,
491
+ metadata: {
492
+ id: '47a32fc1-7684-47e7-bff7-6eb0951663cb',
493
+ prev_message:
494
+ '{"dotgoV2":{"type":"product_details","subType":"product_list","catalogId":"3567267706900621","header":{"text":"View Menu"},"body":{"text":"Menu included \\n "},"footer":{"text":"sdefsdfsdf"},"sections":[{"title":"Title 1","productList":[{"productId":181}]}]}}',
495
+ },
496
+ },
497
+ {
498
+ id: 104754,
499
+ message:
500
+ '{"dotgoV2":{"type":"quick_reply","content":{"type":"text","header":"","text":"Successfully end the session.","caption":""},"options":[{"type":"text","title":"Main Menu","postbackText":"dev-defined-postback1"}]}}',
501
+ time: '2025-09-20T02:20:00.000Z',
502
+ direction: 'outbound',
503
+ message_type: 'interactive',
504
+ messageId: null,
505
+ is_live_agent: 1,
506
+ is_deleted: 0,
507
+ is_comment: 0,
508
+ channel: 'whatsapp',
509
+ sent_to_vendor: 1,
510
+ replyMessageId: null,
511
+ agent_name: null,
512
+ df_agent_name: null,
513
+ resolve_time: null,
514
+ metadata: null,
515
+ statusDetails: {
516
+ statusCode: 3,
517
+ },
518
+ },
519
+ {
520
+ id: 104752,
521
+ message:
522
+ '{"dotgoV2":{"type":"product_details","subType":"product_list","catalogId":"3567267706900621","header":{"text":"View Menu"},"body":{"text":"Menu included \\n "},"footer":{"text":"sdefsdfsdf"},"sections":[{"title":"Title 1","productList":[{"productId":181}]}]}}',
523
+ time: '2025-09-19T08:24:49.000Z',
524
+ direction: 'outbound',
525
+ message_type: 'interactive',
526
+ messageId: '47a32fc1-7684-47e7-bff7-6eb0951663cb',
527
+ is_live_agent: 0,
528
+ is_deleted: 0,
529
+ is_comment: 0,
530
+ channel: 'whatsapp',
531
+ sent_to_vendor: 1,
532
+ replyMessageId: null,
533
+ agent_name: 'mustafa.s@beem.africa',
534
+ df_agent_name: 'Mustafa Saifuddin',
535
+ resolve_time: null,
536
+ metadata: null,
537
+ statusDetails: {
538
+ statusCode: 3,
539
+ },
540
+ },
541
+ {
542
+ id: 104751,
543
+ message:
544
+ '{"catalog_id":"3567267706900621","product_items":[{"id":193,"currency":"TZS","amount":10000,"quantity":2,"description":"1 Salad Kalimiz Salad Assian Noodle Salad","imgURL":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/384d26b3-87cd-407f-a9d3-7b2977ab0a22 1.jpg"}],"type":"order"}',
545
+ time: '2025-09-19T06:30:24.000Z',
546
+ direction: 'inbound',
547
+ message_type: 'order',
548
+ messageId:
549
+ 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMwMzk1RjQxQjg1RTU5QzAwM0M5Q0FFMTg2NEFCNDgA',
550
+ is_live_agent: 0,
551
+ is_deleted: 0,
552
+ is_comment: 0,
553
+ channel: 'whatsapp',
554
+ sent_to_vendor: 1,
555
+ replyMessageId: null,
556
+ agent_name: null,
557
+ df_agent_name: null,
558
+ resolve_time: null,
559
+ metadata: null,
560
+ },
561
+ {
562
+ id: 104750,
563
+ message:
564
+ '{"catalog_id":"3567267706900621","product_items":[{"id":193,"currency":"TZS","amount":10000,"quantity":1,"description":"1 Salad Kalimiz Salad Assian Noodle Salad","imgURL":"https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/384d26b3-87cd-407f-a9d3-7b2977ab0a22 1.jpg"}],"type":"order"}',
565
+ time: '2025-09-19T06:29:51.000Z',
566
+ direction: 'inbound',
567
+ message_type: 'order',
568
+ messageId:
569
+ 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM1RDIwQjEyQTY1N0FFMDQzMkU1QUI0MTBENTIyRDkA',
570
+ is_live_agent: 0,
571
+ is_deleted: 0,
572
+ is_comment: 0,
573
+ channel: 'whatsapp',
574
+ sent_to_vendor: 1,
575
+ replyMessageId: null,
576
+ agent_name: null,
577
+ df_agent_name: null,
578
+ resolve_time: null,
579
+ metadata: null,
580
+ },
581
+ {
582
+ id: 104749,
583
+ message:
584
+ '{"dotgoV2":{"type":"product_details","subType":"product_list","catalogId":"3567267706900621","header":{"text":"View Menu"},"body":{"text":"Menu included \\n "},"footer":{"text":"sdefsdfsdf"},"sections":[{"title":"Title 1","productList":[{"productId":193}]}]}}',
585
+ time: '2025-09-19T06:29:35.000Z',
586
+ direction: 'outbound',
587
+ message_type: 'interactive',
588
+ messageId: '5f8f5ccc-3a34-44f1-acd6-92c7cad311c8',
589
+ is_live_agent: 0,
590
+ is_deleted: 0,
591
+ is_comment: 0,
592
+ channel: 'whatsapp',
593
+ sent_to_vendor: 1,
594
+ replyMessageId: null,
595
+ agent_name: 'mustafa.s@beem.africa',
596
+ df_agent_name: 'Mustafa Saifuddin',
597
+ resolve_time: null,
598
+ metadata: null,
599
+ statusDetails: {
600
+ statusCode: 3,
601
+ },
602
+ },
603
+ ];
604
+ const isJson = (itemOg) => {
605
+ let item = itemOg;
606
+ item = typeof item !== 'string' ? JSON.stringify(item) : item;
747
607
 
748
- const renderJsonMessage = () => {
608
+ try {
609
+ item = JSON.parse(item);
610
+ } catch (e) {
611
+ return false;
612
+ }
613
+ return typeof item === 'object' && item !== null;
614
+ };
615
+ const renderJsonMessageMeta = (msg) => {
749
616
  let parsedMessage;
617
+
750
618
  try {
751
- parsedMessage = JSON.parse(message.message);
619
+ parsedMessage = JSON.parse(msg.message);
752
620
  } catch (error) {
753
621
  console.error('Error parsing JSON:', error);
754
622
  return null;
755
623
  }
756
624
 
757
- console.log(message.message_type);
758
625
  const dotGoV2Content = parsedMessage?.dotgoV2;
626
+ const finalMessage = dotGoV2Content || parsedMessage;
627
+ const connector = dotGoV2Content ? 'dotgo_v2' : 'dotgo_v3';
759
628
 
760
- if (message.message_type === 'order' && dotGoV2Content?.type === 'order') {
761
- const items = dotGoV2Content?.catalog?.order?.items || [];
762
- if (items.length === 0) {
763
- return 0;
764
- }
765
-
766
- // Use reduce to calculate total
767
- const totalValue = items.reduce((total, item) => {
768
- return total + item.amount * item.quantity;
769
- }, 0);
629
+ const calculateOrderSummary = (items) => {
630
+ if (!items || items.length === 0) return 0;
770
631
 
632
+ const totalValue = items.reduce(
633
+ (sum, item) => sum + item.amount * item.quantity,
634
+ 0
635
+ );
771
636
  const currency = items[0]?.currency || '';
772
- const count = items.length;
773
637
  const formattedTotal = totalValue.toLocaleString('en-US');
774
638
 
775
- return { amount: `${currency} ${formattedTotal}`, type: 'order', count };
776
- }
777
-
778
- console.log({ parsedMessage });
779
- console.log({ dotGoV2Content });
780
- return dotGoV2Content;
781
- };
782
- // const [checkboxVisibility, setCheckboxVisibility] = useState([]);
639
+ return {
640
+ amount: `${currency} ${formattedTotal}`,
641
+ count: items.length,
642
+ items,
643
+ };
644
+ };
783
645
 
784
- // Handler function for the checkbox change event
785
- // const handleCheckboxChange = (index, checked) => {
786
- // const updatedVisibility = [...checkboxVisibility]; // Create a copy of the visibility state array
787
- // updatedVisibility[index] = checked; // Update the visibility state for the corresponding checkbox
788
- // setCheckboxVisibility(updatedVisibility); // Update the state
789
- // };
646
+ if (msg.message_type === 'order' && finalMessage?.type === 'order') {
647
+ const items = dotGoV2Content
648
+ ? finalMessage?.catalog?.order?.items || []
649
+ : finalMessage?.product_items || [];
790
650
 
791
- const renderOrderJsonMessage = () => {
792
- const parsedMessage = {
793
- dotgoV2: {
794
- type: 'order',
795
- catalog: {
796
- id: '1828458897997668',
797
- order: {
798
- items: [
799
- {
800
- id: '147',
801
- currency: 'USD',
802
- amount: '960',
803
- quantity: '1',
804
- },
805
- {
806
- id: '144',
807
- currency: 'USD',
808
- amount: '505',
809
- quantity: '1',
810
- },
811
- {
812
- id: '145',
813
- currency: 'USD',
814
- amount: '505',
815
- quantity: '1',
816
- },
817
- {
818
- id: '148',
819
- currency: 'USD',
820
- amount: '505',
821
- quantity: '1',
822
- },
823
- {
824
- id: '149',
825
- currency: 'USD',
826
- amount: '505',
827
- quantity: '1',
828
- },
829
- {
830
- id: '146',
831
- currency: 'USD',
832
- amount: '960',
833
- quantity: '1',
834
- },
835
- ],
836
- },
837
- },
838
- forwarded: false,
839
- frequently_forwarded: false,
840
- },
841
- };
842
- const dotGoV2Content = parsedMessage?.dotgoV2;
843
- const items = dotGoV2Content?.catalog?.order?.items || [];
844
- if (items.length === 0) {
845
- return { amount: 0, type: 'order', count: 0 };
846
- }
651
+ const summary = calculateOrderSummary(items);
847
652
 
848
- const totalValue = items.reduce((total, item) => {
849
- return total + item.amount * item.quantity;
850
- }, 0);
653
+ if (summary === 0) return { amount: 0, type: 'order', count: 0 };
851
654
 
852
- const currency = items[0]?.currency || '';
853
- const count = items.length;
854
- const formattedTotal = totalValue.toLocaleString('en-US');
655
+ return {
656
+ message: dotGoV2Content
657
+ ? { ...summary, type: 'order' }
658
+ : { ...summary, type: 'order', product_items: items },
659
+ connector,
660
+ };
661
+ }
855
662
 
856
663
  return {
857
- amount: `${currency} ${formattedTotal}`,
858
- type: 'order',
859
- count,
860
- items: [
861
- {
862
- id: 147,
863
- currency: 'USD',
864
- amount: '960',
865
- quantity: '1',
866
- description: '18" Zuri Wig Straight Miss Van Platinum Blonde',
867
- imgURL:
868
- 'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/Miss Van.jpg',
869
- },
870
- {
871
- id: 144,
872
- currency: 'USD',
873
- amount: '505',
874
- quantity: '1',
875
- description: '10" Zuri Wig Straight Mirna Caramel Brown',
876
- imgURL:
877
- 'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/Wig Mirna.jpg',
878
- },
879
- {
880
- id: 145,
881
- currency: 'USD',
882
- amount: '505',
883
- quantity: '1',
884
- description: '20" Zuri Wig Straight Mirna Caramel Brown',
885
- imgURL:
886
- 'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/Wig Mirna.jpg',
887
- },
888
- {
889
- id: 148,
890
- currency: 'USD',
891
- amount: '505',
892
- quantity: '1',
893
- description: '10" Zuri Wig Straight Monroe Platinum Blonde',
894
- imgURL:
895
- 'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/monroe-wig-14.jpg',
896
- },
897
- {
898
- id: 149,
899
- currency: 'USD',
900
- amount: '505',
901
- quantity: '1',
902
- description: '14" Zuri Wig Straight Monroe Platinum Blonde',
903
- imgURL:
904
- 'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/monroe-wig-14.jpg',
905
- },
906
- {
907
- id: 146,
908
- currency: 'USD',
909
- amount: '960',
910
- quantity: '1',
911
- description: '14" Zuri Wig Straight Miss Van Platinum Blonde',
912
- imgURL:
913
- 'https://bm-chatbot-images.s3.eu-west-1.amazonaws.com/Miss Van.jpg',
914
- },
915
- ],
664
+ message: finalMessage,
665
+ connector,
916
666
  };
917
667
  };
918
- const [showModal, setShowModal] = useState(false);
919
- const [showModal1, setShowModal1] = useState(false);
920
668
 
921
- const renderJsonMessagex = () => {
922
- const parsedMessage = JSON.parse(x.metadata.prev_message);
669
+ const renderMetadataJsonMessage = (metadata) => {
670
+ let parsedMessage;
671
+
672
+ try {
673
+ parsedMessage = JSON.parse(metadata.prev_message);
674
+ } catch (error) {
675
+ console.error('Error parsing JSON:', error);
676
+ return null;
677
+ }
678
+
923
679
  const dotGoV2Content = parsedMessage?.dotgoV2;
924
- console.log({ parsedMessage });
925
- console.log({ dotGoV2Content });
926
- return dotGoV2Content;
927
- };
928
- // console.log(data);
929
- const image =
930
- 'https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExc2w1ZnI0OW5xdHk4eXU3bXg3ODFmMmxpZThnYmF2bnNudDN4dXlmaiZlcD12MV9naWZzX3NlYXJjaCZjdD1n/sGsoN9tI8a1k04pNcf/giphy.webp';
680
+ const finalMessage = dotGoV2Content || parsedMessage;
681
+ const connector = dotGoV2Content ? 'dotgo_v2' : 'dotgo_v3';
682
+ console.log({ finalMessage });
683
+
684
+ const calculateOrderSummary = (items) => {
685
+ console.log({ items });
686
+ if (!items || items.length === 0) return 0;
687
+
688
+ const totalValue = items.reduce(
689
+ (sum, item) => sum + item.amount * item.quantity,
690
+ 0
691
+ );
692
+ const currency = items[0]?.currency || '';
693
+ const formattedTotal = totalValue.toLocaleString('en-US');
931
694
 
932
- // State to manage the visibility of checkboxes
695
+ console.log({ formattedTotal });
696
+ return {
697
+ amount: `${currency} ${formattedTotal}`,
698
+ count: items.length,
699
+ items,
700
+ };
701
+ };
933
702
 
934
- // Handler function for the checkbox change event
703
+ if (finalMessage?.type === 'order') {
704
+ const items = dotGoV2Content
705
+ ? finalMessage?.catalog?.order?.items || []
706
+ : finalMessage?.product_items || [];
935
707
 
936
- const [currentStep, setCurrentStep] = useState(1);
708
+ const summary = calculateOrderSummary(items);
937
709
 
938
- // const appointmentDetails = {
939
- // title: 'Consultation',
940
- // duration: '30 mins',
941
- // };
942
- // const [selected, setSelected] = useState('');
943
- // const slots = [
944
- // {
945
- // label: '10:00 AM - 10:30 AM',
946
- // value: { startDate: '10:00 AM', endDate: '10:30 AM' },
947
- // },
948
- // {
949
- // label: '10:30 AM - 11:10 AM',
950
- // value: { startDate: '10:30 AM', endDate: '11:00 AM' },
951
- // },
952
- // ];
953
- // console.log({ selected });
710
+ if (summary === 0) return { amount: 0, type: 'order', count: 0 };
954
711
 
955
- const formData = {
956
- departmentName: 'Marketing',
957
- resourceName: 'John Doe',
958
- date: new Date(),
959
- timeSlot: '09:00 - 09:30',
960
- name: 'Jane Smith',
961
- phone: '+1234567890',
962
- email: 'jane.smith@example.com',
712
+ return {
713
+ message: dotGoV2Content
714
+ ? { ...summary, type: 'order' }
715
+ : { ...summary, type: 'order', product_items: items },
716
+ connector,
717
+ };
718
+ }
719
+
720
+ return {
721
+ message: finalMessage,
722
+ connector,
723
+ };
963
724
  };
964
- const slots = [
965
- {
966
- id: 'slot-1', // ⚠️ id is required
967
- label: '10:00 AM - 10:30 AM',
968
- value: { startDate: '10:00 AM', endDate: '10:30 AM' },
969
- },
970
- // {
971
- // id: 'slot-2',
972
- // label: '10:30 AM - 11:10 AM',
973
- // value: { startDate: '10:30 AM', endDate: '11:10 AM' },
974
- // },
975
- // {
976
- // id: 'slot-3',
977
- // label: '11:10 AM - 11:50 AM',
978
- // value: { startDate: '11:10 AM', endDate: '11:50 AM' },
979
- // },
980
- // {
981
- // id: 'slot-4',
982
- // label: '11:50 AM - 12:30 PM',
983
- // value: { startDate: '11:50 AM', endDate: '12:30 PM' },
984
- // },
985
- // {
986
- // id: 'slot-5',
987
- // label: '12:30 PM - 1:10 PM',
988
- // value: { startDate: '12:30 PM', endDate: '1:10 PM' },
989
- // },
990
- // {
991
- // id: 'slot-6',
992
- // label: '1:10 PM - 1:50 PM',
993
- // value: { startDate: '1:10 PM', endDate: '1:50 PM' },
994
- // },
995
- // {
996
- // id: 'slot-7',
997
- // label: '1:50 PM - 2:30 PM',
998
- // value: { startDate: '1:50 PM', endDate: '2:30 PM' },
999
- // },
1000
- // {
1001
- // id: 'slot-8',
1002
- // label: '2:30 PM - 3:10 PM',
1003
- // value: { startDate: '2:30 PM', endDate: '3:10 PM' },
1004
- // },
1005
- // {
1006
- // id: 'slot-9',
1007
- // label: '3:10 PM - 3:50 PM',
1008
- // value: { startDate: '3:10 PM', endDate: '3:50 PM' },
1009
- // },
1010
- // {
1011
- // id: 'slot-10',
1012
- // label: '3:50 PM - 4:30 PM',
1013
- // value: { startDate: '3:50 PM', endDate: '4:30 PM' },
1014
- // },
1015
- // {
1016
- // id: 'slot-11',
1017
- // label: '4:30 PM - 5:10 PM',
1018
- // value: { startDate: '4:30 PM', endDate: '5:10 PM' },
1019
- // },
1020
- {
1021
- id: 'slot-12',
1022
- label: '5:10 PM - 5:50 PM',
1023
- value: { startDate: '5:10 PM', endDate: '5:50 PM' },
1024
- },
1025
- ];
1026
- const sampleAppointmentTypes = [
1027
- {
1028
- id: 1,
1029
- name: 'ConsulTation Call',
1030
- description: 'Discuss project requirements and timelines.',
1031
- price: 0,
1032
- color: '#3b82f6', // blue
1033
- isActive: true,
1034
- location: 'Virtual',
1035
- paymentRequired: 'true',
1036
- selectedResources: [],
1037
- address: '',
1038
- duration: '60', // in minutes
1039
- guest_limit: '2', // max number of guests allowed
1040
- },
1041
- {
1042
- id: 2,
1043
- name: 'Strategy Session',
1044
- description: 'Deep dive session for business strategy and growth.',
1045
- price: 150,
1046
- color: '#10b981', // green
1047
- isActive: true,
1048
- location: 'Physical',
1049
- paymentRequired: 'true',
1050
- selectedResources: [{ id: 1 }],
1051
- address: '456 Innovation Avenue, Tech City',
1052
- duration: '187', // in minutes
1053
- guest_limit: '5', // max number of guests allowed
1054
- },
1055
- {
1056
- id: 3,
1057
- name: 'Follow-up Meeting',
1058
- description: 'Review progress and next steps with the team.',
1059
- price: 75,
1060
- color: '#f59e0b', // amber
1061
- isActive: false,
1062
- location: 'Virtual',
1063
- paymentRequired: 'true',
1064
- selectedResources: [{ id: 1 }, { id: 2 }],
1065
- address: '',
1066
- duration: '30', // in minutes
1067
- },
1068
- ];
1069
725
 
1070
- const [selectedSlotId, setSelectedSlotId] = useState(null);
1071
- console.log({ selectedSlotId });
1072
- const imgs = 'https://i.imgur.com/HiAzUHl.jpeg';
1073
- const [activeTab, setActiveTab] = useState('departments');
1074
- const handleView = (id) => console.log('View', id);
1075
- const handleDelete = (type) => console.log('Delete', type);
1076
- const handleCopyLink = (id) => console.log('Copy Link', id);
726
+ const determineMetadataMessageType = (metadata) => {
727
+ if (metadata && metadata?.prev_message) {
728
+ if (isJson(metadata?.prev_message) === true) {
729
+ return renderMetadataJsonMessage(metadata);
730
+ }
731
+ return { message: { type: 'text', text: metadata.prev_message } };
732
+ }
733
+ };
734
+ const determineMetadataIsInteractive = (metadata) => {
735
+ if (metadata && metadata?.prev_message) {
736
+ if (isJson(metadata?.prev_message) === true) {
737
+ return true;
738
+ }
739
+ return false;
740
+ }
741
+ };
1077
742
  return (
1078
743
  <>
1079
744
  <GlobalStyle />
1080
- <div>
1081
- <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
1082
- </div>
1083
- <BmModal show={showModal} onHide={() => setShowModal(false)}>
1084
- <BmModal.Header closeButton>
1085
- <h2>Header</h2>
1086
- </BmModal.Header>
1087
- <BmModal.Body>
1088
- <div
1089
- style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}
1090
- >
1091
- {sampleAppointmentTypes.map((type) => (
1092
- <BmHorizontalCard
1093
- name={type.name}
1094
- description="Handles imaging and diagnostic scanssdijfsdoijfoisd jsdoij fosidf jsdoif jsdoifs ergjri gr[ jdi[t gegrepg fghepoiurig hroegeigig hep etghtpg hepghrp eug hrg[o hrgiorwrgh w[uugo ggwg iuhwoigw[ig soiug [oh g[wgh[oig hrw[ouig hei reg rwg wgujhsuw hgwrg h9rug rfewrewg fskg42398 glskjgur ghwpgh43hsaujhpghrpeihhou re9ojgpoh"
1095
- price={type.price}
1096
- color={type.color}
1097
- isActive={type.isActive}
1098
- location={type.location}
1099
- paymentRequired={type.paymentRequired}
1100
- selectedResources={type.selectedResources}
1101
- address={type.address}
1102
- duration={type.duration}
1103
- guest_limit={type.guest_limit}
1104
- key={type.id}
1105
- onView={() => handleView(type.id)}
1106
- onDelete={() => handleDelete(type)}
1107
- onCopyLink={() => handleCopyLink(type.id)}
1108
- data={type}
1109
- editToolTip="edit appointment type"
1110
- deleteToolTip="delete appointment type"
1111
- copyToolTip="copy appointment type link"
1112
- />
1113
- ))}
1114
- </div>
1115
- </BmModal.Body>
1116
- <BmModal.Footer>
1117
- <p>This is a footer</p>
1118
- <BmButton onClick={() => setShowModal1(true)}>open</BmButton>
1119
- </BmModal.Footer>
1120
- </BmModal>
1121
- <BmModal
1122
- zIndex={9999}
1123
- show={showModal1}
1124
- onHide={() => setShowModal1(false)}
1125
- >
1126
- <BmModal.Header closeButton>
1127
- <h2>Header</h2>
1128
- </BmModal.Header>
1129
- <BmModal.Body>
1130
- <p>This is a body</p>
1131
- </BmModal.Body>
1132
- <BmModal.Footer>
1133
- <p>This is a footer</p>
1134
- <BmButton onClick={() => setShowModal1(false)}>Close</BmButton>
1135
- </BmModal.Footer>
1136
- </BmModal>
1137
- <div
1138
- style={{
1139
- display: 'flex',
1140
- flexDirection: 'column',
1141
- gap: '2rem',
1142
- width: '50%',
1143
- }}
1144
- >
1145
- <BmCustomTab
1146
- value={activeTab}
1147
- onValueChange={setActiveTab}
1148
- tabs={tabs}
1149
- />
1150
- <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
1151
- {sampleAppointmentTypes.map((type) => (
1152
- <BmHorizontalCard
1153
- name={type.name}
1154
- description="Handles imaging and diagnostic scanssdijfsdoijfoisd jsdoij fosidf jsdoif jsdoifs ergjri gr[ jdi[t gegrepg fghepoiurig hroegeigig hep etghtpg hepghrp eug hrg[o hrgiorwrgh w[uugo ggwg iuhwoigw[ig soiug [oh g[wgh[oig hrw[ouig hei reg rwg wgujhsuw hgwrg h9rug rfewrewg fskg42398 glskjgur ghwpgh43hsaujhpghrpeihhou re9ojgpoh"
1155
- price={type.price}
1156
- color={type.color}
1157
- isActive={type.isActive}
1158
- location={type.location}
1159
- paymentRequired={type.paymentRequired}
1160
- selectedResources={type.selectedResources}
1161
- address={type.address}
1162
- duration={type.duration}
1163
- guest_limit={type.guest_limit}
1164
- key={type.id}
1165
- onView={() => handleView(type.id)}
1166
- onDelete={() => handleDelete(type)}
1167
- onCopyLink={() => handleCopyLink(type.id)}
1168
- data={type}
1169
- editToolTip="edit appointment type"
1170
- deleteToolTip="delete appointment type"
1171
- copyToolTip="copy appointment type link"
1172
- />
1173
- ))}
1174
- </div>
1175
-
1176
- <div style={{ width: '100%', maxWidth: '900px', margin: '2rem auto' }}>
1177
- <div style={{ maxWidth: 400, margin: '2rem auto' }}>
1178
- <BmDepartmentCard
1179
- borderTopColor="#3b82f6" // blue
1180
- isActive="true"
1181
- name="Radiology Department"
1182
- description="Handles imaging and diagnostic scans"
1183
- resourcesCount={0}
1184
- onEdit={() => alert('Edit department')}
1185
- onDelete={() => alert('Delete department')}
1186
- EditIcon={EditIcon}
1187
- DeleteIcon={DeleteIcon}
1188
- />
1189
-
1190
- <BmDepartmentCard
1191
- borderTopColor="#f97316" // orange
1192
- isActive={false}
1193
- name="Cardiology Department"
1194
- description="Heart and blood vessel treatments"
1195
- resourcesCount={5}
1196
- onEdit={() => alert('Edit department')}
1197
- onDelete={() => alert('Delete department')}
1198
- EditIcon={EditIcon}
1199
- DeleteIcon={DeleteIcon}
1200
- />
1201
- <BmResourceCard
1202
- borderTopColor="#10b981"
1203
- isActive="true"
1204
- name="Dr. Jane Smith"
1205
- type="staff"
1206
- resourceBadges={[
1207
- {
1208
- label: 'Google Synced',
1209
- color: '#10b981',
1210
- icon: CalendarTodayIcon,
1211
- },
1212
- ]}
1213
- departmentName="Radiology"
1214
- email="jane.smith@example.com"
1215
- phone="+123456789"
1216
- availability="Mon-Fri 9am-5pm"
1217
- onEdit={() => alert('Edit resource')}
1218
- onDelete={() => alert('Delete resource')}
1219
- EditIcon={EditIcon}
1220
- DeleteIcon={DeleteIcon}
1221
- />
1222
- </div>
1223
- </div>
1224
- <div>
1225
- <BmInfoPanel.SectionSummary
1226
- iconColor="#33B1BA"
1227
- textColor="#fcba03"
1228
- icon={CalendarTodayOutlinedIcon}
1229
- title={formData.departmentName}
1230
- subtitle="Department"
1231
- // iconBackgroundColor
1232
- />
1233
- <AlertBox
1234
- icon={AccessTimeIcon}
1235
- themeColor="#DC2626"
1236
- title="Payment Error"
1237
- description="We couldn't process your payment. Please try again later or contact support."
1238
- />
1239
- <BmCustomCardTitle
1240
- icon={CalendarTodayOutlinedIcon}
1241
- themeColor="#33B1BA"
1242
- title="Book Your Medical Appointment"
1243
- description="Schedule a 30-minute consultation with our healThcare specialists"
1244
- variant="booking"
1245
- withStripe
1246
- imageSrc={imgs}
1247
- />
1248
- </div>
1249
- <div>
1250
- <BmInfoPanel.Section
1251
- title="Appointment Details"
1252
- icon={CalendarTodayOutlinedIcon}
1253
- backgroundColor="#fcba03"
1254
- iconColor="#fcba03"
1255
- />
1256
- <BmCustomCardTitle
1257
- icon={CheckIcon}
1258
- themeColor="#33B1BA"
1259
- title="Appointment Confirmed!"
1260
- description="Your booking has been successfully scheduled"
1261
- variant="confirmation"
1262
- withStripe
1263
- />
1264
- </div>
1265
- </div>
1266
- <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
1267
- <div style={{ padding: '2rem' }}>
1268
- <h1>Progress Indicator Demo</h1>
1269
-
1270
- <BmProgressIndicator
1271
- steps={steps}
1272
- currentStep={currentStep}
1273
- primaryColor="#10b981"
1274
- className="green" // Optional: for color themes defined in the styled component
1275
- />
1276
-
1277
- {/* <div style={{ marginTop: '2rem' }}>
1278
- <button
1279
- type="button"
1280
- onClick={() => setCurrentStep((prev) => Math.max(prev - 1, 0))}
1281
- >
1282
- Previous
1283
- </button>
1284
- <button
1285
- type="button"
1286
- onClick={() =>
1287
- setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1))
1288
- }
1289
- >
1290
- Next
1291
- </button>
1292
- </div> */}
1293
- </div>
1294
- <BmCardv2 borderColor="#33B1BA" borderWidth="1.5px">
1295
- <BmCardv2.Header>
1296
- <BmCardv2.Title>Profile</BmCardv2.Title>
1297
- <BmCardv2.Description>
1298
- Manage your settings below
1299
- </BmCardv2.Description>
1300
- </BmCardv2.Header>
1301
- <BmCardv2.Content>
1302
- <BmSelector
1303
- data={slots}
1304
- selectedDataId={selectedSlotId}
1305
- onChange={setSelectedSlotId}
1306
- icon={AccessTimeIcon}
1307
- themeColor="#33B1BA"
1308
- />
1309
- {/* <BmInfoPanel>
1310
- // <BmInfoPanel.Section
1311
- // title="Appointment Details"
1312
- // icon={CalendarTodayIcon}
1313
- // backgroundColor="#fcba03"
1314
- // iconColor="#fcba03"
1315
- // >
1316
- <BmInfoPanel.SectionSummary
1317
- iconColor="#33B1BA"
1318
- textColor="#fcba03"
1319
- icon={CalendarTodayIcon}
1320
- title={formData.departmentName}
1321
- subtitle="Department"
1322
- // iconBackgroundColor
1323
- />
1324
- <BmInfoPanel.SectionSummary
1325
- icon={BusinessIcon}
1326
- title={formData.departmentName}
1327
- subtitle="Department"
1328
- />
1329
- </BmInfoPanel.Section>
1330
- </BmInfoPanel> */}
1331
- {/* <BmInfoPanel.Section
1332
- title="Personal Information"
1333
- icon={PersonIcon}
1334
- showDivider
1335
- dividerColor="#33b1ba"
1336
- dividerWitdh="2px"
1337
- dividerType="solid"
1338
- dividerOpacity="0.5"
1339
- >
1340
- <BmInfoPanel.Row label="Name" value={formData.name} />
1341
- <BmInfoPanel.Row label="Phone" value={formData.phone} />
1342
- <BmInfoPanel.Row label="Email" value={formData.email} />
1343
- </BmInfoPanel.Section> */}
1344
- </BmCardv2.Content>
1345
- <BmCardv2.Footer>
1346
- <BmButton
1347
- width="100%"
1348
- size="medium"
1349
- borderColor="#33b1ba33"
1350
- color="#000000"
1351
- variant="secondary"
1352
- type="button"
1353
- onClick={() => setCurrentStep((prev) => Math.max(prev - 1, 0))}
1354
- >
1355
- Cancel
1356
- </BmButton>
1357
- <BmButton
1358
- width="100%"
1359
- size="medium"
1360
- type="button"
1361
- onClick={() =>
1362
- setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1))
1363
- }
1364
- >
1365
- Save
1366
- </BmButton>
1367
- </BmCardv2.Footer>
1368
- </BmCardv2>
1369
- </div>
1370
- <div>
1371
- <BmLabelWithIcon
1372
- textColor="#fcba03"
1373
- icon={PeopleIcon}
1374
- iconColor="#fffff"
1375
- iconSize="16px"
1376
- >
1377
- <p>yooo</p>&nbsp;<h4>Team: Engineering</h4>
1378
- </BmLabelWithIcon>
1379
-
1380
- <div>
1381
- <BmSelectionNotice color="#ff6600">
1382
- This is a <strong>warning</strong> notice.
1383
- </BmSelectionNotice>
1384
- </div>
1385
- <div style={{ padding: '2rem' }}>
1386
- <h1>Progress Indicator Demo</h1>
1387
-
1388
- <BmProgressIndicator
1389
- steps={steps}
1390
- currentStep={currentStep}
1391
- primaryColor="#10b981"
1392
- className="green" // Optional: for color themes defined in the styled component
1393
- />
1394
-
1395
- <div style={{ marginTop: '2rem' }}>
1396
- <button
1397
- type="button"
1398
- onClick={() => setCurrentStep((prev) => Math.max(prev - 1, 0))}
1399
- >
1400
- Previous
1401
- </button>
1402
- <button
1403
- type="button"
1404
- onClick={() =>
1405
- setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1))
1406
- }
1407
- >
1408
- Next
1409
- </button>
1410
- </div>
1411
- </div>
1412
- <BmChat.Details
1413
- key={85279}
1414
- state="inbound"
1415
- session="bot"
1416
- displayTime={<p>12:00pm</p>}
1417
- status="sent"
1418
- type="interactive"
1419
- sessionTimeline={{ message: <p>12:00pm</p> }}
1420
- style={{ margin: '-0.6% 0 0 0' }}
1421
- >
1422
- {renderOrderJsonMessage()}
1423
- </BmChat.Details>
1424
- <BmChat.Details
1425
- state="outbound"
1426
- session="bot"
1427
- sessionTimeline={{ message: <p>12:00pm</p> }}
1428
- displayTime={<p>12:00pm</p>}
1429
- status="sent"
1430
- // type="interactive"
1431
- metadata={renderJsonMessagex()}
1432
- isInteractive="true"
1433
- >
1434
- <p>{x.message}</p>
1435
- </BmChat.Details>
1436
- <BmChat.Details
1437
- state="outbound"
1438
- session="bot"
1439
- sessionTimeline={{ message: <p>12:00pm</p> }}
1440
- displayTime={<p>12:00pm</p>}
1441
- status="sent"
1442
- // type="interactive"
1443
- isInteractive="true"
1444
- >
1445
- <p style={{ whiteSpace: 'pre-line' }}>
1446
- {`*Order placed successfully!*
1447
-
1448
- *ORDER ID: 191*
1449
745
 
1450
- 1 X 16" Zuri Wig Straight Ciara @ USD 504
1451
- ,2 X 18" Zuri Wig Straight Ciara @ USD 504
1452
- ,3 X 16" Zuri Wig Straight Feza Caramel Brown @ USD 808`}
1453
- </p>
1454
- </BmChat.Details>
1455
- <BmChatAccordion Open expandIconPosition="left">
1456
- <BmChatAccordion.Title
1457
- // trailingIcon={<AbcIcon />}
1458
- // leadingIcon={<AbcIcon />}
1459
- >
1460
- <h3>tesxcxcxt</h3>
1461
- </BmChatAccordion.Title>
1462
- <BmChatAccordion.Body>
1463
- <div
1464
- style={{
1465
- marginTop: '.8571rem',
1466
- border: '.0714rem solid black',
1467
- borderRadius: '.4286rem',
1468
- padding: '.4286rem',
1469
- }}
1470
- >
1471
- <p>defdsfsdfsd</p>
1472
- <p>dsfsdfsdfdsfdsfsdf</p>
1473
- </div>
1474
- </BmChatAccordion.Body>
1475
- </BmChatAccordion>
1476
- <BmAccordion>
1477
- <BmAccordion.Title>
1478
- <h3>Information</h3>
1479
- </BmAccordion.Title>
1480
- <BmAccordion.Body>
1481
- {/* <BmChatForm> */}
1482
- <div>
1483
- <BmChatForm.Group>
1484
- <BmChatForm.Label>
1485
- <h4>Account No.</h4>
1486
- </BmChatForm.Label>
1487
- <BmChatForm.Input placeholder="Enter here" />
1488
- </BmChatForm.Group>
1489
- <BmChatForm.Group>
1490
- <BmChatForm.Label>
1491
- <h4>Preferred Language</h4>
1492
- </BmChatForm.Label>
1493
- <BmChatForm.Input placeholder="Enter here" />
1494
- </BmChatForm.Group>
1495
- </div>
1496
- {/* </BmChatForm> */}
1497
- </BmAccordion.Body>
1498
- </BmAccordion>
1499
- <BmTag
1500
- // variant="danger"
1501
- // textColor="#17b26a"
1502
- bgColor="#17b26a"
1503
- // color="black"
1504
- closeButton
1505
- dot
1506
- // size="xsmall"
1507
- >
1508
- <p>Pending</p>
1509
- </BmTag>
1510
- <BmTag dot>
1511
- <p>Bot</p>
1512
- </BmTag>
1513
- </div>
1514
- <BmChat>
1515
- <BmChat.Body>
746
+ {metaQuickReply.map((msg, idx) =>
747
+ msg.message_type !== 'text' ? (
1516
748
  <BmChat.Details
1517
- state="outbound"
1518
- session="sms"
749
+ key={msg.id || idx} // Prefer a stable unique id if available
750
+ state={msg.direction}
751
+ session="bot"
1519
752
  displayTime={<p>12:00pm</p>}
1520
753
  status="sent"
1521
- sessionDetails={{
1522
- message: <h3>Session Message</h3>,
1523
- time: <p>12:00pm</p>,
1524
- }}
754
+ type={msg.message_type}
755
+ sessionTimeline={{ message: <p>12:00pm</p> }}
756
+ style={{ margin: '-0.6% 0 0 0' }}
757
+ metadata={determineMetadataMessageType(msg.metadata)}
758
+ isInteractive={determineMetadataIsInteractive(msg.metadata)}
1525
759
  >
1526
- <p>
1527
- Inbound Text kjflksdjfskld jsdlkfjsdlkf jsdlk jfsdlkjf lkjfljflsj
1528
- ljfljfsjfsofoewjfwej owe we fwofj kwefoweo fiweo ieoi joi fweo
1529
- fweof welkf jwelfk jweoi fejwof wejfl kwejf oiwej foewijf lwekjf
1530
- oewi fjlwej foMessage 1 sdkfjdslkjf lksdfj sodifj owijfiwoe
1531
- jfwoegh woj fpieojwoighjwoei hgwoihgwoij giej
1532
- foewifjweokjgwlgkjwqeli jgowegihweogwhelgkjwe goiwhroihjg oewjfwle
1533
- fjwelfjweoighwoei ghwei gjqepif jopqejfkljgwoighwoi ghwoiejh goiwg
1534
- howej lkwejgwogihwelo kjwoei gjiejf pqeif jpqeofjeiow ghorwughwlkj
1535
- fiepofj peqwjfpoqejf pioewj gurehglowjk gfwqefjwpoiegpwogijwrp
1536
- ogjwpo gjwp kfpoewkf opwegjkpwoj wig hioqwe
1537
- jfqepijfopqekfqpoefkqpoekfqpoe jpqoe jgiqeghj quioehgqoeijg
1538
- qekfjqepofk poqef pqoe fjepiof jqeifh qeif h
1539
- </p>
760
+ {renderJsonMessageMeta(msg)}
1540
761
  </BmChat.Details>
762
+ ) : (
1541
763
  <BmChat.Details
1542
- state="inbound"
1543
- session="live"
1544
- displayTime={<p>12:00pm</p>}
1545
- status="sent"
1546
- fileName={<p>chat.png</p>}
1547
- src="https://i.postimg.cc/ydq8vSx3/cyberpunk-2077-samurai-minimalist-uhdpaper-com-4-K-5-1333-min-2.jpg"
1548
- sessionDetails={{
1549
- message: <h3>Session Message</h3>,
1550
- time: <p>12:00pm</p>,
1551
- }}
1552
- />
1553
- <BmChat.Details
1554
- state="inbound"
1555
- session="live"
1556
- displayTime={<p>10:00am</p>}
1557
- status="failed"
1558
- fileName={<p>file.csv</p>}
1559
- file={image}
1560
- />
1561
- <BmChat.Details
1562
- state="outbound"
764
+ key={msg.id || idx} // Prefer a stable unique id if available
765
+ state={msg.direction}
1563
766
  session="bot"
1564
767
  displayTime={<p>12:00pm</p>}
1565
768
  status="sent"
769
+ type="text"
770
+ sessionTimeline={{ message: <p>12:00pm</p> }}
771
+ style={{ margin: '-0.6% 0 0 0' }}
772
+ metadata={determineMetadataMessageType(msg.metadata)}
773
+ isInteractive={determineMetadataIsInteractive(msg.metadata)}
1566
774
  >
1567
- <p>Outbound Text Message</p>
775
+ <p>{msg.message}</p>
1568
776
  </BmChat.Details>
1569
- <BmChat.Details
1570
- state="outbound"
1571
- session="live"
1572
- displayTime={<p>12:00pm</p>}
1573
- status="sent"
1574
- fileName={<p>chat.png</p>}
1575
- src={image}
1576
- />
1577
- <BmChat.Details
1578
- state="outbound"
1579
- session="live"
1580
- displayTime={<p>10:00am</p>}
1581
- status="failed"
1582
- fileName={<p>file.csv</p>}
1583
- file={image}
1584
- link={image}
1585
- onDownload={() => {
1586
- console.log('sdfsfs');
1587
- }}
1588
- />
1589
- </BmChat.Body>
1590
- {/* <BmChat.Footer>
1591
- <div className="chat-footer">
1592
- <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
1593
- <BmIcons icon={<AttachFileIcon />} size="xlarge" />
1594
- <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
1595
- <BmInput placeholder="Enter Message" style={{ flex: '1' }} />
1596
- <BmIcons icon={<SendIcon />} size="xlarge" />
1597
- </div>
1598
- </BmChat.Footer> */}
1599
- {/* <div className="w-20">
1600
- <BmButton size="xsmall" variant="neutral">
1601
- Hello
1602
- </BmButton>
1603
- <BmButton size="xsmall" variant="secondary">
1604
- Hello
1605
- </BmButton>
1606
- <BmButton size="xsmall" variant="primary">
1607
- Hello
1608
- </BmButton>
1609
- <BmButton size="xsmall" variant="destructive">
1610
- Hello
1611
- </BmButton>
1612
- <BmButton size="xsmall" variant="tertiary">
1613
- Hello
1614
- </BmButton>
1615
- <BmButton size="xsmall" variant="success">
1616
- Hello
1617
- </BmButton>
1618
- <BmButton variant="success">Test</BmButton>
1619
- <div style={{ width: '30%' }}>
1620
- <BmButtonDropDown size="xsmall">Test</BmButtonDropDown>
1621
- </div>
1622
- <BmBtnIcon icon={<AbcIcon />} size="xsmall" />
1623
- </div>
1624
- <br />
1625
- <div style={{ width: '50%' }}>
1626
- <BmButton size="xsmall" color="black" variant="neutral">
1627
- Hello
1628
- </BmButton>
1629
- </div>
1630
- <BmButton size="small" variant="secondary">
1631
- Hello
1632
- </BmButton>
1633
- <BmButton size="medium" variant="primary">
1634
- Hello
1635
- </BmButton>
1636
- <BmButton variant="success">Hello</BmButton>
1637
- <BmButton size="large" variant="destructive">
1638
- Hello
1639
- </BmButton> */}
1640
- {/* <BmButton size="small" variant="tertiary">
1641
- Hello
1642
- </BmButton>
1643
- <BmButton size="large" variant="success">
1644
- Hello
1645
- </BmButton> */}
1646
- <BmChat.Details
1647
- state="outbound"
1648
- session="bot"
1649
- sessionTimeline={{ message: <p>12:00pm</p> }}
1650
- displayTime={<p>12:00pm</p>}
1651
- status="sent"
1652
- type="interactive"
1653
- >
1654
- {renderJsonMessage()}
1655
- {/* {{
1656
- type: 'list',
1657
- title: 'Great 😁!',
1658
- body: 'Please choose how you would want to redeem your points today in store purchase?',
1659
- msgid: 'redeemPoints',
1660
- globalButtons: [
1661
- {
1662
- type: 'text',
1663
- title: 'Redeem Points',
1664
- },
1665
- ],
1666
- items: [
1667
- {
1668
- title: 'first Section',
1669
- subtitle: 'first Subtitle',
1670
- options: [
1671
- {
1672
- type: 'text',
1673
- title: '1000 pts for 10000Tsh',
1674
- description: '',
1675
- postbackText: 'section 1 row 1 postback payload',
1676
- },
1677
- {
1678
- type: 'text',
1679
- title: '5000 pts for 5000Tsh',
1680
- description: '',
1681
- postbackText: 'section 1 row 2 postback payload',
1682
- },
1683
- {
1684
- type: 'text',
1685
- title: '10000 pts for 100000Tsh',
1686
- description: '',
1687
- postbackText: 'section 1 row 3 postback payload',
1688
- },
1689
- {
1690
- type: 'text',
1691
- title: 'Back',
1692
- description: '',
1693
- postbackText: 'section 1 row 4 postback payload',
1694
- },
1695
- ],
1696
- },
1697
- ],
1698
- }} */}
1699
- {/* <p>
1700
- Outbound Text Message that i wanteds to send but i could not send
1701
- it as whatsapp was down for almost one whole hour but i wonder how
1702
- wide this message will look and will we have to match it if it
1703
- goes this wide mhhhhhh interesting
1704
- </p> */}
1705
- </BmChat.Details>
1706
-
1707
- <BmChat.Details
1708
- state="inbound"
1709
- session="bot"
1710
- sessionTimeline={{ message: <p>12:00pm</p> }}
1711
- displayTime={<p>12:00pm</p>}
1712
- status="sent"
1713
- type="interactive"
1714
- >
1715
- {{
1716
- type: 'quick_reply',
1717
- msgid: 'redeemMenu',
1718
- content: {
1719
- type: 'text',
1720
- url: 'https://i.imgur.com/BZylAb1.jpeg',
1721
- header: 'HELOOOOOOOOOO',
1722
- text: 'In Beem Rewards You can redeem or check points that you have accumulated anytime.\n\nSo, what do you want to do today?',
1723
- caption: '',
1724
- },
1725
- options: [
1726
- {
1727
- type: 'text',
1728
- title: 'Reedem points',
1729
- postbackText: 'FMCG-defined-postback1',
1730
- },
1731
- {
1732
- type: 'text',
1733
- title: 'Check points',
1734
- postbackText: 'FMCG-defined-postback2',
1735
- },
1736
- {
1737
- type: 'text',
1738
- title: 'Back',
1739
- postbackText: 'FMCG-defined-postback3',
1740
- },
1741
- ],
1742
- }}
1743
- {/* <p>
1744
- Outbound Text Message that i wanteds to send but i could not send
1745
- it as whatsapp was down for almost one whole hour but i wonder how
1746
- wide this message will look and will we have to match it if it
1747
- goes this wide mhhhhhh interesting
1748
- </p> */}
1749
- </BmChat.Details>
1750
- <BmChat.Details
1751
- state="inbound"
1752
- session="bot"
1753
- sessionTimeline={{ message: <p>12:00pm</p> }}
1754
- displayTime={<p>12:00pm</p>}
1755
- status="sent"
1756
- type="interactive"
1757
- >
1758
- {{
1759
- type: 'quick_reply',
1760
- msgid: 'SaifeeBot',
1761
- content: {
1762
- type: 'image',
1763
- header: 'HELOOOOOOOOOO',
1764
- url: 'https://i.postimg.cc/ydq8vSx3/cyberpunk-2077-samurai-minimalist-uhdpaper-com-4-K-5-1333-min-2.jpg',
1765
- text: 'Hello! Welcome to *Saifee Hdkfj kdfj kdfj dkjf kdjf idofj idjf dkf jdif jdkf djf idf jdkf jd dkfjdkjf dkofjosdfj sdoif joewif jwoeifj wefj welkf jweloifjweoifjwo ff wfj fwe gjwpiogw gjwo gwg jwegf ei jwk jgwi jgwijgejgweoi gg wjgewo we jwgjlwejg gjwoj gwoj gwejogwogwogwekgjwgijwoig jweoijg oiw if jdkf jdif jdkfj dkf jifjoiewrfj okwj ospital* Please select your preferred language \n \nHabari! Karibu *Hospitali ya Saifee* Tafadhali chagua lugha unayopendelea',
1766
- caption: 'Powered by Beem',
1767
- },
1768
- options: [
1769
- {
1770
- type: 'text',
1771
- title: 'English',
1772
- postbackText: 'dev-defined-postback1',
1773
- },
1774
- {
1775
- type: 'text',
1776
- title: 'Swahili',
1777
- postbackText: 'dev-defined-postback2',
1778
- },
1779
- ],
1780
- }}
1781
-
1782
- {/* <p>
1783
- Outbound Text Message that i wanteds to send but i could not send
1784
- it as whatsapp was down for almost one whole hour but i wonder how
1785
- wide this message will look and will we have to match it if it
1786
- goes this wide mhhhhhh interesting
1787
- </p> */}
1788
- </BmChat.Details>
1789
-
1790
- <BmContactCard />
1791
- </BmChat>
1792
- {/* <BmChat>
1793
- <BmChat.Body>
1794
- {msg.map((ms, index) => (
1795
- <BmContactCard isVisible={checkboxVisibility[index]}>
1796
- <BmContactCard.Profile>
1797
- <BmProfileIcon
1798
- hoverEnabled
1799
- hoverText="dfk dsflksd;"
1800
- size="medium"
1801
- multiChannel="#b6fc03"
1802
- />
1803
- </BmContactCard.Profile>
1804
- <BmContactCard.Details>
1805
- <BmContactCard.SubDetails>
1806
- <h3>Contact Names</h3>
1807
- <BmContactCheckbox
1808
- isVisible={checkboxVisibility[index]}
1809
- onChange={(event) =>
1810
- handleCheckboxChange(index, event.target.checked)
1811
- }
1812
- checked={checkboxVisibility[index]}
1813
- />
1814
- </BmContactCard.SubDetails>
1815
- <BmContactCard.SubDetails>
1816
- <p>Message text</p>
1817
- <BmCounter>10</BmCounter>
1818
- </BmContactCard.SubDetails>
1819
- <BmContactCard.SubDetails>
1820
- <BmTag variant="success">{ms.id}</BmTag>
1821
- <p>10:00 am</p>
1822
- </BmContactCard.SubDetails>
1823
- </BmContactCard.Details>
1824
- </BmContactCard>
1825
- ))}
1826
- </BmChat.Body>
1827
- </BmChat> */}
1828
- <BmChat>
1829
- <BmChat.Body>
1830
- {messages.map((ms) => {
1831
- console.log(ms);
1832
- return (
1833
- <BmChat.Details
1834
- key={ms.id}
1835
- state={ms.direction}
1836
- session="bot"
1837
- sessionTimeline={{ message: <p>12:00pm</p> }}
1838
- displayTime={<p>12:00pm</p>}
1839
- status="sent"
1840
- extension="pdf"
1841
- file={ms.message}
1842
- link={ms.message}
1843
- fileName={<p>File</p>}
1844
- type="pdf"
1845
- style={{ margin: '-0.6% 0 0 0' }}
1846
- >
1847
- <p>
1848
- <a href={ms.message}> </a>
1849
- </p>
1850
- </BmChat.Details>
1851
- );
1852
- })}
1853
- </BmChat.Body>
1854
- </BmChat>
1855
- <BmChat>
1856
- <BmChat.Body>
1857
- {messages.map((ms) => {
1858
- console.log(ms);
1859
- return (
1860
- <BmChat.Details
1861
- key={ms.id}
1862
- state={ms.direction}
1863
- session="bot"
1864
- sessionTimeline={{ message: <p>12:00pm</p> }}
1865
- displayTime={<p>12:00pm</p>}
1866
- status="sent"
1867
- file={ms.message}
1868
- link={ms.message}
1869
- fileName={<p>File</p>}
1870
- style={{ margin: '-0.6% 0 0 0' }}
1871
- extension="docx"
1872
- // state="inbound"
1873
- // session="live"
1874
- // displayTime={<p>10:00am</p>}
1875
- // status="failed"
1876
- // fileName={<p>file.csv</p>}
1877
- // file={image}
1878
- />
1879
- );
1880
- })}
1881
- </BmChat.Body>
1882
- </BmChat>
1883
- <BmAccordion expandIconPosition="right">
1884
- <BmAccordion.Title size="small">Contacts</BmAccordion.Title>
1885
- <BmAccordion.Body>
1886
- <div className="accordion-body">
1887
- <BmAccordion expandIcon="none">
1888
- <BmAccordion.Title>
1889
- <button
1890
- type="button"
1891
- onClick={() => {
1892
- console.log('click 1');
1893
- }}
1894
- >
1895
- Customers
1896
- </button>
1897
- </BmAccordion.Title>
1898
- </BmAccordion>
1899
-
1900
- <BmAccordion expandIcon="none">
1901
- <BmAccordion.Title>Reedem History</BmAccordion.Title>
1902
- </BmAccordion>
1903
- <BmAccordion expandIcon="none">
1904
- <BmAccordion.Title>Rewards</BmAccordion.Title>
1905
- </BmAccordion>
1906
- <BmAccordion expandIcon="none">
1907
- <BmAccordion.Title>Pending Redemption</BmAccordion.Title>
1908
- </BmAccordion>
1909
- </div>
1910
- </BmAccordion.Body>
1911
- </BmAccordion>
777
+ )
778
+ )}
1912
779
  </>
1913
780
  );
1914
781
  };