beem-component 2.1.19 → 2.1.20

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.
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,100 +40,64 @@ 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,
105
- // 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,
111
- // is_live_agent: 0,
112
- // is_deleted: 0,
113
- // is_comment: 0,
114
- // channel: 'facebook',
115
- // sent_to_vendor: 1,
116
- // replyMessageId: null,
117
- // agent_name: null,
118
- // df_agent_name: null,
119
- // resolve_time: null,
120
- // metadata: null,
121
- // statusDetails: {
122
- // statusCode: 3,
123
- // },
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"}]}]}}',
45
+ const metaQuickReply = [
46
+ {
47
+ id: 104342,
48
+ message:
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',
55
+ is_live_agent: 0,
56
+ is_deleted: 0,
57
+ is_comment: 0,
58
+ channel: 'whatsapp',
59
+ sent_to_vendor: 1,
60
+ replyMessageId: null,
61
+ agent_name: null,
62
+ df_agent_name: null,
63
+ resolve_time: null,
64
+ metadata: null,
65
+ statusDetails: {
66
+ statusCode: 3,
67
+ },
148
68
  },
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
- ];
69
+ {
70
+ id: 104342,
156
71
 
157
- const messages = [
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',
76
+ direction: 'inbound',
77
+ message_type: 'interactive',
78
+ messageId: 'ac498221-3dd9-4b09-ad2b-826c0d1e3e29',
79
+ is_live_agent: 0,
80
+ is_deleted: 0,
81
+ is_comment: 0,
82
+ channel: 'whatsapp',
83
+ sent_to_vendor: 1,
84
+ replyMessageId: null,
85
+ agent_name: null,
86
+ df_agent_name: null,
87
+ resolve_time: null,
88
+ metadata: null,
89
+ statusDetails: {
90
+ statusCode: 3,
91
+ },
92
+ },
158
93
  {
159
- id: 78741,
94
+ id: 104342,
160
95
  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',
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',
163
98
  direction: 'inbound',
164
- message_type:
165
- 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
166
- messageId: null,
99
+ message_type: 'interactive',
100
+ messageId: 'ac498221-3dd9-4b09-ad2b-826c0d1e3e29',
167
101
  is_live_agent: 0,
168
102
  is_deleted: 0,
169
103
  is_comment: 0,
@@ -174,16 +108,19 @@ const Chat = () => {
174
108
  df_agent_name: null,
175
109
  resolve_time: null,
176
110
  metadata: null,
111
+ statusDetails: {
112
+ statusCode: 3,
113
+ },
177
114
  },
178
115
 
179
116
  {
180
- id: 78739,
117
+ id: 104342,
181
118
  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,
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',
121
+ direction: 'outbound',
122
+ message_type: 'interactive',
123
+ messageId: 'ac498221-3dd9-4b09-ad2b-826c0d1e3e29',
187
124
  is_live_agent: 0,
188
125
  is_deleted: 0,
189
126
  is_comment: 0,
@@ -194,1721 +131,428 @@ const Chat = () => {
194
131
  df_agent_name: null,
195
132
  resolve_time: null,
196
133
  metadata: null,
134
+ statusDetails: {
135
+ statusCode: 3,
136
+ },
197
137
  },
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
- // },
221
- // {
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',
309
- // direction: 'inbound',
310
- // message_type: 'text',
311
- // messageId: null,
312
- // is_live_agent: true,
313
- // is_deleted: false,
314
- // is_comment: false,
315
- // channel: 'whatsapp',
316
- // sent_to_vendor: true,
317
- // replyMessageId: null,
318
- // agent_name: null,
319
- // df_agent_name: null,
320
- // resolve_time: null,
321
- // 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
- // statusDetails: {
341
- // statusCode: 3,
342
- // },
343
- // },
344
- // {
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,
354
- // channel: 'whatsapp',
355
- // sent_to_vendor: true,
356
- // replyMessageId: null,
357
- // agent_name: null,
358
- // df_agent_name: null,
359
- // resolve_time: null,
360
- // metadata: null,
361
- // statusDetails: {
362
- // statusCode: 3,
363
- // },
364
- // },
365
- // {
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',
387
- // direction: 'outbound',
388
- // message_type: null,
389
- // messageId: null,
390
- // is_live_agent: true,
391
- // is_deleted: false,
392
- // is_comment: false,
393
- // channel: 'whatsapp',
394
- // sent_to_vendor: true,
395
- // replyMessageId: null,
396
- // agent_name: null,
397
- // df_agent_name: null,
398
- // resolve_time: null,
399
- // metadata: null,
400
- // statusDetails: {
401
- // statusCode: 3,
402
- // },
403
- // },
404
- // {
405
- // message: 'One more time?',
406
- // id: 20223,
407
- // time: '2024-01-19T11:00:59.000Z',
408
- // direction: 'outbound',
409
- // message_type: 'text',
410
- // messageId: null,
411
- // is_live_agent: false,
412
- // is_deleted: false,
413
- // is_comment: false,
414
- // channel: 'whatsapp',
415
- // sent_to_vendor: true,
416
- // replyMessageId: null,
417
- // agent_name: null,
418
- // df_agent_name: null,
419
- // resolve_time: null,
420
- // metadata: null,
421
- // statusDetails: {
422
- // statusCode: 3,
423
- // },
424
- // },
425
- // {
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',
468
- // direction: 'outbound',
469
- // message_type: null,
470
- // messageId: null,
471
- // is_live_agent: true,
472
- // is_deleted: false,
473
- // is_comment: false,
474
- // channel: 'whatsapp',
475
- // sent_to_vendor: true,
476
- // replyMessageId: null,
477
- // agent_name: null,
478
- // df_agent_name: null,
479
- // resolve_time: null,
480
- // metadata: null,
481
- // statusDetails: {
482
- // statusCode: 3,
483
- // },
484
- // },
485
- // {
486
- // message: 'if it doesnt exists then to fetch',
487
- // id: 20208,
488
- // time: '2024-01-19T08:54:12.000Z',
489
- // direction: 'inbound',
490
- // 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,
513
- // channel: 'whatsapp',
514
- // sent_to_vendor: true,
515
- // replyMessageId: null,
516
- // agent_name: null,
517
- // df_agent_name: null,
518
- // resolve_time: null,
519
- // metadata: null,
520
- // },
521
- // {
522
- // message: 'hi',
523
- // id: 20206,
524
- // time: '2024-01-19T08:46:09.000Z',
525
- // direction: 'inbound',
526
- // message_type: 'text',
527
- // messageId: null,
528
- // is_live_agent: true,
529
- // is_deleted: false,
530
- // is_comment: false,
531
- // channel: 'whatsapp',
532
- // sent_to_vendor: true,
533
- // replyMessageId: null,
534
- // agent_name: null,
535
- // df_agent_name: null,
536
- // resolve_time: null,
537
- // metadata: null,
538
- // },
539
- // {
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,
549
- // channel: 'whatsapp',
550
- // sent_to_vendor: true,
551
- // replyMessageId: null,
552
- // agent_name: null,
553
- // df_agent_name: null,
554
- // resolve_time: null,
555
- // metadata: null,
556
- // },
557
- // {
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,
567
- // channel: 'whatsapp',
568
- // sent_to_vendor: true,
569
- // replyMessageId: null,
570
- // agent_name: null,
571
- // df_agent_name: null,
572
- // resolve_time: null,
573
- // metadata: null,
574
- // },
575
- // {
576
- // message: 'hi',
577
- // id: 20201,
578
- // time: '2024-01-19T08:40:27.000Z',
579
- // direction: 'inbound',
580
- // message_type: 'text',
581
- // messageId: null,
582
- // is_live_agent: true,
583
- // is_deleted: false,
584
- // is_comment: false,
585
- // channel: 'whatsapp',
586
- // sent_to_vendor: true,
587
- // replyMessageId: null,
588
- // agent_name: null,
589
- // df_agent_name: null,
590
- // resolve_time: null,
591
- // metadata: null,
592
- // },
593
- // {
594
- // message: 'hi',
595
- // id: 20200,
596
- // time: '2024-01-19T08:39:19.000Z',
597
- // direction: 'inbound',
598
- // message_type: 'text',
599
- // messageId: null,
600
- // is_live_agent: true,
601
- // is_deleted: false,
602
- // is_comment: false,
603
- // channel: 'whatsapp',
604
- // sent_to_vendor: true,
605
- // replyMessageId: null,
606
- // agent_name: null,
607
- // df_agent_name: null,
608
- // resolve_time: null,
609
- // metadata: null,
610
- // },
611
- // {
612
- // message: 'hi',
613
- // id: 20199,
614
- // time: '2024-01-19T08:37:26.000Z',
615
- // direction: 'inbound',
616
- // message_type: 'text',
617
- // messageId: null,
618
- // is_live_agent: true,
619
- // is_deleted: false,
620
- // is_comment: false,
621
- // channel: 'whatsapp',
622
- // sent_to_vendor: true,
623
- // replyMessageId: null,
624
- // agent_name: null,
625
- // df_agent_name: null,
626
- // resolve_time: null,
627
- // metadata: null,
628
- // },
629
- // {
630
- // message: 'hi',
631
- // id: 20198,
632
- // time: '2024-01-19T08:36:57.000Z',
633
- // direction: 'inbound',
634
- // message_type: 'text',
635
- // messageId: null,
636
- // is_live_agent: true,
637
- // is_deleted: false,
638
- // is_comment: false,
639
- // channel: 'whatsapp',
640
- // sent_to_vendor: true,
641
- // replyMessageId: null,
642
- // agent_name: null,
643
- // df_agent_name: null,
644
- // resolve_time: null,
645
- // metadata: null,
646
- // },
647
- // {
648
- // message: 'hi',
649
- // id: 20150,
650
- // time: '2024-01-18T12:47:26.000Z',
651
- // direction: 'inbound',
652
- // message_type: 'text',
653
- // messageId: null,
654
- // is_live_agent: true,
655
- // is_deleted: false,
656
- // is_comment: false,
657
- // channel: 'whatsapp',
658
- // sent_to_vendor: true,
659
- // replyMessageId: null,
660
- // agent_name: null,
661
- // df_agent_name: null,
662
- // 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,
684
- // },
685
- // },
686
- // ];
138
+ {
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',
143
+ direction: 'outbound',
144
+ message_type: 'interactive',
145
+ messageId: 'ac498221-3dd9-4b09-ad2b-826c0d1e3e29',
146
+ is_live_agent: 0,
147
+ is_deleted: 0,
148
+ is_comment: 0,
149
+ channel: 'whatsapp',
150
+ sent_to_vendor: 1,
151
+ replyMessageId: null,
152
+ agent_name: null,
153
+ df_agent_name: null,
154
+ resolve_time: null,
155
+ metadata: null,
156
+ statusDetails: {
157
+ statusCode: 3,
158
+ },
159
+ },
160
+ {
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',
165
+ direction: 'outbound',
166
+ message_type: 'interactive',
167
+ messageId: 'ac498221-3dd9-4b09-ad2b-826c0d1e3e29',
168
+ is_live_agent: 0,
169
+ is_deleted: 0,
170
+ is_comment: 0,
171
+ channel: 'whatsapp',
172
+ sent_to_vendor: 1,
173
+ replyMessageId: null,
174
+ agent_name: null,
175
+ df_agent_name: null,
176
+ resolve_time: null,
177
+ metadata: null,
178
+ statusDetails: {
179
+ statusCode: 3,
180
+ },
181
+ },
182
+ {
183
+ id: 104429,
184
+ message: 'Give Feedback',
185
+ time: '2025-09-18T02:48:51.000Z',
186
+ direction: 'inbound',
187
+ message_type: 'text',
188
+ messageId:
189
+ 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNBRTE0QjVENTkxM0ZDNDUxMkY3RTA0NEU4NzEyQzUA',
190
+ is_live_agent: 1,
191
+ is_deleted: 0,
192
+ is_comment: 0,
193
+ channel: 'whatsapp',
194
+ sent_to_vendor: 1,
195
+ replyMessageId: 'eaf92cdf-32c7-4524-a11e-dd9cdf37d717',
196
+ agent_name: null,
197
+ df_agent_name: null,
198
+ resolve_time: null,
199
+ metadata: null,
200
+ },
201
+ {
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',
206
+ direction: 'inbound',
207
+ message_type: 'order',
208
+ messageId:
209
+ 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNBRTE0QjVENTkxM0ZDNDUxMkY3RTA0NEU4NzEyQzUA',
210
+ is_live_agent: 1,
211
+ is_deleted: 0,
212
+ is_comment: 0,
213
+ channel: 'whatsapp',
214
+ sent_to_vendor: 1,
215
+ replyMessageId: 'eaf92cdf-32c7-4524-a11e-dd9cdf37d717',
216
+ agent_name: null,
217
+ df_agent_name: null,
218
+ resolve_time: null,
219
+ metadata: null,
220
+ },
221
+ {
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,
233
+ channel: 'whatsapp',
234
+ sent_to_vendor: 1,
235
+ replyMessageId: 'eaf92cdf-32c7-4524-a11e-dd9cdf37d717',
236
+ agent_name: null,
237
+ df_agent_name: null,
238
+ resolve_time: null,
239
+ metadata: null,
240
+ },
241
+ {
242
+ id: 104429,
687
243
 
688
- // const parsed = JSON.stringify(message.message);
689
- // const dotGoV2Content = parsed?.dotgoV2;
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,
254
+ channel: 'whatsapp',
255
+ sent_to_vendor: 1,
256
+ replyMessageId: 'eaf92cdf-32c7-4524-a11e-dd9cdf37d717',
257
+ agent_name: null,
258
+ df_agent_name: null,
259
+ resolve_time: null,
260
+ metadata: null,
261
+ },
262
+ {
263
+ id: 104704,
264
+ message: '3',
265
+ time: '2025-09-19T03:51:43.000Z',
266
+ direction: 'inbound',
267
+ message_type: 'text',
268
+ messageId:
269
+ 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNEMkRFMTEyQUI1OTMxQTQwMzc1Rjk1QjY4M0MyNjYA',
270
+ is_live_agent: 1,
271
+ is_deleted: 0,
272
+ is_comment: 0,
273
+ channel: 'whatsapp',
274
+ sent_to_vendor: 1,
275
+ replyMessageId: 'c39b331f-629d-4244-98a2-eeda660fcd7d',
276
+ agent_name: null,
277
+ df_agent_name: null,
278
+ resolve_time: 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
+ },
284
+ },
285
+ {
286
+ id: 104702,
287
+ message: 'Give Feedback',
288
+ time: '2025-09-19T03:51:23.000Z',
289
+ direction: 'outbound',
290
+ message_type: 'text',
291
+ messageId:
292
+ 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM0RkMzNERFODBCQTI3RTdBMUQzMUY4MzEyQ0FBNzgA',
293
+ is_live_agent: 1,
294
+ is_deleted: 0,
295
+ is_comment: 0,
296
+ channel: 'whatsapp',
297
+ sent_to_vendor: 1,
298
+ replyMessageId: '283d451e-3fe2-478c-8d7a-433a703dbab4',
299
+ agent_name: null,
300
+ df_agent_name: null,
301
+ resolve_time: 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
+ },
307
+ },
308
+ {
309
+ id: 104709,
310
+ message: 'Test',
311
+ time: '2025-09-19T04:16:06.000Z',
312
+ direction: 'inbound',
313
+ message_type: 'text',
314
+ messageId:
315
+ 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUMxQkQ0NzRGNjBBMkU2NDcwNjEzNTQ1NUJGMzYzNjIA',
316
+ is_live_agent: 1,
317
+ is_deleted: 0,
318
+ is_comment: 0,
319
+ channel: 'whatsapp',
320
+ sent_to_vendor: 1,
321
+ replyMessageId: 'f556a647-a115-453f-8461-c2caafc6aeaf',
322
+ agent_name: null,
323
+ df_agent_name: null,
324
+ resolve_time: 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
+ },
330
+ },
331
+ {
332
+ id: 104729,
333
+ message: 'Test',
334
+ time: '2025-09-19T04:36:32.000Z',
335
+ direction: 'inbound',
336
+ message_type: 'text',
337
+ messageId:
338
+ 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM1QTU1MTBBM0M2MkE1NUY3M0YyMzI1NkU1RTVEQjQA',
339
+ is_live_agent: 0,
340
+ is_deleted: 0,
341
+ is_comment: 0,
342
+ channel: 'whatsapp',
343
+ sent_to_vendor: 1,
344
+ replyMessageId:
345
+ 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNFODBDNTNBREMyRDFCODNBNEM1NzI4QTgxNERGMTgA',
346
+ agent_name: null,
347
+ df_agent_name: null,
348
+ resolve_time: 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
+ },
354
+ },
355
+ {
356
+ id: 104729,
357
+ message: 'Test',
358
+ time: '2025-09-19T04:36:32.000Z',
359
+ direction: 'inbound',
360
+ message_type: 'text',
361
+ messageId:
362
+ 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUM1QTU1MTBBM0M2MkE1NUY3M0YyMzI1NkU1RTVEQjQA',
363
+ is_live_agent: 0,
364
+ is_deleted: 0,
365
+ is_comment: 0,
366
+ channel: 'whatsapp',
367
+ sent_to_vendor: 1,
368
+ replyMessageId:
369
+ 'wamid.HBgMMjU1NzgyMjcwMDUyFQIAEhggQUNFODBDNTNBREMyRDFCODNBNEM1NzI4QTgxNERGMTgA',
370
+ agent_name: null,
371
+ df_agent_name: null,
372
+ resolve_time: null,
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}}',
377
+ },
378
+ },
379
+ ];
690
380
 
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 isJson = (itemOg) => {
382
+ let item = itemOg;
383
+ item = typeof item !== 'string' ? JSON.stringify(item) : item;
747
384
 
748
- const renderJsonMessage = () => {
385
+ try {
386
+ item = JSON.parse(item);
387
+ } catch (e) {
388
+ return false;
389
+ }
390
+ return typeof item === 'object' && item !== null;
391
+ };
392
+ const renderJsonMessageMeta = (msg) => {
749
393
  let parsedMessage;
394
+
750
395
  try {
751
- parsedMessage = JSON.parse(message.message);
396
+ parsedMessage = JSON.parse(msg.message);
752
397
  } catch (error) {
753
398
  console.error('Error parsing JSON:', error);
754
399
  return null;
755
400
  }
756
401
 
757
- console.log(message.message_type);
758
402
  const dotGoV2Content = parsedMessage?.dotgoV2;
403
+ const finalMessage = dotGoV2Content || parsedMessage;
404
+ const connector = dotGoV2Content ? 'dotgo_v2' : 'dotgo_v3';
759
405
 
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);
406
+ const calculateOrderSummary = (items) => {
407
+ if (!items || items.length === 0) return 0;
770
408
 
409
+ const totalValue = items.reduce(
410
+ (sum, item) => sum + item.amount * item.quantity,
411
+ 0
412
+ );
771
413
  const currency = items[0]?.currency || '';
772
- const count = items.length;
773
414
  const formattedTotal = totalValue.toLocaleString('en-US');
774
415
 
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([]);
416
+ return {
417
+ amount: `${currency} ${formattedTotal}`,
418
+ count: items.length,
419
+ items,
420
+ };
421
+ };
783
422
 
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
- // };
423
+ if (msg.message_type === 'order' && finalMessage?.type === 'order') {
424
+ const items = dotGoV2Content
425
+ ? finalMessage?.catalog?.order?.items || []
426
+ : finalMessage?.product_items || [];
790
427
 
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
- }
428
+ const summary = calculateOrderSummary(items);
847
429
 
848
- const totalValue = items.reduce((total, item) => {
849
- return total + item.amount * item.quantity;
850
- }, 0);
430
+ if (summary === 0) return { amount: 0, type: 'order', count: 0 };
851
431
 
852
- const currency = items[0]?.currency || '';
853
- const count = items.length;
854
- const formattedTotal = totalValue.toLocaleString('en-US');
432
+ return {
433
+ message: dotGoV2Content
434
+ ? { ...summary, type: 'order' }
435
+ : { ...summary, type: 'order', product_items: items },
436
+ connector,
437
+ };
438
+ }
855
439
 
856
440
  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
- ],
441
+ message: finalMessage,
442
+ connector,
916
443
  };
917
444
  };
918
- const [showModal, setShowModal] = useState(false);
919
- const [showModal1, setShowModal1] = useState(false);
920
445
 
921
- const renderJsonMessagex = () => {
922
- const parsedMessage = JSON.parse(x.metadata.prev_message);
923
- 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';
931
-
932
- // State to manage the visibility of checkboxes
446
+ const renderMetadataJsonMessage = (metadata) => {
447
+ let parsedMessage;
448
+ console.log(metadata);
449
+ try {
450
+ parsedMessage = JSON.parse(metadata.prev_message);
451
+ } catch (error) {
452
+ console.error('Error parsing JSON:', error);
453
+ return null;
454
+ }
933
455
 
934
- // Handler function for the checkbox change event
456
+ const dotGoV2Content = parsedMessage?.dotgoV2;
457
+ const finalMessage = dotGoV2Content || parsedMessage;
458
+ const connector = dotGoV2Content ? 'dotgo_v2' : 'dotgo_v3';
459
+ console.log({ finalMessage });
460
+
461
+ const calculateOrderSummary = (items) => {
462
+ console.log({ items });
463
+ if (!items || items.length === 0) return 0;
464
+
465
+ const totalValue = items.reduce(
466
+ (sum, item) => sum + item.amount * item.quantity,
467
+ 0
468
+ );
469
+ const currency = items[0]?.currency || '';
470
+ const formattedTotal = totalValue.toLocaleString('en-US');
935
471
 
936
- const [currentStep, setCurrentStep] = useState(1);
472
+ console.log({ formattedTotal });
473
+ return {
474
+ amount: `${currency} ${formattedTotal}`,
475
+ count: items.length,
476
+ items,
477
+ };
478
+ };
937
479
 
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 });
480
+ if (finalMessage?.type === 'order') {
481
+ const items = dotGoV2Content
482
+ ? finalMessage?.catalog?.order?.items || []
483
+ : finalMessage?.product_items || [];
484
+
485
+ const summary = calculateOrderSummary(items);
486
+ console.log({ summary });
487
+ if (summary === 0) return { amount: 0, type: 'order', count: 0 };
488
+
489
+ return {
490
+ message: dotGoV2Content
491
+ ? { ...summary, type: 'order' }
492
+ : { ...summary, type: 'order', product_items: items },
493
+ connector,
494
+ };
495
+ }
954
496
 
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',
497
+ return {
498
+ message: finalMessage,
499
+ connector,
500
+ };
963
501
  };
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
502
 
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);
503
+ const determineMetadataMessageType = (metadata) => {
504
+ if (metadata && metadata?.prev_message) {
505
+ if (isJson(metadata?.prev_message) === true) {
506
+ return renderMetadataJsonMessage(metadata);
507
+ }
508
+ return metadata.prev_message;
509
+ }
510
+ };
511
+ const determineMetadataIsInteractive = (metadata) => {
512
+ if (metadata && metadata?.prev_message) {
513
+ if (isJson(metadata?.prev_message) === true) {
514
+ return true;
515
+ }
516
+ return false;
517
+ }
518
+ };
1077
519
  return (
1078
520
  <>
1079
521
  <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
522
 
1448
- *ORDER ID: 191*
1449
-
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>
523
+ {metaQuickReply.map((msg, idx) =>
524
+ msg.message_type !== 'text' ? (
1516
525
  <BmChat.Details
1517
- state="outbound"
1518
- session="sms"
526
+ key={msg.id || idx} // Prefer a stable unique id if available
527
+ state={msg.direction}
528
+ session="bot"
1519
529
  displayTime={<p>12:00pm</p>}
1520
530
  status="sent"
1521
- sessionDetails={{
1522
- message: <h3>Session Message</h3>,
1523
- time: <p>12:00pm</p>,
1524
- }}
531
+ type={msg.message_type}
532
+ sessionTimeline={{ message: <p>12:00pm</p> }}
533
+ style={{ margin: '-0.6% 0 0 0' }}
534
+ metadata={determineMetadataMessageType(msg.metadata)}
535
+ isInteractive={determineMetadataIsInteractive(msg.metadata)}
1525
536
  >
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>
537
+ {renderJsonMessageMeta(msg)}
1540
538
  </BmChat.Details>
539
+ ) : (
1541
540
  <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"
541
+ key={msg.id || idx} // Prefer a stable unique id if available
542
+ state={msg.direction}
1563
543
  session="bot"
1564
544
  displayTime={<p>12:00pm</p>}
1565
545
  status="sent"
546
+ type="text"
547
+ sessionTimeline={{ message: <p>12:00pm</p> }}
548
+ style={{ margin: '-0.6% 0 0 0' }}
549
+ metadata={determineMetadataMessageType(msg.metadata)}
550
+ isInteractive={determineMetadataIsInteractive(msg.metadata)}
1566
551
  >
1567
- <p>Outbound Text Message</p>
552
+ <p>{msg.message}</p>
1568
553
  </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>
554
+ )
555
+ )}
1912
556
  </>
1913
557
  );
1914
558
  };