regions ticking

assets/icons/travels-section/earth.svg

@@ -1,10 +1,10 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1350_13572)">
-<path d="M1.80313 6.03125L2.09687 6.54375C2.35625 6.99687 2.78125 7.33125 3.28437 7.475L5.09375 7.99062C5.63125 8.14375 6 8.63438 6 9.19375V10.4406C6 10.7844 6.19375 11.0969 6.5 11.25C6.80625 11.4031 7 11.7156 7 12.0594V13.2781C7 13.7656 7.46562 14.1187 7.93437 13.9844C8.4375 13.8406 8.82812 13.4375 8.95625 12.9281L9.04375 12.5781C9.175 12.05 9.51875 11.5969 9.99063 11.3281L10.2437 11.1844C10.7125 10.9187 11 10.4188 11 9.88125V9.62187C11 9.225 10.8406 8.84375 10.5594 8.5625L10.4375 8.44063C10.1562 8.15938 9.775 8 9.37813 8H8.03125C7.68437 8 7.34062 7.90938 7.0375 7.7375L5.95937 7.12187C5.825 7.04375 5.72188 6.91875 5.67188 6.77187C5.57188 6.47187 5.70625 6.14687 5.99062 6.00625L6.175 5.9125C6.38125 5.80937 6.62187 5.79063 6.84062 5.86562L7.56563 6.10625C7.82188 6.19062 8.10312 6.09375 8.25 5.87187C8.39688 5.65312 8.38125 5.3625 8.2125 5.15938L7.7875 4.65C7.475 4.275 7.47813 3.72813 7.79688 3.35938L8.2875 2.7875C8.5625 2.46562 8.60625 2.00625 8.39688 1.64062L8.32187 1.50937C8.2125 1.50312 8.10625 1.5 7.99687 1.5C5.09687 1.5 2.6375 3.40313 1.80313 6.03125ZM14.5 8C14.5 6.85 14.2 5.76875 13.675 4.82812L12.875 5.15C12.3844 5.34688 12.1313 5.89375 12.2969 6.39375L12.825 7.97813C12.9344 8.30313 13.2 8.55 13.5312 8.63125L14.4406 8.85938C14.4781 8.57812 14.4969 8.29062 14.4969 8H14.5ZM0 8C0 5.87827 0.842855 3.84344 2.34315 2.34315C3.84344 0.842855 5.87827 0 8 0C10.1217 0 12.1566 0.842855 13.6569 2.34315C15.1571 3.84344 16 5.87827 16 8C16 10.1217 15.1571 12.1566 13.6569 13.6569C12.1566 15.1571 10.1217 16 8 16C5.87827 16 3.84344 15.1571 2.34315 13.6569C0.842855 12.1566 0 10.1217 0 8Z" fill="#0F3F4F"/>
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2651_21785)">
+<path d="M4.35625 12.0625L4.94375 13.0875C5.4625 13.9937 6.3125 14.6625 7.31875 14.95L10.9375 15.9812C12.0125 16.2875 12.75 17.2688 12.75 18.3875V20.8813C12.75 21.5688 13.1375 22.1938 13.75 22.5C14.3625 22.8062 14.75 23.4312 14.75 24.1187V26.5562C14.75 27.5312 15.6812 28.2375 16.6187 27.9688C17.625 27.6812 18.4062 26.875 18.6625 25.8563L18.8375 25.1562C19.1 24.1 19.7875 23.1938 20.7313 22.6562L21.2375 22.3687C22.175 21.8375 22.75 20.8375 22.75 19.7625V19.2437C22.75 18.45 22.4312 17.6875 21.8687 17.125L21.625 16.8813C21.0625 16.3188 20.3 16 19.5063 16H16.8125C16.1187 16 15.4312 15.8188 14.825 15.475L12.6687 14.2437C12.4 14.0875 12.1938 13.8375 12.0938 13.5437C11.8938 12.9437 12.1625 12.2937 12.7312 12.0125L13.1 11.825C13.5125 11.6187 13.9937 11.5813 14.4312 11.7312L15.8813 12.2125C16.3938 12.3812 16.9562 12.1875 17.25 11.7437C17.5438 11.3062 17.5125 10.725 17.175 10.3188L16.325 9.3C15.7 8.55 15.7063 7.45625 16.3438 6.71875L17.325 5.575C17.875 4.93125 17.9625 4.0125 17.5438 3.28125L17.3937 3.01875C17.175 3.00625 16.9625 3 16.7437 3C10.9437 3 6.025 6.80625 4.35625 12.0625ZM29.75 16C29.75 13.7 29.15 11.5375 28.1 9.65625L26.5 10.3C25.5187 10.6938 25.0125 11.7875 25.3438 12.7875L26.4 15.9563C26.6187 16.6063 27.15 17.1 27.8125 17.2625L29.6313 17.7188C29.7063 17.1562 29.7437 16.5812 29.7437 16H29.75ZM0.75 16C0.75 11.7565 2.43571 7.68687 5.43629 4.68629C8.43687 1.68571 12.5065 0 16.75 0C20.9935 0 25.0631 1.68571 28.0637 4.68629C31.0643 7.68687 32.75 11.7565 32.75 16C32.75 20.2435 31.0643 24.3131 28.0637 27.3137C25.0631 30.3143 20.9935 32 16.75 32C12.5065 32 8.43687 30.3143 5.43629 27.3137C2.43571 24.3131 0.75 20.2435 0.75 16Z" fill="#ED9334"/>
 </g>
 <defs>
-<clipPath id="clip0_1350_13572">
-<rect width="16" height="16" fill="white"/>
+<clipPath id="clip0_2651_21785">
+<rect width="32" height="32" fill="white" transform="translate(0.75)"/>
 </clipPath>
 </defs>
 </svg>

assets/icons/travels-section/flags.svg

@@ -1,11 +1,11 @@
-<svg width="15" height="16" viewBox="0 0 15 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1350_13513)">
-<path d="M3.02698 0C2.5486 0 2.16211 0.386488 2.16211 0.864866V1.72973V2.07533C2.22885 2.19805 2.27022 2.3367 2.27022 2.48649V2.91892L4.13509 2.45133C5.16481 2.19458 6.25401 2.3135 7.20266 2.78917C8.45401 3.4162 9.92697 3.4162 11.1783 2.78917L11.4378 2.65942C11.9945 2.38104 12.6486 2.78648 12.6486 3.4081V9.68276C12.6892 9.66872 12.73 9.6557 12.7702 9.64053L13.7081 9.28918C14.0459 9.16215 14.2702 8.84053 14.2702 8.47837V1.78648C14.2702 1.16486 13.6162 0.759419 13.0594 1.0378L12.8 1.16755C11.5486 1.79458 10.0756 1.79458 8.82428 1.16755C7.87563 0.691872 6.78644 0.572953 5.75671 0.82971L3.89184 1.2973V0.864866C3.89184 0.386488 3.50535 0 3.02698 0ZM3.89184 10.7291L2.27022 11.1351V13.3842C2.41664 13.6534 2.69842 13.8379 3.02698 13.8379C3.50535 13.8379 3.89184 13.4514 3.89184 12.973V10.7291Z" fill="#0F3F4F"/>
-<path d="M1.72973 3.02698C1.72973 2.5486 1.34325 2.16211 0.864866 2.16211C0.386487 2.16211 0 2.5486 0 3.02698V3.89184V12.1081V15.1351C0 15.6135 0.386487 16 0.864866 16C1.34325 16 1.72973 15.6135 1.72973 15.1351V11.6756L3.46757 11.2405C4.57839 10.9621 5.75406 11.0919 6.77839 11.6027C7.97299 12.2 9.35947 12.2729 10.6081 11.8027L11.546 11.4513C11.8838 11.3243 12.1081 11.0027 12.1081 10.6405V3.9486C12.1081 3.32698 11.4541 2.92157 10.8973 3.19995L10.6379 3.32968C9.3865 3.95671 7.91352 3.95671 6.66217 3.32968C5.71352 2.854 4.62433 2.73508 3.5946 2.99184L1.72973 3.45941V3.02698Z" fill="#0F3F4F"/>
+<svg width="30" height="32" viewBox="0 0 30 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2651_21759)">
+<path d="M6.80395 0C5.84719 0 5.07422 0.772975 5.07422 1.72973V3.45946V4.15066C5.20769 4.39611 5.29044 4.67341 5.29044 4.97298V5.83785L9.02017 4.90267C11.0796 4.38915 13.258 4.62699 15.1553 5.57834C17.658 6.8324 20.6039 6.8324 23.1067 5.57834L23.6256 5.31884C24.7391 4.76208 26.0472 5.57296 26.0472 6.8162V19.3655C26.1283 19.3374 26.2099 19.3114 26.2905 19.2811L28.1661 18.5784C28.8418 18.3243 29.2905 17.6811 29.2905 16.9567V3.57296C29.2905 2.32971 27.9823 1.51884 26.8688 2.07559L26.3499 2.3351C23.8472 3.58915 20.9013 3.58915 18.3986 2.3351C16.5013 1.38374 14.3229 1.14591 12.2634 1.65942L8.53368 2.5946V1.72973C8.53368 0.772975 7.76071 0 6.80395 0ZM8.53368 21.4581L5.29044 22.2703V26.7684C5.58328 27.3067 6.14685 27.6757 6.80395 27.6757C7.76071 27.6757 8.53368 26.9027 8.53368 25.946V21.4581Z" fill="#ED9334"/>
+<path d="M4.20946 6.05395C4.20946 5.09719 3.43649 4.32422 2.47973 4.32422C1.52297 4.32422 0.75 5.09719 0.75 6.05395V7.78368V24.2161V30.2702C0.75 31.227 1.52297 31.9999 2.47973 31.9999C3.43649 31.9999 4.20946 31.227 4.20946 30.2702V23.3513L7.68515 22.481C9.90677 21.9242 12.2581 22.1837 14.3068 23.2053C16.696 24.3999 19.4689 24.5459 21.9662 23.6053L23.8419 22.9026C24.5176 22.6486 24.9662 22.0053 24.9662 21.281V7.8972C24.9662 6.65395 23.6581 5.84314 22.5446 6.3999L22.0257 6.65936C19.523 7.91341 16.577 7.91341 14.0743 6.65936C12.177 5.708 9.99866 5.47017 7.9392 5.98368L4.20946 6.91882V6.05395Z" fill="#ED9334"/>
 </g>
 <defs>
-<clipPath id="clip0_1350_13513">
-<rect width="14.2703" height="16" fill="white"/>
+<clipPath id="clip0_2651_21759">
+<rect width="28.5406" height="32" fill="white" transform="translate(0.75)"/>
 </clipPath>
 </defs>
 </svg>

assets/icons/travels-section/images.svg

@@ -1,4 +1,11 @@
-<svg width="16" height="15" viewBox="0 0 16 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M14.6665 10.8887C14.6665 11.2581 14.9637 11.5553 15.3332 11.5553C15.7026 11.5553 15.9998 11.2581 15.9998 10.8887V4.66645C15.9998 2.58034 14.3082 0.888672 12.2221 0.888672H3.33317C2.96373 0.888672 2.6665 1.18589 2.6665 1.55534C2.6665 1.92478 2.96373 2.22201 3.33317 2.22201H12.2221C13.5721 2.22201 14.6665 3.31645 14.6665 4.66645V10.8887Z" fill="#0F3F4F"/>
-<path d="M1.77778 3.55566C0.797222 3.55566 0 4.35289 0 5.33344V11.5557C0 12.5362 0.797222 13.3334 1.77778 13.3334H11.5556C12.5361 13.3334 13.3333 12.5362 13.3333 11.5557V5.33344C13.3333 4.35289 12.5361 3.55566 11.5556 3.55566H1.77778ZM8.33333 6.51955L11 10.5196C11.1361 10.7251 11.15 10.9862 11.0333 11.2029C10.9167 11.4196 10.6917 11.5557 10.4444 11.5557H6.44445H5.11111H2.88889C2.63333 11.5557 2.4 11.4084 2.28889 11.1779C2.17778 10.9473 2.20833 10.6723 2.36944 10.4723L4.14722 8.25011C4.275 8.09178 4.46389 8.00011 4.66667 8.00011C4.86944 8.00011 5.06111 8.09178 5.18611 8.25011L5.66667 8.85011L7.22222 6.51678C7.34722 6.33344 7.55556 6.22233 7.77778 6.22233C8 6.22233 8.20833 6.33344 8.33333 6.51955ZM2.66667 6.22233C2.66667 5.73141 3.06464 5.33344 3.55556 5.33344C4.04648 5.33344 4.44445 5.73141 4.44445 6.22233C4.44445 6.71325 4.04648 7.11122 3.55556 7.11122C3.06464 7.11122 2.66667 6.71325 2.66667 6.22233Z" fill="#0F3F4F"/>
+<svg width="37" height="32" viewBox="0 0 37 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2651_21800)">
+<path d="M33.75 24.5C33.75 25.3312 34.4187 26 35.25 26C36.0812 26 36.75 25.3312 36.75 24.5V10.5C36.75 5.80625 32.9437 2 28.25 2H8.25C7.41875 2 6.75 2.66875 6.75 3.5C6.75 4.33125 7.41875 5 8.25 5H28.25C31.2875 5 33.75 7.4625 33.75 10.5V24.5Z" fill="#ED9334"/>
+<path d="M4.75 8C2.54375 8 0.75 9.79375 0.75 12V26C0.75 28.2062 2.54375 30 4.75 30H26.75C28.9562 30 30.75 28.2062 30.75 26V12C30.75 9.79375 28.9562 8 26.75 8H4.75ZM19.5 14.6688L25.5 23.6688C25.8062 24.1313 25.8375 24.7188 25.575 25.2062C25.3125 25.6937 24.8062 26 24.25 26H15.25H12.25H7.25C6.675 26 6.15 25.6687 5.9 25.15C5.65 24.6313 5.71875 24.0125 6.08125 23.5625L10.0813 18.5625C10.3688 18.2063 10.7938 18 11.25 18C11.7063 18 12.1375 18.2063 12.4188 18.5625L13.5 19.9125L17 14.6625C17.2812 14.25 17.75 14 18.25 14C18.75 14 19.2188 14.25 19.5 14.6688ZM6.75 14C6.75 12.8954 7.64543 12 8.75 12C9.85457 12 10.75 12.8954 10.75 14C10.75 15.1046 9.85457 16 8.75 16C7.64543 16 6.75 15.1046 6.75 14Z" fill="#ED9334"/>
+</g>
+<defs>
+<clipPath id="clip0_2651_21800">
+<rect width="36" height="32" fill="white" transform="translate(0.75)"/>
+</clipPath>
+</defs>
 </svg>

assets/icons/travels-section/series.svg

@@ -1,12 +1,12 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1350_13555)">
-<path d="M12.1086 10.8418C11.8154 11.2395 11.5491 11.5873 11.3116 11.8895C11.4101 12.1054 11.6088 12.2721 11.8594 12.3184C12.8031 12.4902 13.5375 12.7184 14.0156 12.959C14.1156 13.009 14.1969 13.0559 14.2625 13.0996C14.375 13.1746 14.375 13.3247 14.2625 13.3997C13.9875 13.5778 13.5406 13.7684 12.9188 13.9402C11.6969 14.2809 9.95312 14.4996 8 14.4996C6.04688 14.4996 4.30315 14.2809 3.0719 13.9402C2.45003 13.7684 2.00315 13.5778 1.72815 13.3997C1.61565 13.3247 1.61565 13.1746 1.72815 13.0996C1.79377 13.0559 1.8781 13.009 1.97498 12.959C2.4531 12.7184 3.18748 12.4934 4.13123 12.3184H4.1344C4.24633 12.2977 4.34651 12.2514 4.43359 12.1891C4.146 11.8158 3.82523 11.3867 3.49103 10.9162C2.63361 11.0939 1.87986 11.3287 1.3031 11.6184C0.974976 11.784 0.668762 11.984 0.434387 12.2309C0.200013 12.484 0 12.8278 0 13.2496C0 13.9184 0.484364 14.3778 0.909363 14.6559C1.36874 14.9559 1.98125 15.1965 2.67188 15.3871C4.06875 15.7715 5.95 15.9996 8 15.9996C10.05 15.9996 11.9313 15.7715 13.325 15.3871C14.0156 15.1965 14.6313 14.9559 15.0875 14.6559C15.5156 14.3778 15.9969 13.9184 15.9969 13.2496C15.9969 12.8278 15.7969 12.484 15.5594 12.2309C15.325 11.984 15.0187 11.784 14.6906 11.6184C14.0344 11.2872 13.1437 11.0278 12.1281 10.8434C12.1216 10.8422 12.1152 10.8428 12.1086 10.8418Z" fill="#0F3F4F"/>
-<path d="M10.4536 12.1875C11.7061 10.6201 14.5625 6.82129 14.5625 4.6875C14.5625 2.09961 12.4629 0 9.875 0C7.28711 0 5.1875 2.09961 5.1875 4.6875C5.1875 6.82129 8.04395 10.6201 9.29638 12.1875C9.59668 12.561 10.1533 12.561 10.4536 12.1875ZM9.875 3.125C10.0802 3.12494 10.2835 3.16531 10.4731 3.24381C10.6627 3.32231 10.835 3.43739 10.9801 3.58249C11.1253 3.72759 11.2404 3.89986 11.319 4.08946C11.3975 4.27906 11.4379 4.48227 11.4379 4.6875C11.4379 4.89273 11.3975 5.09594 11.319 5.28554C11.2404 5.47514 11.1253 5.64741 10.9801 5.79251C10.835 5.93761 10.6627 6.05269 10.4731 6.13119C10.2835 6.20969 10.0802 6.25006 9.875 6.25C9.66977 6.25006 9.46654 6.20969 9.27692 6.13119C9.0873 6.05269 8.91499 5.93761 8.76986 5.79251C8.62472 5.64741 8.50959 5.47514 8.43104 5.28554C8.35248 5.09594 8.31205 4.89273 8.31205 4.6875C8.31205 4.48227 8.35248 4.27906 8.43104 4.08946C8.50959 3.89986 8.62472 3.72759 8.76986 3.58249C8.91499 3.43739 9.0873 3.32231 9.27692 3.24381C9.46654 3.16531 9.66977 3.12494 9.875 3.125Z" fill="#0F3F4F"/>
-<path d="M6.125 0.625C3.53711 0.625 1.4375 2.72461 1.4375 5.3125C1.4375 7.44629 4.29395 11.2451 5.54639 12.8125C5.84668 13.186 6.40332 13.186 6.70361 12.8125C7.02742 12.4073 7.45901 11.8513 7.92017 11.2151C6.90214 9.86629 5.57215 7.94287 4.93323 6.30408C4.65274 5.96393 4.529 5.52112 4.59253 5.08484C4.57332 4.94719 4.5625 4.81422 4.5625 4.6875C4.5625 2.98789 5.46821 1.49894 6.823 0.677002C6.59524 0.642963 6.36221 0.625 6.125 0.625Z" fill="#0F3F4F"/>
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2651_21776)">
+<path d="M24.4673 21.6846C23.8809 22.4799 23.3483 23.1757 22.8733 23.7799C23.0703 24.2118 23.4677 24.5452 23.9688 24.6377C25.8562 24.9814 27.325 25.4377 28.2812 25.9189C28.4813 26.0189 28.6438 26.1127 28.775 26.2002C29 26.3502 29 26.6503 28.775 26.8003C28.225 27.1565 27.3313 27.5377 26.0875 27.8815C23.6438 28.5627 20.1562 29.0002 16.25 29.0002C12.3438 29.0002 8.85629 28.5627 6.3938 27.8815C5.15005 27.5377 4.2563 27.1565 3.7063 26.8003C3.4813 26.6503 3.4813 26.3502 3.7063 26.2002C3.83755 26.1127 4.0062 26.0189 4.19995 25.9189C5.1562 25.4377 6.62496 24.9877 8.51245 24.6377H8.5188C8.74266 24.5964 8.94302 24.5038 9.11719 24.3792C8.54201 23.6325 7.90046 22.7744 7.23206 21.8334C5.51721 22.1887 4.00972 22.6583 2.8562 23.2378C2.19995 23.569 1.58752 23.969 1.11877 24.4628C0.650025 24.969 0.25 25.6565 0.25 26.5002C0.25 27.8377 1.21873 28.7565 2.06873 29.3127C2.98747 29.9127 4.2125 30.394 5.59375 30.7753C8.3875 31.544 12.15 32.0002 16.25 32.0002C20.35 32.0002 24.1125 31.544 26.9 30.7753C28.2813 30.394 29.5126 29.9127 30.425 29.3127C31.2813 28.7565 32.2438 27.8377 32.2438 26.5002C32.2438 25.6565 31.8438 24.969 31.3688 24.4628C30.9 23.969 30.2875 23.569 29.6312 23.2378C28.3187 22.5753 26.5375 22.0565 24.5062 21.6877C24.4931 21.6853 24.4804 21.6866 24.4673 21.6846Z" fill="#ED9334"/>
+<path d="M21.1572 24.375C23.6621 21.2402 29.375 13.6426 29.375 9.375C29.375 4.19922 25.1758 0 20 0C14.8242 0 10.625 4.19922 10.625 9.375C10.625 13.6426 16.3379 21.2402 18.8428 24.375C19.4434 25.1221 20.5566 25.1221 21.1572 24.375ZM20 6.25C20.4104 6.24988 20.8169 6.33063 21.1962 6.48762C21.5754 6.64462 21.92 6.87478 22.2103 7.16498C22.5006 7.45517 22.7308 7.79971 22.8879 8.17891C23.045 8.55811 23.1259 8.96454 23.1259 9.375C23.1259 9.78546 23.045 10.1919 22.8879 10.5711C22.7308 10.9503 22.5006 11.2948 22.2103 11.585C21.92 11.8752 21.5754 12.1054 21.1962 12.2624C20.8169 12.4194 20.4104 12.5001 20 12.5C19.5895 12.5001 19.1831 12.4194 18.8038 12.2624C18.4246 12.1054 18.08 11.8752 17.7897 11.585C17.4994 11.2948 17.2692 10.9503 17.1121 10.5711C16.955 10.1919 16.8741 9.78546 16.8741 9.375C16.8741 8.96454 16.955 8.55811 17.1121 8.17891C17.2692 7.79971 17.4994 7.45517 17.7897 7.16498C18.08 6.87478 18.4246 6.64462 18.8038 6.48762C19.1831 6.33063 19.5895 6.24988 20 6.25Z" fill="#ED9334"/>
+<path d="M12.5 1.25C7.32422 1.25 3.125 5.44922 3.125 10.625C3.125 14.8926 8.83789 22.4902 11.3428 25.625C11.9434 26.3721 13.0566 26.3721 13.6572 25.625C14.3048 24.8145 15.168 23.7026 16.0903 22.4302C14.0543 19.7326 11.3943 15.8857 10.1165 12.6082C9.55547 11.9279 9.30799 11.0422 9.43506 10.1697C9.39663 9.89438 9.375 9.62844 9.375 9.375C9.375 5.97578 11.1864 2.99788 13.896 1.354C13.4405 1.28593 12.9744 1.25 12.5 1.25Z" fill="#ED9334"/>
 </g>
 <defs>
-<clipPath id="clip0_1350_13555">
-<rect width="16" height="16" fill="white"/>
+<clipPath id="clip0_2651_21776">
+<rect width="32" height="32" fill="white" transform="translate(0.25)"/>
 </clipPath>
 </defs>
 </svg>

assets/icons/travels-section/trip.svg

@@ -1,19 +1,12 @@
-<svg width="14" height="16" viewBox="0 0 14 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_1350_13581)">
-<path d="M3.37031 15.8205C4.17188 14.8174 6 12.3861 6 11.0205C6 9.36426 4.65625 8.02051 3 8.02051C1.34375 8.02051 0 9.36426 0 11.0205C0 12.3861 1.82812 14.8174 2.62969 15.8205C2.82188 16.0596 3.17812 16.0596 3.37031 15.8205ZM3 10.0205C3.26522 10.0205 3.51957 10.1259 3.70711 10.3134C3.89464 10.5009 4 10.7553 4 11.0205C4 11.2857 3.89464 11.5401 3.70711 11.7276C3.51957 11.9152 3.26522 12.0205 3 12.0205C2.73478 12.0205 2.48043 11.9152 2.29289 11.7276C2.10536 11.5401 2 11.2857 2 11.0205C2 10.7553 2.10536 10.5009 2.29289 10.3134C2.48043 10.1259 2.73478 10.0205 3 10.0205Z" fill="#0F3F4F"/>
-<path d="M1.5 2.25293C0.681977 2.25293 0 2.93491 0 3.75293V4.1228V4.3728C0 4.78843 0.334376 5.1228 0.75 5.1228C1.16562 5.1228 1.5 4.78843 1.5 4.3728V3.75293H2.08173C2.49735 3.75293 2.83173 3.41855 2.83173 3.00293C2.83173 2.58731 2.49735 2.25293 2.08173 2.25293H1.5Z" fill="#0F3F4F"/>
-<path d="M3.83154 3.00293C3.83154 3.41855 4.16592 3.75293 4.58154 3.75293H6.08154C6.49717 3.75293 6.83154 3.41855 6.83154 3.00293C6.83154 2.5873 6.49717 2.25293 6.08154 2.25293H4.58154C4.16592 2.25293 3.83154 2.5873 3.83154 3.00293Z" fill="#0F3F4F"/>
-<path d="M0.75 6.92871C1.16562 6.92871 1.5 6.59434 1.5 6.17871V4.67871C1.5 4.26309 1.16562 3.92871 0.75 3.92871C0.334375 3.92871 0 4.26309 0 4.67871V6.17871C0 6.59434 0.334375 6.92871 0.75 6.92871Z" fill="#0F3F4F"/>
-<path d="M7 10.0098C7 9.59414 7.33437 9.25977 7.75 9.25977H9.25C9.66563 9.25977 10 9.59414 10 10.0098C10 10.4254 9.66563 10.7598 9.25 10.7598H7.75C7.33437 10.7598 7 10.4254 7 10.0098Z" fill="#0F3F4F"/>
-<path d="M12.3317 9.25977C13.1497 9.25977 13.8317 9.94174 13.8317 10.7598V11.1296V11.3796C13.8317 11.7953 13.4973 12.1296 13.0817 12.1296C12.6661 12.1296 12.3317 11.7953 12.3317 11.3796V10.7598H11.75C11.3344 10.7598 11 10.4254 11 10.0098C11 9.59414 11.3344 9.25977 11.75 9.25977H12.3317Z" fill="#0F3F4F"/>
-<path d="M12.3317 16C13.1497 16 13.8317 15.318 13.8317 14.5V14.1301V13.8801C13.8317 13.4645 13.4974 13.1301 13.0817 13.1301C12.6661 13.1301 12.3317 13.4645 12.3317 13.8801V14.5H11.75C11.3344 14.5 11 14.8344 11 15.25C11 15.6656 11.3344 16 11.75 16H12.3317Z" fill="#0F3F4F"/>
-<path d="M10 15.25C10 14.8344 9.66563 14.5 9.25 14.5H7.75C7.33437 14.5 7 14.8344 7 15.25C7 15.6656 7.33437 16 7.75 16H9.25C9.66563 16 10 15.6656 10 15.25Z" fill="#0F3F4F"/>
-<path d="M7 15.25C7 15.6656 7.33437 16 7.75 16H9.25C9.66563 16 10 15.6656 10 15.25C10 14.8344 9.66563 14.5 9.25 14.5H7.75C7.33437 14.5 7 14.8344 7 15.25Z" fill="#0F3F4F"/>
-<path d="M11.3703 7.8C12.1719 6.79688 14 4.36562 14 3C14 1.34375 12.6562 0 11 0C9.34375 0 8 1.34375 8 3C8 4.36562 9.82812 6.79688 10.6297 7.8C10.8219 8.03906 11.1781 8.03906 11.3703 7.8ZM11 2C11.2652 2 11.5196 2.10536 11.7071 2.29289C11.8946 2.48043 12 2.73478 12 3C12 3.26522 11.8946 3.51957 11.7071 3.70711C11.5196 3.89464 11.2652 4 11 4C10.7348 4 10.4804 3.89464 10.2929 3.70711C10.1054 3.51957 10 3.26522 10 3C10 2.73478 10.1054 2.48043 10.2929 2.29289C10.4804 2.10536 10.7348 2 11 2Z" fill="#0F3F4F"/>
+<svg width="33" height="32" viewBox="0 0 33 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2651_21790)">
+<path d="M6.04267 13.4061C7.42034 11.682 10.5624 7.50335 10.5624 5.1562C10.5624 2.30955 8.25285 0 5.4062 0C2.55955 0 0.25 2.30955 0.25 5.1562C0.25 7.50335 3.39206 11.682 4.76973 13.4061C5.10005 13.817 5.71235 13.817 6.04267 13.4061ZM5.4062 3.43747C5.63198 3.43735 5.85557 3.48173 6.06419 3.56805C6.27282 3.65438 6.46239 3.78096 6.62208 3.94057C6.78177 4.10018 6.90845 4.28969 6.99488 4.49827C7.08131 4.70685 7.12579 4.93042 7.12579 5.1562C7.12579 5.38198 7.08131 5.60555 6.99488 5.81413C6.90845 6.02271 6.78177 6.21222 6.62208 6.37183C6.46239 6.53144 6.27282 6.65803 6.06419 6.74435C5.85557 6.83067 5.63198 6.87505 5.4062 6.87493C5.18042 6.87505 4.95683 6.83067 4.74821 6.74435C4.53958 6.65803 4.35001 6.53144 4.19032 6.37183C4.03063 6.21222 3.90395 6.02271 3.81752 5.81413C3.73109 5.60555 3.68661 5.38198 3.68661 5.1562C3.68661 4.93042 3.73109 4.70685 3.81752 4.49827C3.90395 4.28969 4.03063 4.10018 4.19032 3.94057C4.35001 3.78096 4.53958 3.65438 4.74821 3.56805C4.95683 3.48173 5.18042 3.43735 5.4062 3.43747Z" fill="#ED9334"/>
+<path d="M6.23145 31.9211C3.54057 31.4694 1.31694 29.4718 0.494111 26.7667C0.309137 26.1587 0.289431 25.9795 0.283881 24.8548C0.278616 23.7843 0.3013 23.5277 0.44918 22.9868C1.08142 20.6744 2.8329 18.7671 5.02215 18.0071C6.18768 17.6025 5.97638 17.6143 12.9132 17.5664L19.3814 17.5217L19.7044 17.3492C20.2023 17.0834 20.5974 16.6851 20.827 16.2176C21.109 15.6434 21.1216 14.7882 20.8568 14.1963C20.6488 13.7313 20.0863 13.1785 19.5858 12.9473C19.2335 12.7845 19.194 12.7832 13.9837 12.7622L8.73647 12.7409L9.14241 12.2357C9.6121 11.6511 10.4022 10.4626 10.6658 9.94417L10.8475 9.58691H15.1212C19.1593 9.58691 19.4278 9.59527 19.9899 9.73853C21.6197 10.1539 22.8651 11.1357 23.6341 12.6114C24.066 13.4402 24.2477 14.1897 24.2502 15.1525C24.2528 16.1537 24.1039 16.7902 23.6518 17.7097C23.356 18.3114 23.193 18.5316 22.6195 19.1041C21.884 19.8386 21.2324 20.2368 20.2087 20.5776L19.6823 20.7528L13.1389 20.7919C6.6239 20.8308 6.59359 20.8317 6.15683 20.9967C4.90841 21.4683 4.06853 22.3136 3.63897 23.5309C3.39672 24.2174 3.37078 25.2761 3.58075 25.9078C3.80697 26.5883 4.14128 27.1501 4.58809 27.6005C5.0661 28.0823 5.45454 28.3296 6.17284 28.6094L6.67071 28.8034L13.7597 28.8247L20.8487 28.8461L21.1209 29.3865C21.4586 30.0572 21.8856 30.7447 22.4054 31.4546L22.8046 31.9999L14.7 31.991C10.2425 31.9862 6.43168 31.9547 6.23145 31.9211Z" fill="#ED9334"/>
+<path d="M27.7302 31.6923C29.1078 29.9682 32.2499 25.7895 32.2499 23.4423C32.2499 20.5957 29.9404 18.2861 27.0937 18.2861C24.247 18.2861 21.9375 20.5957 21.9375 23.4423C21.9375 25.7895 25.0796 29.9682 26.4572 31.6923C26.7876 32.1031 27.3998 32.1031 27.7302 31.6923ZM27.0937 21.7236C27.3194 21.7235 27.543 21.7679 27.7516 21.8543C27.9602 21.9406 28.1497 22.0672 28.3093 22.2268C28.469 22.3864 28.5956 22.5759 28.682 22.7845C28.7685 22.993 28.8129 23.2166 28.8129 23.4423C28.8129 23.6681 28.7685 23.8916 28.682 24.1002C28.5956 24.3087 28.469 24.4982 28.3093 24.6578C28.1497 24.8174 27.9602 24.944 27.7516 25.0304C27.543 25.1167 27.3194 25.1611 27.0937 25.1611C26.8679 25.1611 26.6444 25.1167 26.4358 25.0304C26.2272 24.944 26.0377 24.8174 25.878 24.6578C25.7184 24.4982 25.5918 24.3087 25.5053 24.1002C25.4189 23.8916 25.3745 23.6681 25.3745 23.4423C25.3745 23.2166 25.4189 22.993 25.5053 22.7845C25.5918 22.5759 25.7184 22.3864 25.878 22.2268C26.0377 22.0672 26.2272 21.9406 26.4358 21.8543C26.6444 21.7679 26.8679 21.7235 27.0937 21.7236Z" fill="#ED9334"/>
 </g>
 <defs>
-<clipPath id="clip0_1350_13581">
-<rect width="14" height="16" fill="white"/>
+<clipPath id="clip0_2651_21790">
+<rect width="32" height="32" fill="white" transform="translate(0.25)"/>
 </clipPath>
 </defs>
 </svg>

src/components/EditNmModal/index.tsx

@@ -0,0 +1,159 @@
+import React from 'react';
+import ReactModal from 'react-native-modal';
+import { View, Text } from 'react-native';
+import { Dropdown } from 'react-native-searchable-dropdown-kj';
+import { Button } from '../Button';
+import { Colors } from 'src/theme';
+import { styles } from './styles';
+import { ButtonVariants } from 'src/types/components';
+import { noOfVisits, qualityOptions } from 'src/screens/InAppScreens/TravelsScreen/utils/constants';
+
+export const EditNmModal = ({
+  isVisible,
+  onClose,
+  modalState,
+  updateModalState,
+  updateNM
+}: {
+  isVisible: boolean;
+  onClose: () => void;
+  modalState: any;
+  updateModalState: (updates: any) => void;
+  updateNM: (region: number, first: number, last: number, visits: number, quality: number) => void;
+}) => {
+  const { years, selectedFirstYear, selectedLastYear, selectedQuality, selectedNoOfVisits, id } =
+    modalState;
+
+  const handleFirstYearChange = (item: { value: number; label: string }) => {
+    updateModalState({
+      selectedFirstYear: item.value,
+      selectedLastYear: item.value
+    });
+  };
+
+  const handleLastYearChange = (item: { value: number; label: string }) => {
+    updateModalState({ selectedLastYear: item.value });
+  };
+
+  const handleQualityChange = (item: { value: number; label: string }) => {
+    updateModalState({ selectedQuality: item });
+  };
+
+  const handleVisitsChange = (item: { value: number; label: string }) => {
+    updateModalState({ selectedNoOfVisits: item.value });
+  };
+
+  const renderOption = (name: string) => (
+    <View style={styles.dropdownOption}>
+      <Text style={styles.placeholderStyle}>{name}</Text>
+    </View>
+  );
+
+  return (
+    <ReactModal
+      isVisible={isVisible}
+      onBackdropPress={onClose}
+      style={styles.modal}
+      statusBarTranslucent={true}
+      presentationStyle="overFullScreen"
+    >
+      <View style={styles.modalContent}>
+        <View style={styles.optionsContainer}>
+          <View style={styles.rowWrapper}>
+            <View style={styles.dropdownWrapper}>
+              <Text style={styles.textSmall}>First visit</Text>
+              <Dropdown
+                style={styles.dropdown}
+                placeholderStyle={styles.placeholderStyle}
+                selectedTextStyle={styles.placeholderStyle}
+                data={years}
+                labelField="label"
+                valueField="value"
+                value={selectedFirstYear}
+                placeholder="First visit"
+                onChange={handleFirstYearChange}
+                containerStyle={{ borderRadius: 4 }}
+                renderItem={(item) => renderOption(item.label)}
+              />
+            </View>
+            <View style={styles.dropdownWrapper}>
+              <Text style={styles.textSmall}>Last visit</Text>
+              <Dropdown
+                style={styles.dropdown}
+                placeholderStyle={styles.placeholderStyle}
+                selectedTextStyle={styles.placeholderStyle}
+                data={years.filter(
+                  (year: { value: number; label: string }) =>
+                    year.value >= selectedFirstYear || year.value === 1
+                )}
+                labelField="label"
+                valueField="value"
+                value={selectedLastYear}
+                placeholder="Last visit"
+                onChange={handleLastYearChange}
+                containerStyle={{ borderRadius: 4 }}
+                renderItem={(item) => renderOption(item.label)}
+              />
+            </View>
+          </View>
+
+          <View style={styles.rowWrapper}>
+            <View style={styles.dropdownWrapper}>
+              <Text style={styles.textSmall}>Best visit quality</Text>
+              <Dropdown
+                style={styles.dropdown}
+                placeholderStyle={styles.placeholderStyle}
+                containerStyle={{ borderRadius: 4 }}
+                selectedTextStyle={styles.placeholderStyle}
+                data={qualityOptions}
+                labelField="name"
+                valueField="id"
+                value={selectedQuality.id}
+                placeholder="Best visit quality"
+                onChange={handleQualityChange}
+                renderItem={(item) => renderOption(item.name)}
+              />
+            </View>
+            <View style={styles.dropdownWrapper}>
+              <Text style={styles.textSmall}>No of visits</Text>
+              <Dropdown
+                style={styles.dropdown}
+                placeholderStyle={styles.placeholderStyle}
+                selectedTextStyle={styles.placeholderStyle}
+                data={noOfVisits}
+                labelField="label"
+                valueField="value"
+                value={selectedNoOfVisits}
+                placeholder="No of visits"
+                onChange={handleVisitsChange}
+                containerStyle={{ borderRadius: 4 }}
+                renderItem={(item) => renderOption(item.label)}
+              />
+            </View>
+          </View>
+        </View>
+
+        <Button
+          children="Done"
+          onPress={() => {
+            updateNM(
+              id,
+              selectedFirstYear,
+              selectedLastYear,
+              selectedNoOfVisits,
+              selectedQuality.id
+            );
+            onClose();
+          }}
+        />
+        <Button
+          children="Close"
+          onPress={onClose}
+          variant={ButtonVariants.OPACITY}
+          containerStyles={styles.closeBtn}
+          textStyles={{ color: Colors.DARK_BLUE }}
+        />
+      </View>
+    </ReactModal>
+  );
+};

src/components/EditNmModal/styles.tsx

@@ -0,0 +1,53 @@
+import { StyleSheet } from 'react-native';
+import { Colors } from 'src/theme';
+
+export const styles = StyleSheet.create({
+  modal: {
+    justifyContent: 'flex-end',
+    margin: 0
+  },
+  textSmall: {
+    color: Colors.DARK_BLUE,
+    fontWeight: '600',
+    fontSize: 12
+  },
+  buttonContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 16
+  },
+  modalContent: {
+    backgroundColor: 'white',
+    borderRadius: 15,
+    paddingHorizontal: 16,
+    gap: 16,
+    paddingVertical: 24
+  },
+  optionsContainer: {
+    gap: 16,
+    marginBottom: 8
+  },
+  closeBtn: { backgroundColor: Colors.WHITE, borderColor: '#B7C6CB' },
+  rowWrapper: {
+    width: '100%',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 16
+  },
+  dropdownWrapper: { gap: 4, flex: 1 },
+  dropdown: {
+    height: 36,
+    backgroundColor: '#F4F4F4',
+    borderRadius: 4,
+    paddingHorizontal: 8
+  },
+  dropdownOption: { paddingVertical: 12, paddingHorizontal: 16 },
+  placeholderStyle: {
+    fontSize: 14,
+    color: Colors.DARK_BLUE,
+    fontWeight: '500'
+  }
+});

src/components/RegionPopup/index.tsx

@@ -1,13 +1,13 @@
 import { useEffect, useRef } from 'react';
-import {
-  Text,
-  TouchableOpacity,
-  View,
-  Image,
-  Animated
-} from 'react-native';
+import { Text, TouchableOpacity, View, Image, Animated } from 'react-native';
+import MarkIcon from 'assets/icons/mark.svg';
+import EditSvg from 'assets/icons/travels-screens/pen-to-square.svg';
+import CalendarSvg from 'assets/icons/travels-screens/calendar.svg';
+import RotateSvg from 'assets/icons/travels-screens/rotate.svg';
 
 import { styles } from './style';
+import React from 'react';
+import { Colors } from 'src/theme';
 
 interface Region {
   id: number;
@@ -19,25 +19,37 @@ interface Region {
 interface RegionPopupProps {
   region: Region;
   userAvatars: string[];
-  onMarkVisited: () => void;
+  userData: any;
+  openEditModal: () => void;
+  updateNM: (region: number, first: number, last: number, visits: number, quality: number) => void;
+  updateDare: (region: number, visits: 0 | 1) => void;
+  disabled?: boolean;
 }
 
-export const RegionPopup: React.FC<RegionPopupProps> = ({ region, userAvatars, onMarkVisited }) => {
+const RegionPopup: React.FC<RegionPopupProps> = ({
+  region,
+  userAvatars,
+  userData,
+  openEditModal,
+  updateNM,
+  updateDare,
+  disabled
+}) => {
   const fadeAnim = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
     Animated.timing(fadeAnim, {
       toValue: 1,
       duration: 300,
-      useNativeDriver: true,
+      useNativeDriver: true
     }).start();
   }, [fadeAnim]);
-  
+
   const splitRegionName = (fullName: string) => {
     const parts = fullName.split(/ – | - /);
     return {
       regionTitle: parts[0],
-      regionSubtitle: parts.length > 1 ? parts[1] : '',
+      regionSubtitle: parts.length > 1 ? parts[1] : ''
     };
   };
 
@@ -50,15 +62,13 @@ export const RegionPopup: React.FC<RegionPopupProps> = ({ region, userAvatars, o
     }
     return number.toString();
   }
-  
+
   const formattedCount = formatNumber(region.visitors_count);
 
   return (
-    <Animated.View style={[styles.popupContainer, {opacity: fadeAnim}]}>
+    <Animated.View style={[styles.popupContainer, { opacity: fadeAnim }]}>
       <View style={styles.regionInfoContainer}>
-        {regionImg && (
-          <Image source={{ uri: regionImg}} style={styles.regionImage} />
-        )}
+        {regionImg && <Image source={{ uri: regionImg }} style={styles.regionImage} />}
         <View style={styles.regionTextContainer}>
           <Text style={styles.regionTitle}>{regionTitle}</Text>
           <Text style={styles.regionSubtitle}>{regionSubtitle}</Text>
@@ -69,27 +79,68 @@ export const RegionPopup: React.FC<RegionPopupProps> = ({ region, userAvatars, o
 
       <View style={styles.bottomContainer}>
         <View style={styles.userContainer}>
-          <View style={styles.userImageContainer}>
-            {userAvatars?.map((avatar, index) => (
-              <Image
-                key={index}
-                source={{ uri: avatar }}
-                style={styles.userImage}
-              />
-            ))}
-            <View style={styles.userCountContainer}>
-              <Text style={styles.userCount}>
-                {formattedCount}
+          {userData?.visited && userData?.first_visit_year > 1 && !disabled && (
+            <View style={styles.infoContent}>
+              <CalendarSvg height={18} width={18} fill={Colors.DARK_BLUE} />
+              <Text style={styles.visitedButtonText}>{userData?.first_visit_year}</Text>
+            </View>
+          )}
+
+          {userData?.visited && userData?.type === 'nm' && !disabled && (
+            <View style={styles.infoContent}>
+              <RotateSvg fill={Colors.DARK_BLUE} />
+              <Text style={styles.visitedButtonText}>
+                {userData.visits >= 10 ? '10+' : userData.no_of_visits}
               </Text>
             </View>
-          </View>
+          )}
+          {(!userData?.visited || userData?.type === 'dare' || disabled) && (
+            <View style={styles.userImageContainer}>
+              {userAvatars?.map((avatar, index) => (
+                <Image key={index} source={{ uri: avatar }} style={styles.userImage} />
+              ))}
+              <View style={styles.userCountContainer}>
+                <Text style={styles.userCount}>{formattedCount}</Text>
+              </View>
+            </View>
+          )}
+        </View>
+        <View style={styles.btnContainer}>
+          {userData?.visited && userData?.type === 'nm' && !disabled ? (
+            <TouchableOpacity onPress={openEditModal} style={styles.editBtn}>
+              <EditSvg width={14} height={14} />
+            </TouchableOpacity>
+          ) : null}
+          <TouchableOpacity
+            style={[
+              styles.btn,
+              userData?.visited && !disabled ? styles.visitedButton : styles.markVisitedButton
+            ]}
+            onPress={() =>
+              userData?.type === 'nm'
+                ? updateNM(
+                    region.id,
+                    userData.visited ? 0 : 1,
+                    userData.visited ? 0 : 1,
+                    userData.visited ? 0 : 1,
+                    3
+                  )
+                : updateDare(region.id, userData.visited ? 0 : 1)
+            }
+          >
+            {userData?.visited && !disabled ? (
+              <View style={styles.visitedContainer}>
+                <MarkIcon width={16} height={16} />
+                <Text style={styles.visitedButtonText}>Visited</Text>
+              </View>
+            ) : (
+              <Text style={[styles.markVisitedButtonText]}>Mark Visited</Text>
+            )}
+          </TouchableOpacity>
         </View>
-        <TouchableOpacity style={styles.markVisitedButton} onPress={onMarkVisited}>
-          <Text style={styles.markVisitedText}>
-            Mark Visited
-          </Text>
-        </TouchableOpacity>
       </View>
     </Animated.View>
   );
 };
+
+export default React.memo(RegionPopup);

src/components/RegionPopup/style.tsx

@@ -61,6 +61,7 @@ export const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     marginLeft: 6,
+    gap: 8
   },
   userImageContainer: {
     flexDirection: 'row',
@@ -92,12 +93,7 @@ export const styles = StyleSheet.create({
   },
   markVisitedButton: {
     backgroundColor: Colors.ORANGE,
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderRadius: 6,
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: 32,
+    borderColor: Colors.ORANGE
   },
   markVisitedText: {
     fontSize: 12,
@@ -106,4 +102,42 @@ export const styles = StyleSheet.create({
     letterSpacing: 0.01,
     lineHeight: 16,
   },
+  infoContent: { flexDirection: 'row', alignItems: 'center', gap: 4 },
+  visitedButtonText: {
+    color: Colors.DARK_BLUE,
+    fontWeight: 'bold',
+    fontSize: 13
+  },
+  btnContainer: {
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    flexDirection: 'row',
+    gap: 8,
+    flex: 1
+  },
+  btn: {
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderRadius: 6,
+    alignItems: 'center',
+    borderWidth: 1
+  },
+  visitedButton: {
+    backgroundColor: 'transparent',
+    borderColor: Colors.BORDER_LIGHT
+  },
+  markVisitedButtonText: {
+    color: 'white',
+    fontWeight: 'bold',
+    fontSize: 13
+  },
+  visitedContainer: { gap: 6, flexDirection: 'row', alignItems: 'center' },
+  editBtn: {
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: Colors.LIGHT_GRAY,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 7
+  },
 });

src/components/index.ts

@@ -15,3 +15,4 @@ export * from './AvatarWithInitials';
 export * from './Loading';
 export * from './WarningModal';
 export * from './HorizontalTabView';
+export * from './EditNmModal';

src/database/tilesService/index.ts

@@ -67,7 +67,6 @@ export async function initTilesDownload(userId: string): Promise<void> {
     {url: '/tiles_nm/grid', type: 'grid', maxZoom: 5},
     {url: '/tiles_nm/regions_mqp', type: 'regions_mqp', maxZoom: 4},
   ];
-  userId && tileTypes.push({url: `/tiles_nm/user_visited/${userId}`, type: 'user_visited', maxZoom: 3});
 
   for (const type of tileTypes) {
     await downloadTiles(type);

src/modules/api/regions/queries/index.ts

@@ -1 +1,3 @@
 export * from './use-post-get-regions';
+export * from './use-post-get-user-data';
+export * from './use-post-get-user-data-dare';

src/modules/api/regions/queries/use-post-get-user-data-dare.tsx

@@ -0,0 +1,21 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { regionQueryKeys } from '../regions-query-keys';
+import { regionsApi, type PostGetUserDataDareReturn } from '../regions-api';
+
+import type { BaseAxiosError } from '../../../../types';
+
+export const fetchUserDataDare = () => {
+  return useMutation<
+    PostGetUserDataDareReturn,
+    BaseAxiosError,
+    { token: string; dare_id: number },
+    PostGetUserDataDareReturn
+  >({
+    mutationKey: regionQueryKeys.getUserDataDare(),
+    mutationFn: async (variables) => {
+      const response = await regionsApi.getUserDataDare(variables.dare_id, variables.token);
+      return response.data;
+    }
+  });
+};

src/modules/api/regions/queries/use-post-get-user-data.tsx

@@ -0,0 +1,21 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { regionQueryKeys } from '../regions-query-keys';
+import { regionsApi, type PostGetUserDataReturn } from '../regions-api';
+
+import type { BaseAxiosError } from '../../../../types';
+
+export const fetchUserData = () => {
+  return useMutation<
+    PostGetUserDataReturn,
+    BaseAxiosError,
+    { token: string; region_id: number },
+    PostGetUserDataReturn
+  >({
+    mutationKey: regionQueryKeys.getUserData(),
+    mutationFn: async (variables) => {
+      const response = await regionsApi.getUserData(variables.region_id, variables.token);
+      return response.data;
+    }
+  });
+};

src/modules/api/regions/regions-api.tsx

@@ -6,6 +6,22 @@ export interface PostGetRegionsReturn extends ResponseType {
   data: { id: number; name: string; flag: string }[];
 }
 
+export interface PostGetUserDataReturn extends ResponseType {
+  first_visit_year: boolean;
+  last_visit_year: boolean;
+  no_of_visits: number;
+  best_visit_quality: number;
+}
+
+export interface PostGetUserDataDareReturn extends ResponseType {
+  visited: boolean;
+  first_visit_year: boolean;
+}
+
 export const regionsApi = {
-  getRegionsWithFlag: () => request.postForm<PostGetRegionsReturn>(API.GET_REGIONS_WITH_FLAGS)
+  getRegionsWithFlag: () => request.postForm<PostGetRegionsReturn>(API.GET_REGIONS_WITH_FLAGS),
+  getUserData: (region_id: number, token: string) =>
+    request.postForm<PostGetUserDataReturn>(API.GET_USER_DATA, { region_id, token }),
+  getUserDataDare: (dare_id: number, token: string) =>
+    request.postForm<PostGetUserDataDareReturn>(API.GET_USER_DATA_DARE, { dare_id, token })
 };

src/modules/api/regions/regions-query-keys.tsx

@@ -1,3 +1,5 @@
 export const regionQueryKeys = {
-  getRegions: () => ['getRegions'] as const
+  getRegions: () => ['getRegions'] as const,
+  getUserData: () => ['getUserData'] as const,
+  getUserDataDare: () => ['getUserDataDare'] as const
 };

src/screens/InAppScreens/MapScreen/index.tsx

@@ -1,4 +1,4 @@
-import { Animated, Linking, Platform, Text, TouchableOpacity, View, Image } from 'react-native';
+import { Animated, Linking, Platform, Text, TouchableOpacity, View } from 'react-native';
 import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
 import MapView, { Geojson, Marker, UrlTile } from 'react-native-maps';
 import * as turf from '@turf/turf';
@@ -16,7 +16,7 @@ import regions from '../../../../assets/geojson/nm2022.json';
 import dareRegions from '../../../../assets/geojson/mqp.json';
 
 import { getFirstDatabase, getSecondDatabase, refreshDatabases } from '../../../db';
-import { LocationPopup, RegionPopup, WarningModal } from '../../../components';
+import { LocationPopup, WarningModal, EditNmModal } from '../../../components';
 
 import { styles } from './style';
 import {
@@ -35,6 +35,12 @@ import { FeatureCollection, ItemSeries, MapScreenProps, Region, Series } from '.
 import { MAP_HOST } from 'src/constants';
 import { useConnection } from 'src/contexts/ConnectionContext';
 import ClusteredMapView from 'react-native-map-clustering';
+import { fetchUserData, fetchUserDataDare } from '@api/regions';
+import RegionPopup from 'src/components/RegionPopup';
+import { usePostSetNmRegionMutation } from '@api/myRegions';
+import { usePostSetDareRegionMutation } from '@api/myDARE';
+import moment from 'moment';
+import { qualityOptions } from '../TravelsScreen/utils/constants';
 
 const tilesBaseURL = `${MAP_HOST}/tiles_osm`;
 const localTileDir = `${FileSystem.cacheDirectory}tiles/background`;
@@ -55,7 +61,11 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
   const netInfo = useConnection();
 
   const { mutateAsync } = fetchSeriesData();
+  const { mutateAsync: mutateUserData } = fetchUserData();
+  const { mutateAsync: mutateUserDataDare } = fetchUserDataDare();
   const { mutate: updateSeriesItem } = usePostSetToggleItem();
+  const { mutate: updateNM } = usePostSetNmRegionMutation();
+  const { mutate: updateDARE } = usePostSetDareRegionMutation();
   const visitedTiles = `${MAP_HOST}/tiles_nm/user_visited/${userId}`;
   const mapRef = useRef<MapView>(null);
 
@@ -73,6 +83,42 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
   const [series, setSeries] = useState<Series[] | null>(null);
   const [processedMarkers, setProcessedMarkers] = useState<ItemSeries[]>([]);
   const [zoomLevel, setZoomLevel] = useState<number>(0);
+  const [userData, setUserData] = useState<any>(null);
+  const [isEditModalVisible, setIsEditModalVisible] = useState(false);
+  const [modalState, setModalState] = useState({
+    selectedFirstYear: 2021,
+    selectedLastYear: 2021,
+    selectedQuality: qualityOptions[2],
+    selectedNoOfVisits: 1,
+    years: [],
+    id: null
+  });
+
+  const handleModalStateChange = (updates: { [key: string]: any }) => {
+    setModalState((prevState) => ({ ...prevState, ...updates }));
+  };
+
+  const handleOpenEditModal = () => {
+    handleModalStateChange({
+      selectedFirstYear: userData?.first_visit_year,
+      selectedLastYear: userData?.last_visit_year,
+      selectedQuality:
+        qualityOptions.find((quality) => quality.id === userData?.best_visit_quality) ||
+        qualityOptions[2],
+      selectedNoOfVisits: userData?.no_of_visits || 1,
+      id: regionData?.id
+    });
+    setIsEditModalVisible(true);
+  };
+
+  useEffect(() => {
+    const currentYear = moment().year();
+    let yearSelector: { label: string; value: number }[] = [{ label: 'visited', value: 1 }];
+    for (let i = currentYear; i >= 1951; i--) {
+      yearSelector.push({ label: i.toString(), value: i });
+    }
+    handleModalStateChange({ years: yearSelector });
+  }, []);
 
   const cancelTokenRef = useRef(false);
   const currentTokenRef = useRef(0);
@@ -294,6 +340,14 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
       mapRef.current?.animateToRegion(region, 1000);
 
       if (tableName === 'regions') {
+        await mutateUserData(
+          { region_id: +id, token: String(token) },
+          {
+            onSuccess: (data) => {
+              setUserData({ type: 'nm', ...data });
+            }
+          }
+        );
         await mutateAsync(
           { regions: JSON.stringify([id]), token: String(token) },
           {
@@ -306,6 +360,14 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
           }
         );
       } else {
+        await mutateUserDataDare(
+          { dare_id: +id, token: String(token) },
+          {
+            onSuccess: (data) => {
+              setUserData({ type: 'dare', ...data });
+            }
+          }
+        );
         setProcessedMarkers([]);
       }
     } else {
@@ -318,7 +380,7 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
       urlTemplate={`${url}/{z}/{x}/{y}`}
       maximumZ={15}
       maximumNativeZ={13}
-      tileCachePath={`${cacheDir}`}
+      tileCachePath={cacheDir !== localVisitedDir ? `${cacheDir}` : undefined}
       shouldReplaceMapContent
       minimumZ={0}
       offlineMode={!isConnected}
@@ -347,6 +409,7 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
     setRegionPopupVisible(false);
     setMarkers([]);
     setSelectedRegion(null);
+    setRegionData(null);
     const boundaries = await mapRef.current?.getMapBoundaries();
     const { northEast, southWest } = boundaries || {};
 
@@ -384,7 +447,7 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
     },
     [token, updateSeriesItem]
   );
-  
+
   const renderMarkers = () => {
     return markers.map((marker, idx) => {
       const coordinate = { latitude: marker.pointJSON[0], longitude: marker.pointJSON[1] };
@@ -405,6 +468,56 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
     });
   };
 
+  const handleUpdateNM = useCallback(
+    (region: number, first: number, last: number, visits: number, quality: number) => {
+      if (!token) {
+        setIsWarningModalVisible(true);
+        return;
+      }
+      const updatedNM = {
+        ...userData,
+        first_visit_year: first,
+        last_visit_year: last,
+        best_visit_quality: quality,
+        no_of_visits: visits,
+        visited: visits > 0 ? true : false
+      };
+
+      const updatedNMData = {
+        token,
+        region,
+        first,
+        last,
+        visits,
+        quality
+      };
+
+      updateNM(updatedNMData);
+      updatedNM && setUserData(updatedNM);
+    },
+    [userData, token]
+  );
+
+  const handleUpdateDare = useCallback(
+    (region: number, visits: 0 | 1) => {
+      if (!token) {
+        setIsWarningModalVisible(true);
+        return;
+      }
+      const updatedDARE = { ...userData, visited: visits > 0 ? true : false };
+
+      const updatedDareData = {
+        token,
+        region,
+        visits
+      };
+
+      updateDARE(updatedDareData);
+      updatedDARE && setUserData(updatedDARE);
+    },
+    [userData, token]
+  );
+
   return (
     <View style={styles.container}>
       <ClusteredMapView
@@ -476,13 +589,11 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
           <RegionPopup
             region={regionData}
             userAvatars={userAvatars}
-            onMarkVisited={() => {
-              if (!token) {
-                setIsWarningModalVisible(true);
-              } else {
-                console.log('Mark as visited');
-              }
-            }}
+            userData={userData}
+            openEditModal={handleOpenEditModal}
+            updateNM={handleUpdateNM}
+            updateDare={handleUpdateDare}
+            disabled={!token || !isConnected}
           />
         </>
       ) : (
@@ -514,6 +625,13 @@ const MapScreen: React.FC<MapScreenProps> = ({ navigation }) => {
         isVisible={isWarningModalVisible}
         onClose={() => setIsWarningModalVisible(false)}
       />
+      <EditNmModal
+        isVisible={isEditModalVisible}
+        onClose={() => setIsEditModalVisible(false)}
+        modalState={modalState}
+        updateModalState={handleModalStateChange}
+        updateNM={handleUpdateNM}
+      />
     </View>
   );
 };

src/screens/InAppScreens/TravellersScreen/index.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
 
 import { Colors } from '../../../theme';
-import { PageWrapper, MenuButton } from '../../../components';
-
-import { MenuButtonType } from '../../../types/components';
+import { PageWrapper } from '../../../components';
+import { NAVIGATION_PAGES } from 'src/types';
 
 import UserGroupIcon from '../../../../assets/icons/user-group.svg';
 import CrownIcon from '../../../../assets/icons/crown.svg';
@@ -14,82 +15,71 @@ import MemoriamIcon from '../../../../assets/icons/monument.svg';
 import ScrollIcon from '../../../../assets/icons/scroll.svg';
 import TrophyIcon from '../../../../assets/icons/trophy.svg';
 
-import { NAVIGATION_PAGES } from '../../../types';
+const TravellersScreen = () => {
+  const navigation = useNavigation();
 
-const buttons: MenuButtonType[] = [
-  {
-    label: 'Master Ranking',
-    icon: <UserGroupIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
-    buttonFn: (navigation) => {
-      navigation.navigate(NAVIGATION_PAGES.MASTER_RANKING);
-    }
-  },
-  {
-    label: 'UN Masters',
-    icon: <CrownIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
-    buttonFn: (navigation) => {
-      navigation.navigate(NAVIGATION_PAGES.UN_MASTERS);
-    }
-  },
-  {
-    label: 'LPI Ranking',
-    icon: <IDCardIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
-    buttonFn: (navigation) => {
-      navigation.navigate(NAVIGATION_PAGES.LPI_RANKING);
-    }
-  },
-  {
-    label: 'Series Ranking',
-    icon: <StreetPeopleIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
-    buttonFn: (navigation) => {
-      navigation.navigate(NAVIGATION_PAGES.SERIES_RANKING);
-    }
-  },
-  {
-    label: 'Statistics',
-    icon: <ChartPieIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
-    buttonFn: (navigation) => {
-      navigation.navigate(NAVIGATION_PAGES.STATISTICS);
-    }
-  },
-  {
-    label: 'In Memoriam',
-    icon: <MemoriamIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
-    buttonFn: (navigation) => {
-      navigation.navigate(NAVIGATION_PAGES.IN_MEMORIAM);
-    }
-  },
-  {
-    label: 'In History',
-    icon: <ScrollIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
-    buttonFn: (navigation) => {
-      navigation.navigate(NAVIGATION_PAGES.IN_HISTORY);
-    }
-  },
-  {
-    label: 'Triumphs',
-    icon: <TrophyIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
-    buttonFn: (navigation) => {
-      navigation.navigate(NAVIGATION_PAGES.TRIUMPHS);
-    }
-  }
-];
+  const buttons = [
+    { label: 'Master Ranking', icon: UserGroupIcon, page: NAVIGATION_PAGES.MASTER_RANKING },
+    { label: 'UN Masters', icon: CrownIcon, page: NAVIGATION_PAGES.UN_MASTERS },
+    { label: 'LPI Ranking', icon: IDCardIcon, page: NAVIGATION_PAGES.LPI_RANKING },
+    { label: 'Series Ranking', icon: StreetPeopleIcon, page: NAVIGATION_PAGES.SERIES_RANKING },
+    { label: 'Statistics', icon: ChartPieIcon, page: NAVIGATION_PAGES.STATISTICS },
+    { label: 'In Memoriam', icon: MemoriamIcon, page: NAVIGATION_PAGES.IN_MEMORIAM },
+    { label: 'In History', icon: ScrollIcon, page: NAVIGATION_PAGES.IN_HISTORY },
+    { label: 'Triumphs', icon: TrophyIcon, page: NAVIGATION_PAGES.TRIUMPHS }
+  ];
+
+  const renderItem = ({ item }: { item: { label: string; icon: any; page: string } }) => (
+    <TouchableOpacity
+      style={{ alignItems: 'center' }}
+      onPress={() => navigation.navigate(item.page as never)}
+    >
+      <View style={styles.button}>
+        <item.icon fill={Colors.ORANGE} width={110} height={32} />
+        <Text style={styles.label}>{item.label}</Text>
+      </View>
+    </TouchableOpacity>
+  );
 
-const TravellersScreen = () => {
   return (
     <PageWrapper>
-      {buttons.map((button, index) => (
-        <MenuButton
-          label={button.label}
-          icon={button.icon}
-          buttonFn={button.buttonFn}
-          key={'ranking-button-' + index}
-        />
-      ))}
+      <FlatList
+        data={buttons}
+        renderItem={renderItem}
+        keyExtractor={(item, index) => 'key' + index}
+        numColumns={2}
+        contentContainerStyle={styles.container}
+        style={{ flex: 1, paddingTop: 16 }}
+        columnWrapperStyle={{ justifyContent: 'space-between' }}
+      />
     </PageWrapper>
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'space-between',
+    paddingHorizontal: 24,
+    paddingVertical: 8,
+    gap: 32,
+    width: '100%'
+  },
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 16,
+    paddingHorizontal: 8,
+    backgroundColor: Colors.WHITE,
+    borderRadius: 16,
+    gap: 12
+  },
+  label: {
+    color: Colors.DARK_BLUE,
+    fontSize: 13,
+    fontWeight: 'bold'
+  }
+});
+
 export interface Ranking {
   user_id: number;
   score_dare: number;

src/screens/InAppScreens/TravelsScreen/RegionsScreen/index.tsx

@@ -1,12 +1,10 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { View, Text, TouchableOpacity, FlatList } from 'react-native';
-import ReactModal from 'react-native-modal';
 import * as Progress from 'react-native-progress';
 import { useFocusEffect } from '@react-navigation/native';
-import { Dropdown } from 'react-native-searchable-dropdown-kj';
 import moment from 'moment';
 
-import { Button, Header, PageWrapper } from 'src/components';
+import { EditNmModal, Header, PageWrapper } from 'src/components';
 import { CustomButton } from '../Components';
 import { NmRegionItem } from '../Components/MyRegionsItems/NmRegionItem';
 import { RegionItem } from '../Components/MyRegionsItems/RegionItem';
@@ -22,11 +20,9 @@ import {
   usePostSetNmRegionMutation,
   usePostSetTCCRegionMutation
 } from '@api/myRegions';
-import { ButtonVariants } from 'src/types/components';
-import { noOfVisits, qualityOptions } from '../utils/constants';
+import { qualityOptions } from '../utils/constants';
 
 import ChevronIcon from 'assets/icons/travels-screens/down-arrow.svg';
-import AddImgSvg from 'assets/icons/travels-screens/add-img.svg';
 
 const RegionsScreen = () => {
   const token = storage.get('token', StoreType.STRING) as string;
@@ -39,7 +35,6 @@ const RegionsScreen = () => {
   const { data: regionsQe } = useGetRegionQeQuery(selectedMega.id, token, true);
   const [total, setTotal] = useState(0);
   const [isEditModalVisible, setIsEditModalVisible] = useState(false);
-  const [currentItem, setCurrentItem] = useState<NmRegion | null>(null);
   const [contentIndex, setContentIndex] = useState(0);
   const [nmRegions, setNmRegions] = useState<NmRegion[] | null>(null);
   const [filteredNmRegions, setFilteredNmRegions] = useState<NmRegion[] | null>(null);
@@ -47,27 +42,44 @@ const RegionsScreen = () => {
   const [filteredTccRegions, setFilteredTccRegions] = useState<TCCRegion[] | null>(null);
   const { mutate: updateNM } = usePostSetNmRegionMutation();
   const { mutate: updateTCC } = usePostSetTCCRegionMutation();
-  const [selectedQuality, setSelectedQuality] = useState(qualityOptions[2]);
-  const [selectedFirstYear, setSelectedFirstYear] = useState(1);
-  const [selectedLastYear, setSelectedLastYear] = useState(1);
-  const [years, setYears] = useState<{ label: string; value: number }[]>([]);
-  const [selectedNoOfVisits, setSelectedNoOfVisits] = useState(1);
+  const [modalState, setModalState] = useState({
+    selectedFirstYear: 2021,
+    selectedLastYear: 2021,
+    selectedQuality: qualityOptions[2],
+    selectedNoOfVisits: 1,
+    years: [],
+    id: null
+  });
+
+  useEffect(() => {
+    const currentYear = moment().year();
+    let yearSelector: { label: string; value: number }[] = [{ label: 'visited', value: 1 }];
+    for (let i = currentYear; i >= 1951; i--) {
+      yearSelector.push({ label: i.toString(), value: i });
+    }
+    handleModalStateChange({ years: yearSelector });
+  }, []);
+
+  const handleModalStateChange = (updates: { [key: string]: any }) => {
+    setModalState((prevState) => ({ ...prevState, ...updates }));
+  };
 
   const handleOpenEditModal = (item: NmRegion) => {
-    setCurrentItem(item);
-    setSelectedFirstYear(item.year);
-    setSelectedLastYear(item.last);
-    setSelectedNoOfVisits(item.visits);
-    setSelectedQuality(
-      qualityOptions.find((quality) => quality.id === item.quality) || qualityOptions[2]
-    );
+    handleModalStateChange({
+      selectedFirstYear: item.year,
+      selectedLastYear: item.last,
+      selectedQuality:
+        qualityOptions.find((quality) => quality.id === item.quality) || qualityOptions[2],
+      selectedNoOfVisits: item.visits || 1,
+      id: item.id
+    });
     setIsEditModalVisible(true);
   };
 
   const handleUpdateNM = useCallback(
-    (region: number, first: number, last: number, visits: number, quality: number) => {
+    (id: number, first: number, last: number, visits: number, quality: number) => {
       const updatedNM = nmRegions?.map((item) => {
-        if (item.id === region) {
+        if (item.id === id) {
           return {
             ...item,
             year: first,
@@ -82,7 +94,7 @@ const RegionsScreen = () => {
 
       const updatedNMData = {
         token,
-        region,
+        region: id,
         first,
         last,
         visits,
@@ -160,13 +172,6 @@ const RegionsScreen = () => {
     useCallback(() => {
       if (megaregions && megaregions.result === 'OK') {
         setSelectedMega(megaregions.data[1]);
-
-        const currentYear = moment().year();
-        let yearSelector: { label: string; value: number }[] = [{ label: 'visited', value: 1 }];
-        for (let i = currentYear; i >= 1951; i--) {
-          yearSelector.push({ label: i.toString(), value: i });
-        }
-        setYears(yearSelector);
       }
     }, [megaregions])
   );
@@ -180,12 +185,6 @@ const RegionsScreen = () => {
     <NmRegionItem item={item} openEditModal={handleOpenEditModal} updateNM={handleUpdateNM} />
   );
 
-  const renderOption = (name: string) => (
-    <View style={styles.dropdownOption}>
-      <Text style={styles.placeholderStyle}>{name}</Text>
-    </View>
-  );
-
   return (
     <PageWrapper>
       <Header label="Regions" />
@@ -261,117 +260,13 @@ const RegionsScreen = () => {
         data={megaregions?.data ?? []}
       />
 
-      <ReactModal
+      <EditNmModal
         isVisible={isEditModalVisible}
-        onBackdropPress={() => setIsEditModalVisible(false)}
-        style={styles.modal}
-        statusBarTranslucent={true}
-        presentationStyle="overFullScreen"
-      >
-        <View style={styles.modalContent}>
-          <View style={styles.optionsContainer}>
-            <View style={styles.rowWrapper}>
-              <View style={styles.dropdownWrapper}>
-                <Text style={styles.textSmall}>First visit</Text>
-                <Dropdown
-                  style={styles.dropdown}
-                  placeholderStyle={styles.placeholderStyle}
-                  selectedTextStyle={styles.placeholderStyle}
-                  data={years}
-                  labelField="label"
-                  valueField="value"
-                  value={selectedFirstYear}
-                  placeholder="First visit"
-                  onChange={(item) => {
-                    setSelectedFirstYear(item.value);
-                    setSelectedLastYear(item.value);
-                  }}
-                  containerStyle={{ borderRadius: 4 }}
-                  renderItem={(item) => renderOption(item.label)}
-                />
-              </View>
-              <View style={styles.dropdownWrapper}>
-                <Text style={styles.textSmall}>Last visit</Text>
-                <Dropdown
-                  style={styles.dropdown}
-                  placeholderStyle={styles.placeholderStyle}
-                  selectedTextStyle={styles.placeholderStyle}
-                  data={years.filter((item) => item.value >= selectedFirstYear || item.value === 1)}
-                  labelField="label"
-                  valueField="value"
-                  value={selectedLastYear}
-                  placeholder="Last visit"
-                  onChange={(item) => setSelectedLastYear(item.value)}
-                  containerStyle={{ borderRadius: 4 }}
-                  renderItem={(item) => renderOption(item.label)}
-                />
-              </View>
-            </View>
-            <View style={styles.rowWrapper}>
-              <View style={styles.dropdownWrapper}>
-                <Text style={styles.textSmall}>Best visit quality</Text>
-                <Dropdown
-                  style={styles.dropdown}
-                  placeholderStyle={styles.placeholderStyle}
-                  containerStyle={{ borderRadius: 4 }}
-                  selectedTextStyle={styles.placeholderStyle}
-                  data={qualityOptions}
-                  labelField="name"
-                  valueField="id"
-                  value={selectedQuality.id}
-                  placeholder="Best visit quality"
-                  onChange={(item) => setSelectedQuality(item)}
-                  renderItem={(item) => renderOption(item.name)}
-                />
-              </View>
-              <View style={styles.dropdownWrapper}>
-                <Text style={styles.textSmall}>No of visits</Text>
-                <Dropdown
-                  style={styles.dropdown}
-                  placeholderStyle={styles.placeholderStyle}
-                  selectedTextStyle={styles.placeholderStyle}
-                  data={noOfVisits}
-                  labelField="label"
-                  valueField="value"
-                  value={selectedNoOfVisits}
-                  placeholder="No of visits"
-                  onChange={(item) => setSelectedNoOfVisits(item.value)}
-                  containerStyle={{ borderRadius: 4 }}
-                  renderItem={(item) => renderOption(item.label)}
-                />
-              </View>
-            </View>
-          </View>
-          {/* <View style={styles.photosContent}>
-            <Text style={styles.textMedium}>Photos</Text>
-            <TouchableOpacity style={styles.addImgBtn}>
-              <AddImgSvg fill={Colors.DARK_BLUE} />
-              <Text style={styles.textSmall}>Add</Text>
-            </TouchableOpacity>
-          </View> */}
-          <Button
-            children="Done"
-            onPress={() => {
-              setIsEditModalVisible(false);
-              currentItem?.id &&
-                handleUpdateNM(
-                  currentItem.id,
-                  selectedFirstYear,
-                  selectedLastYear,
-                  selectedNoOfVisits,
-                  selectedQuality.id
-                );
-            }}
-          />
-          <Button
-            children="Close"
-            onPress={() => setIsEditModalVisible(false)}
-            variant={ButtonVariants.OPACITY}
-            containerStyles={styles.closeBtn}
-            textStyles={{ color: Colors.DARK_BLUE }}
-          />
-        </View>
-      </ReactModal>
+        onClose={() => setIsEditModalVisible(false)}
+        modalState={modalState}
+        updateModalState={handleModalStateChange}
+        updateNM={handleUpdateNM}
+      />
     </PageWrapper>
   );
 };

src/screens/InAppScreens/TravelsScreen/RegionsScreen/styles.tsx

@@ -2,10 +2,6 @@ import { StyleSheet } from 'react-native';
 import { Colors } from 'src/theme';
 
 export const styles = StyleSheet.create({
-  modal: {
-    justifyContent: 'flex-end',
-    margin: 0
-  },
   megaSelector: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -38,49 +34,5 @@ export const styles = StyleSheet.create({
     alignItems: 'center',
     marginBottom: 16
   },
-  modalContent: {
-    backgroundColor: 'white',
-    borderRadius: 15,
-    paddingHorizontal: 16,
-    gap: 16,
-    paddingVertical: 24
-  },
-  optionsContainer: {
-    gap: 16,
-    marginBottom: 8
-  },
-  closeBtn: { backgroundColor: Colors.WHITE, borderColor: '#B7C6CB' },
-  rowWrapper: {
-    width: '100%',
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    gap: 16
-  },
-  dropdownWrapper: { gap: 4, flex: 1 },
-  dropdown: {
-    height: 36,
-    backgroundColor: '#F4F4F4',
-    borderRadius: 4,
-    paddingHorizontal: 8
-  },
-  dropdownOption: { paddingVertical: 12, paddingHorizontal: 16 },
-  placeholderStyle: {
-    fontSize: 14,
-    color: Colors.DARK_BLUE,
-    fontWeight: '500'
-  },
   textMedium: { fontWeight: 'bold', fontSize: 14, color: Colors.DARK_BLUE },
-  photosContent: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
-  addImgBtn: {
-    flexDirection: 'row',
-    gap: 4,
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 7,
-    borderWidth: 1,
-    borderColor: Colors.BORDER_LIGHT,
-    borderRadius: 6
-  }
 });

src/screens/InAppScreens/TravelsScreen/index.tsx

@@ -1,8 +1,11 @@
 import React, { useState } from 'react';
+import { View, Text, FlatList, TouchableOpacity, StyleSheet } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
 
 import { Colors } from '../../../theme';
-import { PageWrapper, MenuButton, WarningModal } from '../../../components';
-import { MenuButtonType } from '../../../types/components';
+import { PageWrapper, WarningModal } from '../../../components';
+import { NAVIGATION_PAGES } from 'src/types';
+import { storage, StoreType } from '../../../storage';
 
 import FlagsIcon from '../../../../assets/icons/travels-section/flags.svg';
 import RegionsIcon from '../../../../assets/icons/travels-section/regions.svg';
@@ -12,105 +15,51 @@ import EarthIcon from '../../../../assets/icons/travels-section/earth.svg';
 import TripIcon from '../../../../assets/icons/travels-section/trip.svg';
 import ImagesIcon from '../../../../assets/icons/travels-section/images.svg';
 
-import { NAVIGATION_PAGES } from 'src/types';
-import { storage, StoreType } from '../../../storage';
-
 const TravelsScreen = () => {
   const [isModalVisible, setIsModalVisible] = useState(false);
   const token = storage.get('token', StoreType.STRING);
+  const navigation = useNavigation();
 
-  const buttons: MenuButtonType[] = [
-    {
-      label: 'Countries',
-      icon: <FlagsIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
-      buttonFn: (navigation) => {
-        if (!token) {
-          setIsModalVisible(true);
-        } else {
-          navigation.navigate(NAVIGATION_PAGES.COUNTRIES);
-        }
-      }
-    },
-    {
-      label: 'Regions',
-      icon: <RegionsIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
-      buttonFn: (navigation) => {
-        if (!token) {
-          setIsModalVisible(true);
-        } else {
-          navigation.navigate(NAVIGATION_PAGES.REGIONS);
-        }
-      }
-    },
-    {
-      label: 'DARE',
-      icon: <MapLocationIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
-      buttonFn: (navigation) => {
-        if (!token) {
-          setIsModalVisible(true);
-        } else {
-          navigation.navigate(NAVIGATION_PAGES.DARE);
-        }
-      }
-    },
-    {
-      label: 'Series',
-      icon: <SeriesIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
-      buttonFn: (navigation) => {
-        if (!token) {
-          setIsModalVisible(true);
-        } else {
-          navigation.navigate(NAVIGATION_PAGES.SERIES);
-        }
-      }
-    },
-    {
-      label: 'Earth',
-      icon: <EarthIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
-      buttonFn: (navigation) => {
-        if (!token) {
-          setIsModalVisible(true);
-        } else {
-          navigation.navigate(NAVIGATION_PAGES.EARTH);
-        }
-      }
-    },
-    {
-      label: 'Trips',
-      icon: <TripIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
-      buttonFn: (navigation) => {
-        if (!token) {
-          setIsModalVisible(true);
-        } else {
-          navigation.navigate(NAVIGATION_PAGES.TRIPS);
-        }
-      }
-    },
-    {
-      label: 'Photos',
-      icon: <ImagesIcon fill={Colors.DARK_BLUE} width={20} height={20} />,
-      buttonFn: (navigation) => {
-        if (!token) {
-          setIsModalVisible(true);
-        } else {
-          navigation.navigate(NAVIGATION_PAGES.PHOTOS);
-        }
-      }
-    }
+  const buttons = [
+    { label: 'Countries', icon: FlagsIcon, page: NAVIGATION_PAGES.COUNTRIES },
+    { label: 'Regions', icon: RegionsIcon, page: NAVIGATION_PAGES.REGIONS },
+    { label: 'DARE', icon: MapLocationIcon, page: NAVIGATION_PAGES.DARE },
+    { label: 'Series', icon: SeriesIcon, page: NAVIGATION_PAGES.SERIES },
+    { label: 'Earth', icon: EarthIcon, page: NAVIGATION_PAGES.EARTH },
+    { label: 'Trips', icon: TripIcon, page: NAVIGATION_PAGES.TRIPS },
+    { label: 'Photos', icon: ImagesIcon, page: NAVIGATION_PAGES.PHOTOS }
   ];
 
+  const handlePress = (page: string) => {
+    if (!token) {
+      setIsModalVisible(true);
+    } else {
+      navigation.navigate(page as never);
+    }
+  };
+
+  const renderItem = ({ item }: { item: { label: string; icon: any; page: string } }) => (
+    <TouchableOpacity style={{ alignItems: 'center' }} onPress={() => handlePress(item.page)}>
+      <View style={styles.button}>
+        <item.icon fill={Colors.ORANGE} width={110} height={32} />
+        <Text style={styles.label}>{item.label}</Text>
+      </View>
+    </TouchableOpacity>
+  );
+
   return (
     <PageWrapper>
-      {buttons.map((button, index) => (
-        <MenuButton
-          label={button.label}
-          icon={button.icon}
-          buttonFn={button.buttonFn}
-          key={'travels-button-' + index}
-        />
-      ))}
+      <FlatList
+        data={buttons}
+        renderItem={renderItem}
+        keyExtractor={(item, index) => 'key' + index}
+        numColumns={2}
+        contentContainerStyle={styles.container}
+        style={{ flex: 1, paddingTop: 16 }}
+        columnWrapperStyle={{ justifyContent: 'space-between' }}
+      />
       <WarningModal
-        type={'unauthorized'}
+        type="unauthorized"
         isVisible={isModalVisible}
         onClose={() => setIsModalVisible(false)}
       />
@@ -118,4 +67,28 @@ const TravelsScreen = () => {
   );
 };
 
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'space-between',
+    paddingHorizontal: 24,
+    paddingVertical: 8,
+    gap: 32,
+    width: '100%'
+  },
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 16,
+    paddingHorizontal: 8,
+    backgroundColor: Colors.WHITE,
+    borderRadius: 16,
+    gap: 12
+  },
+  label: {
+    color: Colors.DARK_BLUE,
+    fontSize: 13,
+    fontWeight: 'bold'
+  }
+});
+
 export default TravelsScreen;

src/types/api.ts

@@ -74,7 +74,9 @@ export enum API_ENDPOINT {
   GET_TRIUMPHS_DATES = 'get-dates-app',
   GET_TRIUMPHS_DATA = 'get-data-app',
   GET_SERIES_GROUPS_RANKING = 'get-series-groups-ranking',
-  GET_SERIES_RANKING = 'get-series-ranking'
+  GET_SERIES_RANKING = 'get-series-ranking',
+  GET_USER_DATA = 'get-user-data-app',
+  GET_USER_DATA_DARE = 'get-user-data-dare-app'
 }
 
 export enum API {
@@ -133,7 +135,9 @@ export enum API {
   GET_TRIUMPHS_DATES = `${API_ROUTE.TRIUMPHS}/${API_ENDPOINT.GET_TRIUMPHS_DATES}`,
   GET_TRIUMPHS_DATA = `${API_ROUTE.TRIUMPHS}/${API_ENDPOINT.GET_TRIUMPHS_DATA}`,
   GET_SERIES_GROUPS_RANKING = `${API_ROUTE.SERIES_RANKING}/${API_ENDPOINT.GET_SERIES_GROUPS_RANKING}`,
-  GET_SERIES_RANKING = `${API_ROUTE.SERIES_RANKING}/${API_ENDPOINT.GET_SERIES_RANKING}`
+  GET_SERIES_RANKING = `${API_ROUTE.SERIES_RANKING}/${API_ENDPOINT.GET_SERIES_RANKING}`,
+  GET_USER_DATA = `${API_ROUTE.REGIONS}/${API_ENDPOINT.GET_USER_DATA}`,
+  GET_USER_DATA_DARE = `${API_ROUTE.REGIONS}/${API_ENDPOINT.GET_USER_DATA_DARE}`
 }
 
 export type BaseAxiosError = AxiosError;