@capillarytech/creatives-library 6.11.0 → 6.11.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/index.js
CHANGED
|
@@ -23,6 +23,11 @@ import Email from './v2Containers/Email/index';
|
|
|
23
23
|
import emailReducer from './v2Containers/Email/reducer';
|
|
24
24
|
import emailSaga from './v2Containers/Email/sagas';
|
|
25
25
|
|
|
26
|
+
import BeeEditor from './v2Containers/BeeEditor/index';
|
|
27
|
+
import beeReducer from './v2Containers/BeeEditor/reducer';
|
|
28
|
+
import beeSaga from './v2Containers/BeeEditor/sagas';
|
|
29
|
+
|
|
30
|
+
|
|
26
31
|
import CallTask from './v2Containers/CallTask/index';
|
|
27
32
|
import callTaskReducer from './v2Containers/CallTask/reducer';
|
|
28
33
|
import callTaskSaga from './v2Containers/CallTask/sagas';
|
|
@@ -80,6 +85,7 @@ const TemplatesContainer = {Templates, templateReducer, templateSaga};
|
|
|
80
85
|
const SmsCreateContainer = {SmsCreate, smsCreateReducer, smsCreateSaga};
|
|
81
86
|
const SmsEditContainer = {SmsEdit, smsEditReducer, smsEditSaga};
|
|
82
87
|
const EmailContainer = {Email, emailReducer, emailSaga};
|
|
88
|
+
const BeeContainer ={ BeeEditor,beeReducer,beeSaga}
|
|
83
89
|
const CallTaskContainer = {CallTask, callTaskReducer, callTaskSaga};
|
|
84
90
|
const WeChatMapTemplateContainer = {WeChatMapTemplate, weChatMapTemplateReducer, weChatMapTemplateSaga};
|
|
85
91
|
const WeChatRichMediaCreateContainer = {WeChatRichMediaCreate, weChatRichMediaCreateReducer, weChatRichMediaCreateSaga};
|
|
@@ -111,6 +117,7 @@ export { CapContainer,
|
|
|
111
117
|
SmsCreateContainer,
|
|
112
118
|
SmsEditContainer,
|
|
113
119
|
EmailContainer,
|
|
120
|
+
BeeContainer,
|
|
114
121
|
CallTaskContainer,
|
|
115
122
|
WeChatMapTemplateContainer,
|
|
116
123
|
WeChatRichMediaCreateContainer,
|
package/package.json
CHANGED
|
@@ -1,263 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
*
|
|
3
|
-
* Beeeditor
|
|
4
|
-
*
|
|
5
|
-
*/
|
|
6
|
-
import React, { useEffect, useState, useRef, useCallback } from 'react';
|
|
7
|
-
import PropTypes from 'prop-types';
|
|
8
|
-
import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
|
|
9
|
-
import TagList from '../../v2Containers/TagList';
|
|
10
|
-
import
|
|
11
|
-
{
|
|
12
|
-
CapModal,
|
|
13
|
-
CapButton,
|
|
14
|
-
CapInput,
|
|
15
|
-
CapSelect,
|
|
16
|
-
}
|
|
17
|
-
from '@capillarytech/cap-ui-library';
|
|
18
|
-
import messages from './messages';
|
|
19
|
-
import './index.scss';
|
|
20
|
-
|
|
21
|
-
function BeeEditor(props) {
|
|
22
|
-
const {
|
|
23
|
-
uid,
|
|
24
|
-
beeJson,
|
|
25
|
-
tokenData,
|
|
26
|
-
id,
|
|
27
|
-
location = {},
|
|
28
|
-
moduleFilterEnabled,
|
|
29
|
-
label,
|
|
30
|
-
className,
|
|
31
|
-
userLocale,
|
|
32
|
-
selectedOfferDetails,
|
|
33
|
-
tags,
|
|
34
|
-
injectedTags,
|
|
35
|
-
saveBeeInstance,
|
|
36
|
-
saveBeeData,
|
|
37
|
-
intl,
|
|
38
|
-
onContextChange,
|
|
39
|
-
} = props;
|
|
40
|
-
const {formatMessage} = intl;
|
|
41
|
-
const UNSUBSCRIBE = 'unsubscribe';
|
|
42
|
-
let beePluginInstance = null;
|
|
43
|
-
const categoryOptions = [{key: 'cta', value: 'cta', label: formatMessage(messages.cta)},
|
|
44
|
-
{key: 'footer', value: 'footer', label: formatMessage(messages.footer)},
|
|
45
|
-
{key: 'header', value: 'header', label: formatMessage(messages.header)},
|
|
46
|
-
{key: 'sp', value: 'sp', label: formatMessage(messages.socialPlatform)},
|
|
47
|
-
{key: 'others', value: 'others', label: formatMessage(messages.others)},
|
|
48
|
-
];
|
|
49
|
-
const [visibleTaglist, setVisibleTaglist] = useState(false);
|
|
50
|
-
const [showRowMetaModal, setRowMetaModal] = useState(false);
|
|
51
|
-
const [selectedTag, setSelectedTag] = useState({});
|
|
52
|
-
const [rowMetaInfo, setRowMetaInfo] = useState({});
|
|
53
|
-
const [rowName, setRowName] = useState('');
|
|
54
|
-
const [rowCategory, setRowCategory] = useState('');
|
|
55
|
-
|
|
56
|
-
const savedCallback = useRef();
|
|
57
|
-
const filteredTags = (tags || []).filter((obj) => obj.definition.value !== UNSUBSCRIBE);
|
|
58
|
-
let intervalTimer;
|
|
59
|
-
|
|
60
|
-
useEffect(() => {
|
|
61
|
-
savedCallback.current = Object.keys(selectedTag).length > 0 ? selectedTag : rowMetaInfo;
|
|
62
|
-
}, [selectedTag, rowMetaInfo]);
|
|
63
|
-
|
|
64
|
-
useEffect(() => {
|
|
65
|
-
const beeConfig = {
|
|
66
|
-
uid,
|
|
67
|
-
container: 'bee-plugin-container',
|
|
68
|
-
rowsConfiguration: {
|
|
69
|
-
emptyRows: true,
|
|
70
|
-
defaultRows: true,
|
|
71
|
-
},
|
|
72
|
-
contentDialog: {
|
|
73
|
-
specialLinks: {
|
|
74
|
-
label: UNSUBSCRIBE,
|
|
75
|
-
handler(resolve) {
|
|
76
|
-
resolve({
|
|
77
|
-
type: 'custom',
|
|
78
|
-
label: UNSUBSCRIBE,
|
|
79
|
-
link: `{{${UNSUBSCRIBE}}}`,
|
|
80
|
-
});
|
|
81
|
-
},
|
|
82
|
-
},
|
|
83
|
-
mergeTags: {
|
|
84
|
-
label: formatMessage(messages.addLabel),
|
|
85
|
-
handler: async (resolve, reject) => {
|
|
86
|
-
// this will open tag modal
|
|
87
|
-
await setVisibleTaglist(true);
|
|
88
|
-
// until tag modal will not open promise will not execute
|
|
89
|
-
// once tag modal is opened it will start 2 sec interval to wait use has selected any tag or cancel the tag selection
|
|
90
|
-
const promise = new Promise((resolveP) => {
|
|
91
|
-
intervalTimer = setInterval(() => {
|
|
92
|
-
// this will execute, if user cancel the tag selection
|
|
93
|
-
if ((savedCallback.current || {}).close === true) {
|
|
94
|
-
reject();
|
|
95
|
-
clearInterval(intervalTimer);
|
|
96
|
-
return;
|
|
97
|
-
}
|
|
98
|
-
// this block is checking use has selected any tag or not
|
|
99
|
-
if (Object.keys(savedCallback.current || {}).length > 0) {
|
|
100
|
-
resolveP(savedCallback.current);
|
|
101
|
-
setSelectedTag({});
|
|
102
|
-
clearInterval(intervalTimer);
|
|
103
|
-
}
|
|
104
|
-
}, 2000);
|
|
105
|
-
});
|
|
106
|
-
// once prmise will resolve , pass the resolve data to handler to show tags in bee edior
|
|
107
|
-
const result = await promise;
|
|
108
|
-
resolve(result);
|
|
109
|
-
},
|
|
110
|
-
},
|
|
111
|
-
saveRow: {
|
|
112
|
-
handler: async (resolve, reject) => {
|
|
113
|
-
await setRowMetaModal(true);
|
|
114
|
-
const promise = new Promise((resolveP) => {
|
|
115
|
-
intervalTimer = setInterval(() => {
|
|
116
|
-
if ((savedCallback.current || {}).close === true) {
|
|
117
|
-
reject();
|
|
118
|
-
clearInterval(intervalTimer);
|
|
119
|
-
setRowMetaInfo({});
|
|
120
|
-
setRowName('');
|
|
121
|
-
setRowCategory('');
|
|
122
|
-
return;
|
|
123
|
-
}
|
|
124
|
-
if (Object.keys(savedCallback.current || {}).length > 0) {
|
|
125
|
-
resolveP(savedCallback.current);
|
|
126
|
-
}
|
|
127
|
-
}, 2000);
|
|
128
|
-
});
|
|
129
|
-
const result = await promise;
|
|
130
|
-
resolve(result); // "done!"
|
|
131
|
-
setRowMetaInfo({});
|
|
132
|
-
setRowName('');
|
|
133
|
-
setRowCategory('');
|
|
134
|
-
clearInterval(intervalTimer);
|
|
135
|
-
},
|
|
136
|
-
},
|
|
137
|
-
},
|
|
138
|
-
onSave: (jsonFile, htmlFile) => {
|
|
139
|
-
saveBeeData(jsonFile, htmlFile);
|
|
140
|
-
},
|
|
141
|
-
// will use this function on save row feature
|
|
142
|
-
onSaveRow: (rowJSON) => {
|
|
143
|
-
console.log('bee-plugin-container onSaveRows', rowJSON);
|
|
144
|
-
},
|
|
145
|
-
};
|
|
146
|
-
window.BeePlugin.create(tokenData, beeConfig, (instance) => {
|
|
147
|
-
beePluginInstance = instance;
|
|
148
|
-
const parseJson = JSON.parse(beeJson);
|
|
149
|
-
beePluginInstance.start(parseJson);
|
|
150
|
-
saveBeeInstance(beePluginInstance);
|
|
151
|
-
});
|
|
152
|
-
return () => clearInterval(intervalTimer);
|
|
153
|
-
}, []);
|
|
154
|
-
|
|
155
|
-
const onTagSelect = (result) => {
|
|
156
|
-
const msg = {
|
|
157
|
-
name: result,
|
|
158
|
-
value: `{{${result}}}`,
|
|
159
|
-
};
|
|
160
|
-
setSelectedTag(msg);
|
|
161
|
-
setVisibleTaglist(false);
|
|
162
|
-
};
|
|
163
|
-
|
|
164
|
-
const onCancelTagList = () => {
|
|
165
|
-
setVisibleTaglist(false);
|
|
166
|
-
setSelectedTag({close: true});
|
|
167
|
-
};
|
|
168
|
-
|
|
169
|
-
const handleCancel = () => {
|
|
170
|
-
setRowMetaModal(false);
|
|
171
|
-
setRowMetaInfo({close: true});
|
|
172
|
-
};
|
|
173
|
-
|
|
174
|
-
const handleOk = () => {
|
|
175
|
-
const rowInfo = {};
|
|
176
|
-
if (rowCategory !== '') {
|
|
177
|
-
rowInfo.category = rowCategory;
|
|
178
|
-
}
|
|
179
|
-
setRowMetaInfo({
|
|
180
|
-
name: rowName,
|
|
181
|
-
...rowInfo,
|
|
182
|
-
});
|
|
183
|
-
setRowMetaModal(false);
|
|
184
|
-
};
|
|
185
|
-
const isDisableSave = () => rowName === '';
|
|
186
|
-
|
|
187
|
-
const onRowChange = useCallback((e) => {
|
|
188
|
-
setRowName(e.target.value);
|
|
189
|
-
});
|
|
190
|
-
const onChangeCategoy = (e) => {
|
|
191
|
-
setRowCategory(e);
|
|
192
|
-
};
|
|
193
|
-
const contentSection = <>
|
|
194
|
-
<CapInput
|
|
195
|
-
label={<FormattedMessage {...messages.rowName} />}
|
|
196
|
-
placeholder={formatMessage(messages.rowPlaceHolder)}
|
|
197
|
-
onChange={onRowChange}
|
|
198
|
-
value={rowName}
|
|
199
|
-
maxLength={50}
|
|
200
|
-
style={{ width: '324px', paddingBottom: '16px' }}
|
|
201
|
-
/>
|
|
202
|
-
<CapSelect
|
|
203
|
-
label="Category"
|
|
204
|
-
style={{ width: 250, paddingBottom: '16px'}}
|
|
205
|
-
options={categoryOptions}
|
|
206
|
-
selectPlaceholder={formatMessage(messages.select)}
|
|
207
|
-
placeholder={
|
|
208
|
-
<FormattedMessage {...messages.selectCategoyPlaceholder} />
|
|
209
|
-
}
|
|
210
|
-
onChange={onChangeCategoy}
|
|
211
|
-
/>
|
|
212
|
-
|
|
213
|
-
</>;
|
|
214
|
-
return (
|
|
215
|
-
<>
|
|
216
|
-
<div id="bee-plugin-container" style={{ height: '500px'}}>
|
|
217
|
-
</div>
|
|
218
|
-
<TagList
|
|
219
|
-
moduleFilterEnabled={moduleFilterEnabled}
|
|
220
|
-
label={label}
|
|
221
|
-
onTagSelect={onTagSelect}
|
|
222
|
-
location={location}
|
|
223
|
-
tags={filteredTags}
|
|
224
|
-
injectedTags={injectedTags}
|
|
225
|
-
className={className}
|
|
226
|
-
id={id}
|
|
227
|
-
userLocale={userLocale}
|
|
228
|
-
selectedOfferDetails={selectedOfferDetails}
|
|
229
|
-
visibleTaglist={visibleTaglist}
|
|
230
|
-
hidePopover
|
|
231
|
-
modalProps={{
|
|
232
|
-
onCancel: onCancelTagList,
|
|
233
|
-
style: { left: 135, top: 250 },
|
|
234
|
-
className: "bee-editor-tag-list",
|
|
235
|
-
}}
|
|
236
|
-
onContextChange={onContextChange}
|
|
237
|
-
/>
|
|
238
|
-
<CapModal
|
|
239
|
-
visible={showRowMetaModal}
|
|
240
|
-
onCancel={handleCancel}
|
|
241
|
-
title={formatMessage(messages.customRows)}
|
|
242
|
-
footer={[
|
|
243
|
-
<CapButton key="back" onClick={handleCancel}>{formatMessage(messages.cancel)}</CapButton>,
|
|
244
|
-
<CapButton key="submit" type="primary" id="delete-version" onClick={handleOk} disabled={isDisableSave()}>
|
|
245
|
-
{formatMessage(messages.save)}
|
|
246
|
-
</CapButton>,
|
|
247
|
-
]}
|
|
248
|
-
>
|
|
249
|
-
{contentSection}
|
|
250
|
-
</CapModal>
|
|
251
|
-
</>
|
|
252
|
-
);
|
|
253
|
-
}
|
|
254
|
-
|
|
255
|
-
BeeEditor.propTypes = {
|
|
256
|
-
beeJson: PropTypes.object.isRequired,
|
|
257
|
-
tokenData: PropTypes.object.isRequired,
|
|
258
|
-
uid: PropTypes.string.isRequired,
|
|
259
|
-
showTagsPopover: PropTypes.func.isRequired,
|
|
260
|
-
intl: intlShape.isRequired,
|
|
261
|
-
};
|
|
262
|
-
|
|
263
|
-
export default injectIntl(BeeEditor);
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* BeeEditor Messages
|
|
3
|
-
*
|
|
4
|
-
* This contains all the text for the BeeEditor component.
|
|
5
|
-
*/
|
|
6
|
-
import { defineMessages } from 'react-intl';
|
|
7
|
-
|
|
8
|
-
const prefix = 'creatives.componentsV2.BeeEditor';
|
|
9
|
-
|
|
10
|
-
export default defineMessages({
|
|
11
|
-
cancel: {
|
|
12
|
-
id: `${prefix}.cancel`,
|
|
13
|
-
defaultMessage: 'Cancel',
|
|
14
|
-
},
|
|
15
|
-
save: {
|
|
16
|
-
id: `${prefix}.save`,
|
|
17
|
-
defaultMessage: 'Save',
|
|
18
|
-
},
|
|
19
|
-
rowPlaceHolder: {
|
|
20
|
-
id: `${prefix}.rowPlaceHolder`,
|
|
21
|
-
defaultMessage: 'Enter Row name',
|
|
22
|
-
},
|
|
23
|
-
rowName: {
|
|
24
|
-
id: `${prefix}.rowName`,
|
|
25
|
-
defaultMessage: 'Row name',
|
|
26
|
-
},
|
|
27
|
-
select: {
|
|
28
|
-
id: `${prefix}.select`,
|
|
29
|
-
defaultMessage: 'Select',
|
|
30
|
-
},
|
|
31
|
-
customRows: {
|
|
32
|
-
id: `${prefix}.customRows`,
|
|
33
|
-
defaultMessage: 'Custom rows',
|
|
34
|
-
},
|
|
35
|
-
selectCategoyPlaceholder: {
|
|
36
|
-
id: `${prefix}.selectCategoyPlaceholder`,
|
|
37
|
-
defaultMessage: 'Select category',
|
|
38
|
-
},
|
|
39
|
-
tags: {
|
|
40
|
-
id: `${prefix}.tags`,
|
|
41
|
-
defaultMessage: 'Tags (optional)',
|
|
42
|
-
},
|
|
43
|
-
tagPlaceHolder: {
|
|
44
|
-
id: `${prefix}.tagPlaceHolder`,
|
|
45
|
-
defaultMessage: 'Enter tags',
|
|
46
|
-
},
|
|
47
|
-
addLabel: {
|
|
48
|
-
id: `${prefix}.addLabel`,
|
|
49
|
-
defaultMessage: 'Add label',
|
|
50
|
-
},
|
|
51
|
-
cta: {
|
|
52
|
-
id: `${prefix}.cta`,
|
|
53
|
-
defaultMessage: 'CTA',
|
|
54
|
-
},
|
|
55
|
-
header: {
|
|
56
|
-
id: `${prefix}.header`,
|
|
57
|
-
defaultMessage: 'Header',
|
|
58
|
-
},
|
|
59
|
-
footer: {
|
|
60
|
-
id: `${prefix}.footer`,
|
|
61
|
-
defaultMessage: 'Footer',
|
|
62
|
-
},
|
|
63
|
-
others: {
|
|
64
|
-
id: `${prefix}.others`,
|
|
65
|
-
defaultMessage: 'Others',
|
|
66
|
-
},
|
|
67
|
-
socialPlatform: {
|
|
68
|
-
id: `${prefix}.socialPlatform`,
|
|
69
|
-
defaultMessage: 'Social platform',
|
|
70
|
-
},
|
|
71
|
-
});
|