@lmnto/h-mall-shared 1.0.1

package/shared/components/icons/BrandIcon.tsx

@@ -0,0 +1,97 @@
+import React from "react";
+
+import { IconProps } from "../../types/icon";
+
+export function BrandIcon({ width = 592, height = 138 }: IconProps) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox={`0 0 592 138`}
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        width: width,
+        height: height,
+        minWidth: width,
+        minHeight: height,
+        maxWidth: width,
+        maxHeight: height,
+        flexShrink: 0,
+      }}
+    >
+      <g clipPath="url(#clip0_4002_513)">
+        <path
+          d="M64.3601 107.91L73.4701 114.98V66.5V57.76V29.98L64.3601 22.91V107.91Z"
+          fill="white"
+        />
+        <path
+          d="M106.67 22.91V22.93L106.66 22.91L85.3 59.41L89.95 69.96L106.67 39.63V107.91L115.78 114.98V66.5V57.76V29.98L106.67 22.91Z"
+          fill="white"
+        />
+        <path
+          d="M30.36 57.76V29.98L21.25 22.91V107.91L30.36 114.98V69.96H39.74H43.6H51.94L59.01 60.86H30.36V57.76Z"
+          fill="white"
+        />
+        <g clipPath="url(#clip1_4002_513)">
+          <path
+            d="M102.27 0H35.62C15.9476 0 0 15.9476 0 35.62V102.27C0 121.942 15.9476 137.89 35.62 137.89H102.27C121.942 137.89 137.89 121.942 137.89 102.27V35.62C137.89 15.9476 121.942 0 102.27 0Z"
+            fill="url(#paint0_linear_4002_513)"
+          />
+          <path
+            d="M64.3601 107.91L73.4701 114.98V66.5V57.76V29.98L64.3601 22.91V107.91Z"
+            fill="white"
+          />
+          <path
+            d="M106.67 22.91V22.93L106.66 22.91L85.3 59.41L89.95 69.96L106.67 39.63V107.91L115.78 114.98V66.5V57.76V29.98L106.67 22.91Z"
+            fill="white"
+          />
+          <path
+            d="M30.36 57.76V29.98L21.25 22.91V107.91L30.36 114.98V69.96H39.74H43.6H51.94L59.01 60.86H30.36V57.76Z"
+            fill="white"
+          />
+        </g>
+      </g>
+      <path
+        d="M461.472 110.817H452.832V32.8167H461.472V110.817Z"
+        fill="#1E1E1E"
+      />
+      <path
+        d="M437.682 110.817H429.042V32.8167H437.682V110.817Z"
+        fill="#1E1E1E"
+      />
+      <path
+        d="M405.27 55.6166H414.03V110.817H405.27V100.857C401.07 107.457 394.11 111.777 384.75 111.777C369.03 111.777 357.87 99.6566 357.87 83.2166C357.87 66.6566 369.03 54.7766 384.75 54.7766C394.11 54.7766 401.07 58.9766 405.27 65.5766V55.6166ZM385.83 103.497C397.71 103.497 405.27 94.9766 405.27 83.2166C405.27 71.4566 397.71 63.0566 385.83 63.0566C374.07 63.0566 366.27 71.4566 366.27 83.2166C366.27 94.9766 374.07 103.497 385.83 103.497Z"
+        fill="#1E1E1E"
+      />
+      <path
+        d="M344.413 32.8167V110.817H335.413V50.2167L310.453 101.217H304.213L279.253 50.2167V110.817H270.253V32.8167H279.853L307.333 87.5367L334.813 32.8167H344.413Z"
+        fill="#1E1E1E"
+      />
+      <path
+        d="M246.142 32.8167H255.262V110.817H246.142V76.2566H203.902V110.817H194.902V32.8167H203.902V67.4966H246.142V32.8167Z"
+        fill="#1E1E1E"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_4002_513"
+          x1="0"
+          y1="137.89"
+          x2="137.89"
+          y2="0"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.0762988" stopColor="#00F1C9" />
+          <stop offset="0.616036" stopColor="#0094E3" />
+          <stop offset="0.921648" stopColor="#0039FD" />
+        </linearGradient>
+        <clipPath id="clip0_4002_513">
+          <rect width="137.89" height="137.89" fill="white" />
+        </clipPath>
+        <clipPath id="clip1_4002_513">
+          <rect width="137.89" height="137.89" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

package/shared/components/icons/BrandText.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+import { IconProps } from "../../types/icon";
+
+export function BrandText({ className }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="129"
+      height="33"
+      viewBox="0 0 129 33"
+      fill="none"
+      className={className}
+    >
+      <path
+        d="M13.3099 0H15.9892V25.3545H13.3099V13.0033H3.09457V25.3545H0.377716V0H3.09457V10.3951H13.3099V0Z"
+        fill="#222222"
+      />
+      <path
+        d="M30.8023 23.7829C29.7155 25.0744 28.0604 25.7223 25.8409 25.7223C24.3195 25.7223 23.053 25.3963 22.0373 24.7442C21.0216 24.0922 20.2693 23.2353 19.7719 22.1737C19.2786 21.112 19.0279 19.9417 19.0279 18.6585V13.9144C19.0279 12.3679 19.287 11.0722 19.8053 10.0189C20.3236 8.96557 21.0927 8.17141 22.1042 7.62804C23.1199 7.08467 24.3487 6.81299 25.7991 6.81299C27.9224 6.81299 29.5609 7.43995 30.7061 8.69807C31.8514 9.952 32.4282 11.6908 32.4282 13.9144V18.6585C32.4282 20.7818 31.8848 22.4913 30.7981 23.7829H30.8023ZM29.3017 11.394C29.0259 10.7294 28.5995 10.2237 28.0353 9.87258C27.4668 9.52148 26.7354 9.34593 25.8451 9.34593C24.9548 9.34593 24.1982 9.5173 23.5796 9.85168C22.9652 10.1902 22.4971 10.6918 22.1836 11.3564C21.8701 12.021 21.7113 12.8486 21.7113 13.8392V18.9845C21.7113 19.8037 21.8743 20.531 22.2003 21.158C22.5263 21.7849 23.0028 22.2823 23.6298 22.6418C24.2568 23.0054 24.9924 23.1852 25.8409 23.1852C26.6894 23.1852 27.4334 23.018 28.0144 22.6794C28.5954 22.3408 29.0217 21.8518 29.3017 21.2123C29.5776 20.5728 29.7197 19.8288 29.7197 18.9845V13.8392C29.7197 12.8737 29.5818 12.0586 29.3017 11.394Z"
+        fill="#222222"
+      />
+      <path
+        d="M45.4023 9.2749C44.8004 9.17877 44.2445 9.14115 43.7345 9.16623C43.2748 9.19131 42.7857 9.24564 42.2674 9.32924C41.7492 9.41283 41.235 9.52987 40.7293 9.67198C40.2235 9.81827 39.747 9.98546 39.2998 10.1777C38.8526 10.37 38.4471 10.5748 38.0877 10.7922V25.3545H35.3708V7.20592H38.0877V8.25504C38.886 7.84542 39.7303 7.50686 40.6248 7.23935C41.5193 6.97603 42.5182 6.8172 43.63 6.76704C44.1149 6.74196 44.5412 6.76704 44.9174 6.83809C45.2894 6.90915 45.5527 6.97185 45.6949 7.01783L45.4064 9.26236L45.4023 9.2749Z"
+        fill="#222222"
+      />
+      <path
+        d="M62.2634 9.50894C62.0336 9.86004 61.9207 10.3951 61.9207 11.1223V27.5656C61.9207 28.6021 61.7619 29.4924 61.4484 30.2281C61.1349 30.9637 60.6584 31.5572 60.0189 32.0045C59.3794 32.4517 58.5518 32.7819 57.5361 32.9993L56.813 30.8634C57.1976 30.7673 57.5487 30.6084 57.8621 30.3911C58.1756 30.1737 58.4348 29.9146 58.6396 29.6136C58.8444 29.3127 58.9949 28.9741 59.091 28.598C59.1871 28.2218 59.2373 27.8289 59.2373 27.4193V23.7954C58.9238 24.1841 58.5184 24.5143 58.0252 24.7902C57.5319 25.0661 56.9886 25.2792 56.395 25.4255C55.8015 25.5718 55.2289 25.6429 54.673 25.6429C53.7534 25.6429 52.9175 25.53 52.1568 25.3001C51.396 25.0702 50.744 24.7191 50.2006 24.251C49.6572 23.7787 49.2351 23.1601 48.9341 22.3868C48.6332 21.6136 48.4827 20.6982 48.4827 19.6324V7.17245H51.2372V19.4861C51.2372 20.1632 51.3459 20.7358 51.5632 21.2081C51.7806 21.6804 52.0815 22.0524 52.4702 22.3325C52.8548 22.6084 53.2853 22.8173 53.7576 22.9469C54.2299 23.0807 54.7064 23.1475 55.1871 23.1475C55.7681 23.1475 56.2989 23.0389 56.7796 22.8215C57.2603 22.6042 57.6866 22.3032 58.046 21.9145C58.4097 21.53 58.6981 21.0869 58.9154 20.5937C59.1328 20.1005 59.2415 19.5738 59.2415 19.0179V10.7211C59.2415 10.1401 59.3501 9.57582 59.5675 9.01991C59.7848 8.464 60.1234 7.9875 60.5832 7.59042C61.0429 7.19335 61.6448 6.9342 62.393 6.81299L63.3 8.76912C62.8403 8.91541 62.4975 9.16202 62.2676 9.51312L62.2634 9.50894Z"
+        fill="#222222"
+      />
+      <path
+        d="M74.6481 9.6177C74.2719 9.48394 73.8832 9.38781 73.4694 9.32929C73.0598 9.27077 72.646 9.23734 72.2364 9.23734C71.8477 9.23734 71.438 9.27495 71.0033 9.34601C70.5686 9.41707 70.1632 9.54664 69.7912 9.72637C69.415 9.9061 69.1141 10.1485 68.8842 10.4495C68.6543 10.7504 68.5414 11.1057 68.5414 11.5195C68.5414 12.0503 68.717 12.4976 69.0681 12.8612C69.4192 13.2248 69.8832 13.5509 70.4641 13.8393C71.0451 14.1277 71.6721 14.4077 72.3492 14.671C73.0264 14.9385 73.7077 15.227 74.3973 15.5404C75.087 15.8539 75.7181 16.2301 76.2991 16.6648C76.8801 17.0995 77.3441 17.6303 77.6952 18.2573C78.0463 18.8843 78.2218 19.645 78.2218 20.5394C78.2218 21.4339 78.0421 22.2197 77.6784 22.8927C77.3148 23.5698 76.8258 24.1382 76.2113 24.5938C75.5969 25.0536 74.9114 25.3963 74.1632 25.6262C73.4151 25.8561 72.6418 25.969 71.8435 25.969C70.5394 25.969 69.2855 25.6931 68.0775 25.1372C66.8695 24.5813 65.8455 23.8206 64.997 22.855L66.5561 21.2625C67.0409 21.7223 67.5509 22.1194 68.0942 22.458C68.6376 22.7965 69.2102 23.0515 69.8163 23.2187C70.4182 23.3859 71.0493 23.4736 71.7014 23.4736C72.111 23.4736 72.5415 23.4193 72.9887 23.3106C73.436 23.202 73.8498 23.0264 74.2385 22.784C74.623 22.5416 74.9407 22.2406 75.1789 21.877C75.4172 21.5133 75.5426 21.0786 75.5426 20.5729C75.5426 19.9919 75.367 19.4945 75.0159 19.0682C74.6648 18.646 74.205 18.2782 73.6408 17.9647C73.0723 17.6512 72.4454 17.3545 71.7557 17.0786C71.066 16.8027 70.3805 16.5101 69.6909 16.2092C69.0012 15.9083 68.3743 15.553 67.8058 15.1392C67.2374 14.7296 66.7776 14.2405 66.4307 13.6721C66.0796 13.1036 65.904 12.4098 65.904 11.5905C65.904 10.7713 66.0712 10.0942 66.4098 9.48812C66.7483 8.88623 67.2081 8.38466 67.7849 7.9834C68.3659 7.58633 69.0054 7.28538 69.7034 7.07639C70.4056 6.87158 71.1287 6.76709 71.8769 6.76709C72.3576 6.76709 72.8675 6.80471 73.3984 6.87576C73.9292 6.94682 74.4684 7.08057 75.0117 7.27284C75.5551 7.46511 76.0901 7.73262 76.6251 8.07118L75.6471 10.0984C75.3587 9.9061 75.0243 9.74309 74.6523 9.60934L74.6481 9.6177Z"
+        fill="#222222"
+      />
+      <path
+        d="M90.8239 20.7568L97.9253 0H100.605V25.3545H97.9253V7.96665L92.0945 25.3545H89.6326L83.8729 7.96665V25.3545H81.1561V0H83.8729L90.828 20.7568H90.8239Z"
+        fill="#222222"
+      />
+      <path
+        d="M114.477 10.834C114.235 10.3032 113.884 9.89775 113.428 9.62189C112.968 9.34602 112.437 9.14957 111.836 9.0409C111.234 8.93222 110.569 8.87789 109.842 8.87789L109.988 6.92175C111.438 6.92175 112.642 7.05551 113.612 7.31883C114.577 7.58634 115.342 8.01267 115.911 8.6062C116.479 9.19973 116.889 9.99389 117.144 10.997C117.399 12.0002 117.524 13.2374 117.524 14.7087V25.3587C117.428 25.3838 117.215 25.4047 116.889 25.4298C116.563 25.4549 116.182 25.4841 115.748 25.5217C115.313 25.5594 114.849 25.5928 114.352 25.6304C113.859 25.668 113.37 25.6889 112.885 25.7015C112.4 25.714 111.953 25.7182 111.543 25.7182C110.431 25.7433 109.395 25.6639 108.429 25.4841C107.463 25.3044 106.619 24.9784 105.892 24.5061C105.169 24.0337 104.6 23.3817 104.191 22.5499C103.781 21.7182 103.576 20.6607 103.576 19.3817V16.2301C103.576 15.2395 103.723 14.3994 104.011 13.7139C104.299 13.0284 104.701 12.4641 105.206 12.0294C105.712 11.5947 106.285 11.2813 106.928 11.089C107.568 10.8967 108.237 10.8006 108.939 10.8006C109.641 10.8006 110.389 10.8925 111.112 11.0723C111.836 11.252 112.517 11.4944 113.161 11.7954C113.8 12.0963 114.36 12.4516 114.845 12.8654C114.845 12.0462 114.724 11.369 114.481 10.8382L114.477 10.834ZM113.227 14.2196C112.613 13.9647 111.961 13.7473 111.271 13.5676C110.582 13.3879 109.888 13.2959 109.19 13.2959C108.901 13.2959 108.588 13.3377 108.249 13.4213C107.911 13.5049 107.593 13.6554 107.288 13.8727C106.987 14.0901 106.736 14.4035 106.544 14.8132C106.352 15.2228 106.256 15.7662 106.256 16.4433V19.0138C106.256 19.7369 106.327 20.3764 106.473 20.9324C106.619 21.4883 106.882 21.9522 107.271 22.3284C107.656 22.7046 108.199 22.9763 108.901 23.1435C109.599 23.3106 110.481 23.3733 111.547 23.3232C111.911 23.3232 112.254 23.3106 112.58 23.2856C112.906 23.2605 113.206 23.2354 113.487 23.2145C113.762 23.1894 114.005 23.1727 114.21 23.1602C114.414 23.1476 114.628 23.1309 114.845 23.1058V14.9929C114.385 14.7254 113.85 14.4662 113.232 14.2155L113.227 14.2196Z"
+        fill="#222222"
+      />
+      <path d="M120.596 0H123.276V25.3545H120.596V0Z" fill="#222222" />
+      <path d="M126.318 0H128.998V25.3545H126.318V0Z" fill="#222222" />
+    </svg>
+  );
+}

package/shared/components/icons/CartIcon.tsx

@@ -0,0 +1,21 @@
+type CartIconProb = {
+  color?: string;
+  className?: string;
+};
+export function CartIcon({ color = "#494E58", className }: CartIconProb) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      className={className}
+    >
+      <path
+        d="M9.3125 19C9.01583 19 8.72582 19.088 8.47914 19.2528C8.23247 19.4176 8.04021 19.6519 7.92668 19.926C7.81315 20.2001 7.78344 20.5017 7.84132 20.7926C7.8992 21.0836 8.04206 21.3509 8.25184 21.5607C8.46162 21.7704 8.72889 21.9133 9.01986 21.9712C9.31084 22.0291 9.61244 21.9993 9.88653 21.8858C10.1606 21.7723 10.3949 21.58 10.5597 21.3334C10.7245 21.0867 10.8125 20.7967 10.8125 20.5C10.8125 20.1022 10.6545 19.7206 10.3732 19.4393C10.0919 19.158 9.71032 19 9.3125 19ZM19.8125 16H7.8125C7.54728 16 7.29293 15.8946 7.10539 15.7071C6.91786 15.5196 6.8125 15.2652 6.8125 15C6.8125 14.7348 6.91786 14.4804 7.10539 14.2929C7.29293 14.1054 7.54728 14 7.8125 14H16.3037C16.9551 13.9979 17.5883 13.7847 18.1084 13.3925C18.6285 13.0002 19.0075 12.45 19.1885 11.8242L20.7739 6.2749C20.8165 6.12607 20.8239 5.9694 20.7956 5.81722C20.7673 5.66505 20.704 5.52152 20.6108 5.39793C20.5176 5.27435 20.397 5.17408 20.2585 5.10503C20.12 5.03598 19.9673 5.00003 19.8125 5H7.55157C7.34456 4.41736 6.96294 3.91271 6.45872 3.55481C5.95451 3.19692 5.35221 3.00318 4.73389 3H3.8125C3.54728 3 3.29293 3.10536 3.10539 3.29289C2.91786 3.48043 2.8125 3.73478 2.8125 4C2.8125 4.26522 2.91786 4.51957 3.10539 4.70711C3.29293 4.89464 3.54728 5 3.8125 5H4.73389C4.95097 5.00076 5.16197 5.07182 5.33529 5.20253C5.5086 5.33325 5.63492 5.51659 5.69531 5.7251L5.85083 6.26984L5.85107 6.2749L7.4917 12.0171C6.72826 12.0992 6.02537 12.4709 5.52777 13.0557C5.03016 13.6405 4.77571 14.3938 4.81683 15.1606C4.85794 15.9273 5.19148 16.6491 5.74876 17.1773C6.30605 17.7055 7.04466 18 7.8125 18H19.8125C20.0777 18 20.3321 17.8946 20.5196 17.7071C20.7071 17.5196 20.8125 17.2652 20.8125 17C20.8125 16.7348 20.7071 16.4804 20.5196 16.2929C20.3321 16.1054 20.0777 16 19.8125 16ZM18.4868 7L17.2656 11.2744C17.2053 11.4831 17.0789 11.6666 16.9055 11.7974C16.7321 11.9282 16.5209 11.9993 16.3037 12H9.56689L9.31195 11.1078L8.13892 7H18.4868ZM17.3125 19C17.0158 19 16.7258 19.088 16.4791 19.2528C16.2325 19.4176 16.0402 19.6519 15.9267 19.926C15.8131 20.2001 15.7834 20.5017 15.8413 20.7926C15.8992 21.0836 16.0421 21.3509 16.2518 21.5607C16.4616 21.7704 16.7289 21.9133 17.0199 21.9712C17.3108 22.0291 17.6124 21.9993 17.8865 21.8858C18.1606 21.7723 18.3949 21.58 18.5597 21.3334C18.7245 21.0867 18.8125 20.7967 18.8125 20.5C18.8125 20.1022 18.6545 19.7206 18.3732 19.4393C18.0919 19.158 17.7103 19 17.3125 19Z"
+        fill={color}
+      />
+    </svg>
+  );
+}

package/shared/components/icons/DoneIcon.tsx

@@ -0,0 +1,27 @@
+export function DoneIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="29"
+      height="29"
+      viewBox="0 0 29 29"
+      fill="none"
+    >
+      <g clipPath="url(#clip0_8462_10460)">
+        <path
+          d="M14.5 0.90625C11.8114 0.90625 9.1832 1.70351 6.94772 3.19721C4.71224 4.69091 2.9699 6.81396 1.94102 9.2979C0.91214 11.7818 0.642938 14.5151 1.16746 17.152C1.69197 19.7889 2.98665 22.2111 4.88777 24.1122C6.78889 26.0134 9.21107 27.308 11.848 27.8326C14.4849 28.3571 17.2182 28.0879 19.7021 27.059C22.186 26.0301 24.3091 24.2878 25.8028 22.0523C27.2965 19.8168 28.0938 17.1886 28.0938 14.5C28.0938 10.8947 26.6616 7.43709 24.1122 4.88777C21.5629 2.33844 18.1053 0.90625 14.5 0.90625ZM14.5 24.4688C12.5284 24.4688 10.601 23.8841 8.96167 22.7887C7.32231 21.6933 6.04459 20.1364 5.29008 18.3149C4.53557 16.4933 4.33816 14.4889 4.7228 12.5552C5.10745 10.6214 6.05688 8.84518 7.45104 7.45103C8.84519 6.05688 10.6215 5.10744 12.5552 4.7228C14.4889 4.33815 16.4933 4.53557 18.3149 5.29008C20.1364 6.04459 21.6933 7.32231 22.7887 8.96166C23.8841 10.601 24.4688 12.5284 24.4688 14.5C24.4688 17.1439 23.4185 19.6795 21.549 21.549C19.6795 23.4185 17.1439 24.4688 14.5 24.4688Z"
+          fill="#9451A0"
+        />
+        <path
+          d="M17.7551 10.5031L13.5954 14.6537L12.1544 13.2128C11.8143 12.8727 11.3531 12.6816 10.8721 12.6816C10.3911 12.6816 9.92986 12.8727 9.58976 13.2128C9.24966 13.5529 9.05859 14.0142 9.05859 14.4951C9.05859 14.9761 9.24966 15.4374 9.58976 15.7775L12.3085 18.4962C12.4768 18.6648 12.6767 18.7985 12.8968 18.8897C13.1168 18.9809 13.3527 19.0278 13.5909 19.0278C13.829 19.0278 14.0649 18.9809 14.2849 18.8897C14.505 18.7985 14.7049 18.6648 14.8732 18.4962L20.3107 13.0587C20.6508 12.7186 20.8419 12.2574 20.8419 11.7764C20.8419 11.2954 20.6508 10.8342 20.3107 10.4941C19.9706 10.154 19.5093 9.96289 19.0284 9.96289C18.5474 9.96289 18.0861 10.154 17.746 10.4941L17.7551 10.5031Z"
+          fill="#9451A0"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_8462_10460">
+          <rect width="29" height="29" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

package/shared/components/icons/HomnifiIcon.tsx

@@ -0,0 +1,23 @@
+import { IconProps } from "../../types/icon";
+
+export function HomnifiIcon({ className }: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="31"
+      viewBox="0 0 18 31"
+      fill="none"
+      className={className}
+    >
+      <path
+        d="M15.5855 14.2335V3.04336H10.2099V14.2335H7.79541V3.04336H6.57517C5.18451 3.04336 4.24454 3.16918 3.78187 3.41687C2.87385 3.89512 2.41385 4.8885 2.41385 6.37068V14.2341H0V6.37068C0 5.25081 0.129147 4.27653 0.38278 3.47484C0.635083 2.68039 1.17098 2.02362 1.97515 1.52298C2.76401 1.02101 3.84045 0.767395 5.17652 0.767395H18V14.2335H15.5855Z"
+        fill="white"
+      />
+      <path
+        d="M2.41439 16.6391V27.8292H7.78996V16.6391H10.2045V27.8292H11.4247C12.8154 27.8292 13.7553 27.7034 14.218 27.4557C15.126 26.9774 15.586 25.984 15.586 24.5019V16.6384H17.9999V24.5019C17.9999 25.6217 17.8707 26.596 17.6171 27.3977C17.3648 28.1922 16.8289 28.8489 16.0247 29.3496C15.2359 29.8509 14.1601 30.1045 12.824 30.1045H-0.00012207V16.6384H2.41439V16.6391Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

package/shared/components/icons/InfoIcon.tsx

@@ -0,0 +1,16 @@
+export function InfoIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="15"
+      viewBox="0 0 16 15"
+      fill="none"
+    >
+      <path
+        d="M8 11.5C8.19833 11.5 8.3647 11.4328 8.4991 11.2984C8.63303 11.1645 8.7 10.9983 8.7 10.8V7.9825C8.7 7.78417 8.63303 7.62083 8.4991 7.4925C8.3647 7.36417 8.19833 7.3 8 7.3C7.80167 7.3 7.63553 7.36697 7.5016 7.5009C7.3672 7.6353 7.3 7.80167 7.3 8V10.8175C7.3 11.0158 7.3672 11.1792 7.5016 11.3075C7.63553 11.4358 7.80167 11.5 8 11.5ZM8 5.9C8.19833 5.9 8.3647 5.8328 8.4991 5.6984C8.63303 5.56447 8.7 5.39833 8.7 5.2C8.7 5.00167 8.63303 4.8353 8.4991 4.7009C8.3647 4.56697 8.19833 4.5 8 4.5C7.80167 4.5 7.63553 4.56697 7.5016 4.7009C7.3672 4.8353 7.3 5.00167 7.3 5.2C7.3 5.39833 7.3672 5.56447 7.5016 5.6984C7.63553 5.8328 7.80167 5.9 8 5.9ZM8 15C7.03167 15 6.12167 14.8161 5.27 14.4484C4.41833 14.0811 3.6775 13.5825 3.0475 12.9525C2.4175 12.3225 1.91887 11.5817 1.5516 10.73C1.18387 9.87833 1 8.96833 1 8C1 7.03167 1.18387 6.12167 1.5516 5.27C1.91887 4.41833 2.4175 3.6775 3.0475 3.0475C3.6775 2.4175 4.41833 1.91863 5.27 1.5509C6.12167 1.18363 7.03167 1 8 1C8.96833 1 9.87833 1.18363 10.73 1.5509C11.5817 1.91863 12.3225 2.4175 12.9525 3.0475C13.5825 3.6775 14.0811 4.41833 14.4484 5.27C14.8161 6.12167 15 7.03167 15 8C15 8.96833 14.8161 9.87833 14.4484 10.73C14.0811 11.5817 13.5825 12.3225 12.9525 12.9525C12.3225 13.5825 11.5817 14.0811 10.73 14.4484C9.87833 14.8161 8.96833 15 8 15ZM8 13.6C9.55167 13.6 10.873 13.0547 11.9641 11.9641C13.0547 10.873 13.6 9.55167 13.6 8C13.6 6.44833 13.0547 5.12697 11.9641 4.0359C10.873 2.9453 9.55167 2.4 8 2.4C6.44833 2.4 5.1272 2.9453 4.0366 4.0359C2.94553 5.12697 2.4 6.44833 2.4 8C2.4 9.55167 2.94553 10.873 4.0366 11.9641C5.1272 13.0547 6.44833 13.6 8 13.6Z"
+        fill="#8390A2"
+      />
+    </svg>
+  );
+}

package/shared/components/icons/SmartPayProductIcon.tsx

@@ -0,0 +1,31 @@
+export function SmartPayProductIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+    >
+      <g clipPath="url(#clip0_7126_15387)">
+        <path
+          d="M3.125 15.3125V11.0372C3.125 10.582 3.32926 10.2035 3.63348 9.95386L3.02711 9.49944C2.78934 9.32249 2.52594 9.23437 2.26562 9.22065C1.51031 9.18089 0.78125 9.76749 0.78125 10.6275V15.3125C0.78125 17.4698 2.53012 19.2187 4.6875 19.2187H7.03125C4.87387 19.2187 3.125 17.4698 3.125 15.3125Z"
+          fill="#CEE1F2"
+        />
+        <path
+          d="M15.3125 20H4.6875C2.10281 20 0 17.8972 0 15.3125V10.6275C0 10.0202 0.239922 9.45809 0.675586 9.04477C1.11363 8.62918 1.70887 8.40891 2.30672 8.44047C2.73344 8.46293 3.14383 8.61242 3.49359 8.8727L8.09961 12.3245C8.10137 12.3258 8.10312 12.3271 8.10488 12.3285C9.22066 13.1795 10.7794 13.1795 11.8952 12.3285C11.8969 12.3271 11.8987 12.3258 11.9004 12.3245L16.5044 8.87426C16.8562 8.61242 17.2666 8.46293 17.6933 8.44047C18.2911 8.40856 18.8864 8.62918 19.3245 9.04477C19.7601 9.45809 20 10.0202 20 10.6275V15.3125C20 17.8972 17.8972 20 15.3125 20ZM2.19387 10C2.03355 10 1.86996 10.0654 1.75098 10.1783C1.665 10.2598 1.5625 10.404 1.5625 10.6275V15.3125C1.5625 17.0356 2.96438 18.4375 4.6875 18.4375H15.3125C17.0356 18.4375 18.4375 17.0356 18.4375 15.3125V10.6275C18.4375 10.404 18.335 10.2599 18.249 10.1783C18.1225 10.0582 17.9463 9.99219 17.7755 10.0008C17.6557 10.0071 17.5426 10.0493 17.4394 10.1262L12.8401 13.5729C11.1675 14.8466 8.83262 14.8466 7.15996 13.5729L2.55859 10.1246C2.45738 10.0493 2.3443 10.0071 2.22453 10.0008C2.21438 10.0003 2.2041 10 2.19387 10ZM18.125 6.13281V4.6875C18.125 2.10281 16.0222 0 13.4375 0H6.64062C4.05594 0 1.95312 2.10281 1.95312 4.6875V6.13281C1.95312 6.5643 2.30289 6.91406 2.73438 6.91406C3.16586 6.91406 3.51562 6.5643 3.51562 6.13281V4.6875C3.51562 2.96438 4.9175 1.5625 6.64062 1.5625H13.4375C15.1606 1.5625 16.5625 2.96438 16.5625 4.6875V6.13281C16.5625 6.5643 16.9123 6.91406 17.3438 6.91406C17.7752 6.91406 18.125 6.5643 18.125 6.13281Z"
+          fill="#1428BF"
+        />
+        <path
+          d="M12.1096 8.32031C12.1096 7.22508 11.1916 6.36719 10.0198 6.36719C9.6412 6.36719 9.35569 6.19926 9.35569 5.97656C9.35569 5.76117 9.53092 5.58594 9.74632 5.58594C10.0238 5.58594 10.3614 5.61734 10.9475 5.84531C11.3495 6.00168 11.8024 5.8025 11.9588 5.40035C12.1152 4.9982 11.916 4.54543 11.5139 4.38906C11.2635 4.29172 11.0408 4.22012 10.8401 4.16719V4.02344C10.8401 3.59195 10.4903 3.24219 10.0588 3.24219C9.62733 3.24219 9.27757 3.59195 9.27757 4.02344V4.0807C8.42632 4.29125 7.79319 5.06121 7.79319 5.97656C7.79319 7.09004 8.75042 7.92969 10.0198 7.92969C10.3155 7.92969 10.5471 8.10129 10.5471 8.32031C10.5471 8.5357 10.3719 8.71094 10.1565 8.71094C9.99319 8.71094 9.4355 8.65769 8.82397 8.41465C8.42311 8.25531 7.96878 8.45113 7.80936 8.85207C7.64999 9.25305 7.84585 9.70727 8.24678 9.86664C8.60432 10.0087 8.95913 10.107 9.27757 10.1716V10.2734C9.27757 10.7049 9.62733 11.0547 10.0588 11.0547C10.4903 11.0547 10.8401 10.7049 10.8401 10.2734V10.1497C11.5808 9.87199 12.1096 9.15684 12.1096 8.32031Z"
+          fill="#FF5CF0"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_7126_15387">
+          <rect width="20" height="20" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

package/shared/components/payments/DisclaimerAlertDialog.tsx

@@ -0,0 +1,205 @@
+import alertIcon from "@hms/packages/public/img/alert-Icon.png";
+import ButtonCustom from "@hms/packages/shared/components/Button";
+import CustomNextImage from "@hms/packages/shared/components/CustomNextImage";
+import { _useScopedI18n } from "@hms/packages/shared/i18n/client";
+import {
+  Checkbox,
+  Dialog,
+  DialogBody,
+  DialogFooter,
+  DialogHeader,
+  IconButton,
+  Typography,
+} from "@material-tailwind/react";
+import React, { useEffect, useState } from "react";
+
+import { ROUTES } from "../../constants/routes";
+
+type DisclaimerAlertDialogProps = {
+  open: boolean;
+  actionLoading: boolean;
+  onConfirm: () => void;
+  setOpen: (value: boolean) => void;
+};
+
+export function DisclaimerAlertDialog({
+  open,
+  setOpen,
+  actionLoading,
+  onConfirm,
+}: DisclaimerAlertDialogProps) {
+  //
+  const scopeT = _useScopedI18n("payment.disclaimerAlertDialog");
+
+  const [allChecked, setAllChecked] = useState(false);
+  const [isPrivacyChecked, setIsPrivacyChecked] = useState(false);
+  const [isTermsChecked, setIsTermsChecked] = useState(false);
+  const [isRiskChecked, setIsRiskChecked] = useState(false);
+  const [legalDocs, setLegalDocs] = useState(false);
+
+  useEffect(() => {
+    // Check if all checkboxes are checked
+    if (isPrivacyChecked && isTermsChecked && isRiskChecked && legalDocs) {
+      (async () => await setAllChecked(true))();
+    } else {
+      (async () => await setAllChecked(false))();
+    }
+  }, [isPrivacyChecked, isTermsChecked, isRiskChecked, legalDocs]);
+
+  return (
+    <>
+      <Dialog
+        open={open}
+        size="xs"
+        handler={() => {
+          setOpen(false);
+        }}
+        className="p-2 md:p-5 overflow-y-auto h-fit disclaimer-alert-dialog"
+      >
+        <DialogHeader className="flex flex-col gap-2 p-0 pb-0">
+          <div className="text-right size-full">
+            <IconButton
+              color="blue-gray"
+              size="sm"
+              variant="text"
+              onClick={() => {
+                setOpen(false);
+              }}
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+                strokeWidth={2}
+                className="h-5 w-5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </IconButton>
+          </div>
+          <CustomNextImage
+            src={alertIcon.src}
+            alt={"alertIcon"}
+            width={45}
+            height={45}
+          ></CustomNextImage>
+          <Typography
+            variant="h4"
+            className="text-base md:text-xl font-semibold text-black-500"
+          >
+            {scopeT("header")}
+          </Typography>
+        </DialogHeader>
+        <DialogBody className="disclaimer-body pl-1 pr-3">
+          <div className="flex items-center">
+            <Checkbox
+              color="green"
+              checked={isTermsChecked}
+              onChange={() => setIsTermsChecked(!isTermsChecked)}
+              crossOrigin={undefined}
+            />
+            <Typography className="text-xs md:text-sm text-black-500 font-medium">
+              {scopeT("acceptCheckboxTerms")}
+              <Typography
+                as="a"
+                href={ROUTES.dashboard.termsAndConditions}
+                target="_blank"
+                className="inline underline text-xs md:text-sm font-medium transition-colors text-purple-500 hover:text-purple-400 hover:underline"
+              >
+                &nbsp;{scopeT("termsAndC")}
+              </Typography>
+              .
+            </Typography>
+          </div>
+
+          <div className="flex items-center">
+            <Checkbox
+              color="green"
+              checked={isRiskChecked}
+              onChange={() => setIsRiskChecked(!isRiskChecked)}
+              crossOrigin={undefined}
+            />
+            <Typography className="text-xs md:text-sm text-black-500 font-medium">
+              {scopeT("acceptCheckboxRickDisclosure")}
+              <Typography
+                as="a"
+                href={ROUTES.dashboard.riskDisclosure}
+                target="_blank"
+                className="inline underline text-xs md:text-sm font-medium transition-colors text-purple-500 hover:text-purple-400 hover:underline"
+              >
+                &nbsp;{scopeT("riskDisclosure")}
+              </Typography>
+              .
+            </Typography>
+          </div>
+
+          <div className="flex items-center">
+            <Checkbox
+              color="green"
+              checked={isPrivacyChecked}
+              onChange={() => setIsPrivacyChecked(!isPrivacyChecked)}
+              crossOrigin={undefined}
+            />
+            <Typography className="text-xs md:text-sm text-black-500 font-medium">
+              {scopeT("acceptCheckboxTerms")}
+              <Typography
+                as="a"
+                href={ROUTES.dashboard.privacyPolicy}
+                target="_blank"
+                className="inline underline text-xs md:text-sm font-medium transition-colors text-purple-500 hover:text-purple-400 hover:underline"
+              >
+                &nbsp;{scopeT("privacyP")}
+              </Typography>
+              .
+            </Typography>
+          </div>
+
+          <div className="flex items-center">
+            <Checkbox
+              color="green"
+              checked={legalDocs}
+              onChange={() => setLegalDocs(!legalDocs)}
+              crossOrigin={undefined}
+            />
+            <Typography className="text-xs md:text-sm text-black-500 font-medium">
+              {scopeT("legalTermsAccept")}
+              <Typography
+                as="a"
+                href="https://docs.horystech.com/legal-documents/terms-and-conditions"
+                target="_blank"
+                className="inline underline text-xs md:text-sm font-medium transition-colors text-purple-500 hover:text-purple-400 hover:underline"
+              >
+                &nbsp;{scopeT("termsAndC")}&nbsp;
+              </Typography>
+              {scopeT("legalOtherTermsAccept")}
+              <Typography
+                as="a"
+                href="https://docs.horystech.com/"
+                target="_blank"
+                className="inline underline text-xs md:text-sm font-medium transition-colors text-purple-500 hover:text-purple-400 hover:underline"
+              >
+                &nbsp;{scopeT("here")}
+              </Typography>
+              .
+            </Typography>
+          </div>
+        </DialogBody>
+        <DialogFooter className="flex justify-center items-center">
+          <ButtonCustom
+            icon={undefined}
+            disabled={actionLoading || !allChecked}
+            onClick={onConfirm}
+            loading={actionLoading}
+          >
+            {scopeT("confirmBtn")}
+          </ButtonCustom>
+        </DialogFooter>
+      </Dialog>
+    </>
+  );
+}

package/shared/components/payments/EmptyAssets.tsx

@@ -0,0 +1,23 @@
+import { _useScopedI18n } from "@hms/packages/shared/i18n/client";
+import { Typography } from "@material-tailwind/react";
+
+export default function EmptyAssets() {
+  const scopeT = _useScopedI18n("sharedComponents.emptyAssets");
+
+  return (
+    <div className="flex items-center justify-center flex-col w-full h-full">
+      <Typography
+        variant="h6"
+        className="text-center md:text-lg font-semibold text-black-500 mb-2"
+      >
+        {scopeT("title")}
+      </Typography>
+      <Typography
+        variant="h6"
+        className="text-center font-medium text-slate-400"
+      >
+        {scopeT("message")}
+      </Typography>
+    </div>
+  );
+}

package/shared/components/payments/PaybyWalletItemComponent.tsx

@@ -0,0 +1,116 @@
+import CustomNextImage from "@hms/packages/shared/components/CustomNextImage";
+import { _useScopedI18n } from "@hms/packages/shared/i18n/client";
+import {
+  Asset,
+  Option,
+  PaymentsMethod,
+} from "@hms/packages/shared/types/payments";
+import { displayExactWalletBalance } from "@hms/packages/shared/utils/app.util";
+import { Tooltip, Typography } from "@material-tailwind/react";
+
+import walletIcon from "../../../public/img/wallet-icon.png";
+
+export type PaybyWalletItemComponentProps = {
+  paymentMethodData: PaymentsMethod;
+  item: Option;
+  asset: Asset;
+  selectedOption: Option;
+  grandTotal: number;
+  handleItemClick: () => void;
+};
+
+export default function PaybyWalletItemComponent({
+  paymentMethodData,
+  item,
+  asset,
+  selectedOption,
+  grandTotal,
+  handleItemClick,
+}: PaybyWalletItemComponentProps) {
+  //
+  const scopeT = _useScopedI18n("payment.paybyWalletItemComponent");
+
+  let isEligible = false;
+  let msg = item.restricted.msg;
+  const minBalance = asset.isVariable ? 0 : grandTotal;
+
+  if (item.balance > minBalance && item.restricted.status === false) {
+    isEligible = true;
+  } else {
+    if (!item.restricted.status) {
+      msg = scopeT("insufficientBalanceMsg");
+    }
+  }
+
+  return (
+    <>
+      <Tooltip
+        placement="top"
+        content={`${msg}`}
+        animate={{
+          mount: { scale: 1, y: 0 },
+          unmount: { scale: 0, y: 25 },
+        }}
+        className={`bg-red-600 ${isEligible ? "hidden" : ""}`}
+        interactive={!isEligible}
+      >
+        <li
+          className={`border grow ${
+            selectedOption?.id === item.id && isEligible
+              ? "border-purple-500 bg-purple-50" // Selected border color
+              : "border-slate-100 bg-gray-50/30" // Default border color
+          } ${!isEligible ? "cursor-not-allowed opacity-80" : "cursor-pointer"} rounded-xl p-4 text-center `}
+          onClick={() => {
+            if (isEligible) handleItemClick();
+          }}
+        >
+          <div className="text-right mb-2">
+            <Typography
+              variant="lead"
+              className="text-xs font-medium text-yellow-700"
+            >
+              {asset.isVariable
+                ? "Variable pay"
+                : `Uses ${item.minPercentage}%`}
+            </Typography>
+          </div>
+
+          <CustomNextImage
+            src={walletIcon.src}
+            alt="walletIcon"
+            className={`mx-auto my-2 ${isEligible ? "" : "grayscale"}`}
+            height={80}
+            width={80}
+          />
+
+          <Typography
+            variant="lead"
+            className="text-sm font-semibold text-black-500 mb-1"
+          >
+            {asset.isVariable
+              ? `${`${asset.name} + ${item.name}`}`
+              : `${item.name}`}
+          </Typography>
+
+          {paymentMethodData.paymentFees.map((fee, feeIndex) => (
+            <Typography
+              key={feeIndex}
+              variant="lead"
+              className="text-xs font-normal text-slate-500 mb-2"
+            >
+              {fee.name}
+            </Typography>
+          ))}
+
+          <Typography
+            variant="lead"
+            className="text-xs font-semibold text-gray-300"
+          >
+            {scopeT("avlBalance")}:{" "}
+            {displayExactWalletBalance(`${item.balance}`)} {item.name}
+          </Typography>
+        </li>
+      </Tooltip>
+    </>
+  );
+}