diff --git a/src/assets/icons/ico/speaker.svg b/src/assets/icons/ico/speaker.svg
deleted file mode 100644
index f9bdb824845c1b4d4089db53c4992e272c2614d2..0000000000000000000000000000000000000000
--- a/src/assets/icons/ico/speaker.svg
+++ /dev/null
@@ -1,60 +0,0 @@
-<svg width="101" height="100" viewBox="0 0 101 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M51.0755 77.0337L56.5751 80.331L66.2921 67.8887L65.3579 66.2706L61.7573 64.3939L51.0755 77.0337Z" fill="#1A1A1A"/>
-<path d="M56.5756 80.3307L66.4066 67.463L69.3233 71.892L60.1456 84.0229L56.5756 80.3307Z" fill="#454545"/>
-<path d="M56.1192 82.0323L51.0756 77.0333L56.5752 80.3307L60.1452 84.0229L56.1192 82.0323Z" fill="black"/>
-<path d="M59.934 71.1999L64.0822 65.9283L64.5076 66.0423L63.3117 70.5053C63.2099 70.8851 62.8686 71.1515 62.4754 71.158L59.934 71.1999Z" fill="#976D1B"/>
-<path d="M72.301 72.6903C69.0043 69.6792 62.326 63.6344 61.9857 63.5432L65.6168 63.6043L76.8745 67.5326L72.301 72.6903Z" fill="#454545"/>
-<path d="M74.9144 69.7431C74.9144 69.7431 62.326 63.6344 61.9857 63.5432L65.6168 63.6043L76.8745 67.5326L74.9144 69.7431Z" fill="#1A1A1A"/>
-<path d="M69.3228 71.8923L72.3006 72.6902L63.2615 63.8851L60.7091 63.2012L60.4811 64.052L64.8185 66.582L66.0232 68.0023L67.9021 73.7914L69.3228 71.8923Z" fill="#1A1A1A"/>
-<path d="M57.7233 69.2404L59.9337 71.2005L64.0819 65.9288L61.3321 64.2801L57.7233 69.2404Z" fill="#E3B82A"/>
-<path d="M72.167 72.6663L63.8336 64.333L60.5006 63.667V64.0003L63.8339 66.0003L72.167 72.6663Z" fill="black"/>
-<path d="M68.4998 72.9999L69.1665 71.9993L66.1665 67.9999L68.4998 72.9999Z" fill="black"/>
-<path d="M63.8173 49.9C59.5995 65.641 46.6575 75.8499 34.9105 72.7023C23.1636 69.5547 17.0599 54.2425 21.2777 38.5015C25.4955 22.7606 38.4375 12.5516 50.1845 15.6992C61.9315 18.8468 68.0351 34.159 63.8173 49.9Z" fill="#454545"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21.7084 59.259L54.2531 53.2646L58.9294 60.9262C52.9472 70.0504 43.6024 75.0324 34.9116 72.7037C28.7054 71.0407 24.0743 65.9822 21.7084 59.259Z" fill="#606060"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M21.2387 47.1544L48.6391 50.3928L48.8612 52.7329L21.7397 55.4955L21.2387 47.1544Z" fill="#606060"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M46.4195 15.1413L60.7566 47.7126L60.2087 54.8607L29.2964 23.4115C34.1397 18.0462 40.2986 14.9336 46.4195 15.1413Z" fill="#313131"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M64.8063 34.9979L60.7574 47.7132L58.2146 40.1919L50.0264 15.6604C50.0792 15.674 50.132 15.6879 50.1847 15.702C58.0875 17.8196 63.4361 25.4426 64.8063 34.9979Z" fill="#313131"/>
-<path d="M86.3184 45.8989L71.7715 40.6333C75.8732 45.7446 75.9107 50.7092 75.4168 52.5526C74.2737 59.5413 68.2549 63.3998 65.3883 64.4555L72.0807 66.7046L79.9353 69.7211L82.148 68.8044C91.447 64.9518 93.6628 52.7817 86.3184 45.8989Z" fill="#E3B82A"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M88.9415 62.7789L74.1628 57.2321L73.5531 57.5841C71.2217 61.4396 67.472 63.6882 65.3882 64.4557L72.0805 66.7048L79.9351 69.7213L82.1479 68.8046C85.2099 67.536 87.5039 65.3655 88.9415 62.7789Z" fill="#976D1B"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M87.5244 47.1748L72.7404 41.9434C73.3513 42.8453 73.8429 43.7344 74.2351 44.594L74.6878 45.0623L89.5605 50.4667C89.055 49.3084 88.3785 48.1994 87.5244 47.1748Z" fill="#FFD752"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M90.0479 51.7581L74.9399 46.412C75.0091 46.6276 75.0722 46.8402 75.1296 47.0496L90.2768 52.5537C90.2087 52.2869 90.1324 52.0216 90.0479 51.7581Z" fill="#FFD752"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M83.8446 67.9677L69.0581 62.418C67.6815 63.4251 66.3553 64.1005 65.388 64.4567L72.0804 66.7058L79.935 69.7223L82.1477 68.8056C82.7426 68.5591 83.3084 68.2787 83.8446 67.9677Z" fill="#5B450C"/>
-<path opacity="0.5" d="M90.0872 60.0817C93.0713 50.3207 81.369 44.1074 71.7715 40.6333C75.8732 45.7446 75.9107 50.7092 75.4168 52.5526C74.2737 59.5413 68.2549 63.3998 65.3883 64.4555L72.0807 66.7046L79.9353 69.7211L82.148 68.8044C86.227 67.1145 88.9431 63.8242 90.0872 60.0817Z" fill="url(#paint0_linear_118_40903)"/>
-<path d="M72.6224 40.8608C70.5436 39.5439 65.365 36.6365 64.6844 36.4542L62.8525 50.0974L56.6526 63.0262L65.3885 64.4551L65.6081 64.3848C75.5738 61.1976 79.2152 48.9855 72.6224 40.8608Z" fill="#7A7A7A"/>
-<path d="M72.6224 40.8609C70.5436 39.544 65.3651 36.6366 64.6844 36.4542L64.5399 38.6952L75.1137 45.1759L74.3369 43.495C73.895 42.5391 73.3176 41.6519 72.6224 40.8609Z" fill="#9F9F9F"/>
-<path d="M75.8731 50.8505C73.7943 49.5336 61.8094 44.8025 61.1288 44.6201L59.7833 54.7462L56.6528 63.0261L65.3887 64.455L66.7836 63.8951C72.1407 61.7449 75.7112 56.6208 75.8731 50.8505Z" fill="#444549"/>
-<path d="M56.6529 63.0251L65.3888 64.454L65.8391 64.3017C69.414 63.0928 72.3918 60.5635 74.1632 57.2313L59.7834 54.7451L56.6529 63.0251Z" fill="#1A1A1A"/>
-<path opacity="0.5" d="M63.8173 49.9C59.5995 65.641 46.6575 75.8499 34.9105 72.7023C23.1636 69.5547 17.0599 54.2425 21.2777 38.5015C25.4955 22.7606 38.4375 12.5516 50.1845 15.6992C61.9315 18.8468 68.0351 34.159 63.8173 49.9Z" fill="url(#paint1_linear_118_40903)"/>
-<path d="M55.7186 61.4086L45.5479 50.0205L48.2835 39.811L62.6412 37.275L63.9315 49.4752L55.7186 61.4086Z" fill="#7A7A7A"/>
-<path d="M56.3719 60.6718L46.2011 49.2838L46.6876 45.7666L60.976 53.6986L56.3719 60.6718Z" fill="#444549"/>
-<path d="M62.2604 47.2037L47.4855 42.7888L47.9415 41.0872L63.2639 38.3538L62.2604 47.2037Z" fill="#9F9F9F"/>
-<path d="M63.6277 42.0985L47.485 42.7884L49.1032 41.8541L64.0002 39.0067L63.6277 42.0985Z" fill="#BEBEBE"/>
-<path d="M51.1688 46.055C50.4134 48.8743 48.0869 50.7005 45.9725 50.1339C43.858 49.5674 42.7563 46.8226 43.5117 44.0033C44.2671 41.184 46.5936 39.3579 48.7081 39.9244C50.8225 40.491 51.9243 43.2358 51.1688 46.055Z" fill="#444549"/>
-<path d="M50.318 45.8271C49.5626 48.6463 47.4266 50.5236 45.5471 50.0199C43.6675 49.5163 42.7563 46.8226 43.5117 44.0033C44.2671 41.184 46.4032 39.3068 48.2827 39.8104C50.1622 40.3141 51.0735 43.0078 50.318 45.8271Z" fill="#BEBEBE"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M50.2166 41.7522C49.8616 41.3288 49.4198 41.027 48.9055 40.8892C47.026 40.3856 44.8899 42.2628 44.1345 45.0821C43.7335 46.5787 43.8022 48.0399 44.236 49.1569C43.2936 48.0328 42.963 46.0512 43.5117 44.0033C44.2671 41.184 46.4032 39.3068 48.2827 39.8104C49.1645 40.0467 49.8331 40.765 50.2166 41.7522Z" fill="#B0B0B0"/>
-<path d="M48.4621 47.2646C47.8259 48.2163 46.8549 48.6834 46.2932 48.308C45.7316 47.9325 45.792 46.8567 46.4282 45.905C47.0644 44.9534 48.0354 44.4862 48.597 44.8617C49.1586 45.2371 49.0982 46.313 48.4621 47.2646Z" fill="#DDDDDD"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M50.5509 66.3097C55.2926 62.5694 59.2889 56.5907 61.265 49.2161C63.241 41.8415 62.7694 34.6656 60.5331 29.0555C58.297 23.4458 54.3851 19.5604 49.5006 18.2516C44.6161 16.9428 39.2856 18.3517 34.5442 22.0918C29.8025 25.8322 25.8061 31.8109 23.8301 39.1855C21.8541 46.56 22.3257 53.7359 24.5619 59.346C26.798 64.9557 30.71 68.8412 35.5945 70.1499C40.4789 71.4587 45.8095 70.0498 50.5509 66.3097ZM34.9105 72.7023C46.6575 75.8499 59.5995 65.641 63.8173 49.9C68.0351 34.159 61.9315 18.8468 50.1845 15.6992C38.4375 12.5516 25.4955 22.7606 21.2777 38.5015C17.0599 54.2425 23.1636 69.5547 34.9105 72.7023Z" fill="#BEBEBE"/>
-<path d="M23.2458 54.9487C24.0786 58.9145 25.6708 62.347 27.8293 64.9754C30.4393 68.1536 33.7649 70.0305 37.3779 70.5046C41.0047 70.9805 44.9457 70.0442 48.7109 67.6248C51.808 65.6347 54.6387 62.7309 56.9278 59.1429C57.1327 58.8217 57.4563 58.5927 57.8294 58.5158C58.9697 58.2806 59.8494 59.4678 59.2269 60.4516C56.744 64.3754 53.6269 67.6069 50.1394 69.8478C45.9294 72.553 41.3687 73.6933 37.0341 73.1245C32.6994 72.5557 28.7855 70.3034 25.7872 66.6523C23.2961 63.6189 21.5301 59.7332 20.6303 55.3494C20.4014 54.234 21.599 53.4389 22.5814 54.0147C22.9256 54.2165 23.1638 54.5582 23.2458 54.9487Z" fill="#A4A4A4"/>
-<path d="M61.9541 46.1162C62.9239 40.6462 62.6035 35.1934 61.0613 30.5094C59.2285 24.9433 55.8534 20.9768 51.7647 19.0753C47.7079 17.1885 42.938 17.3261 38.2498 19.7062C34.2199 21.7521 30.5103 25.3364 27.6978 30.0176C27.5036 30.3408 27.1908 30.5768 26.8244 30.6658C25.6873 30.942 24.7662 29.7751 25.3652 28.7699C28.4021 23.674 32.4818 19.6711 37.0536 17.35C42.375 14.6485 47.9998 14.4101 52.879 16.6793C57.7582 18.9485 61.5585 23.5704 63.5711 29.683C65.335 35.04 65.6203 41.2213 64.4159 47.3248C64.2241 48.2968 62.9655 48.4827 62.4551 47.6336L62.1315 47.0951C61.955 46.8016 61.8943 46.4534 61.9541 46.1162Z" fill="#DDDDDD"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M57.4814 21.1955C58.0013 20.8953 58.6625 20.9887 59.0523 21.4452C60.9792 23.7023 62.519 26.4894 63.5707 29.6835C63.6197 29.8323 63.6676 29.9817 63.7143 30.1318C63.8906 30.6981 63.6388 31.3048 63.1252 31.6014C62.3736 32.0353 61.4162 31.627 61.1544 30.7996C61.1237 30.7027 61.0926 30.6061 61.0609 30.5099C60.1256 27.6695 58.7887 25.2457 57.1603 23.3003C56.6103 22.6432 56.7393 21.6239 57.4814 21.1955Z" fill="white"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M55.8881 63.57C56.1633 64.0468 56.1101 64.6472 55.7404 65.0551C54.0298 66.9427 52.1464 68.5593 50.1404 69.8483C46.4965 72.1898 42.5898 73.3589 38.7944 73.2621C38.0827 73.2439 37.5594 72.6169 37.6097 71.9068C37.6623 71.1623 38.323 70.6159 39.0693 70.6241C42.2114 70.6586 45.5247 69.6733 48.7119 67.6253C50.4795 66.4895 52.1602 65.0562 53.7031 63.3678C54.3196 62.6932 55.4311 62.7785 55.8881 63.57Z" fill="#808080"/>
-<path opacity="0.35" d="M61.3542 69.3014L59.9112 66.1791L61.3198 64.2969L64.5071 66.0428L63.26 70.6967C63.2069 70.8951 62.9576 70.9597 62.8148 70.812L61.3542 69.3014Z" fill="#5B450C"/>
-<path d="M59.0524 72.7881L57.7233 69.2404L59.9337 71.2005L62.714 71.0336L63.5648 71.2615L60.8374 74.6342L59.0524 72.7881Z" fill="black"/>
-<line x1="4.37175" y1="30.3351" x2="16.8351" y2="34.1283" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
-<line x1="13.9135" y1="22.9173" x2="19.4173" y2="26.5866" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
-<line x1="9.10617" y1="41.6363" x2="15.4697" y2="40.7272" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
-<line x1="60.681" y1="16.219" x2="61.0524" y2="14.4857" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
-<line x1="64.293" y1="21.2222" x2="70.0555" y2="14.207" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
-<line x1="24.2179" y1="71.8974" x2="23.064" y2="72.282" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
-<line x1="28.5583" y1="73.9936" x2="25.1603" y2="81.2751" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
-<defs>
-<linearGradient id="paint0_linear_118_40903" x1="88.4454" y1="46.4689" x2="67.0899" y2="64.9114" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FFD752"/>
-<stop offset="0.714248" stop-color="#5B450C"/>
-</linearGradient>
-<linearGradient id="paint1_linear_118_40903" x1="38.2734" y1="12.5077" x2="45.9403" y2="77.4815" gradientUnits="userSpaceOnUse">
-<stop stop-color="#25262B"/>
-<stop offset="1" stop-color="#60626C"/>
-</linearGradient>
-</defs>
-</svg>
diff --git a/src/assets/icons/visu/ecogesture/bullhorn.svg b/src/assets/icons/visu/ecogesture/bullhorn.svg
new file mode 100644
index 0000000000000000000000000000000000000000..cd62a753d86e47def88f2026bd2d41def2dba71c
--- /dev/null
+++ b/src/assets/icons/visu/ecogesture/bullhorn.svg
@@ -0,0 +1,68 @@
+<svg width="97" height="80" viewBox="0 0 97 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 789">
+<g id="Group 788">
+<g id="Group 786">
+<path id="Vector 487" d="M49.0752 67.0338L54.5748 70.3312L64.2919 57.8889L63.3576 56.2707L59.757 54.3941L49.0752 67.0338Z" fill="#1A1A1A"/>
+<path id="Vector 486" d="M54.5752 70.3307L64.4062 57.463L67.3229 61.892L58.1453 74.0229L54.5752 70.3307Z" fill="#454545"/>
+<path id="Vector 488" d="M54.1189 72.0322L49.0752 67.0332L54.5748 70.3306L58.1449 74.0228L54.1189 72.0322Z" fill="black"/>
+<path id="Vector 489" d="M57.9335 61.1997L62.0817 55.928L62.5071 56.042L61.3112 60.505C61.2094 60.8849 60.8682 61.1513 60.475 61.1577L57.9335 61.1997Z" fill="#976D1B"/>
+<path id="Vector 484" d="M70.3007 62.6903C67.0041 59.6792 60.3257 53.6344 59.9854 53.5432L63.6165 53.6043L74.8743 57.5326L70.3007 62.6903Z" fill="#454545"/>
+<path id="Vector 491" d="M72.9142 59.7431C72.9142 59.7431 60.3257 53.6344 59.9854 53.5432L63.6165 53.6043L74.8743 57.5326L72.9142 59.7431Z" fill="#1A1A1A"/>
+<path id="Vector 485" d="M67.3222 61.8923L70.3 62.6902L61.2609 53.8851L58.7085 53.2012L58.4805 54.052L62.8179 56.582L64.0226 58.0023L65.9015 63.7914L67.3222 61.8923Z" fill="#1A1A1A"/>
+<path id="Vector 490" d="M55.7228 59.2401L57.9332 61.2002L62.0814 55.9286L59.3316 54.2799L55.7228 59.2401Z" fill="#E3B82A"/>
+<path id="Vector 502" d="M70.1668 62.6663L61.8335 54.333L58.5005 53.667V54.0003L61.8338 56.0003L70.1668 62.6663Z" fill="black"/>
+<path id="Vector 503" d="M66.4993 63.0002L67.166 61.9995L64.166 58.0002L66.4993 63.0002Z" fill="black"/>
+</g>
+<path id="Ellipse 458" d="M61.8172 39.9C57.5994 55.641 44.6574 65.8499 32.9104 62.7023C21.1634 59.5547 15.0598 44.2425 19.2776 28.5015C23.4954 12.7606 36.4374 2.55163 48.1844 5.69923C59.9314 8.84682 66.035 24.159 61.8172 39.9Z" fill="#454545"/>
+<path id="Intersect" fill-rule="evenodd" clip-rule="evenodd" d="M19.7081 49.2592L52.2527 43.2649L56.9291 50.9265C50.9469 60.0506 41.602 65.0326 32.9113 62.7039C26.705 61.041 22.074 55.9825 19.7081 49.2592Z" fill="#606060"/>
+<path id="Intersect_2" fill-rule="evenodd" clip-rule="evenodd" d="M19.2388 37.1542L46.6392 40.3927L46.8613 42.7328L19.7399 45.4954L19.2388 37.1542Z" fill="#606060"/>
+<path id="Intersect_3" fill-rule="evenodd" clip-rule="evenodd" d="M44.4192 5.14131L58.7564 37.7126L58.2084 44.8607L27.2962 13.4115C32.1395 8.0462 38.2983 4.93355 44.4192 5.14131Z" fill="#313131"/>
+<path id="Intersect_4" fill-rule="evenodd" clip-rule="evenodd" d="M62.806 24.9979L58.7571 37.7132L56.2144 30.1919L48.0262 5.66044C48.079 5.67404 48.1317 5.6879 48.1845 5.70204C56.0872 7.81956 61.4358 15.4426 62.806 24.9979Z" fill="#313131"/>
+<g id="Group 787">
+<path id="Vector 483" d="M84.3179 35.8989L69.771 30.6333C73.8727 35.7446 73.9102 40.7092 73.4163 42.5526C72.2732 49.5413 66.2544 53.3998 63.3879 54.4555L70.0802 56.7046L77.9348 59.7211L80.1475 58.8044C89.4465 54.9518 91.6623 42.7817 84.3179 35.8989Z" fill="#E3B82A"/>
+<path id="Intersect_5" fill-rule="evenodd" clip-rule="evenodd" d="M86.9413 52.779L72.1627 47.2322L71.553 47.5842C69.2215 51.4398 65.4719 53.6884 63.3881 54.4558L70.0804 56.7049L77.935 59.7214L80.1477 58.8047C83.2098 57.5361 85.5038 55.3656 86.9413 52.779Z" fill="#976D1B"/>
+<path id="Intersect_6" fill-rule="evenodd" clip-rule="evenodd" d="M85.5243 37.1748L70.7402 31.9434C71.3511 32.8453 71.8427 33.7344 72.235 34.594L72.6877 35.0623L87.5604 40.4667C87.0549 39.3084 86.3783 38.1994 85.5243 37.1748Z" fill="#FFD752"/>
+<path id="Intersect_7" fill-rule="evenodd" clip-rule="evenodd" d="M88.0474 41.7582L72.9395 36.4121C73.0086 36.6277 73.0717 36.8404 73.1291 37.0497L88.2763 42.5538C88.2082 42.2871 88.132 42.0217 88.0474 41.7582Z" fill="#FFD752"/>
+<path id="Intersect_8" fill-rule="evenodd" clip-rule="evenodd" d="M81.8441 57.9679L67.0577 52.4182C65.681 53.4252 64.3548 54.1006 63.3876 54.4568L70.0799 56.7059L77.9345 59.7224L80.1472 58.8057C80.7421 58.5593 81.3079 58.2788 81.8441 57.9679Z" fill="#5B450C"/>
+<path id="Vector 501" opacity="0.5" d="M88.0867 50.0817C91.0708 40.3207 79.3685 34.1074 69.771 30.6333C73.8727 35.7446 73.9102 40.7092 73.4163 42.5526C72.2732 49.5413 66.2544 53.3998 63.3879 54.4555L70.0802 56.7046L77.9348 59.7211L80.1475 58.8044C84.2265 57.1145 86.9426 53.8242 88.0867 50.0817Z" fill="url(#paint0_linear_13878_3322)"/>
+</g>
+<path id="Vector 482" d="M70.6223 30.8607C68.5435 29.5438 63.3649 26.6364 62.6843 26.454L60.8524 40.0973L54.6525 53.026L63.3884 54.4549L63.6079 54.3847C73.5737 51.1975 77.2151 38.9853 70.6223 30.8607Z" fill="#7A7A7A"/>
+<path id="Vector 496" d="M70.6221 30.8608C68.5433 29.5439 63.3647 26.6365 62.6841 26.4541L62.5396 28.6951L73.1134 35.1758L72.3365 33.4949C71.8947 32.539 71.3173 31.6518 70.6221 30.8608Z" fill="#9F9F9F"/>
+<path id="Vector 494" d="M73.8732 40.8505C71.7944 39.5336 59.8095 34.8025 59.1289 34.6201L57.7835 44.7462L54.653 53.0261L63.3889 54.455L64.7838 53.8951C70.1409 51.7449 73.7113 46.6208 73.8732 40.8505Z" fill="#444549"/>
+<path id="Vector 495" d="M54.6525 53.025L63.3884 54.4539L63.8387 54.3016C67.4136 53.0927 70.3914 50.5634 72.1628 47.2312L57.783 44.745L54.6525 53.025Z" fill="#1A1A1A"/>
+<path id="Ellipse 459" opacity="0.5" d="M61.8172 39.9C57.5994 55.641 44.6574 65.8499 32.9104 62.7023C21.1634 59.5547 15.0598 44.2425 19.2776 28.5015C23.4954 12.7606 36.4374 2.55163 48.1844 5.69923C59.9314 8.84683 66.035 24.159 61.8172 39.9Z" fill="url(#paint1_linear_13878_3322)"/>
+<path id="Vector 481" d="M53.7183 51.4086L43.5475 40.0205L46.2831 29.811L60.6408 27.275L61.9312 39.4752L53.7183 51.4086Z" fill="#7A7A7A"/>
+<path id="Vector 491_2" d="M54.3718 50.6718L44.201 39.2838L44.6875 35.7666L58.9759 43.6986L54.3718 50.6718Z" fill="#444549"/>
+<path id="Vector 492" d="M60.2605 37.2034L45.4857 32.7886L45.9416 31.087L61.264 28.3536L60.2605 37.2034Z" fill="#9F9F9F"/>
+<path id="Vector 493" d="M61.6276 32.0986L45.4849 32.7885L47.103 31.8542L62.0001 29.0068L61.6276 32.0986Z" fill="#BEBEBE"/>
+<path id="Ellipse 461" d="M49.1687 36.0549C48.4133 38.8742 46.0868 40.7004 43.9723 40.1338C41.8579 39.5672 40.7562 36.8225 41.5116 34.0032C42.267 31.1839 44.5935 29.3577 46.708 29.9243C48.8224 30.4909 49.9241 33.2356 49.1687 36.0549Z" fill="#444549"/>
+<path id="Ellipse 456" d="M48.3179 35.8269C47.5625 38.6462 45.4265 40.5234 43.5469 40.0198C41.6674 39.5162 40.7562 36.8225 41.5116 34.0032C42.267 31.1839 44.403 29.3067 46.2826 29.8103C48.1621 30.3139 49.0733 33.0077 48.3179 35.8269Z" fill="#BEBEBE"/>
+<path id="Subtract" fill-rule="evenodd" clip-rule="evenodd" d="M48.2164 31.7521C47.8614 31.3286 47.4197 31.0269 46.9054 30.8891C45.0259 30.3855 42.8898 32.2627 42.1344 35.082C41.7334 36.5786 41.802 38.0398 42.2359 39.1568C41.2935 38.0327 40.9629 36.0511 41.5116 34.0032C42.267 31.1839 44.403 29.3067 46.2826 29.8103C47.1643 30.0466 47.833 30.7649 48.2164 31.7521Z" fill="#B0B0B0"/>
+<path id="Ellipse 462" d="M46.4621 37.2644C45.8259 38.216 44.8549 38.6832 44.2932 38.3077C43.7316 37.9323 43.792 36.8564 44.4282 35.9048C45.0644 34.9531 46.0354 34.486 46.597 34.8614C47.1586 35.2369 47.0982 36.3127 46.4621 37.2644Z" fill="#DDDDDD"/>
+<path id="Ellipse 457 (Stroke)" fill-rule="evenodd" clip-rule="evenodd" d="M48.5507 56.3097C53.2925 52.5694 57.2888 46.5907 59.2648 39.2161C61.2408 31.8415 60.7692 24.6656 58.533 19.0555C56.2969 13.4458 52.3849 9.5604 47.5005 8.25161C42.616 6.94281 37.2854 8.35171 32.544 12.0918C27.8023 15.8322 23.806 21.8109 21.83 29.1855C19.8539 36.56 20.3256 43.7359 22.5618 49.346C24.7979 54.9557 28.7098 58.8412 33.5943 60.1499C38.4788 61.4587 43.8094 60.0498 48.5507 56.3097ZM32.9104 62.7023C44.6574 65.8499 57.5994 55.641 61.8172 39.9C66.035 24.159 59.9314 8.84682 48.1844 5.69923C36.4374 2.55163 23.4954 12.7606 19.2776 28.5015C15.0598 44.2425 21.1634 59.5547 32.9104 62.7023Z" fill="#BEBEBE"/>
+<path id="Ellipse 461 (Stroke)" d="M21.2458 44.9485C22.0786 48.9143 23.6708 52.3467 25.8293 54.9751C28.4393 58.1533 31.7649 60.0302 35.3779 60.5043C39.0047 60.9802 42.9457 60.0439 46.7109 57.6246C49.808 55.6345 52.6387 52.7307 54.9278 49.1426C55.1327 48.8214 55.4563 48.5925 55.8294 48.5155C56.9697 48.2804 57.8494 49.4675 57.2269 50.4513C54.744 54.3751 51.6269 57.6066 48.1394 59.8476C43.9294 62.5528 39.3687 63.6931 35.0341 63.1243C30.6994 62.5555 26.7855 60.3032 23.7872 56.6521C21.2961 53.6187 19.5301 49.7329 18.6303 45.3492C18.4014 44.2337 19.599 43.4387 20.5814 44.0145C20.9256 44.2163 21.1638 44.558 21.2458 44.9485Z" fill="#A4A4A4"/>
+<path id="Ellipse 460 (Stroke)" d="M59.954 36.1163C60.9238 30.6463 60.6034 25.1935 59.0611 20.5095C57.2284 14.9434 53.8532 10.977 49.7645 9.07538C45.7078 7.18865 40.9379 7.3262 36.2497 9.70632C32.2198 11.7522 28.5102 15.3366 25.6977 20.0177C25.5035 20.3409 25.1907 20.577 24.8243 20.6659C23.6872 20.9421 22.7661 19.7752 23.3651 18.77C26.402 13.6742 30.4817 9.67118 35.0535 7.35016C40.3749 4.64859 45.9997 4.41018 50.8789 6.67942C55.758 8.94865 59.5583 13.5706 61.571 19.6831C63.3349 25.0401 63.6201 31.2214 62.4158 37.3249C62.224 38.2969 60.9654 38.4828 60.455 37.6337L60.1314 37.0952C59.9549 36.8017 59.8942 36.4535 59.954 36.1163Z" fill="#DDDDDD"/>
+<path id="Intersect_9" fill-rule="evenodd" clip-rule="evenodd" d="M55.4813 11.1955C56.0012 10.8953 56.6624 10.9887 57.0522 11.4452C58.979 13.7023 60.5189 16.4894 61.5706 19.6835C61.6196 19.8323 61.6675 19.9817 61.7142 20.1318C61.8905 20.6981 61.6387 21.3048 61.125 21.6014C60.3735 22.0353 59.4161 21.627 59.1543 20.7996C59.1236 20.7027 59.0924 20.6061 59.0607 20.5099C58.1255 17.6695 56.7886 15.2457 55.1602 13.3003C54.6102 12.6432 54.7392 11.6239 55.4813 11.1955Z" fill="white"/>
+<path id="Intersect_10" fill-rule="evenodd" clip-rule="evenodd" d="M53.8878 53.57C54.1631 54.0468 54.1099 54.6472 53.7402 55.0551C52.0295 56.9427 50.1461 58.5593 48.1402 59.8483C44.4962 62.1898 40.5896 63.3589 36.7941 63.2621C36.0825 63.2439 35.5592 62.6169 35.6094 61.9068C35.6621 61.1623 36.3228 60.6159 37.0691 60.6241C40.2111 60.6586 43.5244 59.6733 46.7117 57.6253C48.4792 56.4895 50.16 55.0562 51.7028 53.3678C52.3194 52.6932 53.4309 52.7785 53.8878 53.57Z" fill="#808080"/>
+<path id="Vector 499" opacity="0.35" d="M59.3541 59.3015L57.911 56.1792L59.3197 54.2971L62.5069 56.0429L61.2599 60.6968C61.2068 60.8952 60.9575 60.9598 60.8147 60.8121L59.3541 59.3015Z" fill="#5B450C"/>
+<path id="Vector 500" d="M57.0522 62.7879L55.7231 59.2402L57.9336 61.2003L60.7139 61.0334L61.5647 61.2614L58.8373 64.634L57.0522 62.7879Z" fill="black"/>
+</g>
+<line id="Line 29" x1="2.37175" y1="20.3352" x2="14.8351" y2="24.1284" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
+<line id="Line 30" x1="11.9136" y1="12.9175" x2="17.4175" y2="16.5867" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
+<line id="Line 31" x1="7.10629" y1="31.6364" x2="13.4698" y2="30.7274" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
+<line id="Line 32" x1="58.6811" y1="6.219" x2="59.0525" y2="4.48574" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
+<line id="Line 33" x1="62.293" y1="11.2223" x2="68.0555" y2="4.20714" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
+<line id="Line 34" x1="22.2178" y1="61.8974" x2="21.0639" y2="62.282" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
+<line id="Line 35" x1="26.5584" y1="63.9936" x2="23.1604" y2="71.2751" stroke="#E3B82A" stroke-width="3" stroke-linecap="round"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_13878_3322" x1="86.4449" y1="36.4689" x2="65.0894" y2="54.9114" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFD752"/>
+<stop offset="0.714248" stop-color="#5B450C"/>
+</linearGradient>
+<linearGradient id="paint1_linear_13878_3322" x1="36.2733" y1="2.50766" x2="43.9402" y2="67.4815" gradientUnits="userSpaceOnUse">
+<stop stop-color="#25262B"/>
+<stop offset="1" stop-color="#60626C"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/components/CustomPopup/CustomPopupModal.spec.tsx b/src/components/CustomPopup/CustomPopupModal.spec.tsx
index 1503e148ed3cff773276022130c3d56ba88b0ef7..357565d456e0d360ec9ad0730cafe63ed2b17ed4 100644
--- a/src/components/CustomPopup/CustomPopupModal.spec.tsx
+++ b/src/components/CustomPopup/CustomPopupModal.spec.tsx
@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import React from 'react'
import {
@@ -21,8 +21,8 @@ describe('CustomPopupModal component', () => {
expect(baseElement).toMatchSnapshot()
})
- it('should render correct title and description', () => {
- render(
+ it('should render correct title, description and icon', async () => {
+ const { container } = render(
<CustomPopupModal
customPopup={mockCustomPopup}
handleCloseClick={mockHandleClose}
@@ -32,6 +32,8 @@ describe('CustomPopupModal component', () => {
expect(screen.getByTestId('description')).toHaveTextContent(
mockCustomPopup.description
)
+ await waitFor(() => null, { container })
+ expect(screen.getByRole('img')).toBeInTheDocument()
})
it('should not be rendered, popup not enabled', () => {
diff --git a/src/components/CustomPopup/CustomPopupModal.tsx b/src/components/CustomPopup/CustomPopupModal.tsx
index 17f70a4af88a2a22ae82fd40f5c75fb6a0665b74..189e1d290e39dc2775682d56692158f51c020caf 100644
--- a/src/components/CustomPopup/CustomPopupModal.tsx
+++ b/src/components/CustomPopup/CustomPopupModal.tsx
@@ -2,13 +2,14 @@ import Button from '@material-ui/core/Button'
import Dialog from '@material-ui/core/Dialog'
import IconButton from '@material-ui/core/IconButton'
import CloseIcon from 'assets/icons/ico/close.svg'
-import Speaker from 'assets/icons/ico/speaker.svg'
+import DefaultIcon from 'assets/icons/visu/ecogesture/bullhorn.svg'
import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
import { useI18n } from 'cozy-ui/transpiled/react/I18n'
import Icon from 'cozy-ui/transpiled/react/Icon'
import { DateTime } from 'luxon'
import { CustomPopup } from 'models'
-import React from 'react'
+import React, { useEffect, useState } from 'react'
+import { importIconById } from 'utils/utils'
import './customPopupModal.scss'
interface CustomPopupModalProps {
@@ -23,6 +24,15 @@ const CustomPopupModal = ({
const { t } = useI18n()
const isPopupOutdated = () =>
DateTime.local() >= DateTime.fromISO(customPopup.endDate)
+ const [icon, setIcon] = useState('')
+
+ useEffect(() => {
+ async function handleIcon() {
+ const boIcon = await importIconById(customPopup.image, 'ecogesture')
+ setIcon(boIcon ?? DefaultIcon)
+ }
+ handleIcon()
+ }, [customPopup.image])
return (
<Dialog
@@ -46,7 +56,7 @@ const CustomPopupModal = ({
<Icon icon={CloseIcon} size={16} />
</IconButton>
<div className="customPopupModal">
- <StyledIcon icon={Speaker} size={100} />
+ <StyledIcon icon={icon} size={100} role="img" ariaHidden={false} />
<div className="customPopup-title text-20-bold" data-testid="title">
{customPopup.title}
diff --git a/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
index 95b7473c4ce76b511f56cff07aa80cf143a5476b..e145623144afc9a9613a33fdbb3d64e1874246a6 100644
--- a/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
+++ b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
@@ -64,13 +64,14 @@ exports[`CustomPopupModal component should render correctly 1`] = `
class="customPopupModal"
>
<svg
- aria-hidden="true"
+ aria-hidden="false"
class="styles__icon___23x3R"
height="100"
+ role="img"
width="100"
>
<use
- xlink:href="#test-file-stub"
+ xlink:href="#"
/>
</svg>
<div
diff --git a/src/models/customPopup.model.ts b/src/models/customPopup.model.ts
index be4016d18ddf56b0b5b0700482ee14e15edbc8c9..26243c1a9de768ee27cf79b632edaf86bc5e59a0 100644
--- a/src/models/customPopup.model.ts
+++ b/src/models/customPopup.model.ts
@@ -2,5 +2,6 @@ export interface CustomPopup {
popupEnabled: boolean
description: string
title: string
+ image: string
endDate: string
}
diff --git a/src/services/customPopup.service.ts b/src/services/customPopup.service.ts
index 89f0f787dd669b7229634936dec267916dc5e1e0..32a2b0a5a9c4548dc22ea242d2fce4cb3e94f4f3 100644
--- a/src/services/customPopup.service.ts
+++ b/src/services/customPopup.service.ts
@@ -32,7 +32,6 @@ export default class CustomPopupService {
const result: CustomPopup = await this._client
.getStackClient()
.fetchJSON('GET', remoteUrl)
-
result.description = result.description.replace(/{cozyUrl}/g, './#/')
return result
} catch (error) {
diff --git a/src/store/modal/modal.slice.ts b/src/store/modal/modal.slice.ts
index c65edeeca335afd67272d43e1cc2fa14b99caa76..7efe8c5a3c5d0e1e97b42f384428149ddf2664d2 100644
--- a/src/store/modal/modal.slice.ts
+++ b/src/store/modal/modal.slice.ts
@@ -5,6 +5,7 @@ const initialState: ModalState = {
customPopupModal: {
popupEnabled: false,
title: '',
+ image: '',
description: '',
endDate: '',
},
diff --git a/tests/__mocks__/customPopup.mock.ts b/tests/__mocks__/customPopup.mock.ts
index 9cb45df355382f8200bfad24f25afb6b471b695a..1bd3f361ec0b790965ba73e7e408e72359f34ea6 100644
--- a/tests/__mocks__/customPopup.mock.ts
+++ b/tests/__mocks__/customPopup.mock.ts
@@ -3,6 +3,7 @@ import { CustomPopup } from 'models'
export const mockCustomPopup: CustomPopup = {
popupEnabled: true,
title: 'Bold title',
+ image: 'bullhorn',
description: 'Interesting description',
endDate: '2099-10-04T15:10:53.219+02:00',
}
@@ -10,6 +11,7 @@ export const mockCustomPopup: CustomPopup = {
export const mockCustomPopupWithLink: CustomPopup = {
popupEnabled: true,
title: 'Bold title',
+ image: 'bullhorn',
description:
'<p>Allez voir la page <a href="{cozyUrl}ecogestures" target="_self">astuces</a> !!</p>',
endDate: '2099-10-04T15:10:53.219+02:00',
@@ -18,6 +20,7 @@ export const mockCustomPopupWithLink: CustomPopup = {
export const mockCustomPopupOff: CustomPopup = {
popupEnabled: false,
title: '',
+ image: '',
description: '',
endDate: '2099-10-04T15:10:53.219+02:00',
}
@@ -25,6 +28,7 @@ export const mockCustomPopupOff: CustomPopup = {
export const mockCustomPopupOutdated: CustomPopup = {
popupEnabled: true,
title: 'Hello',
+ image: 'bullhorn',
description: 'Friend',
endDate: '2000-10-04T15:10:53.219+02:00',
}
diff --git a/tests/__mocks__/store/modal.state.mock.ts b/tests/__mocks__/store/modal.state.mock.ts
index 1407ce08c87d174bd15e3b7d1d6d10f98e47c82a..db9bdb4a10e2193464256b0b73dd1b0618af745c 100644
--- a/tests/__mocks__/store/modal.state.mock.ts
+++ b/tests/__mocks__/store/modal.state.mock.ts
@@ -4,6 +4,7 @@ export const mockModalState: ModalState = {
customPopupModal: {
popupEnabled: false,
title: '',
+ image: '',
description: '',
endDate: '',
},