beem-component 2.1.18 → 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,1678 +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
445
 
920
- const renderJsonMessagex = () => {
921
- const parsedMessage = JSON.parse(x.metadata.prev_message);
922
- const dotGoV2Content = parsedMessage?.dotgoV2;
923
- console.log({ parsedMessage });
924
- console.log({ dotGoV2Content });
925
- return dotGoV2Content;
926
- };
927
- // console.log(data);
928
- const image =
929
- 'https://media4.giphy.com/media/v1.Y2lkPTc5MGI3NjExc2w1ZnI0OW5xdHk4eXU3bXg3ODFmMmxpZThnYmF2bnNudDN4dXlmaiZlcD12MV9naWZzX3NlYXJjaCZjdD1n/sGsoN9tI8a1k04pNcf/giphy.webp';
930
-
931
- // 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
+ }
932
455
 
933
- // 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');
934
471
 
935
- const [currentStep, setCurrentStep] = useState(1);
472
+ console.log({ formattedTotal });
473
+ return {
474
+ amount: `${currency} ${formattedTotal}`,
475
+ count: items.length,
476
+ items,
477
+ };
478
+ };
936
479
 
937
- // const appointmentDetails = {
938
- // title: 'Consultation',
939
- // duration: '30 mins',
940
- // };
941
- // const [selected, setSelected] = useState('');
942
- // const slots = [
943
- // {
944
- // label: '10:00 AM - 10:30 AM',
945
- // value: { startDate: '10:00 AM', endDate: '10:30 AM' },
946
- // },
947
- // {
948
- // label: '10:30 AM - 11:10 AM',
949
- // value: { startDate: '10:30 AM', endDate: '11:00 AM' },
950
- // },
951
- // ];
952
- // 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
+ }
953
496
 
954
- const formData = {
955
- departmentName: 'Marketing',
956
- resourceName: 'John Doe',
957
- date: new Date(),
958
- timeSlot: '09:00 - 09:30',
959
- name: 'Jane Smith',
960
- phone: '+1234567890',
961
- email: 'jane.smith@example.com',
497
+ return {
498
+ message: finalMessage,
499
+ connector,
500
+ };
962
501
  };
963
- const slots = [
964
- {
965
- id: 'slot-1', // ⚠️ id is required
966
- label: '10:00 AM - 10:30 AM',
967
- value: { startDate: '10:00 AM', endDate: '10:30 AM' },
968
- },
969
- // {
970
- // id: 'slot-2',
971
- // label: '10:30 AM - 11:10 AM',
972
- // value: { startDate: '10:30 AM', endDate: '11:10 AM' },
973
- // },
974
- // {
975
- // id: 'slot-3',
976
- // label: '11:10 AM - 11:50 AM',
977
- // value: { startDate: '11:10 AM', endDate: '11:50 AM' },
978
- // },
979
- // {
980
- // id: 'slot-4',
981
- // label: '11:50 AM - 12:30 PM',
982
- // value: { startDate: '11:50 AM', endDate: '12:30 PM' },
983
- // },
984
- // {
985
- // id: 'slot-5',
986
- // label: '12:30 PM - 1:10 PM',
987
- // value: { startDate: '12:30 PM', endDate: '1:10 PM' },
988
- // },
989
- // {
990
- // id: 'slot-6',
991
- // label: '1:10 PM - 1:50 PM',
992
- // value: { startDate: '1:10 PM', endDate: '1:50 PM' },
993
- // },
994
- // {
995
- // id: 'slot-7',
996
- // label: '1:50 PM - 2:30 PM',
997
- // value: { startDate: '1:50 PM', endDate: '2:30 PM' },
998
- // },
999
- // {
1000
- // id: 'slot-8',
1001
- // label: '2:30 PM - 3:10 PM',
1002
- // value: { startDate: '2:30 PM', endDate: '3:10 PM' },
1003
- // },
1004
- // {
1005
- // id: 'slot-9',
1006
- // label: '3:10 PM - 3:50 PM',
1007
- // value: { startDate: '3:10 PM', endDate: '3:50 PM' },
1008
- // },
1009
- // {
1010
- // id: 'slot-10',
1011
- // label: '3:50 PM - 4:30 PM',
1012
- // value: { startDate: '3:50 PM', endDate: '4:30 PM' },
1013
- // },
1014
- // {
1015
- // id: 'slot-11',
1016
- // label: '4:30 PM - 5:10 PM',
1017
- // value: { startDate: '4:30 PM', endDate: '5:10 PM' },
1018
- // },
1019
- {
1020
- id: 'slot-12',
1021
- label: '5:10 PM - 5:50 PM',
1022
- value: { startDate: '5:10 PM', endDate: '5:50 PM' },
1023
- },
1024
- ];
1025
- const sampleAppointmentTypes = [
1026
- {
1027
- id: 1,
1028
- name: 'ConsulTation Call',
1029
- description: 'Discuss project requirements and timelines.',
1030
- price: 0,
1031
- color: '#3b82f6', // blue
1032
- isActive: true,
1033
- location: 'Virtual',
1034
- paymentRequired: 'true',
1035
- selectedResources: [],
1036
- address: '',
1037
- duration: '60', // in minutes
1038
- guest_limit: '2', // max number of guests allowed
1039
- },
1040
- {
1041
- id: 2,
1042
- name: 'Strategy Session',
1043
- description: 'Deep dive session for business strategy and growth.',
1044
- price: 150,
1045
- color: '#10b981', // green
1046
- isActive: true,
1047
- location: 'Physical',
1048
- paymentRequired: 'true',
1049
- selectedResources: [{ id: 1 }],
1050
- address: '456 Innovation Avenue, Tech City',
1051
- duration: '187', // in minutes
1052
- guest_limit: '5', // max number of guests allowed
1053
- },
1054
- {
1055
- id: 3,
1056
- name: 'Follow-up Meeting',
1057
- description: 'Review progress and next steps with the team.',
1058
- price: 75,
1059
- color: '#f59e0b', // amber
1060
- isActive: false,
1061
- location: 'Virtual',
1062
- paymentRequired: 'true',
1063
- selectedResources: [{ id: 1 }, { id: 2 }],
1064
- address: '',
1065
- duration: '30', // in minutes
1066
- },
1067
- ];
1068
502
 
1069
- const [selectedSlotId, setSelectedSlotId] = useState(null);
1070
- console.log({ selectedSlotId });
1071
- const imgs = 'https://i.imgur.com/HiAzUHl.jpeg';
1072
- const [activeTab, setActiveTab] = useState('departments');
1073
- const handleView = (id) => console.log('View', id);
1074
- const handleDelete = (type) => console.log('Delete', type);
1075
- 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
+ };
1076
519
  return (
1077
520
  <>
1078
521
  <GlobalStyle />
1079
- <div>
1080
- <BmButton onClick={() => setShowModal(!showModal)}>Click Me!</BmButton>
1081
- </div>
1082
- <BmModal show={showModal} onHide={() => setShowModal(false)}>
1083
- <BmModal.Header closeButton>
1084
- <h2>Header</h2>
1085
- </BmModal.Header>
1086
- <BmModal.Body>
1087
- <p>This is a body</p>
1088
- </BmModal.Body>
1089
- <BmModal.Footer>
1090
- <p>This is a footer</p>
1091
- </BmModal.Footer>
1092
- </BmModal>
1093
-
1094
- <div
1095
- style={{
1096
- display: 'flex',
1097
- flexDirection: 'column',
1098
- gap: '2rem',
1099
- width: '50%',
1100
- }}
1101
- >
1102
- <BmCustomTab
1103
- value={activeTab}
1104
- onValueChange={setActiveTab}
1105
- tabs={tabs}
1106
- />
1107
- <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
1108
- {sampleAppointmentTypes.map((type) => (
1109
- <BmHorizontalCard
1110
- name={type.name}
1111
- 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"
1112
- price={type.price}
1113
- color={type.color}
1114
- isActive={type.isActive}
1115
- location={type.location}
1116
- paymentRequired={type.paymentRequired}
1117
- selectedResources={type.selectedResources}
1118
- address={type.address}
1119
- duration={type.duration}
1120
- guest_limit={type.guest_limit}
1121
- key={type.id}
1122
- onView={() => handleView(type.id)}
1123
- onDelete={() => handleDelete(type)}
1124
- onCopyLink={() => handleCopyLink(type.id)}
1125
- data={type}
1126
- editToolTip="edit appointment type"
1127
- deleteToolTip="delete appointment type"
1128
- copyToolTip="copy appointment type link"
1129
- />
1130
- ))}
1131
- </div>
1132
-
1133
- <div style={{ width: '100%', maxWidth: '900px', margin: '2rem auto' }}>
1134
- <div style={{ maxWidth: 400, margin: '2rem auto' }}>
1135
- <BmDepartmentCard
1136
- borderTopColor="#3b82f6" // blue
1137
- isActive="true"
1138
- name="Radiology Department"
1139
- description="Handles imaging and diagnostic scans"
1140
- resourcesCount={0}
1141
- onEdit={() => alert('Edit department')}
1142
- onDelete={() => alert('Delete department')}
1143
- EditIcon={EditIcon}
1144
- DeleteIcon={DeleteIcon}
1145
- />
1146
-
1147
- <BmDepartmentCard
1148
- borderTopColor="#f97316" // orange
1149
- isActive={false}
1150
- name="Cardiology Department"
1151
- description="Heart and blood vessel treatments"
1152
- resourcesCount={5}
1153
- onEdit={() => alert('Edit department')}
1154
- onDelete={() => alert('Delete department')}
1155
- EditIcon={EditIcon}
1156
- DeleteIcon={DeleteIcon}
1157
- />
1158
- <BmResourceCard
1159
- borderTopColor="#10b981"
1160
- isActive="true"
1161
- name="Dr. Jane Smith"
1162
- type="staff"
1163
- resourceBadges={[
1164
- {
1165
- label: 'Google Synced',
1166
- color: '#10b981',
1167
- icon: CalendarTodayIcon,
1168
- },
1169
- ]}
1170
- departmentName="Radiology"
1171
- email="jane.smith@example.com"
1172
- phone="+123456789"
1173
- availability="Mon-Fri 9am-5pm"
1174
- onEdit={() => alert('Edit resource')}
1175
- onDelete={() => alert('Delete resource')}
1176
- EditIcon={EditIcon}
1177
- DeleteIcon={DeleteIcon}
1178
- />
1179
- </div>
1180
- </div>
1181
- <div>
1182
- <BmInfoPanel.SectionSummary
1183
- iconColor="#33B1BA"
1184
- textColor="#fcba03"
1185
- icon={CalendarTodayOutlinedIcon}
1186
- title={formData.departmentName}
1187
- subtitle="Department"
1188
- // iconBackgroundColor
1189
- />
1190
- <AlertBox
1191
- icon={AccessTimeIcon}
1192
- themeColor="#DC2626"
1193
- title="Payment Error"
1194
- description="We couldn't process your payment. Please try again later or contact support."
1195
- />
1196
- <BmCustomCardTitle
1197
- icon={CalendarTodayOutlinedIcon}
1198
- themeColor="#33B1BA"
1199
- title="Book Your Medical Appointment"
1200
- description="Schedule a 30-minute consultation with our healThcare specialists"
1201
- variant="booking"
1202
- withStripe
1203
- imageSrc={imgs}
1204
- />
1205
- </div>
1206
- <div>
1207
- <BmInfoPanel.Section
1208
- title="Appointment Details"
1209
- icon={CalendarTodayOutlinedIcon}
1210
- backgroundColor="#fcba03"
1211
- iconColor="#fcba03"
1212
- />
1213
- <BmCustomCardTitle
1214
- icon={CheckIcon}
1215
- themeColor="#33B1BA"
1216
- title="Appointment Confirmed!"
1217
- description="Your booking has been successfully scheduled"
1218
- variant="confirmation"
1219
- withStripe
1220
- />
1221
- </div>
1222
- </div>
1223
- <div style={{ maxWidth: '600px', margin: '2rem auto' }}>
1224
- <div style={{ padding: '2rem' }}>
1225
- <h1>Progress Indicator Demo</h1>
1226
-
1227
- <BmProgressIndicator
1228
- steps={steps}
1229
- currentStep={currentStep}
1230
- primaryColor="#10b981"
1231
- className="green" // Optional: for color themes defined in the styled component
1232
- />
1233
-
1234
- {/* <div style={{ marginTop: '2rem' }}>
1235
- <button
1236
- type="button"
1237
- onClick={() => setCurrentStep((prev) => Math.max(prev - 1, 0))}
1238
- >
1239
- Previous
1240
- </button>
1241
- <button
1242
- type="button"
1243
- onClick={() =>
1244
- setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1))
1245
- }
1246
- >
1247
- Next
1248
- </button>
1249
- </div> */}
1250
- </div>
1251
- <BmCardv2 borderColor="#33B1BA" borderWidth="1.5px">
1252
- <BmCardv2.Header>
1253
- <BmCardv2.Title>Profile</BmCardv2.Title>
1254
- <BmCardv2.Description>
1255
- Manage your settings below
1256
- </BmCardv2.Description>
1257
- </BmCardv2.Header>
1258
- <BmCardv2.Content>
1259
- <BmSelector
1260
- data={slots}
1261
- selectedDataId={selectedSlotId}
1262
- onChange={setSelectedSlotId}
1263
- icon={AccessTimeIcon}
1264
- themeColor="#33B1BA"
1265
- />
1266
- {/* <BmInfoPanel>
1267
- // <BmInfoPanel.Section
1268
- // title="Appointment Details"
1269
- // icon={CalendarTodayIcon}
1270
- // backgroundColor="#fcba03"
1271
- // iconColor="#fcba03"
1272
- // >
1273
- <BmInfoPanel.SectionSummary
1274
- iconColor="#33B1BA"
1275
- textColor="#fcba03"
1276
- icon={CalendarTodayIcon}
1277
- title={formData.departmentName}
1278
- subtitle="Department"
1279
- // iconBackgroundColor
1280
- />
1281
- <BmInfoPanel.SectionSummary
1282
- icon={BusinessIcon}
1283
- title={formData.departmentName}
1284
- subtitle="Department"
1285
- />
1286
- </BmInfoPanel.Section>
1287
- </BmInfoPanel> */}
1288
- {/* <BmInfoPanel.Section
1289
- title="Personal Information"
1290
- icon={PersonIcon}
1291
- showDivider
1292
- dividerColor="#33b1ba"
1293
- dividerWitdh="2px"
1294
- dividerType="solid"
1295
- dividerOpacity="0.5"
1296
- >
1297
- <BmInfoPanel.Row label="Name" value={formData.name} />
1298
- <BmInfoPanel.Row label="Phone" value={formData.phone} />
1299
- <BmInfoPanel.Row label="Email" value={formData.email} />
1300
- </BmInfoPanel.Section> */}
1301
- </BmCardv2.Content>
1302
- <BmCardv2.Footer>
1303
- <BmButton
1304
- width="100%"
1305
- size="medium"
1306
- borderColor="#33b1ba33"
1307
- color="#000000"
1308
- variant="secondary"
1309
- type="button"
1310
- onClick={() => setCurrentStep((prev) => Math.max(prev - 1, 0))}
1311
- >
1312
- Cancel
1313
- </BmButton>
1314
- <BmButton
1315
- width="100%"
1316
- size="medium"
1317
- type="button"
1318
- onClick={() =>
1319
- setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1))
1320
- }
1321
- >
1322
- Save
1323
- </BmButton>
1324
- </BmCardv2.Footer>
1325
- </BmCardv2>
1326
- </div>
1327
- <div>
1328
- <BmLabelWithIcon
1329
- textColor="#fcba03"
1330
- icon={PeopleIcon}
1331
- iconColor="#fffff"
1332
- iconSize="16px"
1333
- >
1334
- <p>yooo</p>&nbsp;<h4>Team: Engineering</h4>
1335
- </BmLabelWithIcon>
1336
-
1337
- <div>
1338
- <BmSelectionNotice color="#ff6600">
1339
- This is a <strong>warning</strong> notice.
1340
- </BmSelectionNotice>
1341
- </div>
1342
- <div style={{ padding: '2rem' }}>
1343
- <h1>Progress Indicator Demo</h1>
1344
-
1345
- <BmProgressIndicator
1346
- steps={steps}
1347
- currentStep={currentStep}
1348
- primaryColor="#10b981"
1349
- className="green" // Optional: for color themes defined in the styled component
1350
- />
1351
-
1352
- <div style={{ marginTop: '2rem' }}>
1353
- <button
1354
- type="button"
1355
- onClick={() => setCurrentStep((prev) => Math.max(prev - 1, 0))}
1356
- >
1357
- Previous
1358
- </button>
1359
- <button
1360
- type="button"
1361
- onClick={() =>
1362
- setCurrentStep((prev) => Math.min(prev + 1, steps.length - 1))
1363
- }
1364
- >
1365
- Next
1366
- </button>
1367
- </div>
1368
- </div>
1369
- <BmChat.Details
1370
- key={85279}
1371
- state="inbound"
1372
- session="bot"
1373
- displayTime={<p>12:00pm</p>}
1374
- status="sent"
1375
- type="interactive"
1376
- sessionTimeline={{ message: <p>12:00pm</p> }}
1377
- style={{ margin: '-0.6% 0 0 0' }}
1378
- >
1379
- {renderOrderJsonMessage()}
1380
- </BmChat.Details>
1381
- <BmChat.Details
1382
- state="outbound"
1383
- session="bot"
1384
- sessionTimeline={{ message: <p>12:00pm</p> }}
1385
- displayTime={<p>12:00pm</p>}
1386
- status="sent"
1387
- // type="interactive"
1388
- metadata={renderJsonMessagex()}
1389
- isInteractive="true"
1390
- >
1391
- <p>{x.message}</p>
1392
- </BmChat.Details>
1393
- <BmChat.Details
1394
- state="outbound"
1395
- session="bot"
1396
- sessionTimeline={{ message: <p>12:00pm</p> }}
1397
- displayTime={<p>12:00pm</p>}
1398
- status="sent"
1399
- // type="interactive"
1400
- isInteractive="true"
1401
- >
1402
- <p style={{ whiteSpace: 'pre-line' }}>
1403
- {`*Order placed successfully!*
1404
522
 
1405
- *ORDER ID: 191*
1406
-
1407
- 1 X 16" Zuri Wig Straight Ciara @ USD 504
1408
- ,2 X 18" Zuri Wig Straight Ciara @ USD 504
1409
- ,3 X 16" Zuri Wig Straight Feza Caramel Brown @ USD 808`}
1410
- </p>
1411
- </BmChat.Details>
1412
- <BmChatAccordion Open expandIconPosition="left">
1413
- <BmChatAccordion.Title
1414
- // trailingIcon={<AbcIcon />}
1415
- // leadingIcon={<AbcIcon />}
1416
- >
1417
- <h3>tesxcxcxt</h3>
1418
- </BmChatAccordion.Title>
1419
- <BmChatAccordion.Body>
1420
- <div
1421
- style={{
1422
- marginTop: '.8571rem',
1423
- border: '.0714rem solid black',
1424
- borderRadius: '.4286rem',
1425
- padding: '.4286rem',
1426
- }}
1427
- >
1428
- <p>defdsfsdfsd</p>
1429
- <p>dsfsdfsdfdsfdsfsdf</p>
1430
- </div>
1431
- </BmChatAccordion.Body>
1432
- </BmChatAccordion>
1433
- <BmAccordion>
1434
- <BmAccordion.Title>
1435
- <h3>Information</h3>
1436
- </BmAccordion.Title>
1437
- <BmAccordion.Body>
1438
- {/* <BmChatForm> */}
1439
- <div>
1440
- <BmChatForm.Group>
1441
- <BmChatForm.Label>
1442
- <h4>Account No.</h4>
1443
- </BmChatForm.Label>
1444
- <BmChatForm.Input placeholder="Enter here" />
1445
- </BmChatForm.Group>
1446
- <BmChatForm.Group>
1447
- <BmChatForm.Label>
1448
- <h4>Preferred Language</h4>
1449
- </BmChatForm.Label>
1450
- <BmChatForm.Input placeholder="Enter here" />
1451
- </BmChatForm.Group>
1452
- </div>
1453
- {/* </BmChatForm> */}
1454
- </BmAccordion.Body>
1455
- </BmAccordion>
1456
- <BmTag
1457
- // variant="danger"
1458
- // textColor="#17b26a"
1459
- bgColor="#17b26a"
1460
- // color="black"
1461
- closeButton
1462
- dot
1463
- // size="xsmall"
1464
- >
1465
- <p>Pending</p>
1466
- </BmTag>
1467
- <BmTag dot>
1468
- <p>Bot</p>
1469
- </BmTag>
1470
- </div>
1471
- <BmChat>
1472
- <BmChat.Body>
523
+ {metaQuickReply.map((msg, idx) =>
524
+ msg.message_type !== 'text' ? (
1473
525
  <BmChat.Details
1474
- state="outbound"
1475
- session="sms"
526
+ key={msg.id || idx} // Prefer a stable unique id if available
527
+ state={msg.direction}
528
+ session="bot"
1476
529
  displayTime={<p>12:00pm</p>}
1477
530
  status="sent"
1478
- sessionDetails={{
1479
- message: <h3>Session Message</h3>,
1480
- time: <p>12:00pm</p>,
1481
- }}
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)}
1482
536
  >
1483
- <p>
1484
- Inbound Text kjflksdjfskld jsdlkfjsdlkf jsdlk jfsdlkjf lkjfljflsj
1485
- ljfljfsjfsofoewjfwej owe we fwofj kwefoweo fiweo ieoi joi fweo
1486
- fweof welkf jwelfk jweoi fejwof wejfl kwejf oiwej foewijf lwekjf
1487
- oewi fjlwej foMessage 1 sdkfjdslkjf lksdfj sodifj owijfiwoe
1488
- jfwoegh woj fpieojwoighjwoei hgwoihgwoij giej
1489
- foewifjweokjgwlgkjwqeli jgowegihweogwhelgkjwe goiwhroihjg oewjfwle
1490
- fjwelfjweoighwoei ghwei gjqepif jopqejfkljgwoighwoi ghwoiejh goiwg
1491
- howej lkwejgwogihwelo kjwoei gjiejf pqeif jpqeofjeiow ghorwughwlkj
1492
- fiepofj peqwjfpoqejf pioewj gurehglowjk gfwqefjwpoiegpwogijwrp
1493
- ogjwpo gjwp kfpoewkf opwegjkpwoj wig hioqwe
1494
- jfqepijfopqekfqpoefkqpoekfqpoe jpqoe jgiqeghj quioehgqoeijg
1495
- qekfjqepofk poqef pqoe fjepiof jqeifh qeif h
1496
- </p>
537
+ {renderJsonMessageMeta(msg)}
1497
538
  </BmChat.Details>
539
+ ) : (
1498
540
  <BmChat.Details
1499
- state="inbound"
1500
- session="live"
1501
- displayTime={<p>12:00pm</p>}
1502
- status="sent"
1503
- fileName={<p>chat.png</p>}
1504
- src="https://i.postimg.cc/ydq8vSx3/cyberpunk-2077-samurai-minimalist-uhdpaper-com-4-K-5-1333-min-2.jpg"
1505
- sessionDetails={{
1506
- message: <h3>Session Message</h3>,
1507
- time: <p>12:00pm</p>,
1508
- }}
1509
- />
1510
- <BmChat.Details
1511
- state="inbound"
1512
- session="live"
1513
- displayTime={<p>10:00am</p>}
1514
- status="failed"
1515
- fileName={<p>file.csv</p>}
1516
- file={image}
1517
- />
1518
- <BmChat.Details
1519
- state="outbound"
541
+ key={msg.id || idx} // Prefer a stable unique id if available
542
+ state={msg.direction}
1520
543
  session="bot"
1521
544
  displayTime={<p>12:00pm</p>}
1522
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)}
1523
551
  >
1524
- <p>Outbound Text Message</p>
552
+ <p>{msg.message}</p>
1525
553
  </BmChat.Details>
1526
- <BmChat.Details
1527
- state="outbound"
1528
- session="live"
1529
- displayTime={<p>12:00pm</p>}
1530
- status="sent"
1531
- fileName={<p>chat.png</p>}
1532
- src={image}
1533
- />
1534
- <BmChat.Details
1535
- state="outbound"
1536
- session="live"
1537
- displayTime={<p>10:00am</p>}
1538
- status="failed"
1539
- fileName={<p>file.csv</p>}
1540
- file={image}
1541
- link={image}
1542
- onDownload={() => {
1543
- console.log('sdfsfs');
1544
- }}
1545
- />
1546
- </BmChat.Body>
1547
- {/* <BmChat.Footer>
1548
- <div className="chat-footer">
1549
- <BmIcons icon={<EmojiEmotionsIcon />} size="xlarge" />
1550
- <BmIcons icon={<AttachFileIcon />} size="xlarge" />
1551
- <BmIcons icon={<QuickreplyIcon />} size="xlarge" />
1552
- <BmInput placeholder="Enter Message" style={{ flex: '1' }} />
1553
- <BmIcons icon={<SendIcon />} size="xlarge" />
1554
- </div>
1555
- </BmChat.Footer> */}
1556
- {/* <div className="w-20">
1557
- <BmButton size="xsmall" variant="neutral">
1558
- Hello
1559
- </BmButton>
1560
- <BmButton size="xsmall" variant="secondary">
1561
- Hello
1562
- </BmButton>
1563
- <BmButton size="xsmall" variant="primary">
1564
- Hello
1565
- </BmButton>
1566
- <BmButton size="xsmall" variant="destructive">
1567
- Hello
1568
- </BmButton>
1569
- <BmButton size="xsmall" variant="tertiary">
1570
- Hello
1571
- </BmButton>
1572
- <BmButton size="xsmall" variant="success">
1573
- Hello
1574
- </BmButton>
1575
- <BmButton variant="success">Test</BmButton>
1576
- <div style={{ width: '30%' }}>
1577
- <BmButtonDropDown size="xsmall">Test</BmButtonDropDown>
1578
- </div>
1579
- <BmBtnIcon icon={<AbcIcon />} size="xsmall" />
1580
- </div>
1581
- <br />
1582
- <div style={{ width: '50%' }}>
1583
- <BmButton size="xsmall" color="black" variant="neutral">
1584
- Hello
1585
- </BmButton>
1586
- </div>
1587
- <BmButton size="small" variant="secondary">
1588
- Hello
1589
- </BmButton>
1590
- <BmButton size="medium" variant="primary">
1591
- Hello
1592
- </BmButton>
1593
- <BmButton variant="success">Hello</BmButton>
1594
- <BmButton size="large" variant="destructive">
1595
- Hello
1596
- </BmButton> */}
1597
- {/* <BmButton size="small" variant="tertiary">
1598
- Hello
1599
- </BmButton>
1600
- <BmButton size="large" variant="success">
1601
- Hello
1602
- </BmButton> */}
1603
- <BmChat.Details
1604
- state="outbound"
1605
- session="bot"
1606
- sessionTimeline={{ message: <p>12:00pm</p> }}
1607
- displayTime={<p>12:00pm</p>}
1608
- status="sent"
1609
- type="interactive"
1610
- >
1611
- {renderJsonMessage()}
1612
- {/* {{
1613
- type: 'list',
1614
- title: 'Great 😁!',
1615
- body: 'Please choose how you would want to redeem your points today in store purchase?',
1616
- msgid: 'redeemPoints',
1617
- globalButtons: [
1618
- {
1619
- type: 'text',
1620
- title: 'Redeem Points',
1621
- },
1622
- ],
1623
- items: [
1624
- {
1625
- title: 'first Section',
1626
- subtitle: 'first Subtitle',
1627
- options: [
1628
- {
1629
- type: 'text',
1630
- title: '1000 pts for 10000Tsh',
1631
- description: '',
1632
- postbackText: 'section 1 row 1 postback payload',
1633
- },
1634
- {
1635
- type: 'text',
1636
- title: '5000 pts for 5000Tsh',
1637
- description: '',
1638
- postbackText: 'section 1 row 2 postback payload',
1639
- },
1640
- {
1641
- type: 'text',
1642
- title: '10000 pts for 100000Tsh',
1643
- description: '',
1644
- postbackText: 'section 1 row 3 postback payload',
1645
- },
1646
- {
1647
- type: 'text',
1648
- title: 'Back',
1649
- description: '',
1650
- postbackText: 'section 1 row 4 postback payload',
1651
- },
1652
- ],
1653
- },
1654
- ],
1655
- }} */}
1656
- {/* <p>
1657
- Outbound Text Message that i wanteds to send but i could not send
1658
- it as whatsapp was down for almost one whole hour but i wonder how
1659
- wide this message will look and will we have to match it if it
1660
- goes this wide mhhhhhh interesting
1661
- </p> */}
1662
- </BmChat.Details>
1663
-
1664
- <BmChat.Details
1665
- state="inbound"
1666
- session="bot"
1667
- sessionTimeline={{ message: <p>12:00pm</p> }}
1668
- displayTime={<p>12:00pm</p>}
1669
- status="sent"
1670
- type="interactive"
1671
- >
1672
- {{
1673
- type: 'quick_reply',
1674
- msgid: 'redeemMenu',
1675
- content: {
1676
- type: 'text',
1677
- url: 'https://i.imgur.com/BZylAb1.jpeg',
1678
- header: 'HELOOOOOOOOOO',
1679
- text: 'In Beem Rewards You can redeem or check points that you have accumulated anytime.\n\nSo, what do you want to do today?',
1680
- caption: '',
1681
- },
1682
- options: [
1683
- {
1684
- type: 'text',
1685
- title: 'Reedem points',
1686
- postbackText: 'FMCG-defined-postback1',
1687
- },
1688
- {
1689
- type: 'text',
1690
- title: 'Check points',
1691
- postbackText: 'FMCG-defined-postback2',
1692
- },
1693
- {
1694
- type: 'text',
1695
- title: 'Back',
1696
- postbackText: 'FMCG-defined-postback3',
1697
- },
1698
- ],
1699
- }}
1700
- {/* <p>
1701
- Outbound Text Message that i wanteds to send but i could not send
1702
- it as whatsapp was down for almost one whole hour but i wonder how
1703
- wide this message will look and will we have to match it if it
1704
- goes this wide mhhhhhh interesting
1705
- </p> */}
1706
- </BmChat.Details>
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: 'SaifeeBot',
1718
- content: {
1719
- type: 'image',
1720
- header: 'HELOOOOOOOOOO',
1721
- url: 'https://i.postimg.cc/ydq8vSx3/cyberpunk-2077-samurai-minimalist-uhdpaper-com-4-K-5-1333-min-2.jpg',
1722
- 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',
1723
- caption: 'Powered by Beem',
1724
- },
1725
- options: [
1726
- {
1727
- type: 'text',
1728
- title: 'English',
1729
- postbackText: 'dev-defined-postback1',
1730
- },
1731
- {
1732
- type: 'text',
1733
- title: 'Swahili',
1734
- postbackText: 'dev-defined-postback2',
1735
- },
1736
- ],
1737
- }}
1738
-
1739
- {/* <p>
1740
- Outbound Text Message that i wanteds to send but i could not send
1741
- it as whatsapp was down for almost one whole hour but i wonder how
1742
- wide this message will look and will we have to match it if it
1743
- goes this wide mhhhhhh interesting
1744
- </p> */}
1745
- </BmChat.Details>
1746
-
1747
- <BmContactCard />
1748
- </BmChat>
1749
- {/* <BmChat>
1750
- <BmChat.Body>
1751
- {msg.map((ms, index) => (
1752
- <BmContactCard isVisible={checkboxVisibility[index]}>
1753
- <BmContactCard.Profile>
1754
- <BmProfileIcon
1755
- hoverEnabled
1756
- hoverText="dfk dsflksd;"
1757
- size="medium"
1758
- multiChannel="#b6fc03"
1759
- />
1760
- </BmContactCard.Profile>
1761
- <BmContactCard.Details>
1762
- <BmContactCard.SubDetails>
1763
- <h3>Contact Names</h3>
1764
- <BmContactCheckbox
1765
- isVisible={checkboxVisibility[index]}
1766
- onChange={(event) =>
1767
- handleCheckboxChange(index, event.target.checked)
1768
- }
1769
- checked={checkboxVisibility[index]}
1770
- />
1771
- </BmContactCard.SubDetails>
1772
- <BmContactCard.SubDetails>
1773
- <p>Message text</p>
1774
- <BmCounter>10</BmCounter>
1775
- </BmContactCard.SubDetails>
1776
- <BmContactCard.SubDetails>
1777
- <BmTag variant="success">{ms.id}</BmTag>
1778
- <p>10:00 am</p>
1779
- </BmContactCard.SubDetails>
1780
- </BmContactCard.Details>
1781
- </BmContactCard>
1782
- ))}
1783
- </BmChat.Body>
1784
- </BmChat> */}
1785
- <BmChat>
1786
- <BmChat.Body>
1787
- {messages.map((ms) => {
1788
- console.log(ms);
1789
- return (
1790
- <BmChat.Details
1791
- key={ms.id}
1792
- state={ms.direction}
1793
- session="bot"
1794
- sessionTimeline={{ message: <p>12:00pm</p> }}
1795
- displayTime={<p>12:00pm</p>}
1796
- status="sent"
1797
- extension="pdf"
1798
- file={ms.message}
1799
- link={ms.message}
1800
- fileName={<p>File</p>}
1801
- type="pdf"
1802
- style={{ margin: '-0.6% 0 0 0' }}
1803
- >
1804
- <p>
1805
- <a href={ms.message}> </a>
1806
- </p>
1807
- </BmChat.Details>
1808
- );
1809
- })}
1810
- </BmChat.Body>
1811
- </BmChat>
1812
- <BmChat>
1813
- <BmChat.Body>
1814
- {messages.map((ms) => {
1815
- console.log(ms);
1816
- return (
1817
- <BmChat.Details
1818
- key={ms.id}
1819
- state={ms.direction}
1820
- session="bot"
1821
- sessionTimeline={{ message: <p>12:00pm</p> }}
1822
- displayTime={<p>12:00pm</p>}
1823
- status="sent"
1824
- file={ms.message}
1825
- link={ms.message}
1826
- fileName={<p>File</p>}
1827
- style={{ margin: '-0.6% 0 0 0' }}
1828
- extension="docx"
1829
- // state="inbound"
1830
- // session="live"
1831
- // displayTime={<p>10:00am</p>}
1832
- // status="failed"
1833
- // fileName={<p>file.csv</p>}
1834
- // file={image}
1835
- />
1836
- );
1837
- })}
1838
- </BmChat.Body>
1839
- </BmChat>
1840
- <BmAccordion expandIconPosition="right">
1841
- <BmAccordion.Title size="small">Contacts</BmAccordion.Title>
1842
- <BmAccordion.Body>
1843
- <div className="accordion-body">
1844
- <BmAccordion expandIcon="none">
1845
- <BmAccordion.Title>
1846
- <button
1847
- type="button"
1848
- onClick={() => {
1849
- console.log('click 1');
1850
- }}
1851
- >
1852
- Customers
1853
- </button>
1854
- </BmAccordion.Title>
1855
- </BmAccordion>
1856
-
1857
- <BmAccordion expandIcon="none">
1858
- <BmAccordion.Title>Reedem History</BmAccordion.Title>
1859
- </BmAccordion>
1860
- <BmAccordion expandIcon="none">
1861
- <BmAccordion.Title>Rewards</BmAccordion.Title>
1862
- </BmAccordion>
1863
- <BmAccordion expandIcon="none">
1864
- <BmAccordion.Title>Pending Redemption</BmAccordion.Title>
1865
- </BmAccordion>
1866
- </div>
1867
- </BmAccordion.Body>
1868
- </BmAccordion>
554
+ )
555
+ )}
1869
556
  </>
1870
557
  );
1871
558
  };