feat: add notifications for events (#517)

decentraland · Mar 25, 2024 · 17ecf86 · 17ecf86
1 parent a6f1f37
commit 17ecf86
Show file tree

Hide file tree

Showing 10 changed files with 432 additions and 3 deletions.
diff --git a/src/components/Icons/Notifications/EventCancelled.tsx b/src/components/Icons/Notifications/EventCancelled.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+
+const EventCancelled = (props: React.SVGAttributes<SVGElement>) => {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <circle cx="24" cy="24" r="24" fill="url(#paint0_linear_602_11503)" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M25.8171 22.6667L27.086 20.5214C27.1851 20.3394 27.2901 20.1636 27.4033 20H14.6667V17.3333C14.6667 16.5987 15.2653 16 16 16H17.3333V17.3333C17.3333 18.0667 17.9333 18.6667 18.6667 18.6667C19.4 18.6667 20 18.0667 20 17.3333V16H28V17.3333C28 18.0667 28.6 18.6667 29.3333 18.6667C30.0667 18.6667 30.6667 18.0667 30.6667 17.3333V16H32C32.7347 16 33.3333 16.5987 33.3333 17.3333V20H33L36 25.4V17.3333C36 15.128 34.2053 13.3333 32 13.3333H30.6667C30.6667 12.6 30.0667 12 29.3333 12C28.6 12 28 12.6 28 13.3333H20C20 12.6 19.4 12 18.6667 12C17.9333 12 17.3333 12.6 17.3333 13.3333H16C13.7947 13.3333 12 15.128 12 17.3333V32C12 34.2053 13.7947 36 16 36H22.4814C21.5906 35.9944 20.779 35.4888 20.3332 34.6277C20.1214 34.2183 20.0098 33.7756 20.0006 33.3333H16C15.2653 33.3333 14.6667 32.7347 14.6667 32V22.6667H25.8171Z"
+        fill="white"
+      />
+      <path
+        d="M36.9328 31.2189L31.8206 22.8888C31.4816 22.3299 30.8779 22 30.1999 22C29.522 22 28.9183 22.3299 28.5793 22.8888L23.4671 31.2189C23.1138 31.7924 23.1138 32.4807 23.4522 33.0681C23.7911 33.6561 24.4098 34 25.0878 34H35.3122C36.0045 34 36.6088 33.6561 36.9479 33.0681C37.2868 32.4806 37.2867 31.7923 36.9328 31.2189ZM30.1999 32.0506C29.758 32.0506 29.4046 31.7067 29.4046 31.2766C29.4046 30.8465 29.758 30.5026 30.1999 30.5026C30.6419 30.5026 30.9953 30.8465 30.9953 31.2766C30.9953 31.7061 30.6419 32.0506 30.1999 32.0506ZM31.0546 26.1577L30.7749 29.3551C30.7455 29.6564 30.4653 29.8854 30.1562 29.8568C29.8765 29.8283 29.6555 29.6132 29.6406 29.3551L29.3609 26.1577C29.3166 25.6991 29.6705 25.2975 30.1418 25.2544C30.6132 25.2113 31.0258 25.5557 31.0701 26.0144C31.0546 26.0575 31.0546 26.1146 31.0546 26.1577Z"
+        fill="#FCFCFC"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_602_11503"
+          x1="0"
+          y1="0"
+          x2="49.2632"
+          y2="49.2632"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#FF4B6B" />
+          <stop offset="1" stop-color="#9B2020" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default EventCancelled
diff --git a/src/components/Icons/Notifications/EventStarted.tsx b/src/components/Icons/Notifications/EventStarted.tsx
@@ -0,0 +1,41 @@
+import React from 'react'
+
+const EventStarted = (props: React.SVGAttributes<SVGElement>) => {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <circle cx="24" cy="24" r="24" fill="url(#paint0_linear_602_11502)" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M19.8833 10V12.339H18.7138L18.7138 10H19.8833ZM22.9866 11.9253L21.3327 13.5792L20.5057 12.7523L22.1596 11.0984L22.9866 11.9253ZM16.5462 11.0985L18.2001 12.7525L17.3731 13.5794L15.7192 11.9255L16.5462 11.0985ZM16.5462 36.5014L15.7192 35.6745L17.3731 34.0206L18.2001 34.8475L16.5462 36.5014ZM22.9866 35.6747L22.1596 36.5016L20.5057 34.8477L21.3327 34.0208L22.9866 35.6747ZM18.7138 37.6L18.7138 35.261H19.8833V37.6H18.7138ZM22.3017 16.1718L21.0036 17.3514H20.597L20.5966 18.9295C20.8093 18.9295 21.2854 19.0238 21.2854 19.1528L21.2854 20.4768C21.2854 20.5841 20.8093 20.6719 20.5966 20.6719V21.7661C20.7734 21.7661 21.2509 21.871 21.2509 22V25.3939C21.2509 25.5011 20.8093 25.5889 20.5966 25.5889V26.6613C20.7734 26.6613 21.2854 26.7662 21.2854 26.8952V28.8465C21.2854 28.9537 20.8093 29.1655 20.5966 29.1655L20.5965 30.5041L21.0022 30.6486L22.3003 31.8282C22.4771 31.9354 22.7603 32 23.0435 32H36.8722C37.509 32 38.0036 31.7 38.0036 31.3138V16.6862C38.0036 16.2999 37.509 16 36.8722 16H23.045C22.7618 16 22.5145 16.0645 22.3017 16.1718ZM34.564 22.3297C34.7796 22.3824 34.9391 22.521 35.0007 22.7107C35.0624 22.8998 35.0175 23.1113 34.8785 23.2912L33.3802 25.2043C33.2665 25.3485 33.1778 25.65 33.193 25.8367L33.3976 28.3019C33.4134 28.4916 33.3637 28.6631 33.2582 28.785C33.1618 28.896 33.0263 28.9584 32.8762 28.9605C32.7926 28.9617 32.7064 28.9443 32.6206 28.9089L30.416 28.0073C30.2605 27.9436 29.9363 27.9481 29.7825 28.0162L27.604 28.9789C27.3654 29.0841 27.1173 29.0408 26.9631 28.8722C26.8543 28.7533 26.7998 28.5833 26.8103 28.3932L26.9461 25.9232C26.9561 25.7361 26.8585 25.4373 26.7414 25.2957L25.1902 23.4251C25.0451 23.2504 24.9947 23.0402 25.051 22.8489C25.1079 22.6575 25.2629 22.5146 25.4769 22.4559L27.7656 21.8307C27.9385 21.7834 28.18 21.5943 28.2723 21.4342L29.4923 19.3159C29.6064 19.1178 29.7818 19.0027 29.9731 19C30.1645 18.9973 30.343 19.1075 30.4626 19.3023L31.7412 21.3858C31.8379 21.5433 32.0846 21.7256 32.2587 21.7681L34.564 22.3297Z"
+        fill="white"
+      />
+      <path
+        d="M15.6725 32.0001C15.9558 32.0001 16.203 31.9356 16.4158 31.8283L17.7615 30.6487L17.832 29.061C17.6551 29.061 17.4783 28.9756 17.4783 28.8466L17.4783 26.8953C17.4783 26.7881 17.6192 26.6808 17.832 26.6808L17.7975 25.6084C17.6206 25.6084 17.4438 25.523 17.4438 25.394L17.4438 22.0001C17.4438 21.8928 17.5847 21.7856 17.7975 21.7856L17.832 20.6914C17.6551 20.6914 17.4783 20.606 17.4783 20.4769L17.4783 19.1529C17.4783 19.0457 17.6192 18.9384 17.832 18.9384L17.7975 18.145L17.7629 17.3515L16.4172 16.1718C16.2404 16.0646 15.9572 16.0001 15.674 16.0001L12.1323 16C11.4954 16 11.0009 16.2999 11.0009 16.6862L11.0009 21.0618C11.0009 21.4934 11.1405 21.9134 11.3988 22.2591L12.4008 23.5998L12.4008 24.0001L11.3941 25.3567C11.1382 25.7015 11 26.1195 11.0001 26.5489L11.0009 31.3138C11.0009 31.7001 11.4954 32 12.1323 32L15.6725 32.0001Z"
+        fill="#FCFCFC"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_602_11502"
+          x1="0"
+          y1="0"
+          x2="48"
+          y2="48"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#438FFF" />
+          <stop offset="1" stop-color="#2969C7" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default EventStarted
diff --git a/src/components/Icons/Notifications/EventStartsSoon.tsx b/src/components/Icons/Notifications/EventStartsSoon.tsx
@@ -0,0 +1,37 @@
+import React from 'react'
+
+const EventStartsSoon = (props: React.SVGAttributes<SVGElement>) => {
+  return (
+    <svg
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <circle cx="24" cy="24" r="24" fill="url(#paint0_linear_602_11501)" />
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M16.6744 32C16.9576 32 17.2049 31.9355 17.4176 31.8282L18.7634 30.6486C19.1875 30.4341 19.6122 30.4341 20.0018 30.6486L21.2999 31.8282C21.4768 31.9354 21.76 32 22.0432 32H35.8718C36.5087 32 37.0032 31.7 37.0032 31.3138V16.6862C37.0032 16.2999 36.5087 16 35.8718 16H22.0446C21.7614 16 21.5141 16.0645 21.3014 16.1718L20.0032 17.3514C19.5791 17.5659 19.1544 17.5659 18.7648 17.3514L17.4191 16.1718C17.2422 16.0645 16.959 16 16.6758 16H13.1311C12.4943 16 11.9997 16.2999 11.9997 16.6862L11.9997 20.7505C11.9997 21.3665 12.2836 21.9481 12.7692 22.3272L14.3996 23.5997V24L12.7628 25.287C12.2805 25.6663 11.9989 26.2459 11.999 26.8595L11.9997 31.3138C11.9997 31.7001 12.4943 32 13.1311 32H16.6744ZM18.4457 22C18.4457 21.8928 18.5866 21.7855 18.7993 21.7855H19.9314C20.1082 21.7855 20.2505 21.871 20.2505 22V25.3939C20.2505 25.5011 20.1441 25.6083 19.9314 25.6083H18.7993C18.6225 25.6083 18.4457 25.5229 18.4457 25.3939V22ZM18.8338 18.9383H19.9314C20.1441 18.9383 20.285 19.0238 20.285 19.1528V20.4768C20.285 20.5841 20.1441 20.6913 19.9314 20.6913H18.8338C18.657 20.6913 18.4802 20.6059 18.4802 20.4768V19.1528C18.4802 19.0456 18.6211 18.9383 18.8338 18.9383ZM20.285 28.8465C20.285 28.9537 20.1441 29.061 19.9314 29.061H18.8338C18.657 29.061 18.4802 28.9755 18.4802 28.8465V26.8952C18.4802 26.788 18.6211 26.6807 18.8338 26.6807H19.9314C20.1082 26.6807 20.285 26.7662 20.285 26.8952V28.8465ZM33.564 22.3297C33.7796 22.3824 33.9391 22.521 34.0007 22.7107C34.0624 22.8998 34.0176 23.1113 33.8786 23.2912L32.3802 25.2043C32.2665 25.3485 32.1779 25.65 32.1931 25.8367L32.3976 28.3019C32.4134 28.4916 32.3637 28.6631 32.2583 28.785C32.1618 28.896 32.0263 28.9584 31.8763 28.9605C31.7926 28.9617 31.7064 28.9443 31.6206 28.9089L29.4161 28.0073C29.2605 27.9436 28.9363 27.9481 28.7825 28.0162L26.604 28.9789C26.3654 29.0841 26.1173 29.0408 25.9631 28.8722C25.8543 28.7533 25.7998 28.5833 25.8104 28.3932L25.9461 25.9232C25.9561 25.7361 25.8585 25.4373 25.7414 25.2957L24.1903 23.4251C24.0452 23.2504 23.9947 23.0402 24.051 22.8489C24.1079 22.6575 24.2629 22.5146 24.4769 22.4559L26.7656 21.8307C26.9386 21.7834 27.18 21.5943 27.2723 21.4342L28.4923 19.3159C28.6064 19.1178 28.7819 19.0027 28.9732 19C29.1645 18.9973 29.3431 19.1075 29.4626 19.3023L30.7412 21.3858C30.838 21.5433 31.0846 21.7256 31.2588 21.7681L33.564 22.3297Z"
+        fill="white"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_602_11501"
+          x1="-1.26316"
+          y1="1.26316"
+          x2="48"
+          y2="48"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#34CE76" />
+          <stop offset="1" stop-color="#229754" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default EventStartsSoon
diff --git a/src/components/Notifications/NotificationItem.css b/src/components/Notifications/NotificationItem.css
@@ -28,6 +28,10 @@
   margin: 4px 0;
 }
 
+.dcl.notification-item__content-description a {
+  text-decoration: underline;
+}
+
 .dcl.notification-item__content-timestamp {
   font-size: 12px;
   font-weight: 600;
@@ -41,3 +45,12 @@
   color: var(--primary);
   text-decoration: underline;
 }
+
+.notification-item__countdown {
+  padding: 2px 10px;
+  background-color: #37333d;
+  width: fit-content;
+  color: white;
+  border-radius: 20px;
+  display: flex;
+}
diff --git a/src/components/Notifications/NotificationTypes/Events/EventStartedNotification.tsx b/src/components/Notifications/NotificationTypes/Events/EventStartedNotification.tsx
@@ -0,0 +1,59 @@
+import React from 'react'
+
+import { CommonNotificationProps, EventsStartedNotification } from '../../types'
+import NotificationItem from '../../NotificationItem'
+import EventStarted from '../../../Icons/Notifications/EventStarted'
+
+const i18N = {
+  en: {
+    description: (
+      metadata: EventsStartedNotification['metadata']
+    ): React.ReactNode => (
+      <>
+        The event <a href={metadata.link}>{metadata.name}</a> has begun!
+      </>
+    ),
+    title: 'Event started'
+  },
+  es: {
+    description: (
+      metadata: EventsStartedNotification['metadata']
+    ): React.ReactNode => (
+      <>
+        El evento <a href={metadata.link}>{metadata.name}</a> ha empezado!
+      </>
+    ),
+    title: 'Evento ha comenzado'
+  },
+  zh: {
+    description: (
+      metadata: EventsStartedNotification['metadata']
+    ): React.ReactNode => (
+      <>
+        事件 <a href={metadata.link}>{metadata.name}</a> 已开始
+      </>
+    ),
+    title: '事件开始'
+  }
+}
+
+const EventsStartedNotification = ({
+  notification,
+  locale
+}: CommonNotificationProps<EventsStartedNotification>) => (
+  <NotificationItem
+    image={{ image: <EventStarted width="48" height="48" /> }}
+    timestamp={notification.timestamp}
+    isNew={!notification.read}
+    locale={locale}
+  >
+    <p className="dcl notification-item__content-title">{i18N[locale].title}</p>
+    <a href={notification.metadata.link}>
+      <p className="dcl notification-item__content-description">
+        {i18N[locale].description(notification.metadata)}
+      </p>
+    </a>
+  </NotificationItem>
+)
+
+export default EventsStartedNotification
diff --git a/src/components/Notifications/NotificationTypes/Events/EventStartsSoonNotification.tsx b/src/components/Notifications/NotificationTypes/Events/EventStartsSoonNotification.tsx
@@ -0,0 +1,130 @@
+import React, { useEffect, useState } from 'react'
+import Icon from 'semantic-ui-react/dist/commonjs/elements/Icon/Icon'
+
+import {
+  CommonNotificationProps,
+  EventsStartsSoonNotification
+} from '../../types'
+import NotificationItem from '../../NotificationItem'
+import EventStartsSoon from '../../../Icons/Notifications/EventStartsSoon'
+
+let interval: NodeJS.Timeout
+
+function Countdown({ startDate }: { startDate: string }) {
+  const [minutes, setMinutes] = useState(undefined)
+  const [seconds, setSeconds] = useState(undefined)
+
+  useEffect(() => {
+    interval = setInterval(() => {
+      const eventStartDate = new Date(startDate).getTime()
+      const distance = eventStartDate - Date.now()
+      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
+      const seconds = Math.floor((distance % (1000 * 60)) / 1000)
+
+      setMinutes(minutes)
+      setSeconds(seconds)
+      if (distance < 0) {
+        setMinutes(0)
+        setSeconds(0)
+        clearInterval(interval)
+      }
+    }, 1000)
+    return () => clearInterval(interval)
+  }, [setMinutes, setSeconds])
+
+  const minutesString =
+    minutes !== undefined
+      ? minutes.toLocaleString('en-US', {
+          minimumIntegerDigits: 2,
+          useGrouping: false
+        })
+      : '--'
+  const secondsString =
+    seconds !== undefined
+      ? seconds.toLocaleString('en-US', {
+          minimumIntegerDigits: 2,
+          useGrouping: false
+        })
+      : '--'
+
+  return (
+    <div className="notification-item__countdown">
+      <Icon name="clock outline" />
+      {`${minutesString}:${secondsString}`}
+    </div>
+  )
+}
+
+const i18N = {
+  en: {
+    description: (
+      metadata: EventsStartsSoonNotification['metadata']
+    ): React.ReactNode =>
+      new Date(metadata.startsAt).getTime() > Date.now() ? (
+        <>
+          The event <a href={metadata.link}>{metadata.name}</a> is about to
+          start in <Countdown startDate={metadata.startsAt} />
+        </>
+      ) : (
+        <>
+          The event <a href={metadata.link}>{metadata.name}</a> starts in an
+          hour
+        </>
+      ),
+    title: 'Event starts soon'
+  },
+  es: {
+    description: (
+      metadata: EventsStartsSoonNotification['metadata']
+    ): React.ReactNode =>
+      new Date(metadata.startsAt).getTime() > Date.now() ? (
+        <>
+          El evento <a href={metadata.link}>{metadata.name}</a> esta por empezar
+          en <Countdown startDate={metadata.startsAt} />
+        </>
+      ) : (
+        <>
+          El evento <a href={metadata.link}>{metadata.name}</a> empieza en una
+          hora
+        </>
+      ),
+    title: 'Evento empieza pronto'
+  },
+  zh: {
+    description: (
+      metadata: EventsStartsSoonNotification['metadata']
+    ): React.ReactNode =>
+      new Date(metadata.startsAt).getTime() > Date.now() ? (
+        <>
+          事件 <a href={metadata.link}>{metadata.name}</a> 即将开始 在{' '}
+          <Countdown startDate={metadata.startsAt} />
+        </>
+      ) : (
+        <>
+          事件 <a href={metadata.link}>{metadata.name}</a> 从一个开始 小时
+        </>
+      ),
+    title: '事件即将开始'
+  }
+}
+
+const EventsStartsSoonNotification = ({
+  notification,
+  locale
+}: CommonNotificationProps<EventsStartsSoonNotification>) => (
+  <NotificationItem
+    image={{ image: <EventStartsSoon width="48" height="48" /> }}
+    timestamp={notification.timestamp}
+    isNew={!notification.read}
+    locale={locale}
+  >
+    <p className="dcl notification-item__content-title">{i18N[locale].title}</p>
+    <a href={notification.metadata.link}>
+      <p className="dcl notification-item__content-description">
+        {i18N[locale].description(notification.metadata)}
+      </p>
+    </a>
+  </NotificationItem>
+)
+
+export default EventsStartsSoonNotification
diff --git a/src/components/Notifications/NotificationTypes/index.ts b/src/components/Notifications/NotificationTypes/index.ts
@@ -11,6 +11,8 @@ import GovernanceCoauthorRequestedNotification from './Governance/GovernanceCoau
 import GovernanceNewCommentOnProposalNotification from './Governance/GovernanceNewCommentOnProposalNotification'
 import GovernanceProposalEnactedNotification from './Governance/GovernanceProposalEnactedNotification'
 import GovernanceVotingEndedVoterNotification from './Governance/GovernanceVotingEndedVoterNotification'
+import EventsStartsSoonNotification from './Events/EventStartsSoonNotification'
+import EventsStartedNotification from './Events/EventStartedNotification'
 
 export {
   WorldsAccessRestoredNotification,
@@ -25,5 +27,7 @@ export {
   GovernanceCoauthorRequestedNotification,
   GovernanceNewCommentOnProposalNotification,
   GovernanceProposalEnactedNotification,
-  GovernanceVotingEndedVoterNotification
+  GovernanceVotingEndedVoterNotification,
+  EventsStartsSoonNotification,
+  EventsStartedNotification
 }