@capillarytech/creatives-library 2.0.77 → 2.0.79

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.
@@ -2079,7 +2079,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
2079
2079
  const fileParams = {
2080
2080
  width: this.width,
2081
2081
  height: this.height,
2082
- error: file.size / (1e+6) > 5,
2082
+ error: file.size / (1e+6) > 3,
2083
2083
  };
2084
2084
  this.callChildEvent({file, type: 'image', fileParams}, val, val.submitAction);
2085
2085
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@capillarytech/creatives-library",
3
3
  "author": "meharaj",
4
- "version": "2.0.77",
4
+ "version": "2.0.79",
5
5
  "description": "Capillary creatives ui",
6
6
  "main": "./index.js",
7
7
  "module": "./index.es.js",
package/routes.js CHANGED
@@ -612,10 +612,10 @@ export default function createRoutes(store) {
612
612
  import('v2Containers/Email/sagas'),
613
613
  import('v2Containers/CallTask/reducer'),
614
614
  import('v2Containers/CallTask/sagas'),
615
- import('v2Containers/Mobilepush/Create/sagas'),
616
- import('v2Containers/Mobilepush/Create/reducer'),
617
- import('v2Containers/Mobilepush/Edit/sagas'),
618
- import('v2Containers/Mobilepush/Edit/reducer'),
615
+ import('v2Containers/MobilePush/Create/sagas'),
616
+ import('v2Containers/MobilePush/Create/reducer'),
617
+ import('v2Containers/MobilePush/Edit/sagas'),
618
+ import('v2Containers/MobilePush/Edit/reducer'),
619
619
  import('v2Containers/Assets/Gallery/reducer'),
620
620
  import('v2Containers/Assets/Gallery/sagas'),
621
621
  ]);
@@ -205,6 +205,7 @@ function SlideBoxContent(props) {
205
205
  route={{ name: 'mobilepush' }}
206
206
  templateData={templateData}
207
207
  showTemplateName={showTemplateName}
208
+ getDefaultTags={type}
208
209
  />
209
210
  }
210
211
  {isCreateMPush &&
@@ -8,8 +8,16 @@ import messages from './messages';
8
8
  const PrefixWrapper = styled.div`
9
9
  margin-right: 16px;
10
10
  `;
11
+ function getChannelLabel(channel) {
12
+ const labels = {
13
+ sms: 'SMS',
14
+ email: 'Email',
15
+ mobilepush: 'Push notification',
16
+ };
17
+ return labels[channel.toLowerCase()];
18
+ }
11
19
  function SlideBoxHeader(props) {
12
- const { slidBoxContent, templateData, onShowTemplates, creativesMode, isFullMode, showPrefix, showTemplateName } = props;
20
+ const { slidBoxContent, templateData, onShowTemplates, creativesMode, isFullMode, showPrefix, showTemplateName, channel } = props;
13
21
  const TemplateName = isFullMode && showTemplateName;
14
22
  return (
15
23
  <div key="creatives-container-slidebox-header-content">
@@ -47,7 +55,7 @@ function SlideBoxHeader(props) {
47
55
  )}
48
56
  {!TemplateName && slidBoxContent === 'createTemplate' && (
49
57
  <CapHeader
50
- title={<FormattedMessage {...messages.createMessageContent} />}
58
+ title={<FormattedMessage {...messages.createMessageContent} values={{channel: getChannelLabel(channel)}}/>}
51
59
  prefix={!isFullMode && showPrefix &&
52
60
  <PrefixWrapper>
53
61
  <CapIcons.backIcon onClick={onShowTemplates} />
@@ -66,5 +74,6 @@ SlideBoxHeader.propTypes = {
66
74
  isFullMode: PropTypes.bool,
67
75
  showPrefix: PropTypes.bool,
68
76
  showTemplateName: PropTypes.func,
77
+ channel: PropTypes.string,
69
78
  };
70
79
  export default SlideBoxHeader;
@@ -30,6 +30,9 @@ const SlideBoxWrapper = styled.div`
30
30
  .cap-slide-box-v2-container{
31
31
  .slidebox-header, .slidebox-content-container, .slidebox-footer{
32
32
  padding: 0 32px;
33
+ &.has-footer{
34
+ overflow-x: hidden;
35
+ }
33
36
  }
34
37
  }
35
38
  `;
@@ -384,6 +387,7 @@ class Creatives extends React.Component {
384
387
  header={
385
388
  <SlideBoxHeader
386
389
  key="creatives-container-slidebox-header"
390
+ channel={currentChannel}
387
391
  messages={this.props.messages}
388
392
  slidBoxContent={this.state.slidBoxContent}
389
393
  templateData={templateData}
@@ -260,7 +260,7 @@ export default defineMessages({
260
260
  },
261
261
  "createMessageContent": {
262
262
  id: `${scope}.editMessageContent`,
263
- defaultMessage: `New message`,
263
+ defaultMessage: `New {channel} message`,
264
264
  },
265
265
  "creativeTemplatesDesc": {
266
266
  id: `${scope}.creativeTemplatesDesc`,
@@ -35,7 +35,16 @@
35
35
  }
36
36
  }
37
37
  }
38
-
38
+ .tag-container{
39
+ .ant-col{
40
+ button{
41
+ float: right;
42
+ top: 8px;
43
+ z-index: 100;
44
+ padding: unset !important;;
45
+ }
46
+ }
47
+ }
39
48
 
40
49
 
41
50
  }
@@ -14,7 +14,7 @@ import {get, set, filter, isEmpty, map, forEach, uniqueId, cloneDeep, isEqual, f
14
14
  import { createStructuredSelector } from 'reselect';
15
15
  import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
16
16
  import styled from 'styled-components';
17
- import { CapSlideBox, CapHeader, CapTable, CapLink, CapRow, CapColumn, CapIcons, CapSpin} from '@capillarytech/cap-ui-library';
17
+ import { CapSlideBox, CapHeader, CapTable, CapLink, CapRow, CapColumn, CapIcons, CapSpin, CapNotification } from '@capillarytech/cap-ui-library';
18
18
  import { makeSelectCreate, makeSelectCreateResponse, makeSelectIosCta } from './selectors';
19
19
  import { makeSelectMetaEntities, setInjectedTags } from '../../Cap/selectors';
20
20
  import * as globalActions from '../../../containers/Cap/actions';
@@ -1260,8 +1260,11 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
1260
1260
  };
1261
1261
  uploadImage = (data) => {
1262
1262
  if (data.fileParams.error) {
1263
- const message = getMessageObject('error', this.props.intl.formatMessage(messages["File size cannot be more than 5mb"]), true);
1264
- this.props.globalActions.addMessageToQueue(message);
1263
+ CapNotification.error({
1264
+ message: this.props.intl.formatMessage(messages.uploadImageSizeErrorTitle),
1265
+ description: this.props.intl.formatMessage(messages.uploadImageSizeErrorDescription),
1266
+ duration: 2,
1267
+ });
1265
1268
  } else {
1266
1269
  const name = data.file.name.split('.');
1267
1270
  const blob = data.file.slice(0, -1, 'image');
@@ -1351,7 +1354,6 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
1351
1354
  };
1352
1355
  saveFormData = (formData) => {
1353
1356
  const obj = this.getTransformedData(formData);
1354
-
1355
1357
  this.props.actions.createTemplate(obj);
1356
1358
  };
1357
1359
  deleteSecondaryCtaIos = (callback) => {
@@ -238,4 +238,12 @@ export default defineMessages({
238
238
  id: 'app.containers.MobilePush.Create.mobilePush',
239
239
  defaultMessage: 'Select action buttons',
240
240
  },
241
+ "uploadImageSizeErrorTitle": {
242
+ id: 'app.containers.MobilePush.Create.uploadImageSizeErrorTitle',
243
+ defaultMessage: 'File size error',
244
+ },
245
+ "uploadImageSizeErrorDescription": {
246
+ id: 'app.containers.MobilePush.Create.uploadImageSizeErrorDescription',
247
+ defaultMessage: 'File size cannot be more than 3mb',
248
+ },
241
249
  });
@@ -34,5 +34,15 @@
34
34
  }
35
35
  }
36
36
  }
37
+ .tag-container{
38
+ .ant-col{
39
+ button{
40
+ float: right;
41
+ top: 8px;
42
+ z-index: 100;
43
+ padding: unset !important;;
44
+ }
45
+ }
46
+ }
37
47
 
38
48
  }
@@ -1388,9 +1388,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
1388
1388
  }
1389
1389
  temp.injectedEvents = {};
1390
1390
  temp.className = temp.className ? temp.className : '';
1391
- if (this.props.location.query.type === 'embedded' && ((temp.type === "tag-list" || temp.type === "div" || temp.type === "icon") && this.props.location.query.module !== "dvs") && (temp.supportedEvents)) {
1392
- temp.className = `${temp.className} hide`;
1393
- }
1391
+
1394
1392
  // if (this.props.location.query.type === 'embedded' && (temp.type === "input" || temp.type === "textarea" || temp.type === "radioGroup") && this.props.location.query.module !== "dvs") {
1395
1393
  // temp.className = `${temp.className} disabled`;
1396
1394
  // temp.disabled = true;
@@ -274,9 +274,30 @@ export const response = {
274
274
  ],
275
275
  },
276
276
  {
277
- rowClassName: "mobile-push-row",
277
+ rowClassName: "mobile-push-row tag-container",
278
278
  cols: [
279
-
279
+ {
280
+ width: 22,
281
+ id: "title-tagList",
282
+ target: "message-title",
283
+ label: "Add labels",
284
+ type: "tag-list",
285
+ metaType: "List",
286
+ datatype: "select",
287
+ required: true,
288
+ fluid: true,
289
+ onlyDisplay: true,
290
+ styling: "semantic",
291
+ order: 1,
292
+ style: {
293
+ marginBottom: "unset",
294
+ height: "24px",
295
+ },
296
+ customComponent: true,
297
+ supportedEvents: [
298
+ "onTagSelect",
299
+ ],
300
+ },
280
301
  {
281
302
  id: "message-title",
282
303
  label: "Title",
@@ -293,30 +314,34 @@ export const response = {
293
314
  supportedEvents: [],
294
315
  errorMessage: "Template message has unsupported/missing tags!",
295
316
  },
317
+ ],
318
+ },
319
+ {
320
+ rowClassName: "mobile-push-row tag-container",
321
+ cols: [
322
+
296
323
  {
297
- offset: 20,
298
- id: "title-tagList",
299
- target: "message-title",
324
+ width: 22,
325
+ id: "message-tagList",
326
+ target: "message-editor",
300
327
  label: "Add labels",
301
328
  type: "tag-list",
302
329
  metaType: "List",
303
330
  datatype: "select",
304
331
  required: true,
332
+ style: {
333
+ marginBottom: "unset",
334
+ height: "24px",
335
+ },
305
336
  fluid: true,
306
337
  onlyDisplay: true,
307
338
  styling: "semantic",
308
- order: 1,
339
+ order: 2,
309
340
  customComponent: true,
310
341
  supportedEvents: [
311
342
  "onTagSelect",
312
343
  ],
313
344
  },
314
- ],
315
- },
316
- {
317
- rowClassName: "mobile-push-row",
318
- cols: [
319
-
320
345
  {
321
346
  id: "message-editor",
322
347
  label: "Message",
@@ -341,27 +366,6 @@ export const response = {
341
366
  ],
342
367
  errorMessage: "Template message has unsupported/missing tags!",
343
368
  },
344
- {
345
- offset: 20,
346
- id: "message-tagList",
347
- target: "message-editor",
348
- label: "Add labels",
349
- type: "tag-list",
350
- metaType: "List",
351
- datatype: "select",
352
- required: true,
353
- style: {
354
- marginTop: "55px",
355
- },
356
- fluid: true,
357
- onlyDisplay: true,
358
- styling: "semantic",
359
- order: 2,
360
- customComponent: true,
361
- supportedEvents: [
362
- "onTagSelect",
363
- ],
364
- },
365
369
  ],
366
370
  },
367
371
  {
@@ -605,9 +609,30 @@ export const response = {
605
609
  ],
606
610
  },
607
611
  {
608
- rowClassName: "mobile-push-row",
612
+ rowClassName: "mobile-push-row tag-container",
609
613
  cols: [
610
-
614
+ {
615
+ width: 22,
616
+ id: "title-tagList2",
617
+ target: "message-title2",
618
+ label: "Add labels",
619
+ type: "tag-list",
620
+ metaType: "List",
621
+ datatype: "select",
622
+ required: true,
623
+ fluid: true,
624
+ onlyDisplay: true,
625
+ styling: "semantic",
626
+ order: 1,
627
+ style: {
628
+ marginBottom: "unset",
629
+ height: "24px",
630
+ },
631
+ customComponent: true,
632
+ supportedEvents: [
633
+ "onTagSelect",
634
+ ],
635
+ },
611
636
  {
612
637
  id: "message-title2",
613
638
  label: "Title",
@@ -624,30 +649,33 @@ export const response = {
624
649
  supportedEvents: [],
625
650
  errorMessage: "Template title has unsupported/missing tags.",
626
651
  },
652
+ ],
653
+ },
654
+ {
655
+ rowClassName: "mobile-push-row tag-container",
656
+ cols: [
627
657
  {
628
- offset: 20,
629
- id: "title-tagList2",
630
- target: "message-title2",
658
+ width: 22,
659
+ id: "message-tagList2",
631
660
  label: "Add labels",
661
+ target: "message-editor2",
632
662
  type: "tag-list",
633
663
  metaType: "List",
634
664
  datatype: "select",
665
+ style: {
666
+ marginBottom: "unset",
667
+ height: "24px",
668
+ },
635
669
  required: true,
636
670
  fluid: true,
637
671
  onlyDisplay: true,
638
672
  styling: "semantic",
639
- order: 1,
673
+ order: 2,
640
674
  customComponent: true,
641
675
  supportedEvents: [
642
676
  "onTagSelect",
643
677
  ],
644
678
  },
645
- ],
646
- },
647
- {
648
- rowClassName: "mobile-push-row",
649
- cols: [
650
-
651
679
  {
652
680
  id: "message-editor2",
653
681
  label: "Message",
@@ -672,27 +700,6 @@ export const response = {
672
700
  ],
673
701
  errorMessage: "Template message has unsupported/missing tags!",
674
702
  },
675
- {
676
- offset: 20,
677
- id: "message-tagList2",
678
- label: "add labels",
679
- target: "message-editor2",
680
- type: "tag-list",
681
- metaType: "List",
682
- datatype: "select",
683
- style: {
684
- marginTop: "55px",
685
- },
686
- required: true,
687
- fluid: true,
688
- onlyDisplay: true,
689
- styling: "semantic",
690
- order: 2,
691
- customComponent: true,
692
- supportedEvents: [
693
- "onTagSelect",
694
- ],
695
- },
696
703
  ],
697
704
  },
698
705
  {
@@ -1105,9 +1112,30 @@ export const response = {
1105
1112
  ],
1106
1113
  },
1107
1114
  {
1108
- rowClassName: "mobile-push-row",
1115
+ rowClassName: "mobile-push-row tag-container",
1109
1116
  cols: [
1110
-
1117
+ {
1118
+ width: 22,
1119
+ id: "title-tagList",
1120
+ target: "message-title",
1121
+ label: "Add labels",
1122
+ type: "tag-list",
1123
+ metaType: "List",
1124
+ datatype: "select",
1125
+ required: true,
1126
+ fluid: true,
1127
+ onlyDisplay: true,
1128
+ styling: "semantic",
1129
+ order: 1,
1130
+ style: {
1131
+ marginBottom: "unset",
1132
+ height: "24px",
1133
+ },
1134
+ customComponent: true,
1135
+ supportedEvents: [
1136
+ "onTagSelect",
1137
+ ],
1138
+ },
1111
1139
  {
1112
1140
  id: "message-title",
1113
1141
  label: "Title",
@@ -1124,30 +1152,33 @@ export const response = {
1124
1152
  supportedEvents: [],
1125
1153
  errorMessage: "Message title has unsupported/missing tags!",
1126
1154
  },
1155
+ ],
1156
+ },
1157
+ {
1158
+ rowClassName: "mobile-push-row tag-container",
1159
+ cols: [
1127
1160
  {
1128
- offset: 20,
1129
- id: "title-tagList",
1130
- target: "message-title",
1161
+ width: 22,
1162
+ id: "message-tagList",
1163
+ target: "message-editor",
1131
1164
  label: "Add labels",
1132
1165
  type: "tag-list",
1133
1166
  metaType: "List",
1134
1167
  datatype: "select",
1168
+ style: {
1169
+ marginBottom: "unset",
1170
+ height: "24px",
1171
+ },
1135
1172
  required: true,
1136
1173
  fluid: true,
1137
1174
  onlyDisplay: true,
1138
1175
  styling: "semantic",
1139
- order: 1,
1176
+ order: 2,
1140
1177
  customComponent: true,
1141
1178
  supportedEvents: [
1142
1179
  "onTagSelect",
1143
1180
  ],
1144
1181
  },
1145
- ],
1146
- },
1147
- {
1148
- rowClassName: "mobile-push-row",
1149
- cols: [
1150
-
1151
1182
  {
1152
1183
  id: "message-editor",
1153
1184
  label: "Message",
@@ -1172,27 +1203,6 @@ export const response = {
1172
1203
  "onChange",
1173
1204
  ],
1174
1205
  },
1175
- {
1176
- offset: 20,
1177
- id: "message-tagList",
1178
- target: "message-editor",
1179
- label: "Add labels",
1180
- type: "tag-list",
1181
- metaType: "List",
1182
- datatype: "select",
1183
- style: {
1184
- marginTop: "55px",
1185
- },
1186
- required: true,
1187
- fluid: true,
1188
- onlyDisplay: true,
1189
- styling: "semantic",
1190
- order: 2,
1191
- customComponent: true,
1192
- supportedEvents: [
1193
- "onTagSelect",
1194
- ],
1195
- },
1196
1206
  ],
1197
1207
  },
1198
1208
  {
@@ -1481,8 +1491,30 @@ export const response = {
1481
1491
  ],
1482
1492
  },
1483
1493
  {
1484
- rowClassName: "mobile-push-row",
1494
+ rowClassName: "mobile-push-row tag-container",
1485
1495
  cols: [
1496
+ {
1497
+ width: 22,
1498
+ id: "title-tagList",
1499
+ label: "Add labels",
1500
+ target: "message-title2",
1501
+ type: "tag-list",
1502
+ metaType: "List",
1503
+ datatype: "select",
1504
+ required: true,
1505
+ fluid: true,
1506
+ onlyDisplay: true,
1507
+ styling: "semantic",
1508
+ order: 1,
1509
+ style: {
1510
+ marginBottom: "unset",
1511
+ height: "24px",
1512
+ },
1513
+ customComponent: true,
1514
+ supportedEvents: [
1515
+ "onTagSelect",
1516
+ ],
1517
+ },
1486
1518
  {
1487
1519
  id: "message-title2",
1488
1520
  label: "Title",
@@ -1499,30 +1531,33 @@ export const response = {
1499
1531
  supportedEvents: [],
1500
1532
  errorMessage: "Message title has unsupported/missing tags!",
1501
1533
  },
1534
+ ],
1535
+ },
1536
+ {
1537
+ rowClassName: "mobile-push-row tag-container",
1538
+ cols: [
1502
1539
  {
1503
- offset: 20,
1504
- id: "title-tagList",
1505
- label: "Add Labels",
1506
- target: "message-title2",
1540
+ width: 22,
1541
+ id: "message-tagList",
1542
+ label: "Add labels",
1543
+ target: "message-editor2",
1507
1544
  type: "tag-list",
1508
1545
  metaType: "List",
1546
+ style: {
1547
+ marginBottom: "unset",
1548
+ height: "24px",
1549
+ },
1509
1550
  datatype: "select",
1510
1551
  required: true,
1511
1552
  fluid: true,
1512
1553
  onlyDisplay: true,
1513
1554
  styling: "semantic",
1514
- order: 1,
1555
+ order: 2,
1515
1556
  customComponent: true,
1516
1557
  supportedEvents: [
1517
1558
  "onTagSelect",
1518
1559
  ],
1519
1560
  },
1520
- ],
1521
- },
1522
- {
1523
- rowClassName: "mobile-push-row",
1524
- cols: [
1525
-
1526
1561
  {
1527
1562
  id: "message-editor2",
1528
1563
  label: "Message",
@@ -1547,27 +1582,6 @@ export const response = {
1547
1582
  "onChange",
1548
1583
  ],
1549
1584
  },
1550
- {
1551
- id: "message-tagList",
1552
- label: "Add labels",
1553
- offset: 20,
1554
- target: "message-editor2",
1555
- type: "tag-list",
1556
- metaType: "List",
1557
- style: {
1558
- marginTop: "55px",
1559
- },
1560
- datatype: "select",
1561
- required: true,
1562
- fluid: true,
1563
- onlyDisplay: true,
1564
- styling: "semantic",
1565
- order: 2,
1566
- customComponent: true,
1567
- supportedEvents: [
1568
- "onTagSelect",
1569
- ],
1570
- },
1571
1585
  ],
1572
1586
  },
1573
1587
  {
@@ -63,7 +63,7 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
63
63
  this.setState({templateName: ev.target.value});
64
64
  }
65
65
  render() {
66
- const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName} = this.props;
66
+ const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type} = this.props;
67
67
  const {templateName} = this.state;
68
68
  const isShowMobilepushCreate = !isEmpty(mobilePushCreateMode);
69
69
  return (
@@ -103,6 +103,7 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
103
103
  isGetFormData={isGetFormData}
104
104
  showTemplateName={showTemplateName}
105
105
  route={{ name: 'mobilepush' }}
106
+ getDefaultTags={type}
106
107
  />
107
108
 
108
109
 
@@ -124,6 +125,7 @@ MobilepushWrapper.propTypes = {
124
125
  query: PropTypes.object,
125
126
  isFullMode: PropTypes.bool,
126
127
  showTemplateName: PropTypes.func,
128
+ type: PropTypes.string,
127
129
  };
128
130
 
129
131
 
@@ -1325,7 +1325,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
1325
1325
  isDisabled = isDisabled || _.isEmpty(this.props.Templates.selectedWeChatAccount);
1326
1326
  }
1327
1327
  if (channel === MOBILE_PUSH) {
1328
- isDisabled = isDisabled || this.state.selectedAccountError;
1328
+ isDisabled = this.checkSearchDisabled();
1329
1329
  }
1330
1330
  return isDisabled;
1331
1331
  }
@@ -1346,6 +1346,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
1346
1346
  (lineLoader !== undefined ? lineLoader : false);
1347
1347
  return isLoading;
1348
1348
  }
1349
+ checkSearchDisabled = () => (this.props.route.name === "mobilepush" && !(this.props.Templates.selectedWeChatAccount && this.props.Templates.selectedWeChatAccount.sourceAccountIdentifier && this.props.Templates.selectedWeChatAccount.configs && (this.props.Templates.selectedWeChatAccount.configs.ios === '1' || this.props.Templates.selectedWeChatAccount.configs.android === '1')))
1349
1350
  renderEmailPreviewModal() {
1350
1351
  const slideboxContent = (
1351
1352
  <div style={{height: "75vh", width: '55vw'}}>
@@ -1563,6 +1564,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
1563
1564
  placeholder={this.props.intl.formatMessage(messages.searchText)}
1564
1565
  value={this.state.searchText}
1565
1566
  onChange={(e) => this.searchTemplate(e.target.value)}
1567
+ disabled={this.checkSearchDisabled()}
1566
1568
  />
1567
1569
  <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
1568
1570
  {(this.props.location.query.type === 'embedded' ) ? pageHeaderDvs : pageHeader}