Bepro 2185 points system collected points

assets/github-mark.tsx

@@ -0,0 +1,21 @@
+import { SVGProps } from "react";
+
+export default function GithubMark(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="46"
+      height="44"
+      viewBox="0 0 46 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M22.5611 0C10.0854 0 0 10.0833 0 22.5578C0 32.5293 6.46207 40.97 15.4267 43.9574C16.5475 44.182 16.958 43.472 16.958 42.8748C16.958 42.3518 16.9211 40.5593 16.9211 38.6916C10.6451 40.0363 9.33821 36.0025 9.33821 36.0025C8.32962 33.3882 6.83521 32.7163 6.83521 32.7163C4.78109 31.3344 6.98484 31.3344 6.98484 31.3344C9.2634 31.4838 10.459 33.6499 10.459 33.6499C12.4757 37.0856 15.7255 36.1148 17.0328 35.5172C17.2194 34.0606 17.8175 33.0522 18.4524 32.4922C13.4469 31.9692 8.18046 30.0273 8.18046 21.3625C8.18046 18.8975 9.07637 16.8809 10.496 15.3125C10.272 14.7524 9.48737 12.4364 10.7204 9.33671C10.7204 9.33671 12.6254 8.73904 16.9206 11.6522C18.7596 11.1584 20.6561 10.9072 22.5611 10.9051C24.4661 10.9051 26.408 11.1668 28.2012 11.6522C32.4969 8.73904 34.4019 9.33671 34.4019 9.33671C35.6349 12.4364 34.8498 14.7524 34.6259 15.3125C36.0829 16.8809 36.9418 18.8975 36.9418 21.3625C36.9418 30.0273 31.6754 31.9316 26.6324 32.4922C27.4545 33.2017 28.1638 34.546 28.1638 36.6749C28.1638 39.6999 28.1269 42.1277 28.1269 42.8743C28.1269 43.472 28.5379 44.182 29.6582 43.9578C38.6228 40.9695 45.0849 32.5293 45.0849 22.5578C45.1218 10.0833 34.9995 0 22.5611 0Z"
+        fill="white"
+      />
+    </svg>
+  );
+}

assets/icons/check-circle.tsx

@@ -3,26 +3,16 @@ import { SVGProps } from "react";
 export default function CheckCircle(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
-      width="108"
-      height="108"
-      viewBox="0 0 108 108"
+      width="30"
+      height="30"
+      viewBox="0 0 30 30"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       {...props}
     >
       <path
-        d="M72.5625 43.875L47.7984 67.5L35.4375 55.6875"
-        stroke="#4250E4"
-        strokeWidth="3"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-      <path
-        d="M54 94.5C76.3675 94.5 94.5 76.3675 94.5 54C94.5 31.6325 76.3675 13.5 54 13.5C31.6325 13.5 13.5 31.6325 13.5 54C13.5 76.3675 31.6325 94.5 54 94.5Z"
-        stroke="#4250E4"
-        strokeWidth="3"
-        strokeLinecap="round"
-        strokeLinejoin="round"
+        d="M20.3508 11.5242C20.438 11.6113 20.5071 11.7147 20.5543 11.8285C20.6015 11.9423 20.6257 12.0643 20.6257 12.1875C20.6257 12.3107 20.6015 12.4327 20.5543 12.5465C20.5071 12.6603 20.438 12.7637 20.3508 12.8508L13.7883 19.4133C13.7012 19.5004 13.5978 19.5696 13.484 19.6168C13.3702 19.664 13.2482 19.6882 13.125 19.6882C13.0018 19.6882 12.8798 19.664 12.766 19.6168C12.6522 19.5696 12.5488 19.5004 12.4617 19.4133L9.64922 16.6008C9.47331 16.4249 9.37448 16.1863 9.37448 15.9375C9.37448 15.6887 9.47331 15.4501 9.64922 15.2742C9.82514 15.0983 10.0637 14.9995 10.3125 14.9995C10.5613 14.9995 10.7999 15.0983 10.9758 15.2742L13.125 17.4246L19.0242 11.5242C19.1113 11.4371 19.2147 11.3679 19.3285 11.3207C19.4423 11.2735 19.5643 11.2493 19.6875 11.2493C19.8107 11.2493 19.9327 11.2735 20.0465 11.3207C20.1603 11.3679 20.2637 11.4371 20.3508 11.5242ZM27.1875 15C27.1875 17.4105 26.4727 19.7668 25.1335 21.771C23.7944 23.7752 21.8909 25.3373 19.664 26.2598C17.437 27.1822 14.9865 27.4236 12.6223 26.9533C10.2582 26.4831 8.08659 25.3223 6.38214 23.6179C4.67769 21.9134 3.51694 19.7418 3.04668 17.3777C2.57643 15.0135 2.81778 12.563 3.74022 10.336C4.66267 8.10907 6.22477 6.20564 8.22899 4.86646C10.2332 3.52728 12.5895 2.8125 15 2.8125C18.2313 2.81591 21.3292 4.10104 23.6141 6.3859C25.899 8.67076 27.1841 11.7687 27.1875 15ZM25.3125 15C25.3125 12.9604 24.7077 10.9666 23.5745 9.27068C22.4414 7.5748 20.8308 6.25302 18.9464 5.47249C17.0621 4.69196 14.9886 4.48774 12.9881 4.88565C10.9877 5.28356 9.1502 6.26573 7.70797 7.70796C6.26574 9.15019 5.28357 10.9877 4.88566 12.9881C4.48775 14.9886 4.69197 17.0621 5.4725 18.9464C6.25303 20.8308 7.57481 22.4414 9.27069 23.5745C10.9666 24.7077 12.9604 25.3125 15 25.3125C17.7341 25.3094 20.3553 24.2219 22.2886 22.2886C24.2219 20.3553 25.3094 17.7341 25.3125 15Z"
+        fill="#2AB38A"
       />
     </svg>
   );

assets/icons/star-filled-icon.tsx

@@ -0,0 +1,19 @@
+import { SVGProps } from "react";
+
+export default function StarFilledIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="13"
+      height="13"
+      viewBox="0 0 13 13"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M11.2494 5.86159L9.13536 7.70659L9.76864 10.4535C9.80216 10.5971 9.79259 10.7474 9.74115 10.8855C9.68971 11.0237 9.59868 11.1437 9.47943 11.2304C9.36018 11.3172 9.21801 11.3668 9.07069 11.3732C8.92337 11.3796 8.77744 11.3424 8.65114 11.2663L6.25536 9.81315L3.86474 11.2663C3.73844 11.3424 3.59251 11.3796 3.44519 11.3732C3.29787 11.3668 3.1557 11.3172 3.03645 11.2304C2.9172 11.1437 2.82617 11.0237 2.77473 10.8855C2.72329 10.7474 2.71373 10.5971 2.74724 10.4535L3.37958 7.7094L1.26505 5.86159C1.15321 5.76513 1.07234 5.6378 1.03258 5.49557C0.992813 5.35333 0.995931 5.20252 1.04154 5.06205C1.08714 4.92158 1.17321 4.7977 1.28894 4.70594C1.40467 4.61419 1.54491 4.55865 1.69208 4.54628L4.47927 4.30487L5.56724 1.70987C5.62405 1.57371 5.71989 1.4574 5.84267 1.37559C5.96545 1.29378 6.1097 1.25012 6.25724 1.25012C6.40478 1.25012 6.54902 1.29378 6.67181 1.37559C6.79459 1.4574 6.89042 1.57371 6.94724 1.70987L8.03849 4.30487L10.8247 4.54628C10.9719 4.55865 11.1122 4.61419 11.2279 4.70594C11.3436 4.7977 11.4297 4.92158 11.4753 5.06205C11.5209 5.20252 11.524 5.35333 11.4842 5.49557C11.4445 5.6378 11.3636 5.76513 11.2518 5.86159H11.2494Z"
+        fill="#FFDE6B"
+      />
+    </svg>
+  );
+}

assets/linkedin-mark.tsx

@@ -0,0 +1,39 @@
+import { SVGProps } from "react";
+
+export default function LinkedinMark(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="45"
+      height="44"
+      viewBox="0 0 45 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clip-path="url(#clip0_707_1553)">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M5.55588 44H39.7781C42.4782 44 44.667 41.8112 44.667 39.1111V4.88889C44.667 2.18883 42.4782 0 39.7781 0H5.55588C2.85582 0 0.666992 2.18883 0.666992 4.88889V39.1111C0.666992 41.8112 2.85582 44 5.55588 44Z"
+          fill="#007EBB"
+        />
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M38.5561 37.8889H32.0268V26.7679C32.0268 23.7189 30.8682 22.015 28.4549 22.015C25.8295 22.015 24.4578 23.7882 24.4578 26.7679V37.8889H18.1654V16.7037H24.4578V19.5573C24.4578 19.5573 26.3498 16.0564 30.8454 16.0564C35.339 16.0564 38.5561 18.8005 38.5561 24.4757V37.8889ZM10.6585 13.9296C8.51513 13.9296 6.77832 12.1792 6.77832 10.0204C6.77832 7.86152 8.51513 6.11108 10.6585 6.11108C12.8018 6.11108 14.5376 7.86152 14.5376 10.0204C14.5376 12.1792 12.8018 13.9296 10.6585 13.9296ZM7.40932 37.8889H13.9707V16.7037H7.40932V37.8889Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_707_1553">
+          <rect
+            width="44"
+            height="44"
+            fill="white"
+            transform="translate(0.666992)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

assets/x-mark.tsx

@@ -0,0 +1,35 @@
+import { SVGProps } from "react";
+
+export default function XMark(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width="45"
+      height="44"
+      viewBox="0 0 45 44"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g clip-path="url(#clip0_707_1540)">
+        <path
+          d="M34.5555 0H10.3142C4.80176 0 0.333008 4.46875 0.333008 9.98124V34.0188C0.333008 39.5312 4.80176 44 10.3142 44H34.5555C40.068 44 44.5368 39.5312 44.5368 34.0188V9.98124C44.5368 4.46875 40.068 0 34.5555 0Z"
+          fill="black"
+        />
+        <path
+          d="M28.2836 12.8079H31.402L24.5893 20.5953L32.6038 31.1913H26.3281L21.413 24.7653L15.7882 31.1913H12.6681L19.9548 22.8625L12.2666 12.8079H18.7012L23.144 18.6821L28.2836 12.8079ZM27.1888 29.3247H28.9173L17.7627 14.5769H15.9082L27.1888 29.3247Z"
+          fill="white"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_707_1540">
+          <rect
+            width="44.2038"
+            height="44"
+            fill="white"
+            transform="translate(0.333008)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

components/common/points/points-badge.view.tsx

@@ -1,16 +1,25 @@
+import StarFilledIcon from "assets/icons/star-filled-icon";
 import StarIcon from "assets/icons/star-icon"
 
 type PointsBadgeProps = {
-  points: number
+  points: number | string,
+  variant?: "default" | "available" | "claimed",
 }
 
 export function PointsBadge({
-  points
+  points,
+  variant = "default",
 }: PointsBadgeProps) {
+  const { bg, text, icon } = {
+    default: { bg: "yellow-400", text: "black", icon: <StarIcon /> },
+    available: { bg: "gray-700", text: "white", icon: <StarFilledIcon /> },
+    claimed: { bg: "green-600", text: "black", icon: <StarIcon /> },
+  }[variant];
+
   return(
-    <div className="d-flex align-items-center gap-1 bg-yellow-400 text-black px-2 py-1 border-radius-4">
-      <StarIcon />
-      <span className="xs-small font-weight-normal">{points}</span>
+    <div className={`d-flex align-items-center gap-1 bg-${bg} text-${text} not-hover px-2 py-1 border-radius-4`}>
+      {icon}
+      <span className={`xs-small font-weight-normal text-${text}`}>{points}</span>
     </div>
   );
 }

components/nav-avatar.tsx

@@ -136,9 +136,10 @@ export default function NavAvatar() {
               </div>
           </div>
         </div>
-        <NextLink href={myPointsUrl.href.pathname} as={myPointsUrl.asPath} onClick={() => setVisible(false)}>
+        <NextLink href={myPointsUrl.href.pathname} as={myPointsUrl.asPath}>
           <div 
             className="row align-items-center border-bottom border-light-gray py-2 cursor-pointer"
+            onClick={() => setVisible(false)}
           >
             <div className="col px-0">
               <span className="text-white text-gray-hover sm-regular">

components/points-system/collected-points/collected-points.controller.tsx

@@ -0,0 +1,84 @@
+import { useEffect } from "react";
+
+import { useTranslation } from "next-i18next";
+import { useRouter } from "next/router";
+
+import { CollectedPointsView } from "components/points-system/collected-points/collected-points.view";
+
+import { PointsEvents } from "interfaces/points";
+
+import useMarketplace from "x-hooks/use-marketplace";
+import { userPointsOfUser } from "x-hooks/use-points-of-user";
+
+export function CollectedPoints() {
+  const { t } = useTranslation("points");
+
+  const { push } = useRouter();
+
+  const { goToProfilePage } = useMarketplace();
+  const { collectedPoints, pointsBase, refresh } = userPointsOfUser();
+
+  const getCollected = (actionName: string) => collectedPoints?.find(c => c.actionName === actionName);
+  const getPointStatus = (event: PointsEvents) => {
+    if (!event)
+      return "available";
+    if (!event.pointsCounted)
+      return "pending";
+    return "claimed";
+  };
+  const getSocialName = (actionName: string) => {
+    if (actionName?.includes("linkedin"))
+      return "linkedin";
+    if (actionName?.includes("github"))
+      return "github";
+    if (actionName?.includes("x"))
+      return "x";
+  };
+  const actions = {
+    "created_marketplace": () => push("/new-marketplace"),
+    "created_deliverable": () => push("/explore"),
+    "created_proposal": () => push("/explore"),
+    "accepted_proposal": () => goToProfilePage("proposals"),
+    "add_linkedin": () => push("/dashboard"),
+    "add_github": () => push("/dashboard"),
+    "connect_email": () => push("/dashboard"),
+    "add_about": () => push("/dashboard"),
+  };
+
+  const { onGoing, socials, profile, other } = pointsBase.reduce((acc, curr) => {
+    const collected = getCollected(curr.actionName);
+    const status = getPointStatus(collected);
+    const pointsPerAction = status === "available" ? curr.pointsPerAction * curr.scalingFactor : collected.pointsWon;
+    const currUpdated = {
+      ...curr,
+      status,
+      pointsPerAction,
+      onActionClick: actions[curr.actionName],
+    };
+
+    if (["linkedin", "github", "x"].some(social => curr.actionName.includes(social)))
+      acc.socials.push(currUpdated);
+    else if (["email", "add_about"].some(e => curr.actionName.includes(e)))
+      acc.profile.push(currUpdated);
+    else if (curr.counter === "N")
+      acc.onGoing.push(curr);
+    else
+      acc.other.push(currUpdated);
+
+    return acc;
+  }, { onGoing: [], socials: [], profile: [], other: [] });
+
+  useEffect(() => {
+    refresh()
+  }, []);
+
+  return(
+    <CollectedPointsView
+      onGoing={onGoing}
+      socials={socials}
+      profile={profile}
+      other={other}
+      getSocialName={getSocialName}
+    />
+  );
+}