diff --git a/src/assets/icons/visu/season/SEASON0001.svg b/src/assets/icons/visu/season/SEASON0001.svg
new file mode 100644
index 0000000000000000000000000000000000000000..dc82d87e7193859bc593139d8405de0551a3dbd7
--- /dev/null
+++ b/src/assets/icons/visu/season/SEASON0001.svg
@@ -0,0 +1,27 @@
+<svg width="177" height="177" viewBox="0 0 177 177" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="177" height="177">
+<circle cx="88.5" cy="88.5" r="88.5" fill="#C4C4C4"/>
+</mask>
+<g mask="url(#mask0)">
+<path d="M69.5518 129.342H64.2164V150.684C64.2164 157.795 67.3076 164.183 72.2195 168.58V160.308C70.526 157.497 69.5518 154.204 69.5518 150.684V129.342Z" fill="#FFDDBD"/>
+<path d="M106.899 129.342H112.235V150.684C112.235 157.795 109.144 164.183 104.232 168.58V160.308C105.925 157.497 106.899 154.204 106.899 150.684V129.342Z" fill="#FFDDBD"/>
+<path d="M88.2256 113.336H71.9753C66.3513 113.336 65.1429 119.021 63.6703 125.949C63.4905 126.794 63.3069 127.659 63.1107 128.533C62.6042 130.792 62.0587 132.82 61.5487 134.678H71.9753L73.2648 161.355H88.2256V113.336Z" fill="#488D4F"/>
+<path d="M88.2256 161.355H103.186L104.476 134.678H114.903C114.393 132.82 113.847 130.792 113.341 128.533C113.145 127.659 112.961 126.795 112.781 125.95C111.309 119.023 110.1 113.336 104.476 113.336H88.2256V161.355Z" fill="#4BBA56"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M88.2256 166.69H72.2195L78.9798 262.727H85.3425V193.577L88.2256 183.83V166.69Z" fill="#9A5624"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M88.2256 166.69H104.232L97.4714 262.727H91.1087V193.577L88.2256 183.83V166.69Z" fill="#B67D55"/>
+<path d="M82.8902 102.665H93.561V118.171C93.561 118.447 93.3371 118.671 93.061 118.671H83.3902C83.1141 118.671 82.8902 118.447 82.8902 118.171V102.665Z" fill="#FFDDBD"/>
+<path d="M82.8902 102.665H93.561V116.003C93.561 117.477 92.3666 118.671 90.8933 118.671H85.5579C84.0846 118.671 82.8902 117.477 82.8902 116.003V102.665Z" fill="#FFDDBD"/>
+<path d="M77.5549 113.336V116.004C77.5549 120.424 81.138 124.007 85.5579 124.007H90.8933C95.3133 124.007 98.8964 120.424 98.8964 116.004V113.336H93.561V116.004C93.561 117.477 92.3667 118.672 90.8933 118.672H85.5579C84.0846 118.672 82.8903 117.477 82.8903 116.004V113.336H77.5549Z" fill="#488D4F"/>
+<rect x="82.8902" y="108" width="10.6708" height="5.33539" fill="#F4BA84"/>
+<path d="M40.2073 33.3062H136.244C139.191 33.3062 141.579 35.6949 141.579 38.6415V91.9953C141.579 94.942 139.191 97.3307 136.244 97.3307H125.573V102.666H98.8964V97.3307H40.2073C37.2606 97.3307 34.8719 94.942 34.8719 91.9953V38.6415C34.8719 35.6949 37.2606 33.3062 40.2073 33.3062Z" fill="#8A8A8A"/>
+<path d="M40.2073 43.9771H136.244C139.191 43.9771 141.579 46.3658 141.579 49.3124V102.666C141.579 105.613 139.191 108.002 136.244 108.002H40.2073C37.2606 108.002 34.8719 105.613 34.8719 102.666V49.3124C34.8719 46.3658 37.2606 43.9771 40.2073 43.9771Z" fill="#C4C4C4"/>
+<rect x="40.2073" y="53.3135" width="64.0246" height="42.683" rx="1" fill="#96C5CF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M98.8965 55.9812H45.5427C44.0693 55.9812 42.875 57.1755 42.875 58.6489V93.4955C42.875 94.9689 44.0693 96.1632 45.5427 96.1632H98.8965C100.37 96.1632 101.564 94.9689 101.564 93.4955V58.6489C101.564 57.1755 100.37 55.9812 98.8965 55.9812ZM45.5427 53.3135C42.596 53.3135 40.2073 55.7022 40.2073 58.6489V93.4955C40.2073 96.4422 42.596 98.8309 45.5427 98.8309H98.8965C101.843 98.8309 104.232 96.4422 104.232 93.4955V58.6489C104.232 55.7022 101.843 53.3135 98.8965 53.3135H45.5427Z" fill="#43595E"/>
+<path opacity="0.85" d="M64.5976 56.1475H72.2195L53.1646 95.9961H45.5426L64.5976 56.1475Z" fill="white"/>
+<path opacity="0.85" d="M79.3334 56.1475H82.8903L65.1057 95.9961H61.5488L79.3334 56.1475Z" fill="white"/>
+<ellipse cx="128.241" cy="87.9933" rx="8.00306" ry="8.00307" fill="#464646"/>
+<path d="M133.197 88.6604C133.389 88.2106 133.493 87.7266 133.493 87.2224C133.493 84.8397 131.16 82.9082 128.283 82.9082C125.405 82.9082 123.072 84.8397 123.072 87.2224C123.072 87.7266 123.177 88.2106 123.369 88.6604C124.084 86.9848 126.014 85.7843 128.283 85.7843C130.551 85.7843 132.481 86.9848 133.197 88.6604Z" fill="#C4C4C4"/>
+<rect x="120.238" y="54.647" width="16.0061" height="10.6708" rx="0.5" fill="black"/>
+<rect x="110.901" y="33.3057" width="2.66769" height="74.6953" fill="#8A8A8A"/>
+</g>
+</svg>
diff --git a/src/assets/icons/visu/season/actionIcon.svg b/src/assets/icons/visu/season/actionIcon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..d8885e46ba7aa2beab534d1da98422831704e956
--- /dev/null
+++ b/src/assets/icons/visu/season/actionIcon.svg
@@ -0,0 +1,14 @@
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="21" height="21" rx="3" stroke="url(#paint0_linear)" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9 5.5C8.44772 5.5 8 5.94772 8 6.5C8 7.05228 8.44772 7.5 9 7.5H15.5134L5.32733 16.7601C4.91868 17.1316 4.88856 17.764 5.26007 18.1727C5.63157 18.5813 6.26402 18.6115 6.67268 18.2399L16.5 9.30602V15C16.5 15.5523 16.9477 16 17.5 16C18.0523 16 18.5 15.5523 18.5 15V6.5C18.5 5.94772 18.0523 5.5 17.5 5.5H9Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="11.1734" y1="2" x2="11.1734" y2="21" gradientUnits="userSpaceOnUse">
+<stop stop-color="#61F0F2"/>
+<stop offset="1" stop-color="#48C2C4"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="11.518" y1="5.5" x2="11.518" y2="18.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#61F0F2"/>
+<stop offset="1" stop-color="#48C2C4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/icons/visu/season/missionIcon.svg b/src/assets/icons/visu/season/missionIcon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..b2b6e74077a64b6c53fb7c44c83d5162fe1f61ae
--- /dev/null
+++ b/src/assets/icons/visu/season/missionIcon.svg
@@ -0,0 +1,14 @@
+<svg width="24" height="28" viewBox="0 0 24 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 1.17112C15.269 3.11713 18.791 4.34698 22.7029 4.66189C22.7103 4.77726 22.7176 4.8921 22.725 5.0064C23.0495 10.0652 23.3069 14.0796 22.1525 17.4759C20.9756 20.9381 18.2609 23.8865 12 26.4048C5.73912 23.8865 3.02442 20.9381 1.84754 17.4759C0.693054 14.0796 0.950544 10.0652 1.27503 5.0064C1.28236 4.8921 1.28972 4.77726 1.29711 4.66189C5.20902 4.34698 8.731 3.11713 12 1.17112Z" stroke="url(#paint0_linear)" stroke-width="2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5773 9.32681C20.0627 9.78266 20.0867 10.5457 19.6308 11.0311L12.1577 18.9885C11.7229 19.4515 11.0036 19.4978 10.5131 19.0944L6.17055 15.5238C5.65622 15.1009 5.58211 14.3411 6.00502 13.8267C6.42794 13.3124 7.18773 13.2383 7.70206 13.6612L11.1727 16.515L17.8731 9.3803C18.3289 8.89492 19.092 8.87097 19.5773 9.32681Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="11.5875" y1="1.81632e-07" x2="11.5875" y2="27.4805" gradientUnits="userSpaceOnUse">
+<stop stop-color="#61F0F2"/>
+<stop offset="1" stop-color="#48C2C4"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="12.5996" y1="9" x2="12.5996" y2="19.3689" gradientUnits="userSpaceOnUse">
+<stop stop-color="#61F0F2"/>
+<stop offset="1" stop-color="#48C2C4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/icons/visu/season/quizIcon.svg b/src/assets/icons/visu/season/quizIcon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ebde8eb139abdd0753cc8cca3488c1cbcfac928b
--- /dev/null
+++ b/src/assets/icons/visu/season/quizIcon.svg
@@ -0,0 +1,14 @@
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="13" cy="13" r="12" stroke="url(#paint0_linear)" stroke-width="2"/>
+<path d="M9 7.75953C9.24667 7.55286 9.51333 7.35953 9.8 7.17953C10.0933 6.99953 10.4067 6.84286 10.74 6.70953C11.0733 6.56953 11.43 6.46286 11.81 6.38953C12.1967 6.30953 12.6133 6.26953 13.06 6.26953C13.6867 6.26953 14.25 6.35286 14.75 6.51953C15.2567 6.6862 15.6867 6.9262 16.04 7.23953C16.3933 7.5462 16.6633 7.91953 16.85 8.35953C17.0433 8.79287 17.14 9.2762 17.14 9.80953C17.14 10.3162 17.07 10.7562 16.93 11.1295C16.79 11.4962 16.6133 11.8162 16.4 12.0895C16.1867 12.3629 15.95 12.5995 15.69 12.7995C15.4367 12.9995 15.1933 13.1862 14.96 13.3595C14.7333 13.5262 14.5333 13.6929 14.36 13.8595C14.1933 14.0262 14.0867 14.2129 14.04 14.4195L13.76 15.8195H11.64L11.42 14.2095C11.3667 13.8829 11.4 13.5995 11.52 13.3595C11.64 13.1129 11.8033 12.8929 12.01 12.6995C12.2233 12.4995 12.46 12.3129 12.72 12.1395C12.98 11.9595 13.2233 11.7695 13.45 11.5695C13.6767 11.3629 13.8667 11.1362 14.02 10.8895C14.18 10.6362 14.26 10.3362 14.26 9.98953C14.26 9.58953 14.1267 9.27286 13.86 9.03953C13.6 8.79953 13.24 8.67953 12.78 8.67953C12.4267 8.67953 12.13 8.7162 11.89 8.78953C11.6567 8.86286 11.4533 8.9462 11.28 9.03953C11.1133 9.1262 10.9667 9.2062 10.84 9.27953C10.7133 9.35286 10.5867 9.38953 10.46 9.38953C10.1733 9.38953 9.96 9.2662 9.82 9.01953L9 7.75953ZM10.84 19.4295C10.84 19.1895 10.8833 18.9662 10.97 18.7595C11.0633 18.5529 11.1867 18.3729 11.34 18.2195C11.5 18.0662 11.6867 17.9462 11.9 17.8595C12.1133 17.7662 12.3467 17.7195 12.6 17.7195C12.8467 17.7195 13.0767 17.7662 13.29 17.8595C13.5033 17.9462 13.69 18.0662 13.85 18.2195C14.01 18.3729 14.1333 18.5529 14.22 18.7595C14.3133 18.9662 14.36 19.1895 14.36 19.4295C14.36 19.6695 14.3133 19.8962 14.22 20.1095C14.1333 20.3162 14.01 20.4962 13.85 20.6495C13.69 20.8029 13.5033 20.9229 13.29 21.0095C13.0767 21.0962 12.8467 21.1395 12.6 21.1395C12.3467 21.1395 12.1133 21.0962 11.9 21.0095C11.6867 20.9229 11.5 20.8029 11.34 20.6495C11.1867 20.4962 11.0633 20.3162 10.97 20.1095C10.8833 19.8962 10.84 19.6695 10.84 19.4295Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="12.5531" y1="1.71846e-07" x2="12.5531" y2="26" gradientUnits="userSpaceOnUse">
+<stop stop-color="#61F0F2"/>
+<stop offset="1" stop-color="#48C2C4"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="12.9301" y1="6.26953" x2="12.9301" y2="21.1395" gradientUnits="userSpaceOnUse">
+<stop stop-color="#61F0F2"/>
+<stop offset="1" stop-color="#48C2C4"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/icons/visu/season/seasonLocked.svg b/src/assets/icons/visu/season/seasonLocked.svg
new file mode 100644
index 0000000000000000000000000000000000000000..4107b278af4c1dac532d152418d35e950ab3453b
--- /dev/null
+++ b/src/assets/icons/visu/season/seasonLocked.svg
@@ -0,0 +1,13 @@
+<svg width="178" height="178" viewBox="0 0 178 178" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="89" cy="89" r="89" fill="#1B1C22"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="178" height="178">
+<circle cx="89" cy="89" r="89" fill="#1B1C22"/>
+</mask>
+<g mask="url(#mask0)">
+<g opacity="0.2">
+<path d="M37.8468 124.432C39.1483 115.6 46.7269 109.056 55.6544 109.056H125.485C134.134 109.056 141.56 115.207 143.17 123.705L158.912 206.79C161.013 217.877 152.511 228.141 141.227 228.141H43.4104C32.4245 228.141 24.001 218.385 25.6027 207.516L37.8468 124.432Z" fill="#C4C4C4"/>
+<circle cx="90.8802" cy="62.0493" r="38.2324" fill="#C4C4C4"/>
+</g>
+</g>
+<path opacity="0.85" d="M127.859 89.6268C127.859 84.3036 123.572 79.9747 118.301 79.9747H113.522V65.4965C113.522 52.1911 102.803 41.3662 89.6267 41.3662C76.4509 41.3662 65.7315 52.1911 65.7315 65.4965V79.9747H60.9524C55.6812 79.9747 51.3943 84.3036 51.3943 89.6268V128.235C51.3943 133.558 55.6812 137.887 60.9524 137.887H118.301C123.572 137.887 127.859 133.558 127.859 128.235V89.6268ZM75.2896 65.4965C75.2896 57.5142 81.7222 51.0183 89.6267 51.0183C97.5313 51.0183 103.964 57.5142 103.964 65.4965V79.9747H75.2896V65.4965Z" fill="white"/>
+</svg>
diff --git a/src/assets/icons/visu/season/star.svg b/src/assets/icons/visu/season/star.svg
new file mode 100644
index 0000000000000000000000000000000000000000..a1fea237f932e6300c1c8e3f07fed7d0f757da87
--- /dev/null
+++ b/src/assets/icons/visu/season/star.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.6765 4.9298L10.1298 4.29107L8.09731 0.308118C8.0418 0.199068 7.95047 0.110788 7.83765 0.0571283C7.55472 -0.0778871 7.2109 0.0346257 7.06943 0.308118L5.03695 4.29107L0.490275 4.9298C0.364924 4.94711 0.250317 5.00423 0.162571 5.09078C0.0564906 5.19617 -0.00196427 5.33796 5.04018e-05 5.48499C0.00206507 5.63202 0.0643845 5.77227 0.173315 5.87491L3.46289 8.97507L2.68571 13.3527C2.66749 13.4545 2.67915 13.5592 2.71937 13.655C2.75958 13.7508 2.82675 13.8337 2.91326 13.8944C2.99977 13.9552 3.10214 13.9912 3.20879 13.9986C3.31543 14.0059 3.42207 13.9843 3.51661 13.936L7.58337 11.8692L11.6501 13.936C11.7612 13.9931 11.8901 14.0122 12.0136 13.9914C12.3252 13.9395 12.5347 13.6539 12.481 13.3527L11.7038 8.97507L14.9934 5.87491C15.083 5.79009 15.1421 5.67931 15.16 5.55814C15.2083 5.25522 14.9898 4.9748 14.6765 4.9298Z" fill="#121212"/>
+</svg>
diff --git a/src/assets/icons/visu/season/starFilled.svg b/src/assets/icons/visu/season/starFilled.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8825b5b3467fdec5aa9bcceb7bad7784e2758fa7
--- /dev/null
+++ b/src/assets/icons/visu/season/starFilled.svg
@@ -0,0 +1,10 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.1765 4.9298L10.6298 4.29107L8.59731 0.308118C8.5418 0.199068 8.45047 0.110788 8.33765 0.0571283C8.05472 -0.0778871 7.7109 0.0346257 7.56943 0.308118L5.53695 4.29107L0.990275 4.9298C0.864924 4.94711 0.750317 5.00423 0.662571 5.09078C0.556491 5.19617 0.498036 5.33796 0.50005 5.48499C0.502065 5.63202 0.564384 5.77227 0.673315 5.87491L3.96289 8.97507L3.18571 13.3527C3.16749 13.4545 3.17915 13.5592 3.21937 13.655C3.25958 13.7508 3.32675 13.8337 3.41326 13.8944C3.49977 13.9552 3.60214 13.9912 3.70879 13.9986C3.81543 14.0059 3.92207 13.9843 4.01661 13.936L8.08337 11.8692L12.1501 13.936C12.2612 13.9931 12.3901 14.0122 12.5136 13.9914C12.8252 13.9395 13.0347 13.6539 12.981 13.3527L12.2038 8.97507L15.4934 5.87491C15.583 5.79009 15.6421 5.67931 15.66 5.55814C15.7083 5.25522 15.4898 4.9748 15.1765 4.9298Z" fill="#F1C017"/>
+<path d="M15.1765 4.9298L10.6298 4.29107L8.59731 0.308118C8.5418 0.199068 8.45047 0.110788 8.33765 0.0571283C8.05472 -0.0778871 7.7109 0.0346257 7.56943 0.308118L5.53695 4.29107L0.990275 4.9298C0.864924 4.94711 0.750317 5.00423 0.662571 5.09078C0.556491 5.19617 0.498036 5.33796 0.50005 5.48499C0.502065 5.63202 0.564384 5.77227 0.673315 5.87491L3.96289 8.97507L3.18571 13.3527C3.16749 13.4545 3.17915 13.5592 3.21937 13.655C3.25958 13.7508 3.32675 13.8337 3.41326 13.8944C3.49977 13.9552 3.60214 13.9912 3.70879 13.9986C3.81543 14.0059 3.92207 13.9843 4.01661 13.936L8.08337 11.8692L12.1501 13.936C12.2612 13.9931 12.3901 14.0122 12.5136 13.9914C12.8252 13.9395 13.0347 13.6539 12.981 13.3527L12.2038 8.97507L15.4934 5.87491C15.583 5.79009 15.6421 5.67931 15.66 5.55814C15.7083 5.25522 15.4898 4.9748 15.1765 4.9298Z" fill="url(#paint0_radial)" fill-opacity="0.5"/>
+<defs>
+<radialGradient id="paint0_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(8.03441 9.91667) rotate(-90) scale(9.04167 15.9629)">
+<stop stop-color="#E28904"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/src/components/Season/SeasonCardLocked.tsx b/src/components/Season/SeasonCardLocked.tsx
index 1755497496f4a7e8749bd89545bc6673a1572d3f..a84bc92fb0e707f5f806c8dda8eba4b2f2975811 100644
--- a/src/components/Season/SeasonCardLocked.tsx
+++ b/src/components/Season/SeasonCardLocked.tsx
@@ -1,6 +1,8 @@
import React from 'react'
import './seasonCardLocked.scss'
import { UserSeason } from 'models'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import seasonLockedIcon from 'assets/icons/visu/season/seasonLocked.svg'
interface SeasonCardLockedProps {
userSeason: UserSeason
@@ -12,7 +14,10 @@ const SeasonCardLocked: React.FC<SeasonCardLockedProps> = ({
<div className="cardContent">
<p className="title">Saison</p>
<span className="seasonTitle">{userSeason.title}</span>
- <span>Locked</span>
+ <StyledIcon className="seasonIcon" icon={seasonLockedIcon} />
+ <p className="toUnlock text-16-normal-150">
+ À débloquer en terminant la saison précédente
+ </p>
</div>
)
}
diff --git a/src/components/Season/SeasonCardOnGoing.tsx b/src/components/Season/SeasonCardOnGoing.tsx
index eecd75939dade5ff5de59780f6f2dc7676cb8c46..9b3febeffe1dda5e31f29a1c316fd4741dfa1f1e 100644
--- a/src/components/Season/SeasonCardOnGoing.tsx
+++ b/src/components/Season/SeasonCardOnGoing.tsx
@@ -7,6 +7,13 @@ import SeasonService from 'services/season.service'
import { UserSeason } from 'models'
import { UpdateUserSeason } from 'enum/updateUserSeason.enum'
+import quizIcon from 'assets/icons/visu/season/quizIcon.svg'
+import missionIcon from 'assets/icons/visu/season/missionIcon.svg'
+import actionIcon from 'assets/icons/visu/season/actionIcon.svg'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import StarsContainer from './StarsContainer'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+
interface SeasonCardOnGoingProps {
userSeason: UserSeason
}
@@ -15,7 +22,7 @@ const SeasonCardOnGoing: React.FC<SeasonCardOnGoingProps> = ({
}: SeasonCardOnGoingProps) => {
const client: Client = useClient()
const dispatch = useDispatch()
-
+ const { t } = useI18n()
const winStarts = useCallback(async () => {
const seasonService = new SeasonService(client)
userSeason.progress + 5 >= userSeason.target
@@ -37,15 +44,73 @@ const SeasonCardOnGoing: React.FC<SeasonCardOnGoingProps> = ({
dispatch(updateUserSeasonList(updatedSeason))
}, [client, dispatch, userSeason])
+ const resetProgress = async () => {
+ const seasonService = new SeasonService(client)
+ userSeason.progress = 0
+ const updatedSeason = await seasonService.updateUserSeason(
+ userSeason,
+ UpdateUserSeason.SEASON
+ )
+ dispatch(updateUserSeasonList(updatedSeason))
+ }
+ console.log('season', userSeason)
return (
- <div className="cardContent">
- <p className="title">Saison</p>
- <span className="seasonTitle">{userSeason.title}</span>
- <button onClick={winStarts}>Gagner 5 étoiles</button>
- <div>{`${userSeason.progress} / ${userSeason.target} Etoiles`}</div>
+ <div className="cardContent onGoing">
+ <div className="titleBlock">
+ <p className="title">{t('season.card.title')}</p>
+ <span className="seasonTitle">{userSeason.title}</span>
+ </div>
+ <div
+ className={
+ userSeason.progress >= 5 ? 'smallCard finished' : 'smallCard'
+ }
+ onClick={winStarts}
+ >
+ <StyledIcon className="cardIcon" icon={quizIcon} size={25} />
+ <div className="content">
+ <span>{t('season.card.ongoing.quiz')}</span>
+ <StarsContainer starNumber={5} />
+ </div>
+ </div>
+ <div
+ className={
+ userSeason.progress >= 10 ? 'smallCard finished' : 'smallCard'
+ }
+ onClick={winStarts}
+ >
+ <StyledIcon className="cardIcon" icon={missionIcon} size={25} />
+ <div className="content">
+ <span>{t('season.card.ongoing.mission')}</span>
+ <StarsContainer starNumber={5} />
+ </div>
+ </div>
+ <div
+ className={
+ userSeason.progress >= 15 ? 'smallCard finished' : 'smallCard'
+ }
+ onClick={winStarts}
+ >
+ <StyledIcon className="cardIcon" icon={actionIcon} size={25} />
+ <div className="content">
+ <span>{t('season.card.ongoing.mission')}</span>
+ <StarsContainer starNumber={5} />
+ </div>
+ </div>
{userSeason.progress >= userSeason.target ? (
- <button onClick={launchBoss}>Lancer le boss</button>
- ) : null}
+ <button
+ className={
+ userSeason.progress >= userSeason.target
+ ? 'smallCard'
+ : 'smallCard finished'
+ }
+ onClick={launchBoss}
+ >
+ {t('season.card.ongoing.duel')}
+ </button>
+ ) : (
+ <div className="smallCard">{`${userSeason.progress} / ${userSeason.target} Etoiles`}</div>
+ )}
+ <button onClick={resetProgress}>Reset stars</button>
</div>
)
}
diff --git a/src/components/Season/SeasonCardUnlocked.tsx b/src/components/Season/SeasonCardUnlocked.tsx
index 49b4239e4236e6f7754e6eaad8f0479f87617ff3..23b6e5b065d184d2d3478fb079e517816f35d249 100644
--- a/src/components/Season/SeasonCardUnlocked.tsx
+++ b/src/components/Season/SeasonCardUnlocked.tsx
@@ -8,6 +8,9 @@ import SeasonService from 'services/season.service'
import StyledButtonValid from 'components/CommonKit/Button/StyledButtonValid'
import SeasonNoFluidModal from './SeasonNoFluidModal'
import { EcolyoState } from 'store'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import def from 'assets/icons/visu/season/seasonLocked.svg'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
interface SeasonCardUnlockedProps {
userSeason: UserSeason
@@ -17,16 +20,32 @@ const SeasonCardUnlocked: React.FC<SeasonCardUnlockedProps> = ({
}: SeasonCardUnlockedProps) => {
const client: Client = useClient()
const dispatch = useDispatch()
+ const { t } = useI18n()
+
const [openNoFluidModal, setopenNoFluidModal] = useState(false)
const [workingKonnectors, setworkingKonnectors] = useState<number>(0)
const { fluidStatus } = useSelector((state: EcolyoState) => state.global)
+ const [seasonIcon, setSeasonIcon] = useState(def)
+
+ async function importSeasonIcon(id: string) {
+ // Les svg doivent être au format id.svg
+ let importedSeasonIcon
+ try {
+ importedSeasonIcon = await import(
+ /* webpackMode: "eager" */ `assets/icons/visu/season/${id}.svg`
+ )
+ } catch (e) {}
+ if (importedSeasonIcon) {
+ setSeasonIcon(importedSeasonIcon.default)
+ }
+ }
const toggleNoFluidModal = () => {
setopenNoFluidModal(prev => !prev)
}
const launchSeason = useCallback(async () => {
- if (workingKonnectors < 1) {
+ if (workingKonnectors > 1) {
return toggleNoFluidModal()
} else {
const seasonService = new SeasonService(client)
@@ -41,14 +60,20 @@ const SeasonCardUnlocked: React.FC<SeasonCardUnlockedProps> = ({
})
}, [fluidStatus])
+ useEffect(() => {
+ if (userSeason) {
+ importSeasonIcon(userSeason.id)
+ }
+ }, [userSeason])
+
return (
<>
<div className="cardContent">
- <p className="title">Saison</p>
+ <p className="title">{t('season.card.title')}</p>
<span className="seasonTitle">{userSeason.title}</span>
- <span>Icon</span>
- <StyledButtonValid onClick={launchSeason}>
- Lancer la saison
+ <StyledIcon className="seasonIcon" icon={seasonIcon} />
+ <StyledButtonValid className="launchButton" onClick={launchSeason}>
+ {t('season.card.unlocked.launch')}
</StyledButtonValid>
</div>
diff --git a/src/components/Season/SeasonView.tsx b/src/components/Season/SeasonView.tsx
index 8ce712d303391c6c4d3b213970823303ddfa683f..eabfb1c9846873394da2c6e748c665e86d3057ac 100644
--- a/src/components/Season/SeasonView.tsx
+++ b/src/components/Season/SeasonView.tsx
@@ -87,10 +87,10 @@ const SeasonView: React.FC = () => {
return (
<>
- <CozyBar titleKey={'COMMON.APP_OPTIONS_TITLE'} />
+ <CozyBar titleKey={'COMMON.APP_DEFI_TITLE'} />
<Header
setHeaderHeight={defineHeaderHeight}
- desktopTitleKey={'COMMON.APP_OPTIONS_TITLE'}
+ desktopTitleKey={'COMMON.APP_DEFI_TITLE'}
></Header>
<Content height={headerHeight}>
<div
diff --git a/src/components/Season/StarsContainer.tsx b/src/components/Season/StarsContainer.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..95b89c1d10e1bed7b11d730ca106add7f5df2036
--- /dev/null
+++ b/src/components/Season/StarsContainer.tsx
@@ -0,0 +1,26 @@
+import React from 'react'
+import { useI18n } from 'cozy-ui/transpiled/react/I18n'
+import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
+import starIcon from 'assets/icons/visu/season/star.svg'
+
+interface StarsContainerProps {
+ starNumber?: number
+}
+
+const StarsContainer: React.FC<StarsContainerProps> = ({
+ starNumber,
+}: StarsContainerProps) => {
+ const { t } = useI18n()
+
+ return (
+ <div className="stars">
+ <StyledIcon className="star" icon={starIcon} />
+ <StyledIcon className="star" icon={starIcon} />
+ <StyledIcon className="star" icon={starIcon} />
+ <StyledIcon className="star" icon={starIcon} />
+ <StyledIcon className="star" icon={starIcon} />
+ </div>
+ )
+}
+
+export default StarsContainer
diff --git a/src/components/Season/seasonCard.scss b/src/components/Season/seasonCard.scss
index a3ccd4e0d646398d0ef635431ccd48996ab81c2c..fc3ac8616629533ad276d558598a3015811f48d8 100644
--- a/src/components/Season/seasonCard.scss
+++ b/src/components/Season/seasonCard.scss
@@ -3,9 +3,6 @@
.slide {
margin: auto;
height: 465px;
- // max-width: 285px;
- // min-width: 285px;
- background: linear-gradient(180deg, #323339 0%, #25262b 100%);
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
border-radius: 4px;
margin-right: 1rem;
@@ -14,10 +11,14 @@
display: flex;
flex-direction: column;
transform: scale(0.9);
-
&.active {
transform: scale(1.08);
}
-
+ .cardContent {
+ background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+ width: 100%;
+ height: inherit;
+ box-sizing: border-box;
+ padding: 2.5rem 1.5rem;
+ }
}
-
diff --git a/src/components/Season/seasonCardLocked.scss b/src/components/Season/seasonCardLocked.scss
index e4300007a6ea8c2a1a5e7df46294d2ee3c552521..f3516780cee86dc3eced0c35ab24db2d79ee2f38 100644
--- a/src/components/Season/seasonCardLocked.scss
+++ b/src/components/Season/seasonCardLocked.scss
@@ -1,2 +1,7 @@
@import '../../styles/base/typography';
+@import '../../styles/base/color';
+.toUnlock {
+ text-align: center;
+ color: $grey-bright;
+}
diff --git a/src/components/Season/seasonCardOnGoing.scss b/src/components/Season/seasonCardOnGoing.scss
index e4300007a6ea8c2a1a5e7df46294d2ee3c552521..63077b67ce84de41eaf2762f19b9fd24fcbc2c99 100644
--- a/src/components/Season/seasonCardOnGoing.scss
+++ b/src/components/Season/seasonCardOnGoing.scss
@@ -1,2 +1,51 @@
@import '../../styles/base/typography';
+@import '../../styles/base/color';
+.cardContent {
+ background: transparent !important;
+ &.onGoing {
+ border: 1px solid #e0e0e0;
+ position: relative;
+ }
+}
+.titleBlock {
+ position: absolute;
+ left: 0;
+ right: 0;
+ margin: auto;
+ top: -3rem;
+ background: rgba(27, 28, 34, 1);
+ max-width: 190px;
+}
+.smallCard {
+ outline: none;
+ border: none;
+ display: block;
+ width: 100%;
+ background: linear-gradient(180deg, #323339 0%, #25262b 100%);
+ height: 24%;
+ margin: 0.5rem 0;
+ padding: 1.5rem 1rem;
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.55);
+ border-radius: 4px;
+ color: $grey-bright;
+ box-sizing: border-box;
+ display: flex;
+ font-family: $text-font;
+ &:first-of-type {
+ margin-top: 0;
+ }
+ &.finished {
+ border: 1px solid #7b7b7b;
+ filter: brightness(0.5);
+ }
+ .cardIcon {
+ margin-right: 0.6rem;
+ }
+ span {
+ font-size: 1.2rem;
+ font-weight: 700;
+ display: block;
+ margin-bottom: 0.5rem;
+ }
+}
diff --git a/src/components/Season/seasonCardUnlocked.scss b/src/components/Season/seasonCardUnlocked.scss
index 9d233452340d1d36228752f8fc2a2e7c8214d146..84a149912151c0f645225640575d4a9d760ac96f 100644
--- a/src/components/Season/seasonCardUnlocked.scss
+++ b/src/components/Season/seasonCardUnlocked.scss
@@ -4,3 +4,10 @@
width: 100%;
height: 100%;
}
+.launchButton {
+ width: fit-content !important;
+ margin: auto !important;
+ text-align: center;
+ display: block !important;
+ padding: 1rem 2rem !important;
+}
diff --git a/src/components/Season/seasonView.scss b/src/components/Season/seasonView.scss
index 44e1cc41f2128a90233b1dd9aa20d64d9a6677b9..0ab210434a3be07bf78159df1d42cbfae213bab9 100644
--- a/src/components/Season/seasonView.scss
+++ b/src/components/Season/seasonView.scss
@@ -27,7 +27,7 @@
text-align: center;
text-transform: uppercase;
font-family: $text-font;
- font-size: 1rem;
+ font-size: 1.2rem;
margin-bottom: 0;
}
.seasonTitle {
@@ -36,7 +36,17 @@
text-align: center;
font-family: $text-font;
color: $grey-bright;
- font-size: 1.2rem;
+ font-size: 1.3rem;
+ margin-bottom: 1.5rem;
+ }
+ .seasonIcon {
+ width: 100%;
+ max-width: 180px;
+ margin: auto;
+ height: auto;
+ text-align: center;
+ display: block;
+ margin-bottom: 2.5rem;
}
}
.sliderButtons {
@@ -46,4 +56,4 @@
@media all and (max-width: $width-tablet) {
display: none;
}
-}
\ No newline at end of file
+}
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 92b84b644f5bae26496384ae31543f901e637ab5..3009c08fcfb5177cf85b2c672e9903d7c2cb7954 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -23,6 +23,7 @@
"APP_CHALLENGE_TITLE": "Défis",
"APP_ECO_GESTURE_TITLE": "Ecogestes",
"APP_OPTIONS_TITLE": "Options",
+ "APP_DEFI_TITLE": "Défi",
"APP_HELLO": "Bonjour",
"APP_PRESENTATION": "Consommation d'énergie",
"CONSO_DETAILS": "détail des consommations",
@@ -329,6 +330,18 @@
"noFluidModal": {
"title": "Oups !",
"content": "Connectez au moins 1 fluide pour pouvoir jouer"
+ },
+ "card": {
+ "title": "Saison",
+ "unlocked": {
+ "launch": "Lancer la saison"
+ },
+ "ongoing": {
+ "quiz": "Quiz",
+ "mission": "Missions",
+ "action": "Actions",
+ "duel": "Duel Final"
+ }
}
}
}