@capillarytech/creatives-library 7.17.183 → 7.17.184
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/loading_image.avif +0 -0
- package/package.json +1 -1
- package/tests/integration/TemplateCreation/TemplateCreation.integration.test.js +0 -3
- package/v2Components/CapCustomSkeleton/index.js +59 -0
- package/v2Components/CapCustomSkeleton/tests/__snapshots__/index.test.js.snap +264 -0
- package/v2Components/CapCustomSkeleton/tests/index.test.js +12 -0
- package/v2Containers/Assets/Gallery/index.js +4 -3
- package/v2Containers/Cap/Loadable.js +25 -0
- package/v2Containers/Templates/Loadable.js +25 -0
- package/v2Containers/Templates/index.js +6 -5
- package/v2Containers/Templates/tests/__snapshots__/index.test.js.snap +78 -90
- package/v2Containers/TemplatesV2/Loadable.js +25 -0
|
Binary file
|
package/package.json
CHANGED
|
@@ -343,9 +343,6 @@ describe("Creatives testing template creation", () => {
|
|
|
343
343
|
});
|
|
344
344
|
await userEvent.click(galleryBtn);
|
|
345
345
|
delay(10000);
|
|
346
|
-
expect(
|
|
347
|
-
screen.getByText(/loading gallery.../i)
|
|
348
|
-
).toBeInTheDocument();
|
|
349
346
|
expect(
|
|
350
347
|
screen.getByRole('button', {
|
|
351
348
|
name: /close/i,
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import PropTypes from "prop-types";
|
|
3
|
+
import CapSkeleton from "@capillarytech/cap-ui-library/CapSkeleton";
|
|
4
|
+
import CapRow from "@capillarytech/cap-ui-library/CapRow";
|
|
5
|
+
import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
|
|
6
|
+
|
|
7
|
+
export default function CapCustomSkeleton(props) {
|
|
8
|
+
const { loader = true, children } = props;
|
|
9
|
+
return (
|
|
10
|
+
<>
|
|
11
|
+
{loader ? (
|
|
12
|
+
<div>
|
|
13
|
+
<CapSkeleton
|
|
14
|
+
active
|
|
15
|
+
title={{
|
|
16
|
+
style: {
|
|
17
|
+
height: "2.5rem",
|
|
18
|
+
width: "100%",
|
|
19
|
+
},
|
|
20
|
+
}}
|
|
21
|
+
paragraph={false}
|
|
22
|
+
/>
|
|
23
|
+
{
|
|
24
|
+
<CapRow gutter={16}>
|
|
25
|
+
{Array.from({ length: 12 }).map((_, index) => (
|
|
26
|
+
<CapColumn
|
|
27
|
+
key={index}
|
|
28
|
+
xs={24}
|
|
29
|
+
sm={12}
|
|
30
|
+
md={8}
|
|
31
|
+
lg={6}
|
|
32
|
+
>
|
|
33
|
+
<CapSkeleton
|
|
34
|
+
active
|
|
35
|
+
title={{
|
|
36
|
+
style: {
|
|
37
|
+
height: "21.125rem",
|
|
38
|
+
width: "17.25rem",
|
|
39
|
+
},
|
|
40
|
+
}}
|
|
41
|
+
paragraph={false}
|
|
42
|
+
/>
|
|
43
|
+
</CapColumn>
|
|
44
|
+
))}
|
|
45
|
+
</CapRow>
|
|
46
|
+
}
|
|
47
|
+
</div>
|
|
48
|
+
) : (
|
|
49
|
+
<>{children}</>
|
|
50
|
+
)}
|
|
51
|
+
</>
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
CapCustomSkeleton.propTypes = {
|
|
56
|
+
children: PropTypes.node,
|
|
57
|
+
loader: PropTypes.bool,
|
|
58
|
+
};
|
|
59
|
+
|
|
@@ -0,0 +1,264 @@
|
|
|
1
|
+
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
|
+
|
|
3
|
+
exports[`CapCustomSkeleton test renders correct CapCustomSkeleton component 1`] = `
|
|
4
|
+
<Fragment>
|
|
5
|
+
<div>
|
|
6
|
+
<CapSkeleton
|
|
7
|
+
active={true}
|
|
8
|
+
paragraph={false}
|
|
9
|
+
title={
|
|
10
|
+
Object {
|
|
11
|
+
"style": Object {
|
|
12
|
+
"height": "2.5rem",
|
|
13
|
+
"width": "100%",
|
|
14
|
+
},
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
/>
|
|
18
|
+
<CapRow
|
|
19
|
+
gutter={16}
|
|
20
|
+
>
|
|
21
|
+
<CapColumn
|
|
22
|
+
key="0"
|
|
23
|
+
lg={6}
|
|
24
|
+
md={8}
|
|
25
|
+
sm={12}
|
|
26
|
+
xs={24}
|
|
27
|
+
>
|
|
28
|
+
<CapSkeleton
|
|
29
|
+
active={true}
|
|
30
|
+
paragraph={false}
|
|
31
|
+
title={
|
|
32
|
+
Object {
|
|
33
|
+
"style": Object {
|
|
34
|
+
"height": "21.125rem",
|
|
35
|
+
"width": "17.25rem",
|
|
36
|
+
},
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
/>
|
|
40
|
+
</CapColumn>
|
|
41
|
+
<CapColumn
|
|
42
|
+
key="1"
|
|
43
|
+
lg={6}
|
|
44
|
+
md={8}
|
|
45
|
+
sm={12}
|
|
46
|
+
xs={24}
|
|
47
|
+
>
|
|
48
|
+
<CapSkeleton
|
|
49
|
+
active={true}
|
|
50
|
+
paragraph={false}
|
|
51
|
+
title={
|
|
52
|
+
Object {
|
|
53
|
+
"style": Object {
|
|
54
|
+
"height": "21.125rem",
|
|
55
|
+
"width": "17.25rem",
|
|
56
|
+
},
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
/>
|
|
60
|
+
</CapColumn>
|
|
61
|
+
<CapColumn
|
|
62
|
+
key="2"
|
|
63
|
+
lg={6}
|
|
64
|
+
md={8}
|
|
65
|
+
sm={12}
|
|
66
|
+
xs={24}
|
|
67
|
+
>
|
|
68
|
+
<CapSkeleton
|
|
69
|
+
active={true}
|
|
70
|
+
paragraph={false}
|
|
71
|
+
title={
|
|
72
|
+
Object {
|
|
73
|
+
"style": Object {
|
|
74
|
+
"height": "21.125rem",
|
|
75
|
+
"width": "17.25rem",
|
|
76
|
+
},
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
/>
|
|
80
|
+
</CapColumn>
|
|
81
|
+
<CapColumn
|
|
82
|
+
key="3"
|
|
83
|
+
lg={6}
|
|
84
|
+
md={8}
|
|
85
|
+
sm={12}
|
|
86
|
+
xs={24}
|
|
87
|
+
>
|
|
88
|
+
<CapSkeleton
|
|
89
|
+
active={true}
|
|
90
|
+
paragraph={false}
|
|
91
|
+
title={
|
|
92
|
+
Object {
|
|
93
|
+
"style": Object {
|
|
94
|
+
"height": "21.125rem",
|
|
95
|
+
"width": "17.25rem",
|
|
96
|
+
},
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
/>
|
|
100
|
+
</CapColumn>
|
|
101
|
+
<CapColumn
|
|
102
|
+
key="4"
|
|
103
|
+
lg={6}
|
|
104
|
+
md={8}
|
|
105
|
+
sm={12}
|
|
106
|
+
xs={24}
|
|
107
|
+
>
|
|
108
|
+
<CapSkeleton
|
|
109
|
+
active={true}
|
|
110
|
+
paragraph={false}
|
|
111
|
+
title={
|
|
112
|
+
Object {
|
|
113
|
+
"style": Object {
|
|
114
|
+
"height": "21.125rem",
|
|
115
|
+
"width": "17.25rem",
|
|
116
|
+
},
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
/>
|
|
120
|
+
</CapColumn>
|
|
121
|
+
<CapColumn
|
|
122
|
+
key="5"
|
|
123
|
+
lg={6}
|
|
124
|
+
md={8}
|
|
125
|
+
sm={12}
|
|
126
|
+
xs={24}
|
|
127
|
+
>
|
|
128
|
+
<CapSkeleton
|
|
129
|
+
active={true}
|
|
130
|
+
paragraph={false}
|
|
131
|
+
title={
|
|
132
|
+
Object {
|
|
133
|
+
"style": Object {
|
|
134
|
+
"height": "21.125rem",
|
|
135
|
+
"width": "17.25rem",
|
|
136
|
+
},
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
/>
|
|
140
|
+
</CapColumn>
|
|
141
|
+
<CapColumn
|
|
142
|
+
key="6"
|
|
143
|
+
lg={6}
|
|
144
|
+
md={8}
|
|
145
|
+
sm={12}
|
|
146
|
+
xs={24}
|
|
147
|
+
>
|
|
148
|
+
<CapSkeleton
|
|
149
|
+
active={true}
|
|
150
|
+
paragraph={false}
|
|
151
|
+
title={
|
|
152
|
+
Object {
|
|
153
|
+
"style": Object {
|
|
154
|
+
"height": "21.125rem",
|
|
155
|
+
"width": "17.25rem",
|
|
156
|
+
},
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
/>
|
|
160
|
+
</CapColumn>
|
|
161
|
+
<CapColumn
|
|
162
|
+
key="7"
|
|
163
|
+
lg={6}
|
|
164
|
+
md={8}
|
|
165
|
+
sm={12}
|
|
166
|
+
xs={24}
|
|
167
|
+
>
|
|
168
|
+
<CapSkeleton
|
|
169
|
+
active={true}
|
|
170
|
+
paragraph={false}
|
|
171
|
+
title={
|
|
172
|
+
Object {
|
|
173
|
+
"style": Object {
|
|
174
|
+
"height": "21.125rem",
|
|
175
|
+
"width": "17.25rem",
|
|
176
|
+
},
|
|
177
|
+
}
|
|
178
|
+
}
|
|
179
|
+
/>
|
|
180
|
+
</CapColumn>
|
|
181
|
+
<CapColumn
|
|
182
|
+
key="8"
|
|
183
|
+
lg={6}
|
|
184
|
+
md={8}
|
|
185
|
+
sm={12}
|
|
186
|
+
xs={24}
|
|
187
|
+
>
|
|
188
|
+
<CapSkeleton
|
|
189
|
+
active={true}
|
|
190
|
+
paragraph={false}
|
|
191
|
+
title={
|
|
192
|
+
Object {
|
|
193
|
+
"style": Object {
|
|
194
|
+
"height": "21.125rem",
|
|
195
|
+
"width": "17.25rem",
|
|
196
|
+
},
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
/>
|
|
200
|
+
</CapColumn>
|
|
201
|
+
<CapColumn
|
|
202
|
+
key="9"
|
|
203
|
+
lg={6}
|
|
204
|
+
md={8}
|
|
205
|
+
sm={12}
|
|
206
|
+
xs={24}
|
|
207
|
+
>
|
|
208
|
+
<CapSkeleton
|
|
209
|
+
active={true}
|
|
210
|
+
paragraph={false}
|
|
211
|
+
title={
|
|
212
|
+
Object {
|
|
213
|
+
"style": Object {
|
|
214
|
+
"height": "21.125rem",
|
|
215
|
+
"width": "17.25rem",
|
|
216
|
+
},
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
/>
|
|
220
|
+
</CapColumn>
|
|
221
|
+
<CapColumn
|
|
222
|
+
key="10"
|
|
223
|
+
lg={6}
|
|
224
|
+
md={8}
|
|
225
|
+
sm={12}
|
|
226
|
+
xs={24}
|
|
227
|
+
>
|
|
228
|
+
<CapSkeleton
|
|
229
|
+
active={true}
|
|
230
|
+
paragraph={false}
|
|
231
|
+
title={
|
|
232
|
+
Object {
|
|
233
|
+
"style": Object {
|
|
234
|
+
"height": "21.125rem",
|
|
235
|
+
"width": "17.25rem",
|
|
236
|
+
},
|
|
237
|
+
}
|
|
238
|
+
}
|
|
239
|
+
/>
|
|
240
|
+
</CapColumn>
|
|
241
|
+
<CapColumn
|
|
242
|
+
key="11"
|
|
243
|
+
lg={6}
|
|
244
|
+
md={8}
|
|
245
|
+
sm={12}
|
|
246
|
+
xs={24}
|
|
247
|
+
>
|
|
248
|
+
<CapSkeleton
|
|
249
|
+
active={true}
|
|
250
|
+
paragraph={false}
|
|
251
|
+
title={
|
|
252
|
+
Object {
|
|
253
|
+
"style": Object {
|
|
254
|
+
"height": "21.125rem",
|
|
255
|
+
"width": "17.25rem",
|
|
256
|
+
},
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
/>
|
|
260
|
+
</CapColumn>
|
|
261
|
+
</CapRow>
|
|
262
|
+
</div>
|
|
263
|
+
</Fragment>
|
|
264
|
+
`;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { shallow } from 'enzyme';
|
|
3
|
+
import CapCustomSkeleton from '../index';
|
|
4
|
+
|
|
5
|
+
describe('CapCustomSkeleton test', () => {
|
|
6
|
+
it('renders correct CapCustomSkeleton component', () => {
|
|
7
|
+
const renderedComponent = shallow(
|
|
8
|
+
<CapCustomSkeleton/>
|
|
9
|
+
);
|
|
10
|
+
expect(renderedComponent).toMatchSnapshot();
|
|
11
|
+
});
|
|
12
|
+
});
|
|
@@ -13,7 +13,7 @@ import { FormattedMessage, injectIntl, intlShape } from 'react-intl';
|
|
|
13
13
|
import { createStructuredSelector } from 'reselect';
|
|
14
14
|
import moment from "moment";
|
|
15
15
|
import _ from "lodash";
|
|
16
|
-
import { CapHeading, CapHeader, CapInput, CapButton,
|
|
16
|
+
import { CapHeading, CapHeader, CapInput, CapButton, CapIcon, CapDropdown, CapMenu, CapCustomCard, CapSlideBox, CapLabel, CapIllustration} from '@capillarytech/cap-ui-library';
|
|
17
17
|
import { Popover } from 'antd';
|
|
18
18
|
import makeSelectGallery from './selectors';
|
|
19
19
|
import messages from './messages';
|
|
@@ -24,6 +24,7 @@ import {getMessageObject} from '../../../utils/messageUtils';
|
|
|
24
24
|
import * as commonUtil from '../../../utils/common';
|
|
25
25
|
import Pagination from '../../../v2Components/Pagination';
|
|
26
26
|
import imageGalleryIllustration from '../images/imageGalleryIllustration.svg';
|
|
27
|
+
import CapCustomSkeleton from '../../../v2Components/CapCustomSkeleton';
|
|
27
28
|
import './_gallery.scss';
|
|
28
29
|
const {CapCustomCardList} = CapCustomCard;
|
|
29
30
|
export class Gallery extends React.Component { // eslint-disable-line react/prefer-stateless-function
|
|
@@ -349,7 +350,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
|
|
|
349
350
|
}) : [];
|
|
350
351
|
return (<div>
|
|
351
352
|
{filterContent}
|
|
352
|
-
<
|
|
353
|
+
<CapCustomSkeleton loader={isLoading}>
|
|
353
354
|
{!isLoading && <div>
|
|
354
355
|
{!_.isEmpty(templates) || !_.isEmpty(searchText) ? <div className={`pagination-container ${this.props.isLineAsset ? 'gallery-upload' : ''}`}>
|
|
355
356
|
<CapCustomCardList key={`${currentChannel}-card-list`} cardList={cardDataList} type={'Email'} />
|
|
@@ -366,7 +367,7 @@ export class Gallery extends React.Component { // eslint-disable-line react/pref
|
|
|
366
367
|
)}
|
|
367
368
|
</div>
|
|
368
369
|
}
|
|
369
|
-
</
|
|
370
|
+
</CapCustomSkeleton>
|
|
370
371
|
|
|
371
372
|
</div>);
|
|
372
373
|
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React, { Suspense } from "react";
|
|
2
|
+
import { loadable } from "@capillarytech/cap-ui-utils";
|
|
3
|
+
import CapSkeleton from "@capillarytech/cap-ui-library/CapSkeleton";
|
|
4
|
+
|
|
5
|
+
const LoadableComponent = loadable(() => import("./index"));
|
|
6
|
+
|
|
7
|
+
export default () => (
|
|
8
|
+
<Suspense
|
|
9
|
+
fallback={
|
|
10
|
+
<CapSkeleton
|
|
11
|
+
active
|
|
12
|
+
title={{
|
|
13
|
+
style: {
|
|
14
|
+
margin: 10,
|
|
15
|
+
height: 750,
|
|
16
|
+
width: "90%",
|
|
17
|
+
},
|
|
18
|
+
}}
|
|
19
|
+
paragraph={false}
|
|
20
|
+
/>
|
|
21
|
+
}
|
|
22
|
+
>
|
|
23
|
+
<LoadableComponent />
|
|
24
|
+
</Suspense>
|
|
25
|
+
);
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React, { Suspense } from "react";
|
|
2
|
+
import { loadable } from "@capillarytech/cap-ui-utils";
|
|
3
|
+
import CapSkeleton from "@capillarytech/cap-ui-library/CapSkeleton";
|
|
4
|
+
|
|
5
|
+
const LoadableComponent = loadable(() => import("./index"));
|
|
6
|
+
|
|
7
|
+
export default () => (
|
|
8
|
+
<Suspense
|
|
9
|
+
fallback={
|
|
10
|
+
<CapSkeleton
|
|
11
|
+
active
|
|
12
|
+
title={{
|
|
13
|
+
style: {
|
|
14
|
+
margin: 10,
|
|
15
|
+
height: 750,
|
|
16
|
+
width: "90%",
|
|
17
|
+
},
|
|
18
|
+
}}
|
|
19
|
+
paragraph={false}
|
|
20
|
+
/>
|
|
21
|
+
}
|
|
22
|
+
>
|
|
23
|
+
<LoadableComponent />
|
|
24
|
+
</Suspense>
|
|
25
|
+
);
|
|
@@ -30,7 +30,7 @@ import {
|
|
|
30
30
|
CapIcon,
|
|
31
31
|
CapRadioCard,
|
|
32
32
|
CapPopover,
|
|
33
|
-
|
|
33
|
+
CapSkeleton,
|
|
34
34
|
CapCustomCard,
|
|
35
35
|
CapRow,
|
|
36
36
|
CapSlideBox,
|
|
@@ -89,6 +89,7 @@ import EmailPreview from '../../v2Components/EmailPreview';
|
|
|
89
89
|
import CreativesContainer from '../CreativesContainer';
|
|
90
90
|
import WhatsappStatusContainer from '../../v2Components/WhatsappStatusContainer';
|
|
91
91
|
import WechatRichmediaTemplatePreview from '../../v2Components/TemplatePreview/WechatRichmediaTemplatePreview';
|
|
92
|
+
import CapCustomSkeleton from '../../v2Components/CapCustomSkeleton';
|
|
92
93
|
import {
|
|
93
94
|
CHANNEL_CREATE_TRACK_MAPPING,
|
|
94
95
|
CHANNEL_EDIT_TRACK_MAPPING,
|
|
@@ -1383,7 +1384,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1383
1384
|
{[WECHAT, MOBILE_PUSH, INAPP].includes(currentChannel) && this.showAccountName()}
|
|
1384
1385
|
{filterContent}
|
|
1385
1386
|
{[WHATSAPP, ZALO].includes(currentChannel) && this.selectedFilters()}
|
|
1386
|
-
<
|
|
1387
|
+
<CapCustomSkeleton loader={isLoading}>
|
|
1387
1388
|
{<div>
|
|
1388
1389
|
{!isEmpty(filteredTemplates) || !isEmpty(this.state.searchText) || !isEmpty(this.props.Templates.templateError) ? (
|
|
1389
1390
|
<div className={!isEmpty(this.state.searchText) && isEmpty(cardDataList) ? '' : "pagination-container"}>
|
|
@@ -1448,7 +1449,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
1448
1449
|
}
|
|
1449
1450
|
</div>
|
|
1450
1451
|
}
|
|
1451
|
-
</
|
|
1452
|
+
</CapCustomSkeleton>
|
|
1452
1453
|
</div>);
|
|
1453
1454
|
}
|
|
1454
1455
|
filterLineTemplates = (templates) => {
|
|
@@ -2655,7 +2656,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
2655
2656
|
if (channel === WECHAT && !commonUtil.hasWechatFeatureEnabled()) {
|
|
2656
2657
|
showNoAccountHeader = true;
|
|
2657
2658
|
}
|
|
2658
|
-
return (<
|
|
2659
|
+
return (<CapSkeleton loading={fetchingWeCrmAccounts} active paragraph={{ rows: 10 }}>
|
|
2659
2660
|
{showNoAccountHeader ? <FormattedMessage {...noAccountHeader} /> :
|
|
2660
2661
|
<div style={{ overflowX: "auto", paddingBottom: CAP_SPACE_16 }}>
|
|
2661
2662
|
<CapHeader
|
|
@@ -2676,7 +2677,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
|
|
|
2676
2677
|
/>
|
|
2677
2678
|
</div>
|
|
2678
2679
|
}
|
|
2679
|
-
</
|
|
2680
|
+
</CapSkeleton>);
|
|
2680
2681
|
};
|
|
2681
2682
|
|
|
2682
2683
|
setAccountSelectionMode = () => {
|
|
@@ -1,20 +1,32 @@
|
|
|
1
1
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
2
2
|
|
|
3
3
|
exports[`Test Templates container Should render correct component for whatsapp channel 1`] = `
|
|
4
|
-
<
|
|
5
|
-
|
|
4
|
+
<CapSkeleton
|
|
5
|
+
active={true}
|
|
6
|
+
loading={false}
|
|
7
|
+
paragraph={
|
|
8
|
+
Object {
|
|
9
|
+
"rows": 10,
|
|
10
|
+
}
|
|
11
|
+
}
|
|
6
12
|
>
|
|
7
13
|
<FormattedMessage
|
|
8
14
|
defaultMessage="Whatsapp accounts are not setup for your brand"
|
|
9
15
|
id="creatives.containersV2.Templates.noAccountsPresentWhatsapp"
|
|
10
16
|
values={Object {}}
|
|
11
17
|
/>
|
|
12
|
-
</
|
|
18
|
+
</CapSkeleton>
|
|
13
19
|
`;
|
|
14
20
|
|
|
15
21
|
exports[`Test Templates container Should render correct component for zalo channel 1`] = `
|
|
16
|
-
<
|
|
17
|
-
|
|
22
|
+
<CapSkeleton
|
|
23
|
+
active={true}
|
|
24
|
+
loading={false}
|
|
25
|
+
paragraph={
|
|
26
|
+
Object {
|
|
27
|
+
"rows": 10,
|
|
28
|
+
}
|
|
29
|
+
}
|
|
18
30
|
>
|
|
19
31
|
<div
|
|
20
32
|
style={
|
|
@@ -59,36 +71,54 @@ exports[`Test Templates container Should render correct component for zalo chann
|
|
|
59
71
|
size="small"
|
|
60
72
|
/>
|
|
61
73
|
</div>
|
|
62
|
-
</
|
|
74
|
+
</CapSkeleton>
|
|
63
75
|
`;
|
|
64
76
|
|
|
65
77
|
exports[`Test Templates container Should render illustration when no templates are passed 1`] = `
|
|
66
|
-
<
|
|
67
|
-
|
|
78
|
+
<CapSkeleton
|
|
79
|
+
active={true}
|
|
80
|
+
loading={false}
|
|
81
|
+
paragraph={
|
|
82
|
+
Object {
|
|
83
|
+
"rows": 10,
|
|
84
|
+
}
|
|
85
|
+
}
|
|
68
86
|
>
|
|
69
87
|
<FormattedMessage
|
|
70
88
|
defaultMessage="Whatsapp accounts are not setup for your brand"
|
|
71
89
|
id="creatives.containersV2.Templates.noAccountsPresentWhatsapp"
|
|
72
90
|
values={Object {}}
|
|
73
91
|
/>
|
|
74
|
-
</
|
|
92
|
+
</CapSkeleton>
|
|
75
93
|
`;
|
|
76
94
|
|
|
77
95
|
exports[`Test Templates container Should render illustration when no templates are passed 2`] = `
|
|
78
|
-
<
|
|
79
|
-
|
|
96
|
+
<CapSkeleton
|
|
97
|
+
active={true}
|
|
98
|
+
loading={false}
|
|
99
|
+
paragraph={
|
|
100
|
+
Object {
|
|
101
|
+
"rows": 10,
|
|
102
|
+
}
|
|
103
|
+
}
|
|
80
104
|
>
|
|
81
105
|
<FormattedMessage
|
|
82
106
|
defaultMessage="Zalo accounts are not setup for your brand"
|
|
83
107
|
id="creatives.containersV2.Templates.noAccountsPresentZalo"
|
|
84
108
|
values={Object {}}
|
|
85
109
|
/>
|
|
86
|
-
</
|
|
110
|
+
</CapSkeleton>
|
|
87
111
|
`;
|
|
88
112
|
|
|
89
113
|
exports[`Test Templates container Should render temlates when Zalo templates are passed in full mode 1`] = `
|
|
90
|
-
<
|
|
91
|
-
|
|
114
|
+
<CapSkeleton
|
|
115
|
+
active={true}
|
|
116
|
+
loading={false}
|
|
117
|
+
paragraph={
|
|
118
|
+
Object {
|
|
119
|
+
"rows": 10,
|
|
120
|
+
}
|
|
121
|
+
}
|
|
92
122
|
>
|
|
93
123
|
<div
|
|
94
124
|
style={
|
|
@@ -133,7 +163,7 @@ exports[`Test Templates container Should render temlates when Zalo templates are
|
|
|
133
163
|
size="small"
|
|
134
164
|
/>
|
|
135
165
|
</div>
|
|
136
|
-
</
|
|
166
|
+
</CapSkeleton>
|
|
137
167
|
`;
|
|
138
168
|
|
|
139
169
|
exports[`Test Templates container Should render temlates when whatsapp templates are passed 1`] = `
|
|
@@ -279,14 +309,8 @@ exports[`Test Templates container Should render temlates when whatsapp templates
|
|
|
279
309
|
className="selected-whatsapp-filters"
|
|
280
310
|
type="flex"
|
|
281
311
|
/>
|
|
282
|
-
<
|
|
283
|
-
|
|
284
|
-
style={
|
|
285
|
-
Object {
|
|
286
|
-
"width": "100%",
|
|
287
|
-
}
|
|
288
|
-
}
|
|
289
|
-
tip="Getting all templates..."
|
|
312
|
+
<CapCustomSkeleton
|
|
313
|
+
loader={false}
|
|
290
314
|
>
|
|
291
315
|
<div>
|
|
292
316
|
<div
|
|
@@ -325,7 +349,7 @@ exports[`Test Templates container Should render temlates when whatsapp templates
|
|
|
325
349
|
/>
|
|
326
350
|
</div>
|
|
327
351
|
</div>
|
|
328
|
-
</
|
|
352
|
+
</CapCustomSkeleton>
|
|
329
353
|
</div>
|
|
330
354
|
</Pagination>
|
|
331
355
|
</CapRow>
|
|
@@ -574,14 +598,8 @@ exports[`Test Templates container Should render temlates when whatsapp templates
|
|
|
574
598
|
title="Clear all"
|
|
575
599
|
/>
|
|
576
600
|
</CapRow>
|
|
577
|
-
<
|
|
578
|
-
|
|
579
|
-
style={
|
|
580
|
-
Object {
|
|
581
|
-
"width": "100%",
|
|
582
|
-
}
|
|
583
|
-
}
|
|
584
|
-
tip="Getting all templates..."
|
|
601
|
+
<CapCustomSkeleton
|
|
602
|
+
loader={false}
|
|
585
603
|
>
|
|
586
604
|
<div>
|
|
587
605
|
<div
|
|
@@ -620,7 +638,7 @@ exports[`Test Templates container Should render temlates when whatsapp templates
|
|
|
620
638
|
/>
|
|
621
639
|
</div>
|
|
622
640
|
</div>
|
|
623
|
-
</
|
|
641
|
+
</CapCustomSkeleton>
|
|
624
642
|
</div>
|
|
625
643
|
</Pagination>
|
|
626
644
|
</CapRow>
|
|
@@ -671,8 +689,14 @@ exports[`Test Templates container Should render temlates when whatsapp templates
|
|
|
671
689
|
`;
|
|
672
690
|
|
|
673
691
|
exports[`Test Templates container Should render temlates when zalo templates are passed 1`] = `
|
|
674
|
-
<
|
|
675
|
-
|
|
692
|
+
<CapSkeleton
|
|
693
|
+
active={true}
|
|
694
|
+
loading={false}
|
|
695
|
+
paragraph={
|
|
696
|
+
Object {
|
|
697
|
+
"rows": 10,
|
|
698
|
+
}
|
|
699
|
+
}
|
|
676
700
|
>
|
|
677
701
|
<div
|
|
678
702
|
style={
|
|
@@ -717,7 +741,7 @@ exports[`Test Templates container Should render temlates when zalo templates are
|
|
|
717
741
|
size="small"
|
|
718
742
|
/>
|
|
719
743
|
</div>
|
|
720
|
-
</
|
|
744
|
+
</CapSkeleton>
|
|
721
745
|
`;
|
|
722
746
|
|
|
723
747
|
exports[`Test Templates container Test max templates exceeded 1`] = `
|
|
@@ -933,14 +957,8 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
|
|
|
933
957
|
className="selected-whatsapp-filters"
|
|
934
958
|
type="flex"
|
|
935
959
|
/>
|
|
936
|
-
<
|
|
937
|
-
|
|
938
|
-
style={
|
|
939
|
-
Object {
|
|
940
|
-
"width": "100%",
|
|
941
|
-
}
|
|
942
|
-
}
|
|
943
|
-
tip="Getting all templates..."
|
|
960
|
+
<CapCustomSkeleton
|
|
961
|
+
loader={false}
|
|
944
962
|
>
|
|
945
963
|
<div>
|
|
946
964
|
<div
|
|
@@ -1147,7 +1165,7 @@ Click {{3}} to unsubscribe",
|
|
|
1147
1165
|
}
|
|
1148
1166
|
/>
|
|
1149
1167
|
</div>
|
|
1150
|
-
</
|
|
1168
|
+
</CapCustomSkeleton>
|
|
1151
1169
|
</div>
|
|
1152
1170
|
</Pagination>
|
|
1153
1171
|
</CapRow>
|
|
@@ -1378,14 +1396,8 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
|
|
|
1378
1396
|
className="selected-whatsapp-filters"
|
|
1379
1397
|
type="flex"
|
|
1380
1398
|
/>
|
|
1381
|
-
<
|
|
1382
|
-
|
|
1383
|
-
style={
|
|
1384
|
-
Object {
|
|
1385
|
-
"width": "100%",
|
|
1386
|
-
}
|
|
1387
|
-
}
|
|
1388
|
-
tip="Getting all templates..."
|
|
1399
|
+
<CapCustomSkeleton
|
|
1400
|
+
loader={false}
|
|
1389
1401
|
>
|
|
1390
1402
|
<div>
|
|
1391
1403
|
<div
|
|
@@ -1592,7 +1604,7 @@ Click {{3}} to unsubscribe",
|
|
|
1592
1604
|
}
|
|
1593
1605
|
/>
|
|
1594
1606
|
</div>
|
|
1595
|
-
</
|
|
1607
|
+
</CapCustomSkeleton>
|
|
1596
1608
|
</div>
|
|
1597
1609
|
</Pagination>
|
|
1598
1610
|
</CapRow>
|
|
@@ -1823,14 +1835,8 @@ exports[`Test Templates container Test max templates warning 1`] = `
|
|
|
1823
1835
|
className="selected-whatsapp-filters"
|
|
1824
1836
|
type="flex"
|
|
1825
1837
|
/>
|
|
1826
|
-
<
|
|
1827
|
-
|
|
1828
|
-
style={
|
|
1829
|
-
Object {
|
|
1830
|
-
"width": "100%",
|
|
1831
|
-
}
|
|
1832
|
-
}
|
|
1833
|
-
tip="Getting all templates..."
|
|
1838
|
+
<CapCustomSkeleton
|
|
1839
|
+
loader={false}
|
|
1834
1840
|
>
|
|
1835
1841
|
<div>
|
|
1836
1842
|
<div
|
|
@@ -2037,7 +2043,7 @@ Click {{3}} to unsubscribe",
|
|
|
2037
2043
|
}
|
|
2038
2044
|
/>
|
|
2039
2045
|
</div>
|
|
2040
|
-
</
|
|
2046
|
+
</CapCustomSkeleton>
|
|
2041
2047
|
</div>
|
|
2042
2048
|
</Pagination>
|
|
2043
2049
|
</CapRow>
|
|
@@ -2256,14 +2262,8 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
|
|
|
2256
2262
|
title="Clear all"
|
|
2257
2263
|
/>
|
|
2258
2264
|
</CapRow>
|
|
2259
|
-
<
|
|
2260
|
-
|
|
2261
|
-
style={
|
|
2262
|
-
Object {
|
|
2263
|
-
"width": "100%",
|
|
2264
|
-
}
|
|
2265
|
-
}
|
|
2266
|
-
tip="Getting all templates..."
|
|
2265
|
+
<CapCustomSkeleton
|
|
2266
|
+
loader={false}
|
|
2267
2267
|
>
|
|
2268
2268
|
<div>
|
|
2269
2269
|
<div
|
|
@@ -2302,7 +2302,7 @@ exports[`Test Templates container Test removing all whatsapp filterss 1`] = `
|
|
|
2302
2302
|
/>
|
|
2303
2303
|
</div>
|
|
2304
2304
|
</div>
|
|
2305
|
-
</
|
|
2305
|
+
</CapCustomSkeleton>
|
|
2306
2306
|
</div>
|
|
2307
2307
|
</Pagination>
|
|
2308
2308
|
</CapRow>
|
|
@@ -2495,14 +2495,8 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
|
|
|
2495
2495
|
className="selected-whatsapp-filters"
|
|
2496
2496
|
type="flex"
|
|
2497
2497
|
/>
|
|
2498
|
-
<
|
|
2499
|
-
|
|
2500
|
-
style={
|
|
2501
|
-
Object {
|
|
2502
|
-
"width": "100%",
|
|
2503
|
-
}
|
|
2504
|
-
}
|
|
2505
|
-
tip="Getting all templates..."
|
|
2498
|
+
<CapCustomSkeleton
|
|
2499
|
+
loader={false}
|
|
2506
2500
|
>
|
|
2507
2501
|
<div>
|
|
2508
2502
|
<div
|
|
@@ -2541,7 +2535,7 @@ exports[`Test Templates container Test removing all whatsapp filterss 2`] = `
|
|
|
2541
2535
|
/>
|
|
2542
2536
|
</div>
|
|
2543
2537
|
</div>
|
|
2544
|
-
</
|
|
2538
|
+
</CapCustomSkeleton>
|
|
2545
2539
|
</div>
|
|
2546
2540
|
</Pagination>
|
|
2547
2541
|
</CapRow>
|
|
@@ -2734,14 +2728,8 @@ exports[`Test Templates container Test removing single filter 1`] = `
|
|
|
2734
2728
|
className="selected-whatsapp-filters"
|
|
2735
2729
|
type="flex"
|
|
2736
2730
|
/>
|
|
2737
|
-
<
|
|
2738
|
-
|
|
2739
|
-
style={
|
|
2740
|
-
Object {
|
|
2741
|
-
"width": "100%",
|
|
2742
|
-
}
|
|
2743
|
-
}
|
|
2744
|
-
tip="Getting all templates..."
|
|
2731
|
+
<CapCustomSkeleton
|
|
2732
|
+
loader={false}
|
|
2745
2733
|
>
|
|
2746
2734
|
<div>
|
|
2747
2735
|
<div
|
|
@@ -2780,7 +2768,7 @@ exports[`Test Templates container Test removing single filter 1`] = `
|
|
|
2780
2768
|
/>
|
|
2781
2769
|
</div>
|
|
2782
2770
|
</div>
|
|
2783
|
-
</
|
|
2771
|
+
</CapCustomSkeleton>
|
|
2784
2772
|
</div>
|
|
2785
2773
|
</Pagination>
|
|
2786
2774
|
</CapRow>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import React, { Suspense } from "react";
|
|
2
|
+
import { loadable } from "@capillarytech/cap-ui-utils";
|
|
3
|
+
import CapSkeleton from "@capillarytech/cap-ui-library/CapSkeleton";
|
|
4
|
+
|
|
5
|
+
const LoadableComponent = loadable(() => import("./index"));
|
|
6
|
+
|
|
7
|
+
export default () => (
|
|
8
|
+
<Suspense
|
|
9
|
+
fallback={
|
|
10
|
+
<CapSkeleton
|
|
11
|
+
active
|
|
12
|
+
title={{
|
|
13
|
+
style: {
|
|
14
|
+
margin: 10,
|
|
15
|
+
height: 750,
|
|
16
|
+
width: "90%",
|
|
17
|
+
},
|
|
18
|
+
}}
|
|
19
|
+
paragraph={false}
|
|
20
|
+
/>
|
|
21
|
+
}
|
|
22
|
+
>
|
|
23
|
+
<LoadableComponent />
|
|
24
|
+
</Suspense>
|
|
25
|
+
);
|