@capillarytech/creatives-library 7.1.0 → 7.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/v2Components/TemplatePreview/assets/images/viberMobile.svg +135 -0
- package/v2Components/TemplatePreview/index.js +5 -5
- package/v2Containers/CreativesContainer/SlideBoxContent.js +2 -0
- package/v2Containers/CreativesContainer/index.js +12 -5
- package/v2Containers/FTP/index.js +1 -9
- package/v2Containers/Templates/actions.js +117 -110
- package/v2Containers/Templates/constants.js +2 -0
- package/v2Containers/Templates/index.js +29 -1
- package/v2Containers/Templates/messages.js +4 -0
- package/v2Containers/Templates/reducer.js +2 -0
- package/v2Containers/Viber/index.js +29 -10
- package/v2Containers/Viber/messages.js +8 -4
package/package.json
CHANGED
|
@@ -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>
|
|
@@ -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('
|
|
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 = '';
|
|
@@ -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': '
|
|
580
|
+
'font-size': '12px',
|
|
581
581
|
'font-weight': 900,
|
|
582
582
|
"color": CAP_WHITE,
|
|
583
583
|
}}
|
|
584
584
|
>
|
|
585
|
-
{
|
|
585
|
+
{viberAccountName}
|
|
586
586
|
</div>
|
|
587
587
|
<div
|
|
588
588
|
className="message-pop align-left"
|
|
@@ -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}
|
|
@@ -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
|
|
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
|
|
267
|
+
...viber,
|
|
269
268
|
},
|
|
270
269
|
},
|
|
271
270
|
},
|
|
@@ -359,10 +358,18 @@ class Creatives extends React.Component {
|
|
|
359
358
|
break;
|
|
360
359
|
case constants.VIBER:
|
|
361
360
|
if (template.value) {
|
|
361
|
+
const { Templates = {} } = this.props || {};
|
|
362
|
+
const selectedViberAccount = Templates && Templates.selectedViberAccount;
|
|
363
|
+
const accountDetails = selectedViberAccount ? JSON.stringify(selectedViberAccount) : '';
|
|
364
|
+
const accountId = selectedViberAccount ? selectedViberAccount.id : '';
|
|
362
365
|
const { versions } = template.value;
|
|
366
|
+
const content = cloneDeep(versions.base.content);
|
|
367
|
+
content.scenarioKey = get(accountDetails, 'configs.scenario_key');
|
|
363
368
|
templateData = {
|
|
364
369
|
channel,
|
|
365
|
-
|
|
370
|
+
accountId,
|
|
371
|
+
accountDetails,
|
|
372
|
+
messageBody: JSON.stringify(content),
|
|
366
373
|
};
|
|
367
374
|
}
|
|
368
375
|
break;
|
|
@@ -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';
|
|
@@ -43,7 +35,7 @@ const UIView = {
|
|
|
43
35
|
configureMessage: 'configureMessage',
|
|
44
36
|
};
|
|
45
37
|
const { CapLabelInline } = CapLabel;
|
|
46
|
-
export class FTP extends React.Component {
|
|
38
|
+
export class FTP extends React.Component {
|
|
47
39
|
constructor(props) {
|
|
48
40
|
super(props);
|
|
49
41
|
this.state = this.getInitialState();
|
|
@@ -4,119 +4,126 @@
|
|
|
4
4
|
*
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
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
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
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
|
+
}
|
|
@@ -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';
|
|
@@ -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
|
-
|
|
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 = "";
|
|
@@ -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
|
});
|
|
@@ -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')
|
|
@@ -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
|
-
|
|
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
|
-
|
|
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={"
|
|
506
|
+
viberAccountName={((accountName[0] || "")).toUpperCase()}
|
|
507
|
+
viberBrandName={accountName}
|
|
493
508
|
/>
|
|
494
509
|
);
|
|
495
510
|
|
|
@@ -509,6 +524,7 @@ const Viber = (props) => {
|
|
|
509
524
|
defaultValue={buttonURL}
|
|
510
525
|
value={buttonURL}
|
|
511
526
|
label={formatMessage(messages.buttonUrl)}
|
|
527
|
+
errorMessage={buttonURLErrorMessage}
|
|
512
528
|
/>
|
|
513
529
|
</>);
|
|
514
530
|
|
|
@@ -613,6 +629,10 @@ const Viber = (props) => {
|
|
|
613
629
|
if (( trimedButtonText === '' && trimedButtonUrl !== '') || ( trimedButtonUrl !== '' && trimedButtonUrl === '')) {
|
|
614
630
|
return true;
|
|
615
631
|
}
|
|
632
|
+
// if button url is not valid url
|
|
633
|
+
if (buttonURLErrorMessage) {
|
|
634
|
+
return true;
|
|
635
|
+
}
|
|
616
636
|
return false;
|
|
617
637
|
};
|
|
618
638
|
|
|
@@ -623,7 +643,6 @@ const Viber = (props) => {
|
|
|
623
643
|
<CapColumn span={14}>
|
|
624
644
|
<StyledHeader
|
|
625
645
|
title={formatMessage(messages.viberCreativeTitle)}
|
|
626
|
-
description={formatMessage(messages.viberCreativeDesc)}
|
|
627
646
|
size="regular"
|
|
628
647
|
/>
|
|
629
648
|
{
|
|
@@ -644,9 +663,9 @@ const Viber = (props) => {
|
|
|
644
663
|
)
|
|
645
664
|
: null
|
|
646
665
|
}
|
|
647
|
-
{container("message", <FormattedMessage {...messages.message} />, TextAreaViber)}
|
|
648
|
-
{container("image", <FormattedMessage {...messages.image} />, ImageViber)}
|
|
649
|
-
{container("button", <FormattedMessage {...messages.button} />, ButtonViber)}
|
|
666
|
+
{container("message", <FormattedMessage {...messages.message} />, TextAreaViber, false)}
|
|
667
|
+
{container("image", <FormattedMessage {...messages.image} />, ImageViber, true)}
|
|
668
|
+
{container("button", <FormattedMessage {...messages.button} />, ButtonViber, true)}
|
|
650
669
|
<div style={{marginBottom: '100px'}}/>
|
|
651
670
|
</CapColumn>
|
|
652
671
|
<CapColumn span={6}>
|
|
@@ -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',
|
|
@@ -134,4 +130,12 @@ export default defineMessages({
|
|
|
134
130
|
id: `${scope}.emptyTitleErrorMessage`,
|
|
135
131
|
defaultMessage: 'Template title can not be empty',
|
|
136
132
|
},
|
|
133
|
+
optional: {
|
|
134
|
+
id: `${scope}.optional`,
|
|
135
|
+
defaultMessage: '(optional)',
|
|
136
|
+
},
|
|
137
|
+
inValidUrliErrorMessage: {
|
|
138
|
+
id: `${scope}.inValidUrliErrorMessage`,
|
|
139
|
+
defaultMessage: 'Button URL is not valid',
|
|
140
|
+
},
|
|
137
141
|
});
|