@capillarytech/creatives-library 7.7.23 → 7.7.25

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 (9) hide show
  1. package/containers/WeChat/MapTemplates/index.js +10 -1
  2. package/package.json +1 -1
  3. package/v2Components/CapImageUpload/index.js +14 -8
  4. package/v2Components/FormBuilder/index.js +10 -1
  5. package/v2Containers/CapFacebookPreview/constants.js +4 -0
  6. package/v2Containers/CapFacebookPreview/index.js +92 -67
  7. package/v2Containers/CapFacebookPreview/reducer.js +19 -10
  8. package/v2Containers/CreativesContainer/index.js +1 -1
  9. package/v2Containers/WeChat/MapTemplates/index.js +10 -1
package/containers/WeChat/MapTemplates/index.js CHANGED
@@ -780,7 +780,16 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
780
780
  type: "radioGroup",
781
781
  metaType: "text",
782
782
  datatype: "string",
783
- options: [formatMessage(messages.redirectOptionURL), formatMessage(messages.redirectOptionMiniProgram)],
783
+ options: [
784
+ {
785
+ value: URL,
786
+ label: formatMessage(messages.redirectOptionURL)
787
+ },
788
+ {
789
+ value: MINI_PROGRAM,
790
+ label: formatMessage(messages.redirectOptionMiniProgram)
791
+ }
792
+ ],
784
793
  errorMessage: formatMessage(messages.redirectionOptionError),
785
794
  required: true,
786
795
  fluid: true,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@capillarytech/creatives-library",
3
3
  "author": "meharaj",
4
- "version": "7.7.23",
4
+ "version": "7.7.25",
5
5
  "description": "Capillary creatives ui",
6
6
  "main": "./index.js",
7
7
  "module": "./index.es.js",
package/v2Components/CapImageUpload/index.js CHANGED
@@ -85,6 +85,12 @@ function CapImageUpload(props) {
85
85
  };
86
86
  submitAction({file, type: 'image', fileParams}, incorrectFile);
87
87
  };
88
+ img.onerror = () => {
89
+ const fileParams = {
90
+ error: true,
91
+ };
92
+ submitAction({fileParams}, incorrectFile);
93
+ }
88
94
  if (e) {
89
95
  const event = e;
90
96
  event.target.value = null;
@@ -93,13 +99,12 @@ function CapImageUpload(props) {
93
99
 
94
100
  const submitAction = useCallback((data, incorrectFile) => {
95
101
  const {
96
- file: {size},
97
- fileParams: {
98
- height,
99
- width,
100
- },
101
- } = data;
102
- if (incorrectFile || size > imgSize || height > imgHeight || width > imgWidth) {
102
+ file,
103
+ fileParams
104
+ } = data || {};
105
+ const { size } = file || {};
106
+ const { height, width, error } = fileParams || {};
107
+ if (incorrectFile || size > imgSize || height > imgHeight || width > imgWidth || error) {
103
108
  updateImageErrorMessage(formatMessage(messages.imageIncorrectSize));
104
109
  } else {
105
110
  updateImageErrorMessage('');
@@ -166,6 +171,7 @@ function CapImageUpload(props) {
166
171
  <CapUploader.CapDragger
167
172
  customRequest={capUploaderCustomRequest}
168
173
  className="form-builder-dragger"
174
+ showUploadList={!isImageError}
169
175
  >
170
176
  <CapHeading className="dragger-title" type="h7">
171
177
  <FormattedMessage {...messages.dragAndDrop} />
@@ -198,7 +204,7 @@ function CapImageUpload(props) {
198
204
  <FormattedMessage {...messages.imageReUpload} />
199
205
  </CapButton>
200
206
  );
201
- }, []);
207
+ }, [isImageError]);
202
208
 
203
209
  return (
204
210
  <div style={style} className="cap-custom-image-upload">
package/v2Components/FormBuilder/index.js CHANGED
@@ -2854,7 +2854,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
2854
2854
  name={val.name ? val.name : `${val.id}-name`}
2855
2855
  disabled={val.disabled}
2856
2856
  >
2857
- {val.options.map((option, index) => <CapRadio value={option} inductiveText={val.inductiveText && val.inductiveText[index]}>{option}</CapRadio>) }
2857
+ {val.options.map((option, index) => {
2858
+ const isMappedTemplateWechat = val.id === "template-redirect-options-radio";
2859
+ return (
2860
+ <CapRadio
2861
+ value={ isMappedTemplateWechat ? option.value : option }
2862
+ inductiveText={val.inductiveText && val.inductiveText[index]}>{ isMappedTemplateWechat ? option.label : option }
2863
+ </CapRadio>
2864
+ )
2865
+ }
2866
+ )}
2858
2867
 
2859
2868
  </CapRadioGroup>
2860
2869
  {/*{ifError ?*/}
package/v2Containers/CapFacebookPreview/constants.js CHANGED
@@ -11,3 +11,7 @@ export const GENERATE_PREVIEW_FAILURE = 'app/CapFacebookPreview/GET_PREVIEW_FAIL
11
11
 
12
12
  export const CLEAR_PREVIEW = 'app/CapFacebookPreview/CLEAR_PREVIEW';
13
13
 
14
+ export const PREVIEW_NOT_REQUESTED = "PreviewNotRequested";
15
+ export const FETCH_PREVIEW_REQUESTED = "PreviewRequested";
16
+ export const FETCH_PREVIEW_SUCCESS = "PreviewRequestSuccess";
17
+ export const FETCH_PREVIEW_FAILURE = "PreviewRequestFailure";
package/v2Containers/CapFacebookPreview/index.js CHANGED
@@ -30,6 +30,11 @@ import {
30
30
  CAROUSEL,
31
31
  NO_CALL_TO_ACTION,
32
32
  } from '../../v2Containers/Facebook/Advertisement/constant';
33
+ import {
34
+ FETCH_PREVIEW_REQUESTED,
35
+ FETCH_PREVIEW_SUCCESS,
36
+ PREVIEW_NOT_REQUESTED,
37
+ } from './constants';
33
38
  import './index.scss';
34
39
 
35
40
  export const CapFacebookPreview = (props) => {
@@ -55,7 +60,10 @@ export const CapFacebookPreview = (props) => {
55
60
  const [disableAfterPreviewGenerate, setDisableAfterPreviewGenerate] = useState(false);
56
61
  const [random, setRandom] = useState(0);
57
62
  const {pageAccessToken, pageId} = orgUnitFacebookPageSettingsMap;
58
- const {previewIframe = "", isFetchingPreview = false, previewIframeError = ""} = facebookPreviewData;
63
+ const {previewIframe = "", fetchPreviewStatus = PREVIEW_NOT_REQUESTED, previewIframeError = ""} = facebookPreviewData;
64
+ const [previewLoaded, setPreviewLoaded] = useState(false);
65
+ const [isRefreshing, setIsRefreshing] = useState(false);
66
+ let isSpinning = false;
59
67
  const facebookAdOptions = [
60
68
  {
61
69
  value: "DESKTOP_FEED_STANDARD",
@@ -284,9 +292,17 @@ export const CapFacebookPreview = (props) => {
284
292
  };
285
293
 
286
294
  const resetIframe = () => {
295
+ previewLoaded && setPreviewLoaded(false);
296
+ !isRefreshing && setIsRefreshing(true);
287
297
  const r = random + 1;
288
298
  setRandom(r);
289
299
  };
300
+ const unsetLoader = () => {
301
+ setTimeout(function() {
302
+ !previewLoaded && setPreviewLoaded(true);
303
+ isRefreshing && setIsRefreshing(false);
304
+ }.bind(this), 5000);
305
+ }
290
306
  const getIframe = (iframe) => {
291
307
  const divTag = document.createElement('div');
292
308
  divTag.innerHTML = iframe;
@@ -295,13 +311,16 @@ export const CapFacebookPreview = (props) => {
295
311
  <iframe
296
312
  src={src}
297
313
  key={random}
298
- style={{border: "none"}}
314
+ style={{ border: "none" }}
299
315
  width={"600px"}
300
316
  scrolling="no"
301
317
  height={"1000px"}
302
318
  className="cap-facebook-ad-iframe"
319
+ onLoad={
320
+ unsetLoader()
321
+ }
303
322
  />
304
- </>);
323
+ </>);
305
324
  };
306
325
 
307
326
  const showRefreshButton = () => {
@@ -340,74 +359,80 @@ export const CapFacebookPreview = (props) => {
340
359
  }
341
360
  }, [previewIframeError]);
342
361
  return (
343
- <CapSpin spinning={isFetchingPreview}>
344
- <div style={{display: 'inline-block'}}>
345
- <CapSelect
346
- label={formatMessage(messages.previewBasedonAdPlacement)}
347
- key={"select-previewBasedonAdPlacement"}
348
- onChange={onChangeAdPreviewFormat}
349
- style={{width: '328px', paddingBottom: 16 }}
350
- options={adOptions}
351
- value={adPreviewFormat}
362
+ <>
363
+ {isSpinning = (fetchPreviewStatus === FETCH_PREVIEW_REQUESTED) ||
364
+ ((fetchPreviewStatus === FETCH_PREVIEW_SUCCESS) && !previewLoaded) ||
365
+ isRefreshing}
366
+ <CapSpin
367
+ spinning={isSpinning}>
368
+ <div style={{ display: 'inline-block' }}>
369
+ <CapSelect
370
+ label={formatMessage(messages.previewBasedonAdPlacement)}
371
+ key={"select-previewBasedonAdPlacement"}
372
+ onChange={onChangeAdPreviewFormat}
373
+ style={{ width: '328px', paddingBottom: 16 }}
374
+ options={adOptions}
375
+ value={adPreviewFormat}
376
+ >
377
+ </CapSelect>
378
+ </div>
379
+ {!hideInfoText && <CapLabel
380
+ type="label1"
381
+ style={{ paddingBottom: 16, textAlign: 'left', width: 392 }}
352
382
  >
353
- </CapSelect>
354
- </div>
355
- {!hideInfoText && <CapLabel
356
- type="label1"
357
- style={{paddingBottom: 16, textAlign: 'left', width: 392}}
383
+ {formatMessage(messages.previewAdDesc)}
384
+ </CapLabel>}
385
+ <div style={{ marginBottom: 16 }}>
386
+ {(disablePreviewButton || disableAfterPreviewGenerate) ?
387
+ <CapTooltip title={formatMessage(messages.generatePreviewDisableToolTip)}>
388
+ <div className="button-disabled-tooltip-wrapper">
389
+ <CapButton
390
+ type="secondary"
391
+ disabled
358
392
  >
359
- {formatMessage(messages.previewAdDesc)}
360
- </CapLabel>}
361
- <div style={{marginBottom: 16}}>
362
- {(disablePreviewButton || disableAfterPreviewGenerate) ?
363
- <CapTooltip title={formatMessage(messages.generatePreviewDisableToolTip)}>
364
- <div className="button-disabled-tooltip-wrapper">
365
- <CapButton
366
- type="secondary"
367
- disabled
368
- >
369
- <FormattedMessage {...messages.generatePreview} />
370
- </CapButton>
371
- </div>
372
- </CapTooltip> :
373
- <CapButton
393
+ <FormattedMessage {...messages.generatePreview} />
394
+ </CapButton>
395
+ </div>
396
+ </CapTooltip> :
397
+ <CapButton
398
+ type="secondary"
399
+ onClick={generatePreview}
400
+ >
401
+ <FormattedMessage {...messages.generatePreview} />
402
+ </CapButton>}
403
+ {isRefreshButton && (<CapButton
404
+ onClick={resetIframe}
374
405
  type="secondary"
375
- onClick={generatePreview}
406
+ style={{ marginLeft: 16 }}
376
407
  >
377
- <FormattedMessage {...messages.generatePreview} />
378
- </CapButton>}
379
- {isRefreshButton && (<CapButton
380
- onClick={resetIframe}
381
- type="secondary"
382
- style={{marginLeft: 16}}
383
- >
384
- {formatMessage(messages.refreshPreview)}
385
- </CapButton>)}
386
- </div>
387
- {isRefreshButton && <div style={{marginBottom: 16}}>
388
- <CapIcon
389
- type="info"
390
- svgProps={{
391
- width: 16,
392
- height: 16,
393
- }}
394
- >
395
- </CapIcon>
396
- <CapLabel.CapLabelInline
397
- type="label1"
398
- size="s"
399
- style={{marginBottom: 16, width: 392}}
400
- >
401
- {formatMessage(messages.videoNotePreview)}
402
- </CapLabel.CapLabelInline>
403
- </div>}
404
- {previewIframe === "" ? <CapImage
405
- src={facebookEmptyPlaceholder}
406
- alt="default"
407
- width="316px"
408
- height="392px"
409
- /> : getIframe(previewIframe)}
410
- </CapSpin>
408
+ {formatMessage(messages.refreshPreview)}
409
+ </CapButton>)}
410
+ </div>
411
+ {isRefreshButton && <div style={{ marginBottom: 16 }}>
412
+ <CapIcon
413
+ type="info"
414
+ svgProps={{
415
+ width: 16,
416
+ height: 16,
417
+ }}
418
+ >
419
+ </CapIcon>
420
+ <CapLabel.CapLabelInline
421
+ type="label1"
422
+ size="s"
423
+ style={{ marginBottom: 16, width: 392 }}
424
+ >
425
+ {formatMessage(messages.videoNotePreview)}
426
+ </CapLabel.CapLabelInline>
427
+ </div>}
428
+ {previewIframe === "" ? <CapImage
429
+ src={facebookEmptyPlaceholder}
430
+ alt="default"
431
+ width="316px"
432
+ height="392px"
433
+ /> : getIframe(previewIframe)}
434
+ </CapSpin>
435
+ </>
411
436
  );
412
437
  };
413
438
 
package/v2Containers/CapFacebookPreview/reducer.js CHANGED
@@ -6,29 +6,38 @@
6
6
 
7
7
  import { fromJS } from 'immutable';
8
8
  import get from 'lodash/get';
9
- import * as types from './constants';
9
+ import {
10
+ GENERATE_PREVIEW_REQUEST,
11
+ GENERATE_PREVIEW_SUCCESS,
12
+ GENERATE_PREVIEW_FAILURE,
13
+ CLEAR_PREVIEW,
14
+ FETCH_PREVIEW_REQUESTED,
15
+ FETCH_PREVIEW_SUCCESS,
16
+ FETCH_PREVIEW_FAILURE,
17
+ PREVIEW_NOT_REQUESTED,
18
+ } from './constants';
10
19
 
11
20
  const initialState = fromJS({
12
- isFetchingPreview: false,
21
+ fetchPreviewStatus: PREVIEW_NOT_REQUESTED,
13
22
  previewIframe: "",
14
23
  previewIframeError: "",
15
24
  });
16
25
 
17
26
  function capFacebookPreviewReducer(state = initialState, action) {
18
27
  switch (action.type) {
19
- case types.GENERATE_PREVIEW_REQUEST:
20
- return state.set('isFetchingPreview', true)
28
+ case GENERATE_PREVIEW_REQUEST:
29
+ return state.set('fetchPreviewStatus', FETCH_PREVIEW_REQUESTED)
21
30
  .set('previewIframe', "")
22
31
  .set("previewIframeError", "");
23
- case types.GENERATE_PREVIEW_SUCCESS:
24
- return state.set('isFetchingPreview', false)
32
+ case GENERATE_PREVIEW_SUCCESS:
33
+ return state.set('fetchPreviewStatus', FETCH_PREVIEW_SUCCESS)
25
34
  .set('previewIframe', get(action, 'payload.fbPreview[0].body', ""));
26
- case types.GENERATE_PREVIEW_FAILURE:
27
- return state.set('isFetchingPreview', false)
35
+ case GENERATE_PREVIEW_FAILURE:
36
+ return state.set('fetchPreviewStatus', FETCH_PREVIEW_FAILURE)
28
37
  .set('previewIframe', "")
29
38
  .set("previewIframeError", get(action, 'payload.message', ""));
30
- case types.CLEAR_PREVIEW:
31
- return state.set('isFetchingPreview', false)
39
+ case CLEAR_PREVIEW:
40
+ return state.set('fetchPreviewStatus', PREVIEW_NOT_REQUESTED)
32
41
  .set('previewIframe', "")
33
42
  .set("previewIframeError", "");
34
43
  default:
package/v2Containers/CreativesContainer/index.js CHANGED
@@ -91,7 +91,7 @@ class Creatives extends React.Component {
91
91
  this.setState({ slidBoxContent: 'preview', templateData });
92
92
  };
93
93
  onEditTemplate = () => {
94
- this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true });
94
+ this.setState({ slidBoxContent: 'editTemplate', showSlideBox: true, templateNameExists: true });
95
95
  };
96
96
  onCreateNew = (fbAdManager) => {
97
97
  const data = { slidBoxContent: 'createTemplate', showSlideBox: true };
package/v2Containers/WeChat/MapTemplates/index.js CHANGED
@@ -666,7 +666,16 @@ export class MapTemplates extends React.Component { // eslint-disable-line react
666
666
  type: "radioGroup",
667
667
  metaType: "text",
668
668
  datatype: "string",
669
- options: [intl.formatMessage(messages.redirectOptionURL), intl.formatMessage(messages.redirectOptionMiniProgram)],
669
+ options: [
670
+ {
671
+ value: URL,
672
+ label: intl.formatMessage(messages.redirectOptionURL)
673
+ },
674
+ {
675
+ value: MINI_PROGRAM,
676
+ label: intl.formatMessage(messages.redirectOptionMiniProgram)
677
+ }
678
+ ],
670
679
  errorMessage: intl.formatMessage(messages.redirectionOptionError),
671
680
  required: true,
672
681
  fluid: true,