@hhgtech/hhg-components 1.19.0-beta-5 → 1.19.0-beta-7

package/src/components/organisms/userProfileNavigation/assets/marryBaby/icon-myHealth.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.7908 3.6501C17.1569 3.6501 16.6812 4.2268 16.6818 4.79735L16.6818 4.7981C16.6818 5.41984 17.105 6.05564 17.7246 6.58461C18.0219 6.83841 18.3347 7.04093 18.5986 7.17705C18.7306 7.2451 18.8426 7.29258 18.9278 7.32157C18.9718 7.33656 19.0005 7.34382 19.0158 7.34729C19.0312 7.34382 19.0599 7.33656 19.1039 7.32157C19.1891 7.29258 19.3011 7.2451 19.433 7.17705C19.697 7.04093 20.0098 6.83841 20.3071 6.58461C20.9267 6.05564 21.3498 5.41984 21.3498 4.7981C21.3498 4.22629 20.8742 3.6501 20.2408 3.6501C19.8672 3.6501 19.6361 3.81834 19.4978 3.97119C19.3748 4.10721 19.2 4.1849 19.0165 4.1851C18.8331 4.1853 18.6581 4.10799 18.5348 3.97224C18.3946 3.81799 18.1631 3.6501 17.7908 3.6501ZM15.3818 4.79848C15.3807 3.63513 16.3189 2.3501 17.7908 2.3501C18.2981 2.3501 18.704 2.4989 19.0155 2.69448C19.3271 2.49872 19.7333 2.3501 20.2408 2.3501C21.7135 2.3501 22.6498 3.63591 22.6498 4.7981C22.6498 5.98936 21.876 6.95455 21.1511 7.57334C20.7762 7.89341 20.3798 8.15146 20.0289 8.33243C19.8535 8.42292 19.6817 8.49812 19.523 8.55217C19.3764 8.60208 19.1952 8.6501 19.0158 8.6501C18.8365 8.6501 18.6552 8.60208 18.5087 8.55217C18.35 8.49812 18.1782 8.42292 18.0027 8.33243C17.6518 8.15146 17.2555 7.89341 16.8806 7.57334C16.1558 6.95462 15.382 5.98956 15.3818 4.79848ZM15.3818 4.79848C15.3818 4.79835 15.3818 4.79823 15.3818 4.7981H16.0318L15.3818 4.79885C15.3818 4.79873 15.3818 4.7986 15.3818 4.79848Z" fill="#3E3F58"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.90953 8.78311C4.23509 5.04005 7.79699 2.3501 11.9992 2.3501C12.3652 2.3501 12.7238 2.37277 13.076 2.41464C13.4325 2.45703 13.6871 2.78037 13.6447 3.13684C13.6023 3.49332 13.279 3.74794 12.9225 3.70555C12.6186 3.66942 12.3113 3.6501 11.9992 3.6501C8.36751 3.6501 5.28341 5.97414 4.13496 9.21708C4.01512 9.55547 3.64366 9.73265 3.30526 9.61281C2.96687 9.49297 2.7897 9.12151 2.90953 8.78311Z" fill="#3E3F58"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.07473 7.35114C9.33041 7.35473 9.56024 7.50789 9.66196 7.74249L12.5334 14.3648L13.6702 11.7416C13.7732 11.5039 14.0075 11.3501 14.2666 11.3501H15.9996C16.3586 11.3501 16.6496 11.6411 16.6496 12.0001C16.6496 12.3591 16.3586 12.6501 15.9996 12.6501H14.6933L13.13 16.2575C13.027 16.4952 12.7927 16.649 12.5337 16.6491C12.2746 16.6491 12.0403 16.4953 11.9373 16.2577L9.0434 9.58376L7.78547 12.2753C7.6786 12.504 7.44902 12.6501 7.19661 12.6501H2.99961C2.64062 12.6501 2.34961 12.3591 2.34961 12.0001C2.34961 11.6411 2.64062 11.3501 2.99961 11.3501H6.78291L8.47675 7.72586C8.58502 7.49421 8.81905 7.34755 9.07473 7.35114Z" fill="#3E3F58"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.8644 10.3545C21.221 10.3132 21.5436 10.5688 21.5849 10.9254C21.6254 11.2748 21.6492 11.633 21.6492 12.0002C21.6492 17.3301 17.3292 21.6502 11.9992 21.6502C7.79699 21.6502 4.23509 18.9602 2.90953 15.2171C2.7897 14.8788 2.96687 14.5073 3.30526 14.3874C3.64366 14.2676 4.01512 14.4448 4.13496 14.7832C5.28341 18.0261 8.36751 20.3502 11.9992 20.3502C16.6113 20.3502 20.3492 16.6122 20.3492 12.0002C20.3492 11.6893 20.3291 11.3815 20.2936 11.075C20.2523 10.7184 20.5078 10.3958 20.8644 10.3545Z" fill="#3E3F58"/>
+</svg>

package/src/components/organisms/userProfileNavigation/assets/marryBaby/icon-mySaved.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 18.2674V8.84496C19 6.64147 17.4253 4.74489 15.2391 4.31522C13.1006 3.89493 10.8994 3.89493 8.76089 4.31522C6.57467 4.74489 5 6.64147 5 8.84496V18.2674C5 19.6038 6.46752 20.4355 7.63416 19.7604L10.8211 17.9159C11.5492 17.4945 12.4508 17.4945 13.1789 17.9159L16.3658 19.7604C17.5325 20.4355 19 19.6038 19 18.2674Z" stroke="#3E3F58" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/src/components/organisms/userProfileNavigation/assets/marryBaby/icon-rank-ambassador.svg

@@ -0,0 +1,40 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<circle cx="12" cy="12" r="12" fill="url(#paint0_linear)"/>
+<g filter="url(#filter0_bd)">
+<mask id="path-2-inside-1" fill="white">
+<path d="M10.1273 17C9.77373 17 9.42018 16.8692 9.15028 16.6059L5.40485 12.9532C4.86505 12.4268 4.86505 11.574 5.40485 11.0491C5.94464 10.5227 6.81747 10.5211 7.35727 11.0476L10.1273 13.749L16.6427 7.39483C17.1825 6.86839 18.0554 6.86839 18.5952 7.39483C19.1349 7.92127 19.1349 8.77403 18.5952 9.30047L11.1043 16.6059C10.8344 16.8692 10.4808 17 10.1273 17Z"/>
+</mask>
+<path d="M10.1273 17C9.77373 17 9.42018 16.8692 9.15028 16.6059L5.40485 12.9532C4.86505 12.4268 4.86505 11.574 5.40485 11.0491C5.94464 10.5227 6.81747 10.5211 7.35727 11.0476L10.1273 13.749L16.6427 7.39483C17.1825 6.86839 18.0554 6.86839 18.5952 7.39483C19.1349 7.92127 19.1349 8.77403 18.5952 9.30047L11.1043 16.6059C10.8344 16.8692 10.4808 17 10.1273 17Z" fill="url(#paint1_linear)"/>
+<path d="M5.40485 11.0491L5.46615 11.1122L5.46625 11.1121L5.40485 11.0491ZM10.1273 13.749L10.0659 13.812L10.1273 13.8719L10.1887 13.812L10.1273 13.749ZM18.5952 9.30047L18.5338 9.23751L18.5952 9.30047ZM11.1043 16.6059L11.1657 16.6689L11.1043 16.6059ZM10.1273 16.9121C9.7953 16.9121 9.4642 16.7893 9.21168 16.543L9.08888 16.6689C9.37616 16.9491 9.75216 17.0879 10.1273 17.0879V16.9121ZM9.21168 16.543L5.46625 12.8902L5.34345 13.0162L9.08888 16.6689L9.21168 16.543ZM5.46625 12.8902C4.96179 12.3983 4.96192 11.6025 5.46615 11.1122L5.34354 10.9861C4.76818 11.5455 4.76832 12.4553 5.34345 13.0162L5.46625 12.8902ZM5.46625 11.1121C5.97202 10.6188 6.79036 10.6175 7.29587 11.1105L7.41867 10.9846C6.84459 10.4247 5.91727 10.4265 5.34345 10.9861L5.46625 11.1121ZM7.29587 11.1105L10.0659 13.812L10.1887 13.6861L7.41867 10.9846L7.29587 11.1105ZM10.1887 13.812L16.7041 7.45779L16.5813 7.33187L10.0659 13.6861L10.1887 13.812ZM16.7041 7.45779C17.2098 6.96466 18.0281 6.96466 18.5338 7.45779L18.6566 7.33187C18.0826 6.77212 17.1553 6.77212 16.5813 7.33187L16.7041 7.45779ZM18.5338 7.45779C19.0382 7.94971 19.0382 8.74559 18.5338 9.23751L18.6566 9.36343C19.2317 8.80248 19.2317 7.89282 18.6566 7.33187L18.5338 7.45779ZM18.5338 9.23751L11.0429 16.543L11.1657 16.6689L18.6566 9.36343L18.5338 9.23751ZM11.0429 16.543C10.7904 16.7893 10.4593 16.9121 10.1273 16.9121V17.0879C10.5024 17.0879 10.8784 16.9491 11.1657 16.6689L11.0429 16.543Z" fill="url(#paint2_linear)" fill-opacity="0.5" mask="url(#path-2-inside-1)"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_bd" x="-1.59551" y="0.404495" width="27.191" height="23.191" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImage" stdDeviation="3.29775"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="2.1985" dy="2.1985"/>
+<feGaussianBlur stdDeviation="2.1985"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.454902 0 0 0 0 0.870588 0 0 0 0 0.376471 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur" result="effect2_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="24" y1="0" x2="7.07779" y2="19.7914" gradientUnits="userSpaceOnUse">
+<stop stop-color="#7EF256"/>
+<stop offset="1" stop-color="#1FB059"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="18.0074" y1="8.8058" x2="2.42862" y2="9.51691" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.2"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="6.50811" y1="10.3545" x2="18.3957" y2="10.4464" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/organisms/userProfileNavigation/assets/marryBaby/icon-rank-doctor.svg

@@ -0,0 +1,40 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_b)">
+<circle cx="12" cy="12" r="12" fill="url(#paint0_linear)"/>
+</g>
+<g filter="url(#filter1_bd)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.3696 13.6948H13.6087V16.4933C13.6087 17.3935 12.8913 18.118 12 18.118C11.1087 18.118 10.3696 17.3935 10.3696 16.4933V13.6948H7.63043C6.73913 13.6948 6 12.9702 6 12.07C6 11.1478 6.73913 10.4233 7.63043 10.4233H10.3696V7.62478C10.3696 6.72457 11.1087 6 12 6C12.8913 6 13.6087 6.72457 13.6087 7.62478V10.4233H16.3696C17.2609 10.4233 18 11.1478 18 12.07C18 12.9702 17.2609 13.6948 16.3696 13.6948Z" fill="url(#paint1_linear)"/>
+<path d="M13.6087 13.4948H13.4087V13.6948V16.4933C13.4087 17.2849 12.779 17.918 12 17.918C11.2175 17.918 10.5696 17.2814 10.5696 16.4933V13.6948V13.4948H10.3696H7.63043C6.84797 13.4948 6.2 12.8581 6.2 12.07C6.2 11.2581 6.84973 10.6233 7.63043 10.6233H10.3696H10.5696V10.4233V7.62478C10.5696 6.83663 11.2175 6.2 12 6.2C12.779 6.2 13.4087 6.83314 13.4087 7.62478V10.4233V10.6233H13.6087H16.3696C17.1503 10.6233 17.8 11.2581 17.8 12.07C17.8 12.8581 17.152 13.4948 16.3696 13.4948H13.6087Z" stroke="url(#paint2_linear)" stroke-width="0.4"/>
+</g>
+<defs>
+<filter id="filter0_b" x="-13" y="-13" width="50" height="50" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImage" stdDeviation="6.5"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
+</filter>
+<filter id="filter1_bd" x="-9" y="-9" width="42" height="42.1182" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImage" stdDeviation="7.5"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="5" dy="5"/>
+<feGaussianBlur stdDeviation="5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 0.321569 0 0 0 0 0.54902 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur" result="effect2_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="13.7669" y1="13.6071" x2="-7.32168" y2="23.8609" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF759F"/>
+<stop offset="1" stop-color="#FF196E"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="17.1492" y1="8.18827" x2="3.78207" y2="8.61986" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.2"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="7.9102" y1="7.41177" x2="15.6558" y2="16.9115" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.25"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

package/src/components/organisms/userProfileNavigation/assets/marryBaby/icon-rank-expert.svg

@@ -0,0 +1,27 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="12" fill="url(#paint0_linear)"/>
+<g filter="url(#filter0_b)">
+<path d="M17.0985 11.839C16.9722 12.0994 16.9822 12.4057 17.1245 12.6579L19.1466 16.1227C19.3177 16.4165 19.301 16.783 19.1041 17.0606C18.915 17.343 18.5802 17.4907 18.2441 17.4424L14.2704 16.9179C14.1318 16.8984 13.9908 16.9122 13.8574 16.9565L13.6531 17.031C13.5861 17.0674 13.525 17.1153 13.4743 17.173L10.7724 20.1401C10.6375 20.2832 10.4613 20.3807 10.2674 20.4181C9.79028 20.4963 9.33752 20.1797 9.24716 19.7045L8.5662 15.7508C8.51204 15.4639 8.32203 15.2215 8.05671 15.1004L4.37271 13.454C4.06453 13.3161 3.86447 13.0133 3.85941 12.6761C3.85162 12.3407 4.03004 12.0289 4.32353 11.8664L7.87222 9.95717C8.14647 9.8239 8.33356 9.55928 8.36829 9.25625L8.78554 5.26955C8.79727 5.17987 8.8225 5.09211 8.86213 5.01105L8.91074 4.93354C8.93189 4.88143 8.96078 4.83417 8.9964 4.7913L9.06758 4.73119L9.17651 4.63171L9.49389 4.51603C9.78807 4.44211 10.0994 4.52078 10.3222 4.72655L13.2233 7.48668C13.4338 7.68923 13.7306 7.77491 14.0164 7.71773L17.9613 6.89563C18.2944 6.82545 18.6387 6.94763 18.8534 7.21099C19.0623 7.4773 19.0981 7.84006 18.9453 8.14256L17.0985 11.839Z" fill="url(#paint1_linear)"/>
+<path d="M16.9195 11.7496L16.9195 11.7496L18.7664 8.05318L18.7667 8.0524C18.8843 7.81958 18.8571 7.54089 18.6972 7.33592C18.5296 7.13144 18.2616 7.03675 18.0025 7.09133L18.0021 7.09142L14.0572 7.91352L14.0556 7.91384C13.7062 7.98375 13.343 7.87919 13.085 7.63112C13.0848 7.63101 13.0847 7.6309 13.0846 7.63078L10.1855 4.87253C10.015 4.71572 9.77788 4.65425 9.55205 4.7077L9.28217 4.80607L9.20246 4.87887L9.19671 4.88412L9.19661 4.884L9.14038 4.93148C9.12185 4.95581 9.10715 4.98143 9.09607 5.00873L9.08948 5.02497L9.08017 5.03982L9.03759 5.1077C9.0109 5.16474 8.99298 5.22745 8.98417 5.29309L8.56721 9.27707L8.567 9.27903L8.56699 9.27903C8.52465 9.64842 8.29731 9.97132 7.96352 10.1352L4.41942 12.0419C4.1918 12.1684 4.0533 12.4106 4.05936 12.6714L4.0594 12.6731C4.06327 12.9322 4.21695 13.1652 4.4544 13.2715L8.13831 14.9178L8.13974 14.9184C8.4642 15.0665 8.69651 15.363 8.76273 15.7137L8.76332 15.7168L8.7633 15.7168L9.44394 19.6687C9.51459 20.0356 9.86385 20.2801 10.2323 20.2212C10.383 20.1915 10.5202 20.1155 10.6258 20.004L13.3253 17.0396C13.3921 16.9639 13.4716 16.902 13.5577 16.8552L13.5707 16.8482L13.5847 16.8431L13.789 16.7686L13.7943 16.7667L13.7944 16.7667C13.9556 16.7131 14.1274 16.696 14.2973 16.7197C14.2976 16.7198 14.2979 16.7198 14.2982 16.7198L18.2702 17.2441L18.2725 17.2444C18.5331 17.2818 18.792 17.1673 18.938 16.9493L18.9409 16.9448L18.941 16.9449C19.0926 16.7311 19.1053 16.4493 18.9739 16.2235L16.9195 11.7496ZM16.9195 11.7496L16.9185 11.7517C16.7635 12.0714 16.7759 12.4471 16.9503 12.7562L16.9503 12.7562L16.9518 12.7587L18.9738 16.2234L16.9195 11.7496Z" stroke="url(#paint2_linear)" stroke-width="0.4"/>
+</g>
+<defs>
+<filter id="filter0_b" x="-13.1504" y="-13.1938" width="50.3008" height="49.8208" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImage" stdDeviation="7.5"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="12" y1="0" x2="12" y2="24" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFB37F"/>
+<stop offset="1" stop-color="#FF7B0D"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="16.8029" y1="4.7824" x2="0.2177" y2="11.4805" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.2"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="4.85831" y1="8.09618" x2="18.1765" y2="16.5763" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0.25"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

package/src/components/organisms/userProfileNavigation/assets/marryBaby/icon-rank-influencer.svg

@@ -0,0 +1,33 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<circle cx="12" cy="12" r="12" fill="#9E4CD1"/>
+<g filter="url(#filter0_bd)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2523 5.84091C13.8813 5.30022 14.6854 5 15.5205 5C17.4422 5 19 6.55782 19 8.47948C19 9.31461 18.6998 10.1188 18.1591 10.7477C18.1023 10.8137 18.0429 10.8778 17.9809 10.9398L13.9598 14.9609C12.1041 16.8167 9.77885 18.1332 7.23277 18.7697L6.45558 18.964C5.59826 19.1783 4.82168 18.4018 5.03602 17.5444L5.23031 16.7673C5.86683 14.2212 7.18336 11.8959 9.03912 10.0402L13.0602 6.01912C13.1222 5.95712 13.1863 5.89769 13.2523 5.84091ZM15.6671 10.8779C15.0847 10.6429 14.5581 10.2694 14.1443 9.85567C13.7306 9.4419 13.3571 8.91532 13.1222 8.33289L10.227 11.2281C8.59782 12.8572 7.43878 14.8957 6.87177 17.1283C9.1043 16.5612 11.1428 15.4022 12.772 13.773L15.6671 10.8779Z" fill="url(#paint0_linear)"/>
+<path d="M15.7378 10.9486L15.8447 10.8417L15.7045 10.7851C15.1362 10.5559 14.6207 10.1906 14.2151 9.78496C13.8095 9.37936 13.4441 8.8638 13.2149 8.29548L13.1584 8.15528L13.0515 8.26218L10.1563 11.1573C8.51438 12.7993 7.34629 14.8537 6.77485 17.1036L6.73347 17.2666L6.89638 17.2252C9.14636 16.6537 11.2008 15.4856 12.8427 13.8437L15.7378 10.9486ZM18.0833 10.6825L18.1591 10.7477L18.0833 10.6825C18.0281 10.7467 17.9704 10.8089 17.9102 10.8691L13.8891 14.8902C12.0462 16.7331 9.73702 18.0406 7.20851 18.6727L6.43133 18.867C5.64724 19.063 4.93701 18.3528 5.13303 17.5687L5.32733 16.7915C5.95945 14.263 7.26688 11.9538 9.10983 10.1109L13.1309 6.08983C13.1911 6.02961 13.2534 5.97189 13.3175 5.91674C13.9284 5.39159 14.7094 5.1 15.5205 5.1C17.387 5.1 18.9 6.61304 18.9 8.47948C18.9 9.29061 18.6084 10.0716 18.0833 10.6825Z" stroke="url(#paint1_linear)" stroke-opacity="0.5" stroke-width="0.2"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_bd" x="-10" y="-10" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImage" stdDeviation="7.5"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="5" dy="5"/>
+<feGaussianBlur stdDeviation="5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.15375 0 0 0 0 0.522433 0 0 0 0 0.9 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur" result="effect2_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="18.0074" y1="7.52812" x2="2.41273" y2="8.03658" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.2"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="6.50811" y1="9.69633" x2="18.3961" y2="9.76196" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/organisms/userProfileNavigation/assets/marryBaby/icon-rank-member.svg

@@ -0,0 +1,33 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<circle cx="12" cy="12" r="12" fill="#4096FE"/>
+<g filter="url(#filter0_bd)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13.2523 5.84091C13.8813 5.30022 14.6854 5 15.5205 5C17.4422 5 19 6.55782 19 8.47948C19 9.31461 18.6998 10.1188 18.1591 10.7477C18.1023 10.8137 18.0429 10.8778 17.9809 10.9398L13.9598 14.9609C12.1041 16.8167 9.77885 18.1332 7.23277 18.7697L6.45558 18.964C5.59826 19.1783 4.82168 18.4018 5.03602 17.5444L5.23031 16.7673C5.86683 14.2212 7.18336 11.8959 9.03912 10.0402L13.0602 6.01912C13.1222 5.95712 13.1863 5.89769 13.2523 5.84091ZM15.6671 10.8779C15.0847 10.6429 14.5581 10.2694 14.1443 9.85567C13.7306 9.4419 13.3571 8.91532 13.1222 8.33289L10.227 11.2281C8.59782 12.8572 7.43878 14.8957 6.87177 17.1283C9.1043 16.5612 11.1428 15.4022 12.772 13.773L15.6671 10.8779Z" fill="url(#paint0_linear)"/>
+<path d="M15.7378 10.9486L15.8447 10.8417L15.7045 10.7851C15.1362 10.5559 14.6207 10.1906 14.2151 9.78496C13.8095 9.37936 13.4441 8.8638 13.2149 8.29548L13.1584 8.15528L13.0515 8.26218L10.1563 11.1573C8.51438 12.7993 7.34629 14.8537 6.77485 17.1036L6.73347 17.2666L6.89638 17.2252C9.14636 16.6537 11.2008 15.4856 12.8427 13.8437L15.7378 10.9486ZM18.0833 10.6825L18.1591 10.7477L18.0833 10.6825C18.0281 10.7467 17.9704 10.8089 17.9102 10.8691L13.8891 14.8902C12.0462 16.7331 9.73702 18.0406 7.20851 18.6727L6.43133 18.867C5.64724 19.063 4.93701 18.3528 5.13303 17.5687L5.32733 16.7915C5.95945 14.263 7.26688 11.9538 9.10983 10.1109L13.1309 6.08983C13.1911 6.02961 13.2534 5.97189 13.3175 5.91674C13.9284 5.39159 14.7094 5.1 15.5205 5.1C17.387 5.1 18.9 6.61304 18.9 8.47948C18.9 9.29061 18.6084 10.0716 18.0833 10.6825Z" stroke="url(#paint1_linear)" stroke-opacity="0.5" stroke-width="0.2"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_bd" x="-10" y="-10" width="44" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImage" stdDeviation="7.5"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dx="5" dy="5"/>
+<feGaussianBlur stdDeviation="5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.15375 0 0 0 0 0.522433 0 0 0 0 0.9 0 0 0 0.5 0"/>
+<feBlend mode="normal" in2="effect1_backgroundBlur" result="effect2_dropShadow"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear" x1="18.0074" y1="7.52812" x2="2.41273" y2="8.03658" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0.2"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="6.50811" y1="9.69633" x2="18.3961" y2="9.76196" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<clipPath id="clip0">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/src/components/organisms/userProfileNavigation/constants.ts

@@ -0,0 +1,23 @@
+import { LocaleType } from 'interfaces/types'
+
+import { UserProfileMenuCard } from './types'
+
+export const DEFAULT_ENABLE_CARE_PROFILE_MENU_LOCALES: LocaleType[] = []
+
+export const DEFAULT_ENABLE_COMMUNITY_PROFILE_MENU_LOCALES: LocaleType[] = [
+  'vi-VN',
+  'id-ID',
+]
+
+export const DEFAULT_ENABLE_ECOM_PROFILE_MENU_LOCALES: LocaleType[] = []
+
+export const INTERNAL_CARD_URLS: {
+  [key in UserProfileMenuCard]?: string
+} = {
+  myBooking: 'booking',
+  mySaved: 'saved',
+  myHealth: 'health',
+  myFamily: 'family',
+  myCommunity: 'my-communities',
+  eCom: 'shop',
+}

package/src/components/organisms/userProfileNavigation/index.stories.tsx

@@ -0,0 +1,79 @@
+import React from 'react'
+
+import { Story } from '@storybook/react/types-6-0'
+import styled from 'styled-components'
+
+import { TranslationsProvider } from '../../../i18n/translationsProvider'
+import { UserProfileNavigation, UserProfileNavigationProps } from './index'
+
+export default {
+  component: UserProfileNavigation,
+  title: 'Organisms/UserProfileNavigation',
+}
+
+const StoryWrapper = styled.div`
+  width: 368px;
+  padding: 16px;
+`
+
+const Template: Story<UserProfileNavigationProps> = (args) => (
+  // @ts-ignore
+  <TranslationsProvider locale={args.locale}>
+    <StoryWrapper>
+      <UserProfileNavigation {...args} />
+    </StoryWrapper>
+  </TranslationsProvider>
+)
+
+const baseProps = {
+  userInfo: {
+    name: 'Petr Statham',
+    username: 'petr.statham',
+    avatar: '',
+    email: 'petr@gmail.com',
+    role: 'User',
+    id: 1,
+    bookmarks: [],
+    total_bookmark: 0,
+  },
+  SSO_URL: '/',
+  locale: 'vi-VN',
+  ENABLE_CARE_PROFILE_MENU_LOCALES: ['vi-VN'],
+  // onClickNavigationCard: (item) => console.log('onClickNavigationCard', item),
+  onClickMenuItem: (item) => console.log('onClickMenuItem', item),
+  onClickMyProfileButton: () => console.log('onClickMyProfileButton'),
+  onClickLogout: () => console.log('onClickLogout'),
+  isMyHealthEnabled: true,
+}
+
+export const HelloSites = Template.bind({})
+
+HelloSites.args = {
+  ...baseProps,
+  themeName: 'helloSites',
+}
+
+export const HelloSitesMenuHidden = Template.bind({})
+
+HelloSitesMenuHidden.args = {
+  ...baseProps,
+  themeName: 'helloSites',
+  isUserProfileNavigatorMenuHidden: true,
+}
+
+export const MarryBaby = Template.bind({})
+
+MarryBaby.args = {
+  ...baseProps,
+  themeName: 'marryBaby',
+  locale: 'vi-VN',
+}
+
+export const MarryBabyMenuHidden = Template.bind({})
+
+MarryBabyMenuHidden.args = {
+  ...baseProps,
+  themeName: 'marryBaby',
+  isUserProfileNavigatorMenuHidden: true,
+  locale: 'vi-VN',
+}

package/src/components/organisms/userProfileNavigation/index.styled.ts

@@ -0,0 +1,60 @@
+import { Button } from 'components/atoms/button'
+import styled from 'styled-components'
+
+import { NavigationCard } from './navigationCard'
+
+export const StyledUserNavScreen = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 18px 16px;
+  &[data-theme='helloSites'] {
+    gap: 16px;
+  }
+  &[data-theme='marryBaby'] {
+    font-family: Inter, 'Open Sans', sans-serif;
+    gap: 24px;
+  }
+
+  // reset inherited values
+  font-size: initial;
+  font-weight: initial;
+  line-height: initial;
+`
+
+export const StyledNavigationCardsWrapper = styled.div`
+  flex: 1;
+  display: inline-flex;
+  flex-wrap: wrap;
+  [data-theme='helloSites'] & {
+    gap: 8px;
+    margin-right: -8px;
+  }
+  [data-theme='marryBaby'] & {
+    gap: 16px;
+  }
+`
+
+export const StyledNavigationCard = styled(NavigationCard)`
+  [data-theme='helloSites'] & {
+    width: calc(50% - 8px);
+  }
+  [data-theme='marryBaby'] & {
+    flex: 1;
+    width: 33.33%;
+  }
+`
+
+export const StyledLogoutButton = styled(Button)`
+  span {
+    justify-content: center;
+    font-weight: normal;
+    img {
+      margin-right: 8px;
+    }
+  }
+
+  & .button-icon {
+    width: 15px;
+    height: 15px;
+  }
+`

package/src/components/organisms/userProfileNavigation/index.tsx

@@ -0,0 +1,219 @@
+import React, { useEffect, useMemo, useState } from 'react'
+
+import { useTranslations } from 'hooks/useTranslations'
+import { LocaleType } from 'interfaces/types'
+import { getCookie } from 'misc/cookieHelper'
+
+import { UserInfo } from '../navigationLayout/types'
+import { getTogetherUserPostsApiPath } from '../navigationLayout/utils'
+import logoutIconUrl from './assets/helloSites/icon-logOut.svg'
+import { INTERNAL_CARD_URLS } from './constants'
+import {
+  StyledUserNavScreen,
+  StyledNavigationCard,
+  StyledNavigationCardsWrapper,
+  StyledLogoutButton,
+} from './index.styled'
+import { NavHeader } from './navHeader'
+import { NavMenu } from './navMenu'
+import {
+  UserProfileMenuCard,
+  UserProfileNavMenuItem,
+  UserProfileTheme,
+} from './types'
+import { UserStats } from './userStats'
+
+export type UserProfileNavigationProps = {
+  SSO_URL?: string
+  UP_BASEPATH?: string
+  themeName?: UserProfileTheme
+  userInfo: UserInfo | null
+  userPostsNumber?: number
+  /** example: { mySaved: 'saved' } will be combined with SSO_URL to be redirected to SSO_URL/saved */
+  cardUrls?: {
+    [key in UserProfileMenuCard]?: string
+  }
+  togetherApiDomain?: string
+  enableCare?: boolean
+  enableTogether?: boolean
+  enableEcom?: boolean
+  onClickNavigationCard?: (cardType: string) => void
+  onClickMyProfileButton?: () => void
+  onClickMenuItem?: (key: string) => void
+  onClickLogout?: () => void
+  isUserProfileNavigatorMenuHidden?: boolean
+  isMyHealthEnabled?: boolean
+
+  // NOTE: THESE props are not used anymore, keep for backwards compatibility
+  ENABLE_CARE_PROFILE_MENU_LOCALES?: LocaleType[]
+  ENABLE_COMMUNITY_PROFILE_MENU_LOCALES?: LocaleType[]
+  ENABLE_ECOM_PROFILE_MENU_LOCALES?: LocaleType[]
+  userProfileRouterPush?: (s: string) => void
+}
+
+const UserProfileNavigation = ({
+  SSO_URL,
+  UP_BASEPATH = 'user',
+  themeName = 'helloSites',
+  cardUrls = INTERNAL_CARD_URLS,
+  enableCare,
+  enableTogether,
+  enableEcom,
+  userInfo,
+  togetherApiDomain,
+  userPostsNumber,
+  onClickNavigationCard,
+  onClickMyProfileButton,
+  onClickMenuItem,
+  onClickLogout,
+  isUserProfileNavigatorMenuHidden = false,
+  isMyHealthEnabled = false,
+}: UserProfileNavigationProps) => {
+  const { t, locale } = useTranslations()
+  const [numberOfPosts, setNumberOfPosts] = useState(userPostsNumber || 0)
+  const isMarryBaby = themeName === 'marryBaby'
+
+  useEffect(() => {
+    if (userInfo && typeof userPostsNumber === 'undefined') {
+      const token = getCookie('hhg_user_token')
+      if (!!token) {
+        fetch(
+          getTogetherUserPostsApiPath(locale, isMarryBaby, togetherApiDomain),
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          },
+        )
+          .then((r) => r.json())
+          .then((r) => {
+            if (r?.status === 1 && r?.data?.pagination) {
+              setNumberOfPosts(r?.data?.pagination?.total_items || 0)
+            }
+          })
+          .catch((err) => console.error('Error fetching post number', err))
+      }
+    }
+  }, [
+    locale,
+    userInfo !== null,
+    userPostsNumber,
+    togetherApiDomain,
+    isMarryBaby,
+  ])
+
+  const cards = useMemo<UserProfileMenuCard[]>(() => {
+    let allCards: UserProfileMenuCard[]
+    if (isMarryBaby) {
+      allCards = ['myHealth', 'myCommunity', 'mySaved']
+    } else {
+      allCards = ['myHealth', 'mySaved', 'myBooking', 'myCommunity', 'eCom']
+    }
+    return allCards.filter((cardType) => {
+      if (cardType === 'myBooking') {
+        return enableCare
+      } else if (cardType === 'myCommunity') {
+        return enableTogether
+      } else if (cardType === 'myHealth') {
+        return isMyHealthEnabled
+      } else if (cardType === 'eCom') {
+        return enableEcom
+      }
+      return true
+    })
+  }, [isMarryBaby, isMyHealthEnabled])
+
+  const logoutButton = useMemo(() => {
+    if (themeName === 'marryBaby') {
+      return null
+    }
+    return (
+      <StyledLogoutButton
+        color="tertiary"
+        icon={<img src={logoutIconUrl} width={15} height={15} />}
+        size="md"
+        onClick={onClickLogout}
+      >
+        {t('userProfile.nav.menu.logout')}
+      </StyledLogoutButton>
+    )
+  }, [themeName])
+
+  const push = (link: string) => {
+    window.location.href = `${SSO_URL}${UP_BASEPATH}/${link}`
+  }
+
+  const handleClickMenuItem = (item: UserProfileNavMenuItem) => {
+    if (item.link === 'logout' && onClickLogout) {
+      onClickLogout()
+    } else if (item.link && !item.subMenu) {
+      if (onClickMenuItem) {
+        onClickMenuItem(item.link)
+      } else {
+        push(item.link)
+      }
+    }
+  }
+
+  const handleClickCardItem = (item: UserProfileMenuCard) => {
+    const url = cardUrls[item]
+    if (onClickNavigationCard) {
+      onClickNavigationCard(url)
+    } else {
+      push(url)
+    }
+  }
+
+  const handleClickViewProfile = () => {
+    if (onClickMyProfileButton) {
+      onClickMyProfileButton()
+    } else {
+      push('profile')
+    }
+  }
+
+  if (!userInfo) {
+    return null
+  }
+
+  return (
+    <StyledUserNavScreen data-theme={themeName}>
+      <NavHeader
+        userInfo={userInfo}
+        themeName={themeName}
+        onClickMyProfileButton={handleClickViewProfile}
+      />
+      <UserStats
+        themeName={themeName}
+        rank="member"
+        numberOfPosts={numberOfPosts}
+      />
+      <StyledNavigationCardsWrapper>
+        {cards.map((cardType) => (
+          <StyledNavigationCard
+            key={cardType}
+            themeName={themeName}
+            type={cardType}
+            onClick={handleClickCardItem}
+          />
+        ))}
+      </StyledNavigationCardsWrapper>
+      {!isUserProfileNavigatorMenuHidden && (
+        <>
+          <NavMenu
+            themeName={themeName}
+            locale={locale}
+            onClickItem={handleClickMenuItem}
+          />
+          {logoutButton}
+        </>
+      )}
+    </StyledUserNavScreen>
+  )
+}
+
+export {
+  UserProfileNavigation,
+  NavHeader as UserProfileNavigationHeader,
+  UserStats as UserProfileNavigationStats,
+}