@capillarytech/creatives-library 2.0.82 → 2.0.84

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.
Files changed (177) hide show
  1. package/assets/android-message-gui-2.svg +55 -0
  2. package/components/CapTagList/index.js +24 -21
  3. package/components/CardGrid/index.js +10 -16
  4. package/components/Ckeditor/index.js +1 -2
  5. package/components/CustomPopOver/index.js +1 -1
  6. package/components/EmailPreview/index.js +2 -3
  7. package/components/FormBuilder/_formBuilder.scss +15 -8
  8. package/components/FormBuilder/index.js +194 -260
  9. package/components/Header/index.js +1 -4
  10. package/components/PreviewSideBar/_previewsidebar.scss +1 -1
  11. package/components/PreviewSideBar/index.js +5 -3
  12. package/components/SmsPreviewV2/_smsPreviewV2.scss +353 -0
  13. package/components/SmsPreviewV2/index.js +69 -0
  14. package/components/SmsPreviewV2/messages.js +13 -0
  15. package/components/SmsPreviewV2/tests/index.test.js +10 -0
  16. package/components/TemplatePreview/WechatRichmediaTemplatePreview/index.js +3 -2
  17. package/components/TemplatePreview/_templatePreview.scss +1 -1
  18. package/components/TemplatePreview/index.js +47 -47
  19. package/components/TemplatePreview/messages.js +1 -9
  20. package/containers/Assets/Gallery/index.js +1 -1
  21. package/containers/Email/index.js +1 -1
  22. package/containers/Login/components/LoginForm/index.js +1 -1
  23. package/containers/Templates/index.js +1 -1
  24. package/containers/WeChat/RichmediaTemplates/Create/index.js +1 -1
  25. package/package.json +2 -1
  26. package/v2Components/BreadCrumbs/index.js +65 -0
  27. package/v2Components/BreadCrumbs/messages.js +13 -0
  28. package/v2Components/BreadCrumbs/tests/index.test.js +10 -0
  29. package/v2Components/CallTaskPreview/_callTaskPreview.scss +17 -0
  30. package/v2Components/CallTaskPreview/images/Footer.png +0 -0
  31. package/v2Components/CallTaskPreview/images/Header.png +0 -0
  32. package/v2Components/CallTaskPreview/index.js +37 -0
  33. package/v2Components/CallTaskPreview/messages.js +13 -0
  34. package/v2Components/CallTaskPreview/tests/index.test.js +15 -0
  35. package/v2Components/CapTagList/index.js +232 -0
  36. package/v2Components/CapTagList/messages.js +25 -0
  37. package/v2Components/CapTagList/tests/index.test.js +10 -0
  38. package/v2Components/Card/_customCard.scss +27 -0
  39. package/v2Components/Card/index.js +78 -0
  40. package/{containers/WeChat → v2Components/Card}/tests/index.test.js +2 -2
  41. package/v2Components/CardGrid/index.js +77 -0
  42. package/v2Components/CardGrid/tests/index.test.js +10 -0
  43. package/v2Components/Ckeditor/index.js +234 -0
  44. package/v2Components/Ckeditor/messages.js +13 -0
  45. package/v2Components/Ckeditor/tests/index.test.js +10 -0
  46. package/v2Components/CmsTemplatesComponent/index.js +33 -0
  47. package/v2Components/CmsTemplatesComponent/messages.js +17 -0
  48. package/v2Components/CmsTemplatesComponent/tests/index.test.js +10 -0
  49. package/v2Components/Component/index.js +29 -0
  50. package/v2Components/Component/tests/index.test.js +10 -0
  51. package/v2Components/CustomPopOver/index.js +82 -0
  52. package/v2Components/CustomPopOver/messages.js +13 -0
  53. package/v2Components/CustomPopOver/tests/index.test.js +10 -0
  54. package/v2Components/DateFilter/index.js +349 -0
  55. package/v2Components/DateFilter/messages.js +17 -0
  56. package/v2Components/DateFilter/tests/index.test.js +15 -0
  57. package/v2Components/DateRange/index.js +113 -0
  58. package/v2Components/DateRange/messages.js +13 -0
  59. package/v2Components/DateRange/tests/index.test.js +10 -0
  60. package/v2Components/Edmeditor/index.js +65 -0
  61. package/v2Components/Edmeditor/messages.js +13 -0
  62. package/v2Components/Edmeditor/tests/index.test.js +10 -0
  63. package/v2Components/EmailMobilePreview/index.js +129 -0
  64. package/v2Components/EmailMobilePreview/index.scss +55 -0
  65. package/v2Components/EmailPreview/_emailPreview.scss +119 -0
  66. package/v2Components/EmailPreview/index.js +106 -0
  67. package/v2Components/EmailPreview/messages.js +17 -0
  68. package/v2Components/EmailPreview/tests/index.test.js +10 -0
  69. package/v2Components/EmailPreviewV2/_emailPreviewV2.scss +69 -0
  70. package/v2Components/EmailPreviewV2/index.js +132 -0
  71. package/v2Components/EmailPreviewV2/messages.js +41 -0
  72. package/v2Components/EmailPreviewV2/tests/index.test.js +10 -0
  73. package/v2Components/Footer/index.js +27 -0
  74. package/v2Components/Footer/messages.js +13 -0
  75. package/v2Components/Footer/tests/index.test.js +10 -0
  76. package/v2Components/FormBuilder/_formBuilder.scss +78 -0
  77. package/v2Components/FormBuilder/index.js +3309 -0
  78. package/v2Components/FormBuilder/messages.js +13 -0
  79. package/v2Components/FormBuilder/tests/index.test.js +10 -0
  80. package/v2Components/Header/index.js +46 -0
  81. package/v2Components/Header/messages.js +25 -0
  82. package/v2Components/Header/tests/index.test.js +10 -0
  83. package/v2Components/ImagePreview/_imagePreview.scss +63 -0
  84. package/v2Components/ImagePreview/index.js +52 -0
  85. package/v2Components/ImagePreview/messages.js +13 -0
  86. package/v2Components/ImagePreview/tests/index.test.js +10 -0
  87. package/v2Components/MobilePushPreviewV2/index.js +120 -0
  88. package/v2Components/MobilePushPreviewV2/messages.js +13 -0
  89. package/v2Components/MobilePushPreviewV2/tests/index.test.js +10 -0
  90. package/v2Components/NewCallTask/_newCallTask.scss +9 -0
  91. package/v2Components/NewCallTask/index.js +152 -0
  92. package/v2Components/NewCallTask/messages.js +29 -0
  93. package/v2Components/NewCallTask/tests/index.test.js +10 -0
  94. package/v2Components/PageHeader/_pageHeader.scss +22 -0
  95. package/v2Components/PageHeader/index.js +37 -0
  96. package/v2Components/PageHeader/messages.js +13 -0
  97. package/v2Components/PageHeader/tests/index.test.js +10 -0
  98. package/v2Components/Pagination/_pagination.scss +5 -0
  99. package/v2Components/Pagination/index.js +49 -0
  100. package/v2Components/Pagination/tests/index.test.js +10 -0
  101. package/v2Components/PreviewSideBar/_previewsidebar.scss +28 -0
  102. package/v2Components/PreviewSideBar/index.js +150 -0
  103. package/v2Components/PreviewSideBar/messages.js +33 -0
  104. package/v2Components/PreviewSideBar/tests/index.test.js +10 -0
  105. package/v2Components/Sidebar/_sidebar.scss +115 -0
  106. package/v2Components/Sidebar/index.js +208 -0
  107. package/v2Components/Sidebar/messages.js +21 -0
  108. package/v2Components/Sidebar/tests/index.test.js +10 -0
  109. package/v2Components/SlideBox/_slideBox.scss +63 -0
  110. package/v2Components/SlideBox/index.js +48 -0
  111. package/v2Components/SlideBox/tests/index.test.js +103 -0
  112. package/v2Components/SmsEditor/index.js +55 -0
  113. package/v2Components/SmsEditor/tests/index.test.js +10 -0
  114. package/v2Components/SmsTest/index.js +115 -0
  115. package/v2Components/SmsTest/messages.js +13 -0
  116. package/v2Components/SmsTest/tests/index.test.js +10 -0
  117. package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/_wechatRichmediaTemplatePrev.scss +42 -0
  118. package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/index.js +139 -0
  119. package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/messages.js +21 -0
  120. package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/tests/index.test.js +10 -0
  121. package/v2Components/TemplatePreview/_templatePreview.scss +352 -0
  122. package/v2Components/TemplatePreview/assets/images/WECHAT_5x.png +0 -0
  123. package/v2Components/TemplatePreview/assets/images/androidPushMessage.svg +45 -0
  124. package/v2Components/TemplatePreview/assets/images/iPhonePushMessage.svg +135 -0
  125. package/v2Components/TemplatePreview/assets/images/mobile.svg +24 -0
  126. package/v2Components/TemplatePreview/assets/images/sms-body.png +0 -0
  127. package/v2Components/TemplatePreview/assets/images/sms-icon.png +0 -0
  128. package/v2Components/TemplatePreview/assets/images/sms_mobile.png +0 -0
  129. package/v2Components/TemplatePreview/assets/images/user-icon.svg +19 -0
  130. package/v2Components/TemplatePreview/assets/images/wechat-mobile.svg +78 -0
  131. package/v2Components/TemplatePreview/index.js +175 -0
  132. package/v2Components/TemplatePreview/messages.js +37 -0
  133. package/v2Components/TemplatePreview/tests/index.test.js +10 -0
  134. package/v2Components/Toastr/index.js +60 -0
  135. package/v2Components/Toastr/messages.js +13 -0
  136. package/v2Components/Toastr/tests/index.test.js +10 -0
  137. package/v2Components/ToastrMessage/index.js +110 -0
  138. package/v2Components/ToastrMessage/messages.js +13 -0
  139. package/v2Components/ToastrMessage/tests/index.test.js +10 -0
  140. package/v2Components/TopBar/_topbar.scss +46 -0
  141. package/v2Components/TopBar/assets/images/capillary_logo.png +0 -0
  142. package/v2Components/TopBar/index.js +113 -0
  143. package/v2Components/TopBar/messages.js +29 -0
  144. package/v2Components/TopBar/tests/index.test.js +10 -0
  145. package/v2Containers/Assets/Gallery/index.js +1 -1
  146. package/v2Containers/CallTask/index.js +1 -1
  147. package/v2Containers/Cap/index.js +2 -2
  148. package/v2Containers/CreativesContainer/SlideBoxContent.js +3 -3
  149. package/v2Containers/CreativesContainer/index.js +1 -0
  150. package/v2Containers/Dashboard/index.js +2 -2
  151. package/v2Containers/Ebill/index.js +2 -2
  152. package/v2Containers/Email/index.js +4 -4
  153. package/v2Containers/EmailWrapper/index.js +1 -1
  154. package/v2Containers/Line/Create/index.js +1 -1
  155. package/v2Containers/Line/Edit/index.js +1 -1
  156. package/v2Containers/Login/index.js +1 -1
  157. package/v2Containers/MobilePush/Create/index.js +1 -1
  158. package/v2Containers/MobilePush/Edit/index.js +1 -1
  159. package/v2Containers/Sms/Create/index.js +1 -1
  160. package/v2Containers/Sms/Edit/index.js +1 -1
  161. package/v2Containers/TagList/index.js +1 -1
  162. package/v2Containers/Templates/index.js +4 -4
  163. package/v2Containers/TestPage/index.js +1 -1
  164. package/v2Containers/WeChat/MapTemplates/index.js +3 -3
  165. package/v2Containers/WeChat/RichmediaTemplates/Create/index.js +3 -3
  166. package/containers/WeChat/_wechat.scss +0 -8
  167. package/containers/WeChat/actions.js +0 -46
  168. package/containers/WeChat/constants.js +0 -28
  169. package/containers/WeChat/index.js +0 -1617
  170. package/containers/WeChat/messages.js +0 -73
  171. package/containers/WeChat/reducer.js +0 -74
  172. package/containers/WeChat/sagas.js +0 -86
  173. package/containers/WeChat/selectors.js +0 -25
  174. package/containers/WeChat/tests/actions.test.js +0 -18
  175. package/containers/WeChat/tests/reducer.test.js +0 -9
  176. package/containers/WeChat/tests/sagas.test.js +0 -15
  177. package/containers/WeChat/tests/selectors.test.js +0 -10
@@ -0,0 +1,349 @@
1
+ /**
2
+ *
3
+ * DateFilter
4
+ *
5
+ */
6
+
7
+ import PropTypes from 'prop-types';
8
+
9
+ import React from 'react';
10
+ // import styled from 'styled-components';
11
+
12
+ import { FormattedMessage } from 'react-intl';
13
+ import { Popup, Input, Button, Grid, Checkbox, Dimmer, Loader } from 'semantic-ui-react';
14
+ import DateRange from 'components/DateRange';
15
+ import moment from 'moment';
16
+ import _ from 'lodash';
17
+ import messages from './messages';
18
+
19
+ class DateFilter extends React.Component { // eslint-disable-line react/prefer-stateless-function
20
+ constructor(props) {
21
+ super(props);
22
+ this.state = {
23
+ selectedDateRange: this.props.selectedDateRange,
24
+ showChartCompareOptions: this.props.isCompareSelected,
25
+ compareDateRange: this.props.compareDateRange,
26
+ selectedDateText: '',
27
+ isDateSelectorOpen: false,
28
+ loading: this.props.loading,
29
+ openCustomDatePicker: false,
30
+ compareCustomDateSelected: false,
31
+ customDateSelected: false,
32
+ pastStateData: {},
33
+ componentWidth: 270,
34
+ };
35
+ this.handleToggleDateSelector = this.handleToggleDateSelector.bind(this);
36
+ this.renderDateSelector = this.renderDateSelector.bind(this);
37
+ this.handleDateTypeClick = this.handleDateTypeClick.bind(this);
38
+ this.printSelectedDate = this.printSelectedDate.bind(this);
39
+ this.handleCancel = this.handleCancel.bind(this);
40
+ this.handleChartCompareToggle = this.handleChartCompareToggle.bind(this);
41
+ this.handleCompareDateChange = this.handleCompareDateChange.bind(this);
42
+ this.handleCustomDatePickerCancel = this.handleCustomDatePickerCancel.bind(this);
43
+ this.handleDatePickerApply = this.handleDatePickerApply.bind(this);
44
+ this.compareDateValueSetting = this.compareDateValueSetting.bind(this);
45
+ this.handleApply = this.handleApply.bind(this);
46
+ this.restoreInitialState = this.restoreInitialState.bind(this);
47
+ this.storeInitialState = this.storeInitialState.bind(this);
48
+ }
49
+
50
+ componentWillMount() {
51
+ const dateText = this.printSelectedDate(this.state.selectedDateRange.startDate, this.state.selectedDateRange.endDate, this.state.selectedDateRange.dateType);
52
+ this.setState({ selectedDateText: dateText });
53
+ this.setState({ loading: false });
54
+ this.storeInitialState();
55
+ }
56
+
57
+ componentDidMount() {
58
+ }
59
+
60
+ componentWillReceiveProps(nextProp) {
61
+ this.setState({ selectedDateRange: nextProp.selectedDateRange, showChartCompareOptions: nextProp.isCompareSelected }, () => {
62
+ let dateText = this.printSelectedDate(this.state.selectedDateRange.startDate, this.state.selectedDateRange.endDate, this.state.selectedDateRange.dateType);
63
+ if (this.state.showChartCompareOptions) {
64
+ this.setState({ componentWidth: 450 });
65
+ dateText = `${dateText} vs ${this.printSelectedDate(this.state.compareDateRange.startDate, this.state.compareDateRange.endDate, this.state.compareDateRange.dateType, true)}`;
66
+ } else {
67
+ this.setState({ componentWidth: 270 });
68
+ }
69
+ this.setState({ selectedDateText: dateText });
70
+ });
71
+ this.storeInitialState();
72
+ }
73
+
74
+ storeInitialState() {
75
+ const stateData = _.cloneDeep(this.state);
76
+ const tmpState = {
77
+ selectedDateRange: stateData.selectedDateRange,
78
+ showChartCompareOptions: stateData.showChartCompareOptions,
79
+ compareDateRange: stateData.compareDateRange,
80
+ };
81
+ this.setState({ pastStateData: tmpState });
82
+ }
83
+
84
+ handleToggleDateSelector() {
85
+ this.setState({ isDateSelectorOpen: !this.state.isDateSelectorOpen });
86
+ }
87
+
88
+ handleDateTypeClick(specifier) {
89
+ const date = this.state.selectedDateRange;
90
+ if (specifier !== 'custom') {
91
+ date.dateType = specifier;
92
+ if (specifier === 'week') {
93
+ date.startDate = moment().isoWeekday(1);
94
+ } else {
95
+ date.startDate = moment().startOf(specifier);
96
+ }
97
+ date.endDate = moment();
98
+ this.setState({ selectedDateRange: date }, () => {
99
+ if (this.state.showChartCompareOptions) {
100
+ this.compareDateValueSetting(specifier);
101
+ }
102
+ });
103
+ } else {
104
+ this.setState({ customDateSelected: true, openCustomDatePicker: true });
105
+ }
106
+ }
107
+
108
+ printSelectedDate(startDate, endDate, specifier, isCompare) {
109
+ let specifierType = '';
110
+ if (isCompare) {
111
+ if (specifier === 'week') {
112
+ specifierType = 'Previous Week';
113
+ } else if (specifier === 'month') {
114
+ specifierType = 'Previous Month';
115
+ } else if (specifier === 'year') {
116
+ specifierType = 'Previous Year';
117
+ } else {
118
+ specifierType = 'Custom';
119
+ }
120
+ }
121
+ if (!isCompare) {
122
+ if (specifier === 'week') {
123
+ specifierType = 'WTD';
124
+ } else if (specifier === 'month') {
125
+ specifierType = 'MTD';
126
+ } else if (specifier === 'year') {
127
+ specifierType = 'YTD';
128
+ } else {
129
+ specifierType = 'Custom';
130
+ }
131
+ }
132
+
133
+ let tmpDateString = '';
134
+ if (moment(startDate).year() === moment(endDate).year()) {
135
+ tmpDateString = `${specifierType} ( ${moment(startDate).format('MMM D').toString()} - ${moment(endDate).format('MMM D YYYY').toString()} )`;
136
+ } else {
137
+ tmpDateString = `${specifierType} ( ${moment(startDate).format('MMM D YYYY').toString()} - ${moment(endDate).format('MMM D YYYY').toString()} )`;
138
+ }
139
+ return tmpDateString;
140
+ }
141
+
142
+ handleCancel() {
143
+ this.setState({ isDateSelectorOpen: false });
144
+ if (this.props.handleCancel !== undefined) {
145
+ this.props.handleCancel();
146
+ }
147
+
148
+ // Need to improve this function
149
+ this.restoreInitialState();
150
+ }
151
+
152
+ compareDateValueSetting(specifier) {
153
+ const dateRange = (this.state.compareDateRange) ? this.state.compareDateRange : _.cloneDeep(this.state.selectedDateRange);
154
+ if (specifier === 'week') {
155
+ dateRange.startDate = moment(this.state.selectedDateRange.startDate).subtract(7, 'days');
156
+ dateRange.endDate = moment(this.state.selectedDateRange.endDate).subtract(7, 'days');
157
+ dateRange.dateType = specifier;
158
+ } else if (specifier === 'month') {
159
+ dateRange.startDate = moment(this.state.selectedDateRange.startDate).subtract(1, 'months');
160
+ dateRange.endDate = moment(this.state.selectedDateRange.endDate).subtract(1, 'months');
161
+ dateRange.dateType = specifier;
162
+ } else if (specifier === 'year' || specifier === 'custom') {
163
+ dateRange.startDate = moment(this.state.selectedDateRange.startDate).subtract(1, 'years');
164
+ dateRange.endDate = moment(this.state.selectedDateRange.endDate).subtract(1, 'years');
165
+ dateRange.dateType = specifier;
166
+ }
167
+ this.setState({ compareDateRange: dateRange });
168
+ }
169
+
170
+ handleChartCompareToggle() {
171
+ this.setState({ showChartCompareOptions: !this.state.showChartCompareOptions });
172
+ const compareDateType = (this.state.compareDateRange) ? this.state.compareDateRange.dateType : this.state.selectedDateRange.dateType;
173
+ this.compareDateValueSetting(compareDateType);
174
+ }
175
+
176
+ handleCompareDateChange(specifier) {
177
+ if (specifier === 'custom') {
178
+ this.setState({ compareCustomDateSelected: true, openCustomDatePicker: true });
179
+ } else {
180
+ this.compareDateValueSetting(specifier);
181
+ }
182
+ }
183
+
184
+ handleCustomDatePickerCancel(e) {
185
+ if (e) {
186
+ e.preventDefault();
187
+ }
188
+ this.setState({ customDateSelected: false });
189
+ this.setState({ compareCustomDateSelected: false });
190
+ this.setState({ openCustomDatePicker: false });
191
+ }
192
+
193
+ handleDatePickerApply(startDate, endDate, dateType) {
194
+ if (this.state.customDateSelected) {
195
+ const dateRange = _.cloneDeep(this.state.selectedDateRange);
196
+ dateRange.startDate = startDate;
197
+ dateRange.endDate = endDate;
198
+ dateRange.dateType = dateType;
199
+ this.setState({ selectedDateRange: dateRange });
200
+ this.setState({ customDateSelected: false });
201
+ } else {
202
+ const dateRange = _.cloneDeep(this.state.compareDateRange);
203
+ dateRange.startDate = startDate;
204
+ dateRange.endDate = endDate;
205
+ dateRange.dateType = dateType;
206
+ this.setState({ compareDateRange: dateRange });
207
+ this.setState({ compareCustomDateSelected: false });
208
+ }
209
+ }
210
+
211
+ handleApply() {
212
+ let dateText = this.printSelectedDate(this.state.selectedDateRange.startDate, this.state.selectedDateRange.endDate, this.state.selectedDateRange.dateType);
213
+ if (this.state.showChartCompareOptions) {
214
+ this.setState({ componentWidth: 450 });
215
+ dateText = `${dateText} vs ${this.printSelectedDate(this.state.compareDateRange.startDate, this.state.compareDateRange.endDate, this.state.compareDateRange.dateType, true)}`;
216
+ } else {
217
+ this.setState({ componentWidth: 270 });
218
+ }
219
+ this.setState({ selectedDateText: dateText });
220
+ this.setState({ isDateSelectorOpen: false });
221
+ this.props.handleApply(this.state.selectedDateRange, this.state.showChartCompareOptions, this.state.compareDateRange);
222
+ }
223
+
224
+ restoreInitialState() {
225
+ this.setState({ selectedDateRange: this.state.pastStateData.selectedDateRange });
226
+ this.setState({ compareDateRange: this.state.pastStateData.compareDateRange, showChartCompareOptions: this.state.pastStateData.showChartCompareOptions });
227
+ }
228
+
229
+ renderDateSelector() {
230
+ const dateType = this.state.selectedDateRange.dateType;
231
+ return (
232
+ <div className="date-filter-wrapper">
233
+ { this.state.loading ? <Dimmer active inverted className={'hide'}><Loader inverted><FormattedMessage {...messages.loaderMessage} /> </Loader></Dimmer> :
234
+ <Grid>
235
+ <Grid.Row className={this.state.openCustomDatePicker ? 'hide' : ''}>
236
+ <Grid.Column width={16}>
237
+ <Button.Group fluid className="btn-group till-date">
238
+ <Button className={dateType === 'week' ? 'active' : ''} onClick={() => this.handleDateTypeClick('week')}>WTD</Button>
239
+ <Button className={dateType === 'month' ? 'active' : ''} onClick={() => this.handleDateTypeClick('month')}>MTD</Button>
240
+ <Button className={dateType === 'year' ? 'active' : ''} onClick={() => this.handleDateTypeClick('year')}>YTD</Button>
241
+ <Button className={dateType === 'custom' ? 'active' : ''} onClick={() => this.handleDateTypeClick('custom')}>Custom</Button>
242
+ </Button.Group>
243
+ </Grid.Column>
244
+ <Grid.Column width={16} className="selectedDateText">
245
+ {this.printSelectedDate(this.state.selectedDateRange.startDate, this.state.selectedDateRange.endDate, this.state.selectedDateRange.dateType)}
246
+ {dateType === 'custom' ? <span className="editSelectedDate" onClick={() => this.handleDateTypeClick('custom')}><FormattedMessage {...messages.editText} /></span> : ''}
247
+ </Grid.Column>
248
+ </Grid.Row>
249
+ <Grid.Row className={this.state.openCustomDatePicker ? 'hide' : 'compareDateToggle'}>
250
+ <Grid.Column width={16}>
251
+ <Checkbox className={!this.props.compareMode ? 'hide' : 'dateCompareCheckbox'} checked={this.state.showChartCompareOptions} label="Compare" onClick={this.handleChartCompareToggle} />
252
+ </Grid.Column>
253
+ </Grid.Row>
254
+ { this.state.showChartCompareOptions ?
255
+ <Grid.Row className={!this.state.openCustomDatePicker ? '' : 'hide'}>
256
+ <Grid.Column width={16}>
257
+ <Button.Group fluid className="btn-group till-date">
258
+ {dateType !== 'week' ? '' :
259
+ <Button className={this.state.compareDateRange.dateType !== 'week' ? '' : 'active'} onClick={() => this.handleCompareDateChange('week')}>Previous Week</Button> }
260
+ {dateType !== 'month' ? '' :
261
+ <Button className={this.state.compareDateRange.dateType !== 'month' ? '' : 'active'} onClick={() => this.handleCompareDateChange('month')}>Previous Month</Button>}
262
+ <Button className={this.state.compareDateRange.dateType === 'year' ? 'active' : ''} onClick={() => this.handleCompareDateChange('year')}>Previous Year</Button>
263
+ <Button className={this.state.compareDateRange.dateType === 'custom' ? 'active' : ''} onClick={() => this.handleCompareDateChange('custom')}>Custom</Button>
264
+ </Button.Group>
265
+ </Grid.Column>
266
+ <Grid.Column width={16} className="selectedDateText">
267
+ {this.printSelectedDate(this.state.compareDateRange.startDate, this.state.compareDateRange.endDate, this.state.compareDateRange.dateType, true)}
268
+ {this.state.compareDateRange.dateType === 'custom' ? <span className="editSelectedDate" onClick={() => this.handleCompareDateChange('custom')}><FormattedMessage {...messages.editText} /></span> : ''}
269
+ </Grid.Column>
270
+ </Grid.Row>
271
+ : ''
272
+ }
273
+ <Grid.Row className={this.state.openCustomDatePicker ? 'hide' : ''}>
274
+ <Grid.Column width={16}>
275
+ <Button primary onClick={this.handleApply}>Apply</Button>
276
+ <Button basic onClick={this.handleCancel}>Cancel</Button>
277
+ </Grid.Column>
278
+ </Grid.Row>
279
+
280
+ { this.state.customDateSelected ?
281
+ <Grid.Row className={!this.state.openCustomDatePicker ? 'hide' : ''}>
282
+ <Grid.Column className="selectDateRangeTitle" width={16}>
283
+ <a href="" className="backButton" onClick={this.handleCustomDatePickerCancel}><i className="material-icons">keyboard_backspace</i></a>
284
+ <span className="dateRangeTitle">Select Date Range</span>
285
+ </Grid.Column>
286
+ <Grid.Column width={16} className="dateRangeWrapper">
287
+ <DateRange prevSelectedDate={this.state.selectedDateRange} handleDatePickerApply={this.handleDatePickerApply} handleDatePickerCancel={this.handleCustomDatePickerCancel} />
288
+ </Grid.Column>
289
+ {/* { this.state.showChartCompareOptions ? <Grid.Column width={16}>
290
+ {this.printSelectedDate(this.props.selectedDateRange.startDate, this.props.selectedDateRange.endDate, this.state.selectedDateRange.dateType)} vs
291
+ </Grid.Column> : '' } */}
292
+ </Grid.Row> : ''
293
+ }
294
+
295
+ { this.state.compareCustomDateSelected ?
296
+ <Grid.Row className={!this.state.openCustomDatePicker ? 'hide' : ''}>
297
+ <Grid.Column width={16}>
298
+ <a href="" className="backButton" onClick={this.handleCustomDatePickerCancel}><i className="material-icons">keyboard_backspace</i></a>
299
+ <span className="dateRangeTitle">Select Date Range</span>
300
+ </Grid.Column>
301
+ <Grid.Column width={16}>
302
+ {this.printSelectedDate(this.state.selectedDateRange.startDate, this.state.selectedDateRange.endDate, this.state.selectedDateRange.dateType)} vs
303
+ </Grid.Column>
304
+ <Grid.Column width={16} className="dateRangeWrapper">
305
+ <DateRange prevSelectedDate={this.state.compareDateRange} handleDatePickerApply={this.handleDatePickerApply} handleDatePickerCancel={this.handleCustomDatePickerCancel} />
306
+ </Grid.Column>
307
+ </Grid.Row> : ''
308
+ }
309
+ </Grid>}
310
+ </div>
311
+ );
312
+ }
313
+
314
+ render() {
315
+ const { isDateSelectorOpen } = this.state;
316
+ // const loading = this.state.loading;
317
+ return (
318
+ <span>
319
+ <Popup
320
+ trigger={
321
+ <Input
322
+ id="compareDate"
323
+ style={{ width: `${this.state.componentWidth}px` }}
324
+ readOnly
325
+ icon="caret down"
326
+ value={this.state.selectedDateText}
327
+ />
328
+ }
329
+ content={this.renderDateSelector()}
330
+ on="click"
331
+ open={isDateSelectorOpen}
332
+ onOpen={this.handleToggleDateSelector}
333
+ />
334
+ </span>
335
+ );
336
+ }
337
+ }
338
+
339
+ DateFilter.propTypes = {
340
+ selectedDateRange: PropTypes.object.isRequired,
341
+ compareMode: PropTypes.bool,
342
+ compareDateRange: PropTypes.object,
343
+ isCompareSelected: PropTypes.bool,
344
+ handleApply: PropTypes.func.isRequired,
345
+ handleCancel: PropTypes.func,
346
+ loading: PropTypes.bool,
347
+ };
348
+
349
+ export default DateFilter;
@@ -0,0 +1,17 @@
1
+ /*
2
+ * DateFilter Messages
3
+ *
4
+ * This contains all the text for the DateFilter component.
5
+ */
6
+ import { defineMessages } from 'react-intl';
7
+
8
+ export default defineMessages({
9
+ loaderMessage: {
10
+ id: 'reon.components.DateFilter.loaderMessage',
11
+ defaultMessage: 'Fetching Data',
12
+ },
13
+ editText: {
14
+ id: 'reon.components.DateFilter.editText',
15
+ defaultMessage: 'Edit',
16
+ },
17
+ });
@@ -0,0 +1,15 @@
1
+ // import React from 'react';
2
+ // import { shallow } from 'enzyme';
3
+ //
4
+ // import moment from 'moment';
5
+ // import DateFilter from '../index';
6
+
7
+ // describe('<DateFilter />', () => {
8
+ // it('Expect to have unit tests specified', () => {
9
+ // expect(true).toEqual(false);
10
+ // });
11
+ // it('Expect to have selectDateRange Prop', () => {
12
+ // const wrapper = shallow(<DateFilter selectedDateRange={moment()} />);
13
+ // expect(wrapper.props().selectedDateRange).toEqual(moment());
14
+ // });
15
+ // });
@@ -0,0 +1,113 @@
1
+ /**
2
+ *
3
+ * DateRange
4
+ *
5
+ */
6
+
7
+ import PropTypes from 'prop-types';
8
+
9
+ import React from 'react';
10
+ // import styled from 'styled-components';
11
+
12
+ import { FormattedMessage } from 'react-intl';
13
+ import { Grid, Button } from 'semantic-ui-react';
14
+
15
+ import DatePicker from 'react-datepicker';
16
+ import 'react-datepicker/dist/react-datepicker.css';
17
+
18
+ import moment from 'moment';
19
+
20
+ class DateRange extends React.Component { // eslint-disable-line react/prefer-stateless-function
21
+ constructor(props) {
22
+ super(props);
23
+ this.state = {
24
+ startDate: this.props.prevSelectedDate.startDate,
25
+ endDate: this.props.prevSelectedDate.endDate,
26
+ };
27
+
28
+ this.handleChangeStart = this.handleChangeStart.bind(this);
29
+ this.handleChangeEnd = this.handleChangeEnd.bind(this);
30
+ this.closeAndUpdate = this.closeAndUpdate.bind(this);
31
+ this.closeAndCancel = this.closeAndCancel.bind(this);
32
+ }
33
+
34
+ handleChangeStart(date) {
35
+ this.setState({ startDate: date });
36
+ }
37
+
38
+ handleChangeEnd(date) {
39
+ this.setState({ endDate: date });
40
+ }
41
+
42
+ closeAndUpdate() {
43
+ this.props.handleDatePickerApply(this.state.startDate, this.state.endDate, 'custom');
44
+ this.props.handleDatePickerCancel();
45
+ }
46
+
47
+ closeAndCancel() {
48
+ this.props.handleDatePickerCancel();
49
+ }
50
+
51
+ render() {
52
+ const { startDate, endDate } = this.state;
53
+
54
+ return (
55
+ <Grid className="dateRangeWrapper" columns={2}>
56
+ <Grid.Row className="selectedDateTitleWrapper">
57
+ <Grid.Column style={{ paddingLeft: 0, paddingBottom: `${8}px` }}>
58
+ <span className="selectedDateTitle">From</span>
59
+ <input className="selectedDateRange" type="text" readOnly defaultValue={moment(startDate).format('MM/DD/YYYY').toString()} />
60
+ <i className="calenderIcon material-icons">today</i>
61
+ </Grid.Column>
62
+ <Grid.Column style={{ paddingLeft: 0 }}>
63
+ <span className="selectedDateTitle">To</span>
64
+ <input className="selectedDateRange" readOnly type="text" defaultValue={moment(endDate).format('MM/DD/YYYY').toString()} />
65
+ <i className="calenderIcon material-icons">today</i>
66
+ </Grid.Column>
67
+ </Grid.Row>
68
+ <Grid.Row style={{ paddingTop: 0, paddingBottom: `${2}px` }}>
69
+ <Grid.Column style={{ paddingLeft: 0 }}>
70
+ <DatePicker
71
+ inline
72
+ selected={startDate}
73
+ startDate={startDate}
74
+ endDate={endDate}
75
+ onChange={this.handleChangeStart}
76
+ showMonthDropdown
77
+ showYearDropdown
78
+ dropdownMode="select"
79
+ />
80
+ </Grid.Column>
81
+ <Grid.Column style={{ paddingLeft: 0 }}>
82
+ <DatePicker
83
+ inline
84
+ selected={endDate}
85
+ startDate={startDate}
86
+ endDate={endDate}
87
+ minDate={startDate}
88
+ maxDate={moment()}
89
+ onChange={this.handleChangeEnd}
90
+ showMonthDropdown
91
+ showYearDropdown
92
+ dropdownMode="select"
93
+ />
94
+ </Grid.Column>
95
+ </Grid.Row>
96
+ <Grid.Row>
97
+ <Grid.Column width={16} style={{ paddingLeft: 0 }}>
98
+ <Button onClick={this.closeAndUpdate} className="btn-primary" floated="left"><FormattedMessage id="customdatepicker.done" defaultMessage="Done" /></Button>
99
+ <Button onClick={this.closeAndCancel} className="btn-secondary" floated="left"><FormattedMessage id="customdatepicker.cancel" defaultMessage="Cancel" /></Button>
100
+ </Grid.Column>
101
+ </Grid.Row>
102
+ </Grid>
103
+ );
104
+ }
105
+ }
106
+
107
+ DateRange.propTypes = {
108
+ prevSelectedDate: PropTypes.object.isRequired,
109
+ handleDatePickerCancel: PropTypes.func,
110
+ handleDatePickerApply: PropTypes.func,
111
+ };
112
+
113
+ export default DateRange;
@@ -0,0 +1,13 @@
1
+ /*
2
+ * DateRange Messages
3
+ *
4
+ * This contains all the text for the DateRange component.
5
+ */
6
+ import { defineMessages } from 'react-intl';
7
+
8
+ export default defineMessages({
9
+ header: {
10
+ id: 'app.components.DateRange.header',
11
+ defaultMessage: 'This is the DateRange component !',
12
+ },
13
+ });
@@ -0,0 +1,10 @@
1
+ // import React from 'react';
2
+ // import { shallow } from 'enzyme';
3
+
4
+ // import DateRange from '../index';
5
+
6
+ // describe('<DateRange />', () => {
7
+ // it('Expect to have unit tests specified', () => {
8
+ // expect(true).toEqual(false);
9
+ // });
10
+ // });
@@ -0,0 +1,65 @@
1
+ /**
2
+ *
3
+ * Edmeditor
4
+ *
5
+ */
6
+
7
+ import PropTypes from 'prop-types';
8
+
9
+ import React from 'react';
10
+ // import styled from 'styled-components';
11
+
12
+ // import { FormattedMessage } from 'react-intl';
13
+ // import messages from './messages';
14
+ // const loadScript = require('load-script');
15
+ // const defaultScriptUrl = "https://api-static.edmdesigner.com/EDMdesignerAPI.js";
16
+
17
+ class Edmeditor extends React.Component { // eslint-disable-line react/prefer-stateless-function
18
+ constructor(props) {
19
+ super(props);
20
+ this.state = {
21
+ editorInstance: undefined,
22
+ };
23
+
24
+ // this.onLoad = this.onLoad.bind(this);
25
+ }
26
+
27
+ componentDidMount() {
28
+ console.log('current language edm editor mounted', this.props.id, this.props.edmSrc);
29
+ }
30
+
31
+ componentWillReceiveProps(nextProps) {
32
+ console.log('current language nextProps', nextProps, nextProps.id, nextProps.edmSrc);
33
+ // if (!_.isEqual(nextProps.content, this.props.content)) {
34
+ // console.log(nextProps.content);
35
+ // this.editorInstance.content = nextProps.content;
36
+ // }
37
+ }
38
+
39
+ componentWillUnmount() {
40
+ this.unmounting = true;
41
+ }
42
+
43
+ render() {
44
+ console.log('current language edm editor loading', this.props.id, this.props.edmSrc);
45
+ return (
46
+ this.props.edmSrc ?
47
+ (<iframe id={this.props.id} className={this.props.activeClass} src={this.props.edmSrc} height="460" width="100%" style={{"height": "calc(100vh - 180px)"}}></iframe>)
48
+ : 'aaasass'
49
+ );
50
+ }
51
+ }
52
+
53
+ Edmeditor.defaultProps = {
54
+ id: 'edmEditor',
55
+ activeClass: "",
56
+ };
57
+
58
+ Edmeditor.propTypes = {
59
+ id: PropTypes.string,
60
+ activeClass: PropTypes.string,
61
+ // getEditorInstanse: PropTypes.func,
62
+ edmSrc: PropTypes.string,
63
+ };
64
+
65
+ export default Edmeditor;
@@ -0,0 +1,13 @@
1
+ /*
2
+ * Edmeditor Messages
3
+ *
4
+ * This contains all the text for the Edmeditor component.
5
+ */
6
+ import { defineMessages } from 'react-intl';
7
+
8
+ export default defineMessages({
9
+ header: {
10
+ id: 'app.components.Edmeditor.header',
11
+ defaultMessage: 'This is the Edmeditor component !',
12
+ },
13
+ });
@@ -0,0 +1,10 @@
1
+ // import React from 'react';
2
+ // import { shallow } from 'enzyme';
3
+
4
+ // import Edmeditor from '../index';
5
+
6
+ describe('<Edmeditor />', () => {
7
+ it('Expect to have unit tests specified', () => {
8
+ expect(true).toEqual(false);
9
+ });
10
+ });