@capillarytech/creatives-library 7.1.0 → 7.1.4

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 (17) hide show
  1. package/package.json +1 -1
  2. package/services/api.js +0 -1
  3. package/utils/common.js +7 -6
  4. package/v2Components/TemplatePreview/assets/images/viberMobile.svg +135 -0
  5. package/v2Components/TemplatePreview/index.js +12 -8
  6. package/v2Containers/App/constants.js +3 -1
  7. package/v2Containers/CreativesContainer/SlideBoxContent.js +2 -0
  8. package/v2Containers/CreativesContainer/index.js +14 -6
  9. package/v2Containers/FTP/index.js +20 -25
  10. package/v2Containers/Templates/_templates.scss +2 -2
  11. package/v2Containers/Templates/actions.js +117 -110
  12. package/v2Containers/Templates/constants.js +2 -0
  13. package/v2Containers/Templates/index.js +29 -1
  14. package/v2Containers/Templates/messages.js +4 -0
  15. package/v2Containers/Templates/reducer.js +2 -0
  16. package/v2Containers/Viber/index.js +32 -12
  17. package/v2Containers/Viber/messages.js +12 -4
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@capillarytech/creatives-library",
3
3
  "author": "meharaj",
4
- "version": "7.1.0",
4
+ "version": "7.1.4",
5
5
  "description": "Capillary creatives ui",
6
6
  "main": "./index.js",
7
7
  "module": "./index.es.js",
package/services/api.js CHANGED
@@ -215,7 +215,6 @@ export const duplicateTemplate = ({id, channel}) => {
215
215
  };
216
216
 
217
217
  export const getFTPServers = () => {
218
- console.log('in api.js getFTPServers');
219
218
  const url = `${EXPORT_API_ENDPOINT}/ftplist`;
220
219
  return request(url, getAPICallObject('GET'));
221
220
  };
package/utils/common.js CHANGED
@@ -42,21 +42,22 @@ export function getTreeStructuredTags({tagsList, userLocale = 'en', offerDetails
42
42
  console.log('populating tags', (tagsList || []).length);
43
43
  const mainTags = {};
44
44
 
45
- //Form tags object with tag headers
46
45
  _.forEach(tagsList, (temp) => {
47
46
  const tag = temp.definition;
48
- if (!tag['tag-header']) {
47
+ if (!tag['tag-header']) { //if tag doesn't have subtag(s), which means this tag itself is tag and not a tag header.
49
48
  mainTags[tag.value] = {
50
- name: tag.label[userLocale] ? tag.label[userLocale] : tag.label.en,
49
+ name: tag.label[userLocale] || tag.label.en,
51
50
  value: tag.value,
52
51
  };
53
- } else if (tag['tag-header'] && mainTags[tag.value]) {
52
+ } else if (tag['tag-header'] && mainTags[tag.value]) {
53
+ // to check it this tag header is already available in mainTags object,
54
+ //If yes, it will concat the subtag
54
55
  mainTags[tag.value].subtags = _.concat(mainTags[tag.value].subtags, tag.subtags);
55
56
  } else if (!mainTags[tag.value]) {
56
- // console.log('Inside ', tag.label);
57
+ //If tag is not available in mainTag object, new maintag will be added.
57
58
  mainTags[tag.value] = {
58
59
  'tag-header': true,
59
- "name": tag.label[userLocale] ? tag.label[userLocale] : tag.label.en,
60
+ "name": tag.label[userLocale] || tag.label.en,
60
61
  "subtags": tag.subtags,
61
62
  "value": tag.value,
62
63
  };
package/v2Components/TemplatePreview/assets/images/viberMobile.svg ADDED
@@ -0,0 +1,135 @@
1
+ <?xml version="1.0" encoding="UTF-8"?>
2
+ <svg width="220px" height="472px" viewBox="0 0 220 472" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
3
+ <!-- Generator: Sketch 55.2 (78181) - https://sketchapp.com -->
4
+ <title>Group 20</title>
5
+ <desc>Created with Sketch.</desc>
6
+ <defs>
7
+ <path d="M8,0 L193,0 C197.970563,-9.13077564e-16 202,4.02943725 202,9 L202,395 C202,399.970563 197.970563,404 193,404 L9,404 C4.02943725,404 6.08718376e-16,399.970563 0,395 L0,8 C-5.41083001e-16,3.581722 3.581722,8.11624501e-16 8,0 Z" id="path-1"></path>
8
+ <path d="M0,0 L202,0 L202,38 C202,42.418278 198.418278,46 194,46 L8,46 C3.581722,46 5.41083001e-16,42.418278 0,38 L0,0 Z" id="path-3"></path>
9
+ <filter x="-1.7%" y="-9.8%" width="103.5%" height="115.2%" filterUnits="objectBoundingBox" id="filter-4">
10
+ <feOffset dx="0" dy="-1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
11
+ <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
12
+ <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
13
+ <feColorMatrix values="0 0 0 0 0.39215687 0 0 0 0 0.39215687 0 0 0 0 0.39215687 0 0 0 0.21960784 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
14
+ </filter>
15
+ <path d="M0,0 L202,0 L202,45 C202,49.418278 198.418278,53 194,53 L8,53 C3.581722,53 5.41083001e-16,49.418278 0,45 L0,0 Z" id="path-5"></path>
16
+ <filter x="-1.7%" y="-8.5%" width="103.5%" height="113.2%" filterUnits="objectBoundingBox" id="filter-6">
17
+ <feOffset dx="0" dy="-1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
18
+ <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
19
+ <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
20
+ <feColorMatrix values="0 0 0 0 0.39215687 0 0 0 0 0.39215687 0 0 0 0 0.39215687 0 0 0 0.29803923 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
21
+ </filter>
22
+ <path d="M11.3333333,6.00000016 C11.3333333,6.36819 11.0348565,6.66666684 10.6666666,6.66666684 L3.33333341,6.66666684 L6.52666664,9.86000007 C6.78808141,10.1214148 6.78808141,10.5452519 6.52666664,10.8066667 C6.26525187,11.0680815 5.84141479,11.0680815 5.58000002,10.8066667 L1.48044011,6.70710678 C1.08991582,6.31658249 1.08991582,5.68341751 1.48044011,5.29289322 L5.58000001,1.19333332 C5.84141478,0.931918557 6.26525186,0.931918557 6.52666663,1.19333332 C6.52666663,1.19333333 6.52666664,1.19333334 6.52666664,1.19333334 C6.78808142,1.45474813 6.78808142,1.87858523 6.52666664,2.14000002 L3.33333341,5.33333347 L10.6666666,5.33333347 C11.0348565,5.33333347 11.3333333,5.63181031 11.3333333,6.00000016 Z" id="path-7"></path>
23
+ <rect id="path-9" x="0" y="0" width="16" height="16"></rect>
24
+ <rect id="path-11" x="0" y="0" width="16" height="16"></rect>
25
+ <rect id="path-13" x="0" y="0" width="16" height="16"></rect>
26
+ <rect id="path-15" x="0" y="0" width="16" height="16"></rect>
27
+ <rect id="path-17" x="0" y="0" width="16" height="16"></rect>
28
+ <rect id="path-19" x="0" y="0" width="16" height="16"></rect>
29
+ </defs>
30
+ <g id="➊-Campaigns---Viber" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
31
+ <g id="Group-20">
32
+ <g id="Group-18">
33
+ <g id="Group-14">
34
+ <rect id="body" fill="#101211" x="0" y="0" width="220" height="472" rx="26"></rect>
35
+ <g id="Group-22" transform="translate(9.000000, 36.000000)">
36
+ <g id="Bitmap">
37
+ <mask id="mask-2" fill="white">
38
+ <use xlink:href="#path-1"></use>
39
+ </mask>
40
+ <use id="Mask" fill="#FFFFFF" xlink:href="#path-1"></use>
41
+ </g>
42
+ <g id="screen" transform="translate(101.000000, 23.000000) scale(1, -1) translate(-101.000000, -23.000000) ">
43
+ <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
44
+ <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-3"></use>
45
+ </g>
46
+ <g id="Group" transform="translate(101.000000, 377.500000) scale(1, -1) translate(-101.000000, -377.500000) translate(0.000000, 351.000000)">
47
+ <g id="Group-12">
48
+ <g id="screen" transform="translate(101.000000, 26.500000) scale(1, -1) translate(-101.000000, -26.500000) ">
49
+ <use fill="black" fill-opacity="1" filter="url(#filter-6)" xlink:href="#path-5"></use>
50
+ <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-5"></use>
51
+ </g>
52
+ </g>
53
+ </g>
54
+ </g>
55
+ <g id="Atoms/Icons/24/filled/error" transform="translate(189.000000, 60.000000)">
56
+ <g id="Group-21">
57
+ <path d="M6,0 C2.688,0 0,2.688 0,6 C0,9.312 2.688,12 6,12 C9.312,12 12,9.312 12,6 C12,2.688 9.312,0 6,0 Z" id="Mask" fill="#6563FF" fill-rule="nonzero" transform="translate(6.000000, 6.000000) rotate(-180.000000) translate(-6.000000, -6.000000) "></path>
58
+ <path d="M6,4.66666667 C5.53976271,4.66666667 5.16666667,4.29357062 5.16666667,3.83333333 C5.16666667,3.37309604 5.53976271,3 6,3 C6.46023729,3 6.83333333,3.37309604 6.83333333,3.83333333 C6.83333333,4.29357062 6.46023729,4.66666667 6,4.66666667 Z" id="Path" fill="#FFFFFF"></path>
59
+ <path d="M6,8.66666667 C5.63181017,8.66666667 5.33333333,8.36818983 5.33333333,8 L5.33333333,6 C5.33333333,5.63181017 5.63181017,5.33333333 6,5.33333333 C6.36818983,5.33333333 6.66666667,5.63181017 6.66666667,6 L6.66666667,8 C6.66666667,8.36818983 6.36818983,8.66666667 6,8.66666667 Z" id="Path" fill="#FFFFFF"></path>
60
+ </g>
61
+ </g>
62
+ <g id="Atoms/Icons/24/Nav/Back" transform="translate(19.000000, 60.000000)">
63
+ <mask id="mask-8" fill="white">
64
+ <use xlink:href="#path-7"></use>
65
+ </mask>
66
+ <use id="icon" fill="#FFFFFF" xlink:href="#path-7"></use>
67
+ <rect id="grey_k-091E42" fill="#6563FF" mask="url(#mask-8)" x="-2" y="-2" width="16" height="16"></rect>
68
+ </g>
69
+ <rect id="parts" fill="#2E2E2E" x="84" y="14" width="52" height="5"></rect>
70
+ <rect id="parts" fill="#2E2E2E" x="84" y="455" width="52" height="5"></rect>
71
+ <circle id="parts" fill="#2E2E2E" cx="45.5" cy="19.5" r="5.5"></circle>
72
+ <circle id="parts" fill="#2E2E2E" cx="65.5" cy="19.5" r="3.5"></circle>
73
+ <circle id="Ellipse" fill="#6563FF" cx="191" cy="420" r="12"></circle>
74
+ <g id="Group" transform="translate(184.000000, 414.500000)" stroke="#FFFFFF">
75
+ <g id="Group-9" transform="translate(0.500000, 0.499512)">
76
+ <rect id="Rectangle" x="-1.69642078e-13" y="0" width="13.3333322" height="10"></rect>
77
+ <path d="M0.555555556,3.33333333 L13.3333333,3.33333333" id="Line" stroke-linecap="square"></path>
78
+ <path d="M0.555555556,6.44422744 L13.3333333,6.44422744" id="Line-Copy" stroke-linecap="square"></path>
79
+ <path d="M6.66666667,0.555555556 L6.66666667,10" id="Line-2" stroke-linecap="square"></path>
80
+ </g>
81
+ </g>
82
+ <g id="search" transform="translate(95.000000, 416.000000)">
83
+ <mask id="mask-10" fill="white">
84
+ <use xlink:href="#path-9"></use>
85
+ </mask>
86
+ <g id="Background"></g>
87
+ <path d="M14.474296,13.5266073 L12.0009634,11.0732726 C13.9944404,8.58770198 13.697479,4.977455 11.3246444,2.85103506 C8.95180839,0.724615141 5.33072242,0.823701289 3.07772334,3.07670008 C0.824724324,5.32969918 0.725638228,8.95078372 2.85205798,11.3236189 C4.97847734,13.6964554 8.58872567,13.9934173 11.0742954,11.9999392 L13.5276306,14.4532733 C13.6528071,14.5794816 13.8232045,14.6504735 14.0009636,14.6504735 C14.1787221,14.6504735 14.3491195,14.5794816 14.474296,14.4532733 C14.7240659,14.1948762 14.7240659,13.7850049 14.474296,13.5266073 L14.474296,13.5266073 Z M7.33396079,11.9996053 C4.75663117,11.9996053 2.66729346,9.91026744 2.66729346,7.33293745 C2.66729346,4.7556084 4.75663145,2.66627069 7.33396079,2.66627069 C9.91129021,2.66627069 12.0006281,4.7556097 12.0006281,7.33293894 C12.0006281,9.91026744 9.91129115,11.9996053 7.33396172,11.9996053 L7.33396079,11.9996053 Z" id="Shape" fill="#B4B1B4" mask="url(#mask-10)"></path>
88
+ </g>
89
+ <g id="image-v" transform="translate(43.000000, 416.000000)">
90
+ <mask id="mask-12" fill="white">
91
+ <use xlink:href="#path-11"></use>
92
+ </mask>
93
+ <g id="Background"></g>
94
+ <path d="M12.6669805,1.33313534 L3.33364673,1.33313534 C2.22907703,1.33313534 1.33364673,2.22856591 1.33364673,3.33313534 L1.33364673,12.6664691 C1.33364673,13.7710389 2.22907703,14.6664692 3.33364673,14.6664692 L12.6669805,14.6664692 C12.7766352,14.6649425 12.8859445,14.6537879 12.9936485,14.6331367 L13.1936467,14.5864705 L13.2403132,14.5864705 L13.2403132,14.5864705 L13.2736459,14.5864705 L13.5203139,14.4931372 L13.6069792,14.4464705 C13.6736459,14.4064713 13.7469792,14.3731372 13.8136459,14.3264705 C13.9026632,14.2609772 13.9872882,14.1897138 14.0669752,14.1131398 L14.1136452,14.0531372 C14.1790975,13.9868105 14.2392792,13.9154825 14.2936464,13.8398025 L14.3536454,13.7531377 C14.4002099,13.6789158 14.4403558,13.6008545 14.4736454,13.5198029 C14.4919384,13.4878168 14.5075472,13.4543698 14.5203118,13.4198046 C14.5536451,13.3398038 14.5736453,13.2531385 14.6003126,13.1664718 L14.6003126,13.0664722 C14.6381099,12.9362065 14.6604853,12.8019531 14.6669806,12.6664705 L14.6669806,3.33313534 C14.6669806,2.22856578 13.7715503,1.33313534 12.6669805,1.33313534 L12.6669805,1.33313534 Z M3.33396013,13.333621 C2.96577032,13.333621 2.66729346,13.0351437 2.66729346,12.6669542 L2.66729346,9.79362058 L4.86062688,7.59362022 L4.86062688,7.59362022 C4.9858045,7.4674116 5.15620178,7.39642135 5.3339602,7.39642135 C5.51171871,7.39642135 5.68211546,7.4674116 5.8072937,7.59362022 L11.5406267,13.333621 L3.33396013,13.333621 Z M13.3332188,12.6667553 C13.3325906,12.7489506 13.3167685,12.8303192 13.2865511,12.9067583 C13.2713151,12.9392531 13.2534802,12.9704651 13.2332189,13.0000885 C13.2153828,13.0283111 13.1953187,13.0550634 13.1732189,13.0800894 L9.60655189,9.51342215 L10.1932187,8.92675535 C10.3183967,8.80054674 10.4887941,8.72955649 10.666552,8.72955649 C10.8443106,8.72955649 11.0147079,8.80054674 11.1398848,8.92675535 L11.1398848,8.92675535 L13.3332188,11.1267556 L13.3332188,12.6667553 Z M13.3339601,9.23960447 L12.0806273,7.99960421 C11.2883516,7.24785121 10.0462353,7.24785121 9.2539596,7.99960421 L8.66729346,8.58627097 L6.74729346,6.66627069 C5.95501762,5.91451796 4.71290232,5.91451796 3.92062658,6.66627069 L2.66729346,7.90627043 L2.66729346,3.33293735 C2.66729346,2.96474757 2.96577032,2.66627069 3.33396013,2.66627069 L12.6672935,2.66627069 C13.035483,2.66627069 13.3339601,2.96474757 13.3339601,3.33293735 L13.3339601,9.23960447 Z" id="Shape" fill="#B4B1B4" mask="url(#mask-12)"></path>
95
+ </g>
96
+ <g id="smile" transform="translate(17.000000, 416.000000)">
97
+ <g id="Group-13">
98
+ <mask id="mask-14" fill="white">
99
+ <use xlink:href="#path-13"></use>
100
+ </mask>
101
+ <g id="Background"></g>
102
+ <path d="M9.57339145,9.48664197 C8.65514264,10.2269844 7.34497346,10.2269844 6.42672422,9.48664197 C6.14321849,9.25100113 5.72236638,9.28980296 5.48672489,9.57330935 C5.25108307,9.85681513 5.28988522,10.2776671 5.573391,10.5133086 C6.97854066,11.6863159 9.0215765,11.6863159 10.4267252,10.513308 C10.610143,10.3608568 10.6982825,10.122126 10.6579385,9.88706125 C10.6175934,9.6519964 10.4548942,9.45631768 10.2311398,9.3737511 C10.0073858,9.29118388 9.75657877,9.33427534 9.57321401,9.48678948 L9.57339145,9.48664197 Z M6.00023106,7.33320978 C6.3684206,7.33320978 6.66689785,7.03473319 6.66689785,6.66654298 C6.66689785,6.29835278 6.3684206,5.99987619 6.00023106,5.99987619 C5.63204085,5.99987619 5.33356426,6.29835342 5.33356426,6.66654298 C5.33356426,7.03473252 5.63204085,7.33320978 6.00023106,7.33320978 L6.00023106,7.33320978 Z M10.0001483,5.99987619 C9.63195826,5.99987619 9.33348179,6.29835342 9.33348179,6.66654298 C9.33348179,7.03473319 9.63195826,7.33320978 10.0001483,7.33320978 C10.3683384,7.33320978 10.6668149,7.03473252 10.6668149,6.66654298 C10.6668149,6.29835278 10.3683377,5.99987619 10.0001483,5.99987619 L10.0001483,5.99987619 Z M8.00031366,1.33313534 C4.31841485,1.33313534 1.33364673,4.317904 1.33364673,7.99980307 C1.33364673,11.6817011 4.31841525,14.6664692 8.00031366,14.6664692 C11.6822125,14.6664692 14.6669806,11.6816998 14.6669806,7.99980094 C14.6669806,4.317904 11.6822125,1.33313534 8.00031446,1.33313534 L8.00031366,1.33313534 Z M8.0006268,13.3329374 C5.05510765,13.3329374 2.66729346,10.9451225 2.66729346,7.99960338 C2.66729346,5.05408488 5.05510797,2.66627069 8.0006268,2.66627069 C10.9461453,2.66627069 13.3339601,5.05408616 13.3339601,7.99960466 C13.3339601,10.9451225 10.9461453,13.3329374 8.00062744,13.3329374 L8.0006268,13.3329374 Z" id="Shape" fill="#B4B1B4" mask="url(#mask-14)"></path>
103
+ </g>
104
+ </g>
105
+ <g id="camera" transform="translate(69.000000, 416.000000)">
106
+ <mask id="mask-16" fill="white">
107
+ <use xlink:href="#path-15"></use>
108
+ </mask>
109
+ <g id="Background"></g>
110
+ <path d="M12.6672455,4.33323017 L11.8139117,4.33323017 L11.6005792,3.66656348 C11.3171172,2.86479444 10.557642,2.32995222 9.70724613,2.33321522 L6.29391187,2.33321522 C5.43476798,2.33483742 4.67263947,2.88496559 4.40057829,3.69989684 L4.18724529,4.36656353 L3.33391184,4.36656353 C2.22934209,4.36656353 1.33391184,5.26199447 1.33391184,6.36656359 L1.33391184,11.6998964 C1.33391184,12.8044662 2.22934209,13.699897 3.33391184,13.699897 L12.6672455,13.699897 C13.7718159,13.699897 14.6672462,12.8044662 14.6672462,11.6998964 L14.6672462,6.36656291 C14.676185,5.83038357 14.4694243,5.31306997 14.0933795,4.93075583 C13.7173337,4.54844135 13.2035095,4.33315708 12.6672509,4.33323017 L12.6672455,4.33323017 Z M13.3344913,11.6662227 C13.3344913,12.0344142 13.0360141,12.3328917 12.6678237,12.3328917 L3.3344904,12.3328917 C2.96630055,12.3328917 2.66782368,12.0344142 2.66782368,11.6662227 L2.66782368,6.3328912 C2.66782368,5.96470129 2.96630055,5.66622267 3.3344904,5.66622267 L4.66782368,5.66622267 C4.96659219,5.68181844 5.23916129,5.49647175 5.33449057,5.21289106 L5.6944906,4.11955812 C5.78620549,3.84801715 6.04121277,3.66548516 6.32782399,3.66622267 L9.74115762,3.66622267 C10.0277678,3.66548516 10.2827758,3.84801715 10.3744899,4.11955812 L10.734491,5.21289141 C10.8220452,5.47314689 11.0602159,5.65309822 11.33449,5.66622267 L12.6678237,5.66622267 C13.0360141,5.66622267 13.3344913,5.96470129 13.3344913,6.3328912 L13.3344913,11.6662227 Z M8.00050562,5.66663828 C6.52774622,5.66663828 5.33383868,6.86054561 5.33383868,8.33330476 C5.33383868,9.80606392 6.52774622,10.9999712 8.00050562,10.9999712 C9.47326503,10.9999712 10.6671726,9.80606392 10.6671726,8.33330412 C10.6671726,6.86054561 9.47326578,5.66663828 8.00050616,5.66663828 L8.00050562,5.66663828 Z M8.00108376,9.66676478 C7.26470413,9.66676478 6.66775042,9.06981108 6.66775042,8.33343145 C6.66775042,7.59705182 7.26470413,7.00009812 8.00108376,7.00009812 C8.73746338,7.00009812 9.33441709,7.59705182 9.33441709,8.33343145 C9.33441709,9.06981108 8.73746338,9.66676478 8.00108376,9.66676478 L8.00108376,9.66676478 Z" id="Shape" fill="#B4B1B4" mask="url(#mask-16)"></path>
111
+ </g>
112
+ <g id="ellipsis-h" transform="translate(147.000000, 416.000000)">
113
+ <mask id="mask-18" fill="white">
114
+ <use xlink:href="#path-17"></use>
115
+ </mask>
116
+ <g id="Background"></g>
117
+ <path d="M8.0007972,6.66644127 C7.26441749,6.66644127 6.66746371,7.26339516 6.66746371,7.99977502 C6.66746371,8.73615488 7.26441749,9.33310877 8.0007972,9.33310877 C8.73717692,9.33310877 9.33413069,8.73615488 9.33413069,7.99977502 C9.33413069,7.26339516 8.73717692,6.66644127 8.0007972,6.66644127 L8.0007972,6.66644127 Z M3.33357243,6.66644127 C2.59719264,6.66644127 2.00023909,7.26339516 2.00023909,7.99977502 C2.00023909,8.73615488 2.5971928,9.33310877 3.33357243,9.33310877 C4.06995205,9.33310877 4.66690576,8.73615488 4.66690576,7.99977502 C4.66690576,7.26339516 4.06995205,6.66644127 3.33357243,6.66644127 L3.33357243,6.66644127 Z M12.6669994,6.66644127 C11.930619,6.66644127 11.3336659,7.26339516 11.3336659,7.99977502 C11.3336659,8.73615488 11.930619,9.33310877 12.6669994,9.33310877 C13.4033797,9.33310877 14.0003329,8.73615488 14.0003329,7.99977502 C14.0003329,7.26339516 13.4033784,6.66644127 12.6669994,6.66644127 L12.6669994,6.66644127 Z" id="Shape" fill="#B4B1B4" mask="url(#mask-18)"></path>
118
+ </g>
119
+ <g id="analysis-2" transform="translate(121.000000, 416.000000)">
120
+ <g id="analysis">
121
+ <mask id="mask-20" fill="white">
122
+ <use xlink:href="#path-19"></use>
123
+ </mask>
124
+ <g id="Background"></g>
125
+ <path d="M14.4729095,4.85988274 C14.3477325,4.73367443 14.177335,4.66268386 13.999576,4.66268386 C13.8218184,4.66268386 13.6514209,4.73367411 13.5262437,4.85988274 L9.33290904,9.05988319 L6.47290927,6.19321612 C6.3477314,6.06700746 6.17733466,5.99601722 5.99957604,5.99601722 C5.82181743,5.99601722 5.65142056,6.06700746 5.52624268,6.19321612 L1.52624269,10.1932163 C1.40003439,10.3183942 1.32904414,10.488792 1.32904414,10.6665497 C1.32904414,10.8443085 1.40003455,11.0147055 1.52624269,11.1398825 C1.65142038,11.2660917 1.8218177,11.337082 1.99957607,11.337082 C2.17733439,11.337082 2.34773167,11.2660917 2.47290941,11.1398825 L5.99957604,7.60654942 L8.85957608,10.4732162 C8.98475395,10.5994251 9.15515136,10.6704154 9.33290904,10.6704154 C9.51066805,10.6704154 9.6810648,10.5994251 9.80624267,10.4732162 L14.4729095,5.80654948 C14.5991181,5.68137148 14.6701086,5.51097463 14.6701086,5.33321612 C14.6701086,5.15545754 14.5991181,4.98506042 14.4729095,4.85988274 L14.4729095,4.85988274 Z" id="Shape" fill="#B4B1B4" mask="url(#mask-20)"></path>
126
+ </g>
127
+ </g>
128
+ <text id="Type-a-message..." font-family="Roboto-Regular, Roboto" font-size="10" font-weight="normal" line-spacing="14" fill="#B4B1B4">
129
+ <tspan x="17" y="403">Type a message...</tspan>
130
+ </text>
131
+ </g>
132
+ </g>
133
+ </g>
134
+ </g>
135
+ </svg>
package/v2Components/TemplatePreview/index.js CHANGED
@@ -20,7 +20,7 @@ import { VIBER } from '../../v2Containers/App/constants';
20
20
  const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
21
21
  const smsMobileAndroid = require('./assets/images/sms_mobile_android.svg');
22
22
  const lineMobileAndroid = require('../../assets/line.png');
23
- const viberMobileAndroid = require('../../assets/viber.png');
23
+ const viberMobileAndroid = require('./assets/images/viberMobile.svg');
24
24
 
25
25
  const lineImgPlaceholder = require('../../assets/line-image-placeholder.svg');
26
26
  const lineStickerPlaceholder = require('../../assets/smiley-placeholder.svg');
@@ -131,7 +131,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
131
131
 
132
132
  render() {
133
133
  let content = channel && channel.toLowerCase() === 'sms' ? [this.props.content] : this.props.content;
134
- const { channel, showTestAndPreviewIcon, module } = this.props;
134
+ const { channel, showTestAndPreviewIcon, module, viberBrandName, viberAccountName } = this.props;
135
135
  const { buttonText, imageURL, messageContent: viberMessageContent } = content || {};
136
136
  let smsDetails = {};
137
137
  // let smsText = '';
@@ -184,7 +184,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
184
184
  "padding": '3.5px 0 0',
185
185
  'border-radius': '8px',
186
186
  'background-color': CAP_G15,
187
- 'width': '79%',
187
+ 'width': '81%',
188
188
  };
189
189
  const getVideoContent = ({
190
190
  video,
@@ -561,6 +561,7 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
561
561
  channel && channel.toLowerCase() === VIBER ? (
562
562
  <div className="shell-v2 align-center" id="sms-preview">
563
563
  <CapImage className="preview-image" src={viberMobileAndroid} alt={this.props.intl.formatMessage(messages.previewGenerated)}/>
564
+ <div style={{ position: 'absolute', top: '12%', left: '36%'}}>{viberBrandName}</div>
564
565
  <div
565
566
  className="msgContainer viber-preview"
566
567
  style={{
@@ -574,15 +575,14 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
574
575
  "width": 20,
575
576
  "height": 20,
576
577
  "margin": '0 4px 277px 0',
577
- "padding": '6px 2px 7px 3px',
578
578
  'border-radius': '4px',
579
579
  'background-color': CAP_PURPLE01,
580
- 'font-size': '6px',
580
+ 'font-size': '12px',
581
581
  'font-weight': 900,
582
582
  "color": CAP_WHITE,
583
583
  }}
584
584
  >
585
- {this.props.viberAccountName}
585
+ {viberAccountName}
586
586
  </div>
587
587
  <div
588
588
  className="message-pop align-left"
@@ -614,13 +614,17 @@ class TemplatePreview extends React.Component { // eslint-disable-line react/pre
614
614
  'background-color': CAP_PURPLE01,
615
615
  "margin-top": '14px',
616
616
  'text-align': 'center',
617
- "width": '132px',
617
+ "width": '140px',
618
618
  "height": '20px',
619
- "margin-left": "5px",
619
+ "margin-left": "2px",
620
620
  }}>
621
621
  <p
622
622
  style={{ 'font-size': '12px',
623
623
  'font-weight': '500',
624
+ "display": '-webkit-box',
625
+ '-webkit-line-clamp': '1',
626
+ '-webkit-box-orient': 'vertical',
627
+ 'overflow': 'hidden',
624
628
  "color": CAP_WHITE }}
625
629
  >
626
630
  {buttonText || ''}</p>
package/v2Containers/App/constants.js CHANGED
@@ -19,7 +19,9 @@ export const TRACK_CREATE_MPUSH = 'createMpush';
19
19
  export const TRACK_CREATE_WECHAT = 'createWeChat';
20
20
  export const TRACK_CREATE_IMAGE = 'createImage';
21
21
  export const TRACK_CREATE_LINE = 'createLine';
22
-
22
+ export const CREATE = 'create';
23
+ export const EDIT = 'edit';
24
+ export const PREVIEW = 'preview';
23
25
  export const VIBER = 'viber';
24
26
  export const TRACK_EDIT_SMS = 'editSms';
25
27
  export const TRACK_EDIT_EMAIL = 'editEmail';
package/v2Containers/CreativesContainer/SlideBoxContent.js CHANGED
@@ -298,6 +298,8 @@ function SlideBoxContent(props) {
298
298
  {isPreview && (
299
299
  <TemplatePreview
300
300
  content={getChannelPreviewContent(templateData)}
301
+ viberBrandName={selectedAccount || ""}
302
+ viberAccountName={(selectedAccount || "")[0]}
301
303
  unicodeEnabled={get(templateData, `versions.base['unicode-validity']`)}
302
304
  channel={(templateData.type || '').toLowerCase()}
303
305
  charCounterEnabled={channel === constants.SMS}
package/v2Containers/CreativesContainer/index.js CHANGED
@@ -5,7 +5,7 @@ import {
5
5
  } from '@capillarytech/cap-ui-library';
6
6
  import { injectIntl, FormattedMessage } from 'react-intl';
7
7
  import classnames from 'classnames';
8
- import {isEmpty, get, forEach} from 'lodash';
8
+ import {isEmpty, get, forEach, cloneDeep} from 'lodash';
9
9
  import { connect } from 'react-redux';
10
10
  import { createStructuredSelector } from 'reselect';
11
11
  import { bindActionCreators } from 'redux';
@@ -18,7 +18,6 @@ import SlideBoxHeader from './SlideBoxHeader';
18
18
  import SlideBoxFooter from './SlideBoxFooter';
19
19
  import * as constants from './constants';
20
20
  import * as commonUtil from '../../utils/common';
21
-
22
21
  import './index.scss';
23
22
  import * as templateActions from '../Templates/actions';
24
23
  import * as globalActions from '../Cap/actions';
@@ -256,7 +255,7 @@ class Creatives extends React.Component {
256
255
  }
257
256
  case constants.VIBER: {
258
257
  const { messageBody, isDefault } = templateData;
259
- const viberContent = JSON.parse(messageBody || '{}').messages || [{}];
258
+ const viber = JSON.parse(messageBody || '{}');
260
259
  creativesTemplateData = {
261
260
  type: constants.VIBER,
262
261
  isDefault,
@@ -265,7 +264,7 @@ class Creatives extends React.Component {
265
264
  versions: {
266
265
  base: {
267
266
  content: {
268
- viber: viberContent,
267
+ ...viber,
269
268
  },
270
269
  },
271
270
  },
@@ -359,10 +358,19 @@ class Creatives extends React.Component {
359
358
  break;
360
359
  case constants.VIBER:
361
360
  if (template.value) {
361
+ const { Templates, templateData: templateDataProps } = this.props;
362
+ const { accountDetails: selectedAccountDetails, accountId: selectedAccountId } = templateDataProps || {};
363
+ const selectedViberAccount = Templates && Templates.selectedViberAccount;
364
+ const accountDetails = selectedAccountDetails || (selectedViberAccount ? JSON.stringify(selectedViberAccount) : '');
365
+ const accountId = selectedAccountId || (selectedViberAccount ? selectedViberAccount.id : '');
362
366
  const { versions } = template.value;
367
+ const content = cloneDeep(versions.base.content);
368
+ content.scenarioKey = get(accountDetails, 'configs.scenario_key');
363
369
  templateData = {
364
370
  channel,
365
- messageBody: JSON.stringify(versions.base.content),
371
+ accountId,
372
+ accountDetails,
373
+ messageBody: JSON.stringify(content),
366
374
  };
367
375
  }
368
376
  break;
@@ -710,4 +718,4 @@ function mapDispatchToProps(dispatch) {
710
718
  actions: bindActionCreators(actions, dispatch),
711
719
  };
712
720
  }
713
- export default connect(mapStatesToProps, mapDispatchToProps)(injectIntl(Creatives));
721
+ export default connect(mapStatesToProps, mapDispatchToProps)(injectIntl(Creatives));
package/v2Containers/FTP/index.js CHANGED
@@ -1,11 +1,3 @@
1
- /* eslint-disable react/sort-comp */
2
- /* eslint-disable dot-notation */
3
- /* eslint-disable no-undef */
4
- /*
5
- *
6
- * MobilepushWrapper
7
- *
8
- */
9
1
  import PropTypes from 'prop-types';
10
2
  import React from 'react';
11
3
  import { bindActionCreators } from 'redux';
@@ -35,7 +27,7 @@ import messages from './messages';
35
27
  import './_FTP.scss';
36
28
  import * as globalActions from '../../containers/Cap/actions';
37
29
  import { TagList } from '../TagList';
38
- import { NO_COMMUNICATION } from '../App/constants';
30
+ import { NO_COMMUNICATION, CREATE, EDIT, PREVIEW } from '../App/constants';
39
31
  import { getTreeStructuredTags } from '../../utils/common';
40
32
 
41
33
  const UIView = {
@@ -43,15 +35,15 @@ const UIView = {
43
35
  configureMessage: 'configureMessage',
44
36
  };
45
37
  const { CapLabelInline } = CapLabel;
46
- export class FTP extends React.Component { // eslint-disable-line react/prefer-stateless-function
38
+ export class FTP extends React.Component {
47
39
  constructor(props) {
48
40
  super(props);
49
41
  this.state = this.getInitialState();
50
42
  }
51
43
  getInitialState = () => {
52
- const mode = this.props.mode || 'create';
44
+ const mode = this.props.mode || CREATE;
53
45
  let stateObj = {};
54
- if (mode === 'create') {
46
+ if (mode === CREATE) {
55
47
  const { formatMessage } = this.props.intl;
56
48
  const headerTagList = [{
57
49
  header: formatMessage(messages.customerID),
@@ -67,14 +59,13 @@ export class FTP extends React.Component { // eslint-disable-line react/prefer-s
67
59
  };
68
60
  } else {
69
61
  const { messageContent = {} } = this.props.messageDetails || {};
70
- const messageContent1 = (messageContent['message_content_id_1'] || {}).messageBody;
71
- const headerTagList = (messageContent['message_content_id_1'] || {}).headerTagList || [];
62
+ const { headerTagList = [], messageBody = '' } = messageContent['message_content_id_1'] || {};
72
63
  stateObj = {
73
64
  mode,
74
65
  selectedServer: null,
75
66
  viewMode: UIView.configureMessage,
76
67
  headerTagList,
77
- messageContent: messageContent1,
68
+ messageContent: messageBody,
78
69
  tagsTree: [],
79
70
  };
80
71
  }
@@ -82,8 +73,8 @@ export class FTP extends React.Component { // eslint-disable-line react/prefer-s
82
73
  };
83
74
 
84
75
  setFTPServerInState = (FTPServers) => {
85
- const { deliverySetting = {} } = this.props.messageDetails;
86
- const configId = deliverySetting.channelSetting[NO_COMMUNICATION].endPointConfigs.ftpConfigId;
76
+ const { deliverySetting = { channelSetting: {} }} = this.props.messageDetails;
77
+ const configId = (deliverySetting.channelSetting[NO_COMMUNICATION].endPointConfigs || {}).ftpConfigId;
87
78
  const selectedServer = find(FTPServers, {id: configId});
88
79
  this.setState({ selectedServer });
89
80
  };
@@ -96,24 +87,28 @@ export class FTP extends React.Component { // eslint-disable-line react/prefer-s
96
87
  context: 'outbound',
97
88
  embedded: 'embedded',
98
89
  };
90
+ //This call is to fetch tags that are populated in csv columns.
99
91
  this.props.globalActions.fetchSchemaForEntity(query);
100
92
  }
101
93
 
102
94
  componentWillReceiveProps(nextProps) {
95
+ const { metaEntities = {}, selectedOfferDetails = [], mode, FTP: nextFTP = {} } = nextProps;
96
+ const { metaEntities: thisMetaEntities = {}, FTP: thisFTP = {}} = this.props;
97
+ const { tags: thisTags = {}} = thisMetaEntities;
103
98
  if (
104
- !isEmpty(((nextProps.metaEntities || {}).tags || {}).standard) &&
105
- !isEqual(((nextProps.metaEntities || {}).tags || {}).standard, ((this.props.metaEntities || {}).tags || {}).standard)
99
+ !isEmpty((metaEntities.tags || {}).standard) &&
100
+ !isEqual((metaEntities.tags || {}).standard, thisTags.standard)
106
101
  ) {
107
- const tags = getTreeStructuredTags({tagsList: nextProps.metaEntities.tags.standard, offerDetails: nextProps.selectedOfferDetails});
102
+ const tags = getTreeStructuredTags({tagsList: metaEntities.tags.standard, offerDetails: selectedOfferDetails});
108
103
  this.setState({ tagsTree: tags}, () => this.disableUsedColumns());
109
104
  }
110
105
 
111
106
  if (
112
- nextProps.mode === 'edit' &&
113
- (nextProps.FTP || {}).FTPServers.length &&
114
- !isEqual((nextProps.FTP || {}).FTPServers, (this.props.FTP || {}).FTPServers)
107
+ mode === EDIT &&
108
+ nextFTP.FTPServers.length &&
109
+ !isEqual(nextFTP.FTPServers, thisFTP.FTPServers)
115
110
  ) {
116
- this.setFTPServerInState(nextProps.FTP.FTPServers);
111
+ this.setFTPServerInState(nextFTP.FTPServers);
117
112
  }
118
113
  }
119
114
 
@@ -465,7 +460,7 @@ export class FTP extends React.Component { // eslint-disable-line react/prefer-s
465
460
  const { serverSelection } = UIView;
466
461
  const { mode } = this.props;
467
462
  return (
468
- mode === 'preview' ?
463
+ mode === PREVIEW ?
469
464
  this.getPreviewModeContents() :
470
465
  (viewMode === serverSelection ?
471
466
  this.getServerSelectionContent() :
package/v2Containers/Templates/_templates.scss CHANGED
@@ -54,9 +54,9 @@
54
54
  .button-content {
55
55
  .ant-card-meta-description {
56
56
  min-width: 108px;
57
- max-width: 160px;
57
+ max-width: 215px;
58
58
  height: 24px;
59
- padding: 1px 23px 2px 22px;
59
+ padding: 2px 0px;
60
60
  border-radius: 16px;
61
61
  font-size: 14px;
62
62
  font-weight: 500;
package/v2Containers/Templates/actions.js CHANGED
@@ -4,119 +4,126 @@
4
4
  *
5
5
  */
6
6
 
7
- import * as types from './constants';
8
-
9
- export function getAllTemplates(channel, queryParams) {
10
- console.log('get all templates action trigereed', channel, queryParams);
11
- return {
12
- type: types.GET_ALL_TEMPLATES_REQUEST, channel, queryParams,
13
- };
14
- }
15
-
16
- export function resetTemplate() {
17
- return {
18
- type: types.RESET_TEMPLATE,
19
- };
20
- }
21
-
22
- export function resetAccount() {
23
- return {
24
- type: types.RESET_ACCOUNT,
25
- };
26
- }
27
-
28
- export function deleteTemplate(channel, id) {
29
- console.log('delete template action trigereed', channel, id);
30
- return {
31
- type: types.DELETE_TEMPLATE_REQUEST, channel, id,
32
- };
33
- }
34
-
35
- export function getUserList() {
36
- return {
37
- type: types.GET_USER_LIST_REQUEST,
38
- };
39
- }
40
-
41
- export function getWeCrmAccounts(source) {
42
- return {
43
- type: types.GET_WECRM_ACCOUNTS_REQUEST, source,
44
- };
45
- }
46
-
47
- export function setWeChatAccount(weChatAccount) {
48
- console.log('setting wechat account', weChatAccount);
49
- return {
50
- type: types.SET_WECHAT_ACCOUNT,
51
- weChatAccount,
52
- };
53
- }
54
-
55
- export function setLineAccount(lineAccount) {
7
+ import * as types from './constants';
8
+
9
+ export function getAllTemplates(channel, queryParams) {
10
+ console.log('get all templates action trigereed', channel, queryParams);
11
+ return {
12
+ type: types.GET_ALL_TEMPLATES_REQUEST, channel, queryParams,
13
+ };
14
+ }
15
+
16
+ export function resetTemplate() {
17
+ return {
18
+ type: types.RESET_TEMPLATE,
19
+ };
20
+ }
21
+
22
+ export function resetAccount() {
23
+ return {
24
+ type: types.RESET_ACCOUNT,
25
+ };
26
+ }
27
+
28
+ export function deleteTemplate(channel, id) {
29
+ console.log('delete template action trigereed', channel, id);
30
+ return {
31
+ type: types.DELETE_TEMPLATE_REQUEST, channel, id,
32
+ };
33
+ }
34
+
35
+ export function getUserList() {
36
+ return {
37
+ type: types.GET_USER_LIST_REQUEST,
38
+ };
39
+ }
40
+
41
+ export function getWeCrmAccounts(source) {
42
+ return {
43
+ type: types.GET_WECRM_ACCOUNTS_REQUEST, source,
44
+ };
45
+ }
46
+
47
+ export function setWeChatAccount(weChatAccount) {
48
+ console.log('setting wechat account', weChatAccount);
49
+ return {
50
+ type: types.SET_WECHAT_ACCOUNT,
51
+ weChatAccount,
52
+ };
53
+ }
54
+
55
+ export function setLineAccount(lineAccount) {
56
56
  return {
57
57
  type: types.SET_LINE_ACCOUNT,
58
58
  lineAccount,
59
59
  };
60
60
  }
61
61
 
62
- export function handleHtmlUpload(selectedTemplate) {
63
- return {
64
- type: types.SET_SELECTED_LAYOUT,
65
- selectedTemplate,
66
- };
67
- }
68
-
69
- export function handleZipUpload(selectedFile, successHandler, errorHandler) {
70
- return {
71
- type: types.SEND_ZIPPED_FILE_REQUEST,
72
- selectedFile,
73
- successHandler,
74
- errorHandler,
75
- };
76
- }
77
-
78
- export function getDefaultBeeTemplates() {
79
- return {
80
- type: types.GET_DEAFULT_BEE_TEMPLATES_REQUEST,
81
- };
82
- }
83
-
84
- export function setEdmTemplate(template) {
85
- return {
86
- type: types.SET_EDM_TEMPLATE,
87
- template,
88
- };
89
- }
90
- export function setBEETemplate(template) {
91
- return {
92
- type: types.SET_BEE_TEMPLATE,
93
- template,
94
- };
95
- }
96
- export function getTemplateDetails(id, channel) {
97
- console.log('getting template', id, channel);
98
- return {
99
- type: types.GET_TEMPLATE_DETAILS_REQUEST,
100
- id,
101
- channel,
102
- };
103
- }
104
-
105
- export function resetTemplateData() {
106
- return {
107
- type: types.RESET_TEMPLATE_DATA,
108
- };
109
- }
110
-
111
- export function resetUploadData() {
112
- console.log('clearing upload data');
113
- return {
114
- type: types.RESET_UPLOAD_DATA,
115
- };
116
- }
117
-
118
- export function resetTemplateStoreData() {
119
- return {
120
- type: types.CLEAR_TEMPLATE_STORE_DATA,
121
- };
122
- }
62
+ export function setViberAccount(viberAccount) {
63
+ return {
64
+ type: types.SET_VIBER_ACCOUNT,
65
+ viberAccount,
66
+ };
67
+ }
68
+
69
+ export function handleHtmlUpload(selectedTemplate) {
70
+ return {
71
+ type: types.SET_SELECTED_LAYOUT,
72
+ selectedTemplate,
73
+ };
74
+ }
75
+
76
+ export function handleZipUpload(selectedFile, successHandler, errorHandler) {
77
+ return {
78
+ type: types.SEND_ZIPPED_FILE_REQUEST,
79
+ selectedFile,
80
+ successHandler,
81
+ errorHandler,
82
+ };
83
+ }
84
+
85
+ export function getDefaultBeeTemplates() {
86
+ return {
87
+ type: types.GET_DEAFULT_BEE_TEMPLATES_REQUEST,
88
+ };
89
+ }
90
+
91
+ export function setEdmTemplate(template) {
92
+ return {
93
+ type: types.SET_EDM_TEMPLATE,
94
+ template,
95
+ };
96
+ }
97
+ export function setBEETemplate(template) {
98
+ return {
99
+ type: types.SET_BEE_TEMPLATE,
100
+ template,
101
+ };
102
+ }
103
+ export function getTemplateDetails(id, channel) {
104
+ console.log('getting template', id, channel);
105
+ return {
106
+ type: types.GET_TEMPLATE_DETAILS_REQUEST,
107
+ id,
108
+ channel,
109
+ };
110
+ }
111
+
112
+ export function resetTemplateData() {
113
+ return {
114
+ type: types.RESET_TEMPLATE_DATA,
115
+ };
116
+ }
117
+
118
+ export function resetUploadData() {
119
+ console.log('clearing upload data');
120
+ return {
121
+ type: types.RESET_UPLOAD_DATA,
122
+ };
123
+ }
124
+
125
+ export function resetTemplateStoreData() {
126
+ return {
127
+ type: types.CLEAR_TEMPLATE_STORE_DATA,
128
+ };
129
+ }
package/v2Containers/Templates/constants.js CHANGED
@@ -43,6 +43,8 @@ export const RESET_UPLOAD_DATA = "app/v2Containers/Templates/RESET_UPLOAD_DATA";
43
43
  export const CLEAR_TEMPLATE_STORE_DATA = "app/v2Containers/Templates/CLEAR_TEMPLATE_STORE_DATA";
44
44
 
45
45
  export const SET_LINE_ACCOUNT = "app/v2Containers/Templates/SET_LINE_ACCOUNT";
46
+ export const SET_VIBER_ACCOUNT = "app/v2Containers/Templates/SET_VIBER_ACCOUNT";
47
+
46
48
 
47
49
  export const GET_DEAFULT_BEE_TEMPLATES_REQUEST = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_REQUEST';
48
50
  export const GET_DEAFULT_BEE_TEMPLATES_SUCCESS = 'app/v2Containers/Templates/GET_DEAFULT_BEE_TEMPLATES_SUCCESS';
package/v2Containers/Templates/index.js CHANGED
@@ -171,6 +171,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
171
171
  break;
172
172
  case VIBER:
173
173
  channel = 'Viber';
174
+ activeMode = ACCOUNT_SELECTION_MODE;
175
+ this.props.actions.getWeCrmAccounts(channel);
174
176
  break;
175
177
  case LINE:
176
178
  channel = "Line";
@@ -258,6 +260,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
258
260
  }
259
261
  } else if (nextProps.route.name.toLowerCase() === VIBER_CHANNEL) {
260
262
  channel = 'Viber';
263
+ this.setState({defaultAccount: true});
264
+ nextProps.actions.getWeCrmAccounts(channel);
261
265
  }
262
266
 
263
267
  this.setState({ channel }, () => {
@@ -282,6 +286,22 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
282
286
  if ((this.state.channel || '').toLowerCase() === "mobilepush" && nextProps.Templates.selectedWeChatAccount) {
283
287
  params.accountId = nextProps.Templates.selectedWeChatAccount.id;
284
288
  }
289
+ if (this.state.channel.toLowerCase() === VIBER_CHANNEL && isEmpty(nextProps.Templates.selectedViberAccount)) {
290
+ let selectedAccount = '';
291
+ if (isEmpty(nextProps.Templates.weCrmAccounts)) {
292
+ return;
293
+ }
294
+ selectedAccount = nextProps.Templates.weCrmAccounts[0];
295
+ const { configs = {}, name = "" } = selectedAccount;
296
+ const { wecrm_app_id = "", wecrm_token = "", sourceAccountIdentifier = "" } = configs;
297
+ this.setState({selectedAccount: name}, () => {
298
+ params.wecrmId = wecrm_app_id;
299
+ params.wecrmToken = wecrm_token;
300
+ params.originalId = sourceAccountIdentifier;
301
+ this.props.actions.setViberAccount(nextProps.Templates.weCrmAccounts[0]);
302
+ this.getAllTemplates({params});
303
+ });
304
+ }
285
305
  if ((this.state.channel.toLowerCase() === 'wechat' || this.state.channel.toLowerCase() === 'mobilepush') && isEmpty(nextProps.Templates.selectedWeChatAccount) && (this.props.location.query.type === 'embedded') && !this.isEnabledInLibraryModule("showAccountSelection")) {
286
306
  let selectedAccount = '';
287
307
  if (isEmpty(nextProps.Templates.weCrmAccounts)) {
@@ -448,6 +468,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
448
468
  } else if (this.state.channel.toLowerCase() === 'line') {
449
469
  this.props.actions.setLineAccount(this.props.Templates.weCrmAccounts.find((item) => item.name === this.state.selectedAccount));
450
470
  }
471
+
451
472
  this.setState({activeMode: TEMPLATES_MODE});
452
473
  console.log("getAllTemplates params: ", params);
453
474
  this.getAllTemplates({params, resetPage: true});
@@ -1698,6 +1719,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
1698
1719
  const isMobilePushChannel = channel === MOBILE_PUSH;
1699
1720
  const isLineChannel = channel === LINE;
1700
1721
 
1722
+
1701
1723
  if ((isWechatChannel || isMobilePushChannel || isLineChannel) && !isEmpty(weCrmAccounts)) {
1702
1724
  forEach(weCrmAccounts, (account) => {
1703
1725
  if ((isWechatChannel && account.configs && account.configs.is_wecrm_enabled) || isMobilePushChannel || isLineChannel) {
@@ -1756,6 +1778,10 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
1756
1778
  noAccountHeader = messages.noAccountsPresentLine;
1757
1779
  break;
1758
1780
  }
1781
+ case VIBER: {
1782
+ noAccountHeader = messages.noAccountsPresentViber;
1783
+ break;
1784
+ }
1759
1785
  default:
1760
1786
  break;
1761
1787
  }
@@ -1814,7 +1840,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
1814
1840
  render() {
1815
1841
  const isFullMode = this.isFullMode();
1816
1842
  const { activeMode, channel, wechatFilter, lineFilter } = this.state;
1817
- if (activeMode === ACCOUNT_SELECTION_MODE) {
1843
+ const showForViber = (channel.toLowerCase() !== VIBER_CHANNEL ||
1844
+ (channel.toLowerCase() === VIBER_CHANNEL && !this.props.isFullMode && isEmpty(get(this.props, 'Templates.selectedViberAccount', {}))));
1845
+ if (activeMode === ACCOUNT_SELECTION_MODE && showForViber ) {
1818
1846
  return this.renderAccountSelection();
1819
1847
  }
1820
1848
  const pageHeader = "";
package/v2Containers/Templates/messages.js CHANGED
@@ -366,4 +366,8 @@ export default defineMessages({
366
366
  id: `${scope}.duplicatingTemplate`,
367
367
  defaultMessage: 'Duplicating template...'
368
368
  },
369
+ noAccountsPresentViber: {
370
+ id: `${scope}.noAccountsPresentViber`,
371
+ defaultMessage: "Viber accounts are not setup for your brand",
372
+ },
369
373
  });
package/v2Containers/Templates/reducer.js CHANGED
@@ -73,6 +73,8 @@ function templatesReducer(state = initialState, action) {
73
73
  .set('selectedWeChatAccount', fromJS(action.weChatAccount));
74
74
  case types.SET_LINE_ACCOUNT:
75
75
  return state.set('selectedLineAccount', fromJS(action.lineAccount));
76
+ case types.SET_VIBER_ACCOUNT:
77
+ return state.set('selectedViberAccount', fromJS(action.viberAccount));
76
78
  case types.RESET_ACCOUNT:
77
79
  return state
78
80
  .remove('selectedWeChatAccount')
package/v2Containers/Viber/index.js CHANGED
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
2
2
  import { bindActionCreators } from 'redux';
3
3
  import { createStructuredSelector } from 'reselect';
4
4
  import { injectIntl, FormattedMessage } from 'react-intl';
5
- // import { connect } from 'react-redux';
5
+ import { isUrl } from '../Line/Container/Wrapper/utils';
6
6
  import { get } from 'lodash';
7
7
  import withCreatives from '../../hoc/withCreatives';
8
8
  import {
@@ -64,10 +64,11 @@ const Viber = (props) => {
64
64
  handleClose,
65
65
  onCreateComplete,
66
66
  params,
67
- templateData,
67
+ templateData = {},
68
68
  actions,
69
69
  viber = {},
70
70
  getFormSubscriptionData,
71
+ viberData = {},
71
72
  } = props || {};
72
73
 
73
74
  const { formatMessage } = intl;
@@ -84,6 +85,8 @@ const Viber = (props) => {
84
85
  const [isEditFlow, checkEditFlow] = useState(false);
85
86
  const [messageTitle, updateTextMessageTitle] = useState('');
86
87
  const [errorMessageTitle, updateErrorMessageTitle] = useState(false);
88
+ const [buttonURLErrorMessage, updateButtonURLErrorMessage] = useState(false);
89
+ const [accountName, updateAccountName] = useState("");
87
90
 
88
91
  const StyledHeader = styled(CapHeader)`
89
92
  margin-bottom: 14px;
@@ -114,7 +117,12 @@ const Viber = (props) => {
114
117
  }, [paramObj.id]);
115
118
 
116
119
  useEffect(() => {
117
- if (params && params.id) {
120
+ const { name = '' } = viberData.selectedViberAccount || {};
121
+ updateAccountName(name);
122
+ }, [viberData.selectedViberAccount]);
123
+
124
+ useEffect(() => {
125
+ if ((params && params.id) || templateData.edit) {
118
126
  const { viber: editViberContent = {} } = get(templateData, `versions.base.content`) || get(viber, `templateDetails.versions.base.content`) || {};
119
127
  const editMessageTitle = (templateData || {}).name || get(viber, 'templateDetails.name');
120
128
  updateTextMessageTitle(editMessageTitle);
@@ -130,7 +138,7 @@ const Viber = (props) => {
130
138
  }, [viber[`templateDetails`] || templateData]);
131
139
 
132
140
  // Common container for TEXT, IMAGE and Button
133
- const container = (icon, message, data) => (<CapRow
141
+ const container = (icon, message, data, showOptional) => (<CapRow
134
142
  style={{
135
143
  border: `solid 1px ${CAP_G07}`,
136
144
  marginBottom: '20px',
@@ -138,7 +146,8 @@ const Viber = (props) => {
138
146
  <CapRow style={{ padding: `${CAP_SPACE_12} ${CAP_SPACE_24} 0px` }}>
139
147
  <CapIcon type={icon}/>
140
148
  <CapHeading type="h4" style={{position: 'absolute', display: 'inline-block', top: '13px', paddingLeft: '10px'}}>
141
- {message}
149
+ {message} {" "}
150
+ {showOptional && <CapLabel.CapLabelInline type="label14">{formatMessage(messages.optional)}</CapLabel.CapLabelInline>}
142
151
  </CapHeading>
143
152
  </CapRow>
144
153
  <CapDivider className="cap-divider-margin"/>
@@ -481,7 +490,12 @@ const Viber = (props) => {
481
490
  };
482
491
 
483
492
  const onChangeButtonUrl = ({ target: { value } }) => {
493
+ let errorMessage = false;
484
494
  updateButtonUrl(value);
495
+ if (!isUrl(value)) {
496
+ errorMessage = formatMessage(messages.inValidUrliErrorMessage);
497
+ }
498
+ updateButtonURLErrorMessage(errorMessage);
485
499
  };
486
500
  const getPreviewSection = () =>
487
501
  // const accountName = get(lineData, 'selectedLineAccount.name', '');
@@ -489,7 +503,8 @@ const Viber = (props) => {
489
503
  <TemplatePreview
490
504
  channel="VIBER"
491
505
  content={{imageURL: imagePreview, buttonText, messageContent}}
492
- viberAccountName={"MUJI"}
506
+ viberAccountName={((accountName[0] || "")).toUpperCase()}
507
+ viberBrandName={accountName}
493
508
  />
494
509
  );
495
510
 
@@ -501,6 +516,7 @@ const Viber = (props) => {
501
516
  defaultValue={buttonText}
502
517
  value={buttonText}
503
518
  style={{paddingBottom: '11px'}}
519
+ maxLength={20}
504
520
  />
505
521
  <CapInput
506
522
  id="viber-button-url"
@@ -509,6 +525,7 @@ const Viber = (props) => {
509
525
  defaultValue={buttonURL}
510
526
  value={buttonURL}
511
527
  label={formatMessage(messages.buttonUrl)}
528
+ errorMessage={buttonURLErrorMessage}
512
529
  />
513
530
  </>);
514
531
 
@@ -547,7 +564,7 @@ const Viber = (props) => {
547
564
  const createCallback = (errorMessage, isEdit) => {
548
565
  if (!errorMessage) {
549
566
  CapNotification.success({
550
- message: formatMessage(messages.viberCreateNotification),
567
+ message: isEdit ? formatMessage(messages.viberEditNotification) : formatMessage(messages.viberCreateNotification),
551
568
  });
552
569
  if (isEdit) {
553
570
  actions.clearEditResponse();
@@ -610,7 +627,11 @@ const Viber = (props) => {
610
627
  return true;
611
628
  }
612
629
  // if button is being added than button url and button Text both are mandatory
613
- if (( trimedButtonText === '' && trimedButtonUrl !== '') || ( trimedButtonUrl !== '' && trimedButtonUrl === '')) {
630
+ if (( trimedButtonText === '' && trimedButtonUrl !== '') || ( trimedButtonText !== '' && trimedButtonUrl === '')) {
631
+ return true;
632
+ }
633
+ // if button url is not valid url
634
+ if (buttonURLErrorMessage) {
614
635
  return true;
615
636
  }
616
637
  return false;
@@ -623,7 +644,6 @@ const Viber = (props) => {
623
644
  <CapColumn span={14}>
624
645
  <StyledHeader
625
646
  title={formatMessage(messages.viberCreativeTitle)}
626
- description={formatMessage(messages.viberCreativeDesc)}
627
647
  size="regular"
628
648
  />
629
649
  {
@@ -644,9 +664,9 @@ const Viber = (props) => {
644
664
  )
645
665
  : null
646
666
  }
647
- {container("message", <FormattedMessage {...messages.message} />, TextAreaViber)}
648
- {container("image", <FormattedMessage {...messages.image} />, ImageViber)}
649
- {container("button", <FormattedMessage {...messages.button} />, ButtonViber)}
667
+ {container("message", <FormattedMessage {...messages.message} />, TextAreaViber, false)}
668
+ {container("image", <FormattedMessage {...messages.image} />, ImageViber, true)}
669
+ {container("button", <FormattedMessage {...messages.button} />, ButtonViber, true)}
650
670
  <div style={{marginBottom: '100px'}}/>
651
671
  </CapColumn>
652
672
  <CapColumn span={6}>
package/v2Containers/Viber/messages.js CHANGED
@@ -14,10 +14,6 @@ export default defineMessages({
14
14
  id: `${scope}.viberCreativeTitle`,
15
15
  defaultMessage: "Viber creative",
16
16
  },
17
- viberCreativeDesc: {
18
- id: `${scope}.viberCreativeDesc`,
19
- defaultMessage: "Select any of the existing templates or create new",
20
- },
21
17
  message: {
22
18
  id: `${scope}.message`,
23
19
  defaultMessage: 'Message',
@@ -122,6 +118,10 @@ export default defineMessages({
122
118
  id: `${scope}.viberCreateNotification`,
123
119
  defaultMessage: 'Viber template created successfully',
124
120
  },
121
+ viberEditNotification: {
122
+ id: `${scope}.viberEditNotification`,
123
+ defaultMessage: 'Viber template updated successfully',
124
+ },
125
125
  textMessageTitlePlaceholder: {
126
126
  id: `${scope}.textMessageTitlePlaceholder`,
127
127
  defaultMessage: 'Enter template name',
@@ -134,4 +134,12 @@ export default defineMessages({
134
134
  id: `${scope}.emptyTitleErrorMessage`,
135
135
  defaultMessage: 'Template title can not be empty',
136
136
  },
137
+ optional: {
138
+ id: `${scope}.optional`,
139
+ defaultMessage: '(optional)',
140
+ },
141
+ inValidUrliErrorMessage: {
142
+ id: `${scope}.inValidUrliErrorMessage`,
143
+ defaultMessage: 'Button URL is not valid',
144
+ },
137
145
  });