@botonic/plugin-flow-builder 0.41.1-alpha.0 → 0.41.1-alpha.2
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/lib/cjs/content-fields/flow-carousel.js +18 -7
- package/lib/cjs/content-fields/flow-carousel.js.map +1 -1
- package/lib/esm/content-fields/flow-carousel.js +19 -8
- package/lib/esm/content-fields/flow-carousel.js.map +1 -1
- package/package.json +2 -2
- package/src/content-fields/flow-carousel.tsx +39 -8
|
@@ -6,6 +6,7 @@ const core_1 = require("@botonic/core");
|
|
|
6
6
|
const react_1 = require("@botonic/react");
|
|
7
7
|
const content_fields_base_1 = require("./content-fields-base");
|
|
8
8
|
const flow_element_1 = require("./flow-element");
|
|
9
|
+
const DEFAULT_TEXT_MESSAGE = 'These are the options';
|
|
9
10
|
class FlowCarousel extends content_fields_base_1.ContentFieldsBase {
|
|
10
11
|
constructor() {
|
|
11
12
|
super(...arguments);
|
|
@@ -19,17 +20,20 @@ class FlowCarousel extends content_fields_base_1.ContentFieldsBase {
|
|
|
19
20
|
return newCarousel;
|
|
20
21
|
}
|
|
21
22
|
static fromAIAgent(id, carouselMessage, request) {
|
|
22
|
-
const
|
|
23
|
-
const isValid = carouselMessage.content.
|
|
24
|
-
!carouselMessage.content.elements.some(element => element.button.payload) &&
|
|
23
|
+
const areAllButtonsValid = () => {
|
|
24
|
+
const isValid = !carouselMessage.content.elements.some(element => element.button.payload) &&
|
|
25
25
|
carouselMessage.content.elements.every(element => element.button.url);
|
|
26
26
|
if (!isValid) {
|
|
27
27
|
console.warn('Cannot use WhatsappInteractiveMediaCarousel for Whatsapp created by AIAgent', carouselMessage.content);
|
|
28
28
|
}
|
|
29
29
|
return isValid;
|
|
30
30
|
};
|
|
31
|
-
if ((0, core_1.isWhatsapp)(request.session) &&
|
|
32
|
-
|
|
31
|
+
if ((0, core_1.isWhatsapp)(request.session) && areAllButtonsValid()) {
|
|
32
|
+
if (carouselMessage.content.elements.length === 1) {
|
|
33
|
+
const element = carouselMessage.content.elements[0];
|
|
34
|
+
// TODO: Add a new fromAIAgent method in FlowWhatsappCtaUrlButtonNode to create a WhatsappCTAUrlButton from an AIAgent message
|
|
35
|
+
return ((0, jsx_runtime_1.jsx)(react_1.WhatsappCTAUrlButton, { body: element.title, headerType: react_1.WhatsappCTAUrlHeaderType.Image, headerImage: element.image, displayText: element.button.text, url: element.button.url }, id));
|
|
36
|
+
}
|
|
33
37
|
return ((0, jsx_runtime_1.jsx)(react_1.WhatsappInteractiveMediaCarousel, { cards: carouselMessage.content.elements.map(element => {
|
|
34
38
|
const buttonText = element.button.text;
|
|
35
39
|
const buttonUrl = element.button.url;
|
|
@@ -38,12 +42,17 @@ class FlowCarousel extends content_fields_base_1.ContentFieldsBase {
|
|
|
38
42
|
text: element.title,
|
|
39
43
|
action: { buttonText, buttonUrl, imageLink },
|
|
40
44
|
};
|
|
41
|
-
}), textMessage: carouselMessage.content.text }));
|
|
45
|
+
}), textMessage: carouselMessage.content.text || DEFAULT_TEXT_MESSAGE }));
|
|
42
46
|
}
|
|
43
47
|
return ((0, jsx_runtime_1.jsx)(react_1.Carousel, { children: carouselMessage.content.elements.map((element, index) => flow_element_1.FlowElement.fromAIAgent(`${id}-element-${index}`, element).toBotonic(id)) }, id));
|
|
44
48
|
}
|
|
45
49
|
toBotonic(id, request) {
|
|
46
50
|
if ((0, core_1.isWhatsapp)(request.session)) {
|
|
51
|
+
// TODO: Improve this logic to ensure what to do if the buttons are not CTA URL buttons
|
|
52
|
+
if (this.elements.length === 1) {
|
|
53
|
+
const element = this.elements[0];
|
|
54
|
+
return ((0, jsx_runtime_1.jsx)(react_1.WhatsappCTAUrlButton, { body: element.title, headerType: react_1.WhatsappCTAUrlHeaderType.Image, headerImage: element.image, displayText: element.button.text, url: element.button.url }, id));
|
|
55
|
+
}
|
|
47
56
|
return ((0, jsx_runtime_1.jsx)(react_1.WhatsappInteractiveMediaCarousel, { cards: this.elements.map(element => {
|
|
48
57
|
var _a, _b;
|
|
49
58
|
const buttonText = ((_a = element.button) === null || _a === void 0 ? void 0 : _a.text) || '';
|
|
@@ -53,7 +62,9 @@ class FlowCarousel extends content_fields_base_1.ContentFieldsBase {
|
|
|
53
62
|
text: element.title,
|
|
54
63
|
action: { buttonText, buttonUrl, imageLink },
|
|
55
64
|
};
|
|
56
|
-
}),
|
|
65
|
+
}),
|
|
66
|
+
// TODO: Add the text message in flow builder frontend and take it from the carousel node with different languages
|
|
67
|
+
textMessage: DEFAULT_TEXT_MESSAGE }));
|
|
57
68
|
}
|
|
58
69
|
return ((0, jsx_runtime_1.jsx)(react_1.Carousel, { children: this.elements.map(element => element.toBotonic(id)) }, id));
|
|
59
70
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flow-carousel.js","sourceRoot":"","sources":["../../../src/content-fields/flow-carousel.tsx"],"names":[],"mappings":";;;;AAAA,wCAA2D;AAC3D,
|
|
1
|
+
{"version":3,"file":"flow-carousel.js","sourceRoot":"","sources":["../../../src/content-fields/flow-carousel.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { isWhatsapp } from '@botonic/core';
|
|
3
|
-
import { Carousel, WhatsappInteractiveMediaCarousel, } from '@botonic/react';
|
|
3
|
+
import { Carousel, WhatsappCTAUrlButton, WhatsappCTAUrlHeaderType, WhatsappInteractiveMediaCarousel, } from '@botonic/react';
|
|
4
4
|
import { ContentFieldsBase } from './content-fields-base';
|
|
5
5
|
import { FlowElement } from './flow-element';
|
|
6
|
+
const DEFAULT_TEXT_MESSAGE = 'These are the options';
|
|
6
7
|
export class FlowCarousel extends ContentFieldsBase {
|
|
7
8
|
constructor() {
|
|
8
9
|
super(...arguments);
|
|
@@ -16,17 +17,20 @@ export class FlowCarousel extends ContentFieldsBase {
|
|
|
16
17
|
return newCarousel;
|
|
17
18
|
}
|
|
18
19
|
static fromAIAgent(id, carouselMessage, request) {
|
|
19
|
-
const
|
|
20
|
-
const isValid = carouselMessage.content.
|
|
21
|
-
!carouselMessage.content.elements.some(element => element.button.payload) &&
|
|
20
|
+
const areAllButtonsValid = () => {
|
|
21
|
+
const isValid = !carouselMessage.content.elements.some(element => element.button.payload) &&
|
|
22
22
|
carouselMessage.content.elements.every(element => element.button.url);
|
|
23
23
|
if (!isValid) {
|
|
24
24
|
console.warn('Cannot use WhatsappInteractiveMediaCarousel for Whatsapp created by AIAgent', carouselMessage.content);
|
|
25
25
|
}
|
|
26
26
|
return isValid;
|
|
27
27
|
};
|
|
28
|
-
if (isWhatsapp(request.session) &&
|
|
29
|
-
|
|
28
|
+
if (isWhatsapp(request.session) && areAllButtonsValid()) {
|
|
29
|
+
if (carouselMessage.content.elements.length === 1) {
|
|
30
|
+
const element = carouselMessage.content.elements[0];
|
|
31
|
+
// TODO: Add a new fromAIAgent method in FlowWhatsappCtaUrlButtonNode to create a WhatsappCTAUrlButton from an AIAgent message
|
|
32
|
+
return (_jsx(WhatsappCTAUrlButton, { body: element.title, headerType: WhatsappCTAUrlHeaderType.Image, headerImage: element.image, displayText: element.button.text, url: element.button.url }, id));
|
|
33
|
+
}
|
|
30
34
|
return (_jsx(WhatsappInteractiveMediaCarousel, { cards: carouselMessage.content.elements.map(element => {
|
|
31
35
|
const buttonText = element.button.text;
|
|
32
36
|
const buttonUrl = element.button.url;
|
|
@@ -35,12 +39,17 @@ export class FlowCarousel extends ContentFieldsBase {
|
|
|
35
39
|
text: element.title,
|
|
36
40
|
action: { buttonText, buttonUrl, imageLink },
|
|
37
41
|
};
|
|
38
|
-
}), textMessage: carouselMessage.content.text }));
|
|
42
|
+
}), textMessage: carouselMessage.content.text || DEFAULT_TEXT_MESSAGE }));
|
|
39
43
|
}
|
|
40
44
|
return (_jsx(Carousel, { children: carouselMessage.content.elements.map((element, index) => FlowElement.fromAIAgent(`${id}-element-${index}`, element).toBotonic(id)) }, id));
|
|
41
45
|
}
|
|
42
46
|
toBotonic(id, request) {
|
|
43
47
|
if (isWhatsapp(request.session)) {
|
|
48
|
+
// TODO: Improve this logic to ensure what to do if the buttons are not CTA URL buttons
|
|
49
|
+
if (this.elements.length === 1) {
|
|
50
|
+
const element = this.elements[0];
|
|
51
|
+
return (_jsx(WhatsappCTAUrlButton, { body: element.title, headerType: WhatsappCTAUrlHeaderType.Image, headerImage: element.image, displayText: element.button.text, url: element.button.url }, id));
|
|
52
|
+
}
|
|
44
53
|
return (_jsx(WhatsappInteractiveMediaCarousel, { cards: this.elements.map(element => {
|
|
45
54
|
var _a, _b;
|
|
46
55
|
const buttonText = ((_a = element.button) === null || _a === void 0 ? void 0 : _a.text) || '';
|
|
@@ -50,7 +59,9 @@ export class FlowCarousel extends ContentFieldsBase {
|
|
|
50
59
|
text: element.title,
|
|
51
60
|
action: { buttonText, buttonUrl, imageLink },
|
|
52
61
|
};
|
|
53
|
-
}),
|
|
62
|
+
}),
|
|
63
|
+
// TODO: Add the text message in flow builder frontend and take it from the carousel node with different languages
|
|
64
|
+
textMessage: DEFAULT_TEXT_MESSAGE }));
|
|
54
65
|
}
|
|
55
66
|
return (_jsx(Carousel, { children: this.elements.map(element => element.toBotonic(id)) }, id));
|
|
56
67
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"flow-carousel.js","sourceRoot":"","sources":["../../../src/content-fields/flow-carousel.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAmB,UAAU,EAAE,MAAM,eAAe,CAAA;AAC3D,OAAO,EAEL,QAAQ,EACR,gCAAgC,GACjC,MAAM,gBAAgB,CAAA;AAIvB,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAA;AACzD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,MAAM,OAAO,YAAa,SAAQ,iBAAiB;IAAnD;;QACS,SAAI,GAAG,EAAE,CAAA;QACT,aAAQ,GAAkB,EAAE,CAAA;
|
|
1
|
+
{"version":3,"file":"flow-carousel.js","sourceRoot":"","sources":["../../../src/content-fields/flow-carousel.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@botonic/plugin-flow-builder",
|
|
3
|
-
"version": "0.41.1-alpha.
|
|
3
|
+
"version": "0.41.1-alpha.2",
|
|
4
4
|
"main": "./lib/cjs/index.js",
|
|
5
5
|
"module": "./lib/esm/index.js",
|
|
6
6
|
"description": "Use Flow Builder to show your contents",
|
|
@@ -50,4 +50,4 @@
|
|
|
50
50
|
"devDependencies": {
|
|
51
51
|
"@types/uuid": "^10.0.0"
|
|
52
52
|
}
|
|
53
|
-
}
|
|
53
|
+
}
|
|
@@ -2,6 +2,8 @@ import { CarouselMessage, isWhatsapp } from '@botonic/core'
|
|
|
2
2
|
import {
|
|
3
3
|
ActionRequest,
|
|
4
4
|
Carousel,
|
|
5
|
+
WhatsappCTAUrlButton,
|
|
6
|
+
WhatsappCTAUrlHeaderType,
|
|
5
7
|
WhatsappInteractiveMediaCarousel,
|
|
6
8
|
} from '@botonic/react'
|
|
7
9
|
import React from 'react'
|
|
@@ -11,6 +13,7 @@ import { ContentFieldsBase } from './content-fields-base'
|
|
|
11
13
|
import { FlowElement } from './flow-element'
|
|
12
14
|
import { HtCarouselNode } from './hubtype-fields'
|
|
13
15
|
|
|
16
|
+
const DEFAULT_TEXT_MESSAGE = 'These are the options'
|
|
14
17
|
export class FlowCarousel extends ContentFieldsBase {
|
|
15
18
|
public code = ''
|
|
16
19
|
public elements: FlowElement[] = []
|
|
@@ -33,9 +36,8 @@ export class FlowCarousel extends ContentFieldsBase {
|
|
|
33
36
|
carouselMessage: CarouselMessage,
|
|
34
37
|
request: ActionRequest
|
|
35
38
|
): JSX.Element {
|
|
36
|
-
const
|
|
39
|
+
const areAllButtonsValid = () => {
|
|
37
40
|
const isValid =
|
|
38
|
-
carouselMessage.content.text &&
|
|
39
41
|
!carouselMessage.content.elements.some(
|
|
40
42
|
element => element.button.payload
|
|
41
43
|
) &&
|
|
@@ -50,10 +52,22 @@ export class FlowCarousel extends ContentFieldsBase {
|
|
|
50
52
|
return isValid
|
|
51
53
|
}
|
|
52
54
|
|
|
53
|
-
if (
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
55
|
+
if (isWhatsapp(request.session) && areAllButtonsValid()) {
|
|
56
|
+
if (carouselMessage.content.elements.length === 1) {
|
|
57
|
+
const element = carouselMessage.content.elements[0]
|
|
58
|
+
// TODO: Add a new fromAIAgent method in FlowWhatsappCtaUrlButtonNode to create a WhatsappCTAUrlButton from an AIAgent message
|
|
59
|
+
return (
|
|
60
|
+
<WhatsappCTAUrlButton
|
|
61
|
+
key={id}
|
|
62
|
+
body={element.title}
|
|
63
|
+
headerType={WhatsappCTAUrlHeaderType.Image}
|
|
64
|
+
headerImage={element.image}
|
|
65
|
+
displayText={element.button.text}
|
|
66
|
+
url={element.button.url!}
|
|
67
|
+
/>
|
|
68
|
+
)
|
|
69
|
+
}
|
|
70
|
+
|
|
57
71
|
return (
|
|
58
72
|
<WhatsappInteractiveMediaCarousel
|
|
59
73
|
cards={carouselMessage.content.elements.map(element => {
|
|
@@ -66,7 +80,7 @@ export class FlowCarousel extends ContentFieldsBase {
|
|
|
66
80
|
action: { buttonText, buttonUrl, imageLink },
|
|
67
81
|
}
|
|
68
82
|
})}
|
|
69
|
-
textMessage={carouselMessage.content.text
|
|
83
|
+
textMessage={carouselMessage.content.text || DEFAULT_TEXT_MESSAGE}
|
|
70
84
|
/>
|
|
71
85
|
)
|
|
72
86
|
}
|
|
@@ -83,6 +97,22 @@ export class FlowCarousel extends ContentFieldsBase {
|
|
|
83
97
|
|
|
84
98
|
toBotonic(id: string, request: ActionRequest): JSX.Element {
|
|
85
99
|
if (isWhatsapp(request.session)) {
|
|
100
|
+
// TODO: Improve this logic to ensure what to do if the buttons are not CTA URL buttons
|
|
101
|
+
if (this.elements.length === 1) {
|
|
102
|
+
const element = this.elements[0]
|
|
103
|
+
|
|
104
|
+
return (
|
|
105
|
+
<WhatsappCTAUrlButton
|
|
106
|
+
key={id}
|
|
107
|
+
body={element.title}
|
|
108
|
+
headerType={WhatsappCTAUrlHeaderType.Image}
|
|
109
|
+
headerImage={element.image}
|
|
110
|
+
displayText={element.button!.text}
|
|
111
|
+
url={element.button!.url!}
|
|
112
|
+
/>
|
|
113
|
+
)
|
|
114
|
+
}
|
|
115
|
+
|
|
86
116
|
return (
|
|
87
117
|
<WhatsappInteractiveMediaCarousel
|
|
88
118
|
cards={this.elements.map(element => {
|
|
@@ -95,7 +125,8 @@ export class FlowCarousel extends ContentFieldsBase {
|
|
|
95
125
|
action: { buttonText, buttonUrl, imageLink },
|
|
96
126
|
}
|
|
97
127
|
})}
|
|
98
|
-
|
|
128
|
+
// TODO: Add the text message in flow builder frontend and take it from the carousel node with different languages
|
|
129
|
+
textMessage={DEFAULT_TEXT_MESSAGE}
|
|
99
130
|
/>
|
|
100
131
|
)
|
|
101
132
|
}
|