@subiz/widget-v4 4.1.13 → 4.1.15
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/assets/less/form.less +5 -0
- package/compiled_src/popup/popup.js +6 -1
- package/inject.js +254 -98
- package/package.json +1 -1
- package/src/popup/popup.js +8 -1
package/assets/less/form.less
CHANGED
|
@@ -53,6 +53,11 @@ textarea.form-control, select.form-control {
|
|
|
53
53
|
|
|
54
54
|
padding: 8px;
|
|
55
55
|
}
|
|
56
|
+
|
|
57
|
+
// Fix select display not fully text on Safari iOs
|
|
58
|
+
select.form-control {
|
|
59
|
+
padding: 1px 8px;
|
|
60
|
+
}
|
|
56
61
|
input[type='text'].form-control:focus, input[type='number'].form-control:focus,input[type='date'].form-control:focus,
|
|
57
62
|
textarea.form-control:focus, select.form-control:focus {
|
|
58
63
|
border: 1px solid @primary-color;
|
|
@@ -292,6 +292,9 @@ class Popup extends _common.Com {
|
|
|
292
292
|
primarystyle.font_weight = primarystyle.font_weight || '500';
|
|
293
293
|
primarystyle.font_size = primarystyle.font_size || popup.font_size || '14px';
|
|
294
294
|
primarystyle.background = primarystyle.background || popup.text_color;
|
|
295
|
+
if (this.props.mobile && com.mobile_style) {
|
|
296
|
+
primarystyle = Object.assign(primarystyle, com.mobile_style);
|
|
297
|
+
}
|
|
295
298
|
let $primary = null;
|
|
296
299
|
if (com.buttons.primary_enabled && com.buttons.primary_text) {
|
|
297
300
|
let style = Object.assign({
|
|
@@ -310,6 +313,9 @@ class Popup extends _common.Com {
|
|
|
310
313
|
let style = Object.assign({
|
|
311
314
|
font_size: popup.font_size || '14px'
|
|
312
315
|
}, page.secondary_button);
|
|
316
|
+
if (this.props.mobile && com.mobile_style) {
|
|
317
|
+
style = Object.assign(style, com.mobile_style);
|
|
318
|
+
}
|
|
313
319
|
$secondary = (0, _preact.h)("div", {
|
|
314
320
|
class: 'btn btn__secondary',
|
|
315
321
|
style: this.js2css(style),
|
|
@@ -659,7 +665,6 @@ class Popup extends _common.Com {
|
|
|
659
665
|
white_space: 'pre-wrap'
|
|
660
666
|
}, this.props.mobile && com.mobile_style || com.style);
|
|
661
667
|
delete style.margin_top;
|
|
662
|
-
delete style.margin_bottom;
|
|
663
668
|
return (0, _preact.h)("div", {
|
|
664
669
|
class: "text popup_component",
|
|
665
670
|
style: this.js2css(style),
|
package/inject.js
CHANGED
|
@@ -11,128 +11,284 @@ function getUrlParameter(name) {
|
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
function runChatbox(subiz) {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
14
|
+
let popup = {
|
|
15
|
+
account_id: 'acqsulrowbxiugvginhw',
|
|
16
|
+
id: 'cprolocggdxtgbzrdtvkp',
|
|
17
|
+
name: 'Lì xì đầu năm',
|
|
18
|
+
type: 'popup',
|
|
19
|
+
created: 1675306404915,
|
|
20
|
+
created_by: 'agqsulrowbxilyzhds',
|
|
21
|
+
updated: 1675307604095,
|
|
22
|
+
updated_by: 'agqsulrowbxilyzhds',
|
|
23
|
+
triggers: [
|
|
24
|
+
{
|
|
25
|
+
type: 'after_pageview',
|
|
26
|
+
},
|
|
27
|
+
],
|
|
28
|
+
initiative_frequency: {
|
|
29
|
+
once_per_session: true,
|
|
30
|
+
},
|
|
31
|
+
locale: 'vi-VN',
|
|
32
|
+
locales: ['vi-VN'],
|
|
33
|
+
popup: {
|
|
34
|
+
position: 'center',
|
|
35
|
+
type: 'modal',
|
|
36
|
+
animation: true,
|
|
37
|
+
show_close_button: true,
|
|
38
|
+
overlay: true,
|
|
39
|
+
text_color: '#333',
|
|
40
|
+
font_family: 'Roboto',
|
|
41
|
+
font_size: '16px',
|
|
42
|
+
background: 'white',
|
|
43
|
+
spacer: '10',
|
|
44
|
+
theme: 'bold',
|
|
45
|
+
pages: [
|
|
26
46
|
{
|
|
27
|
-
|
|
28
|
-
},
|
|
29
|
-
],
|
|
30
|
-
chatbox: {
|
|
31
|
-
account_id: 'acqsulrowbxiugvginhw',
|
|
32
|
-
widget_version: 'v4',
|
|
33
|
-
language: 'en',
|
|
34
|
-
is_online: true,
|
|
35
|
-
window_mode: 'mini',
|
|
36
|
-
header: {
|
|
37
|
-
layout: 'social',
|
|
38
|
-
links: [
|
|
47
|
+
components: [
|
|
39
48
|
{
|
|
40
|
-
type: '
|
|
41
|
-
|
|
49
|
+
type: 'image',
|
|
50
|
+
style: {
|
|
51
|
+
background_position: '0% 100%',
|
|
52
|
+
left: '0px',
|
|
53
|
+
right: '0px',
|
|
54
|
+
top: '0px',
|
|
55
|
+
bottom: '0px',
|
|
56
|
+
},
|
|
57
|
+
mobile_style: {
|
|
58
|
+
background_position: '0% 100%',
|
|
59
|
+
left: '0px',
|
|
60
|
+
right: '0px',
|
|
61
|
+
top: '0px',
|
|
62
|
+
bottom: '0px',
|
|
63
|
+
},
|
|
64
|
+
image: {
|
|
65
|
+
url: 'https://vcdn.subiz-cdn.com/file/firobdruwymdykrgoikj-10.png',
|
|
66
|
+
},
|
|
42
67
|
},
|
|
43
68
|
{
|
|
44
|
-
type: '
|
|
45
|
-
|
|
69
|
+
type: 'text',
|
|
70
|
+
style: {
|
|
71
|
+
font_family: 'Dancing Script',
|
|
72
|
+
color: 'rgba(207,32,47,1)',
|
|
73
|
+
text_align: 'center',
|
|
74
|
+
font_style: 'normal',
|
|
75
|
+
font_weight: 'bold',
|
|
76
|
+
margin_bottom: '20px',
|
|
77
|
+
font_size: '72px',
|
|
78
|
+
},
|
|
79
|
+
mobile_style: {
|
|
80
|
+
font_family: 'Dancing Script',
|
|
81
|
+
color: 'rgba(207,32,47,1)',
|
|
82
|
+
text_align: 'center',
|
|
83
|
+
font_style: 'normal',
|
|
84
|
+
font_weight: 'bold',
|
|
85
|
+
margin_bottom: '10px',
|
|
86
|
+
font_size: '14px',
|
|
87
|
+
},
|
|
88
|
+
text: {
|
|
89
|
+
html: 'Đăng ký nhận ưu đãi khủng',
|
|
90
|
+
i18n_html: {
|
|
91
|
+
en_US: 'Lì xì đầu năm',
|
|
92
|
+
vi_VN: 'Lì xì đầu năm',
|
|
93
|
+
},
|
|
94
|
+
i18n_quill_delta: {},
|
|
95
|
+
},
|
|
46
96
|
},
|
|
47
|
-
],
|
|
48
|
-
agent_ids: ['agqsulrowbxilyzhds', 'agqsuorpukqwddqrtn', 'agqxufisjmshlniwof'],
|
|
49
|
-
},
|
|
50
|
-
height: 705,
|
|
51
|
-
width: 375,
|
|
52
|
-
primary_color: 'rgb(15, 220, 174)',
|
|
53
|
-
background: 'linear-gradient(135deg, rgb(13, 223, 169) 0%, rgb(41, 183, 248) 100%)',
|
|
54
|
-
offline_form: {
|
|
55
|
-
fields: [
|
|
56
97
|
{
|
|
57
|
-
key: 'fullname',
|
|
58
|
-
label: 'Họ và tên',
|
|
59
|
-
i18n_label: {
|
|
60
|
-
vi_VN: 'Ho ten',
|
|
61
|
-
en_US: 'Fullname',
|
|
62
|
-
},
|
|
63
98
|
type: 'text',
|
|
99
|
+
style: {
|
|
100
|
+
font_family: 'Montserrat',
|
|
101
|
+
text_align: 'center',
|
|
102
|
+
font_style: 'normal',
|
|
103
|
+
font_weight: 'normal',
|
|
104
|
+
margin_bottom: '20px',
|
|
105
|
+
font_size: '20px',
|
|
106
|
+
},
|
|
107
|
+
mobile_style: {
|
|
108
|
+
font_family: 'Montserrat',
|
|
109
|
+
text_align: 'center',
|
|
110
|
+
font_style: 'normal',
|
|
111
|
+
font_weight: 'normal',
|
|
112
|
+
margin_bottom: '10px',
|
|
113
|
+
font_size: '10px',
|
|
114
|
+
},
|
|
115
|
+
text: {
|
|
116
|
+
html: 'Giảm giá tới 95%\nMiễn phí vận chuyển nội thành',
|
|
117
|
+
i18n_html: {
|
|
118
|
+
en_US:
|
|
119
|
+
'Mừng xuân mới, tặng ngay bao lì xì \nmệnh giá 100.000 đến 500.000 VND \ncho 50 đơn hàng đầu tiên',
|
|
120
|
+
vi_VN:
|
|
121
|
+
'Mừng xuân mới, tặng ngay bao lì xì \nmệnh giá 100.000 đến 500.000 VND \ncho 50 đơn hàng đầu tiên',
|
|
122
|
+
},
|
|
123
|
+
i18n_quill_delta: {},
|
|
124
|
+
},
|
|
64
125
|
},
|
|
65
126
|
{
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
127
|
+
type: 'buttons',
|
|
128
|
+
style: {
|
|
129
|
+
border_radius: '12px',
|
|
130
|
+
background: 'rgba(207,32,47,1)',
|
|
131
|
+
flex_direction: 'column',
|
|
132
|
+
},
|
|
133
|
+
mobile_style: {
|
|
134
|
+
font_size: '10px',
|
|
135
|
+
padding_top: '5px',
|
|
136
|
+
padding_bottom: '5px',
|
|
137
|
+
},
|
|
138
|
+
buttons: {
|
|
139
|
+
primary_enabled: true,
|
|
140
|
+
primary_actions: [
|
|
141
|
+
{
|
|
142
|
+
action: 'open_url',
|
|
143
|
+
url: 'https://subiz.com.vn',
|
|
144
|
+
new_tab: true,
|
|
145
|
+
},
|
|
146
|
+
{
|
|
147
|
+
action: 'close',
|
|
148
|
+
},
|
|
149
|
+
],
|
|
150
|
+
primary_text: 'Đăng ký ngay',
|
|
151
|
+
i18n_primary_text: {
|
|
152
|
+
en_US: 'Đăng ký ngay',
|
|
153
|
+
vi_VN: 'Đăng ký ngay',
|
|
154
|
+
},
|
|
155
|
+
secondary_actions: [
|
|
156
|
+
{
|
|
157
|
+
action: 'close',
|
|
158
|
+
},
|
|
159
|
+
],
|
|
160
|
+
i18n_secondary_text: {
|
|
161
|
+
en_US: 'Cancel',
|
|
162
|
+
vi_VN: 'Đăng ký ngay',
|
|
163
|
+
},
|
|
71
164
|
},
|
|
72
|
-
type: 'text',
|
|
73
165
|
},
|
|
74
166
|
],
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
167
|
+
style: {
|
|
168
|
+
background: 'rgba(255,255,255,0)',
|
|
169
|
+
width: '800px',
|
|
170
|
+
height: '565px',
|
|
171
|
+
padding_left: '40px',
|
|
172
|
+
padding_right: '40px',
|
|
173
|
+
padding_top: '40px',
|
|
174
|
+
padding_bottom: '40px',
|
|
175
|
+
margin_left: '150px',
|
|
176
|
+
margin_right: '150px',
|
|
177
|
+
margin_top: '120px',
|
|
178
|
+
margin_bottom: '120px',
|
|
179
|
+
overflow: 'hidden',
|
|
85
180
|
},
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
181
|
+
mobile_style: {
|
|
182
|
+
background: 'rgba(255,255,255,0)',
|
|
183
|
+
width: '300px',
|
|
184
|
+
height: '200px',
|
|
185
|
+
padding_left: '40px',
|
|
186
|
+
padding_right: '40px',
|
|
187
|
+
padding_top: '40px',
|
|
188
|
+
padding_bottom: '40px',
|
|
189
|
+
margin_left: '0px',
|
|
190
|
+
margin_right: '0px',
|
|
191
|
+
margin_top: '0px',
|
|
192
|
+
margin_bottom: '0px',
|
|
90
193
|
},
|
|
91
|
-
|
|
194
|
+
layout: 'row',
|
|
195
|
+
mobile_layout: 'row',
|
|
92
196
|
},
|
|
93
|
-
|
|
94
|
-
|
|
197
|
+
{
|
|
198
|
+
components: [
|
|
95
199
|
{
|
|
96
|
-
key: 'emails',
|
|
97
|
-
label: 'Địa chỉ email',
|
|
98
200
|
type: 'text',
|
|
201
|
+
style: {
|
|
202
|
+
text_align: 'center',
|
|
203
|
+
margin_bottom: '10px',
|
|
204
|
+
font_size: '20px',
|
|
205
|
+
},
|
|
206
|
+
mobile_style: {
|
|
207
|
+
text_align: 'center',
|
|
208
|
+
margin_bottom: '10px',
|
|
209
|
+
font_size: '40px',
|
|
210
|
+
},
|
|
211
|
+
text: {
|
|
212
|
+
html: 'Cảm ơn',
|
|
213
|
+
i18n_html: {
|
|
214
|
+
en_US: 'Thank you',
|
|
215
|
+
vi_VN: 'Thank you',
|
|
216
|
+
},
|
|
217
|
+
i18n_quill_delta: {},
|
|
218
|
+
},
|
|
99
219
|
},
|
|
100
220
|
{
|
|
101
|
-
key: 'fullname',
|
|
102
|
-
label: 'Họ và tên',
|
|
103
|
-
is_required: true,
|
|
104
221
|
type: 'text',
|
|
222
|
+
style: {
|
|
223
|
+
text_align: 'center',
|
|
224
|
+
margin_bottom: '20px',
|
|
225
|
+
font_size: '16px',
|
|
226
|
+
},
|
|
227
|
+
text: {
|
|
228
|
+
html: 'Chúng tôi đã ghi nhận được yêu cầu của bạn',
|
|
229
|
+
i18n_html: {
|
|
230
|
+
en_US: 'We had received your request',
|
|
231
|
+
vi_VN: 'We had received your request',
|
|
232
|
+
},
|
|
233
|
+
i18n_quill_delta: {},
|
|
234
|
+
},
|
|
235
|
+
},
|
|
236
|
+
{
|
|
237
|
+
type: 'buttons',
|
|
238
|
+
style: {
|
|
239
|
+
flex_direction: 'column',
|
|
240
|
+
align_items: 'center',
|
|
241
|
+
},
|
|
242
|
+
mobile_style: {
|
|
243
|
+
flex_direction: 'column',
|
|
244
|
+
align_items: 'center',
|
|
245
|
+
},
|
|
246
|
+
buttons: {
|
|
247
|
+
primary_enabled: true,
|
|
248
|
+
primary_actions: [
|
|
249
|
+
{
|
|
250
|
+
action: 'close',
|
|
251
|
+
},
|
|
252
|
+
],
|
|
253
|
+
primary_text: 'Đóng',
|
|
254
|
+
i18n_primary_text: {
|
|
255
|
+
en_US: 'Close',
|
|
256
|
+
vi_VN: 'Close',
|
|
257
|
+
},
|
|
258
|
+
i18n_secondary_text: {
|
|
259
|
+
vi_VN: 'Close',
|
|
260
|
+
},
|
|
261
|
+
},
|
|
105
262
|
},
|
|
106
263
|
],
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
},
|
|
123
|
-
greeting: {
|
|
124
|
-
message: 'Holla amigo',
|
|
125
|
-
enabled: false,
|
|
126
|
-
agent_id: 'agqsuorpukqwddqrtn',
|
|
264
|
+
style: {
|
|
265
|
+
width: '300px',
|
|
266
|
+
padding_left: '40px',
|
|
267
|
+
padding_right: '40px',
|
|
268
|
+
padding_top: '40px',
|
|
269
|
+
padding_bottom: '40px',
|
|
270
|
+
overflow: 'hidden',
|
|
271
|
+
},
|
|
272
|
+
mobile_style: {
|
|
273
|
+
width: '300px',
|
|
274
|
+
padding_left: '40px',
|
|
275
|
+
padding_right: '40px',
|
|
276
|
+
padding_top: '40px',
|
|
277
|
+
padding_bottom: '40px',
|
|
278
|
+
},
|
|
127
279
|
},
|
|
128
|
-
|
|
129
|
-
introduction: 'Chúng tôi luôn sẵn sàng hỗ trợ',
|
|
130
|
-
auto_request_rating: true,
|
|
131
|
-
},
|
|
132
|
-
thumbnail_url: 'https://file-subiz.com/fiqzxywfwuvymbiqumbzwpwidget.jpg',
|
|
133
|
-
locale: 'vi-VN',
|
|
280
|
+
],
|
|
134
281
|
},
|
|
135
|
-
|
|
282
|
+
conversion_notification: {
|
|
283
|
+
all_agents: true,
|
|
284
|
+
},
|
|
285
|
+
template_categories: ['Năm mới'],
|
|
286
|
+
template_title: 'Lì xì đầu năm',
|
|
287
|
+
thumbnail_url:
|
|
288
|
+
'https://vcdn.subiz-cdn.com/file/firobhhkwjwiirovikuh-firobhhkfosiufzphxicwptp1673839749423clmwirrp.jpg',
|
|
289
|
+
}
|
|
290
|
+
subiz._overridePlugin([popup])
|
|
291
|
+
console.log('GGGGGGG', popup)
|
|
136
292
|
|
|
137
293
|
setTimeout(() => {
|
|
138
294
|
subiz.showWidget()
|
package/package.json
CHANGED
package/src/popup/popup.js
CHANGED
|
@@ -285,6 +285,10 @@ export default class Popup extends Com {
|
|
|
285
285
|
primarystyle.font_weight = primarystyle.font_weight || '500'
|
|
286
286
|
primarystyle.font_size = primarystyle.font_size || popup.font_size || '14px'
|
|
287
287
|
primarystyle.background = primarystyle.background || popup.text_color
|
|
288
|
+
|
|
289
|
+
if (this.props.mobile && com.mobile_style) {
|
|
290
|
+
primarystyle = Object.assign(primarystyle, com.mobile_style)
|
|
291
|
+
}
|
|
288
292
|
let $primary = null
|
|
289
293
|
if (com.buttons.primary_enabled && com.buttons.primary_text) {
|
|
290
294
|
let style = Object.assign({font_size: popup.font_size || '14px'}, page.primary_button)
|
|
@@ -304,6 +308,9 @@ export default class Popup extends Com {
|
|
|
304
308
|
let $secondary = null
|
|
305
309
|
if (com.buttons.secondary_enabled && com.buttons.secondary_text) {
|
|
306
310
|
let style = Object.assign({font_size: popup.font_size || '14px'}, page.secondary_button)
|
|
311
|
+
if (this.props.mobile && com.mobile_style) {
|
|
312
|
+
style = Object.assign(style, com.mobile_style)
|
|
313
|
+
}
|
|
307
314
|
$secondary = (
|
|
308
315
|
<div
|
|
309
316
|
class={'btn btn__secondary'}
|
|
@@ -700,7 +707,7 @@ export default class Popup extends Com {
|
|
|
700
707
|
(this.props.mobile && com.mobile_style) || com.style,
|
|
701
708
|
)
|
|
702
709
|
delete style.margin_top
|
|
703
|
-
delete style.margin_bottom
|
|
710
|
+
//delete style.margin_bottom
|
|
704
711
|
|
|
705
712
|
return (
|
|
706
713
|
<div class='text popup_component' style={this.js2css(style)} onClick={(e) => e.stopPropagation()}>
|