feat: Governance b&t notifications (#536)

* feat: new B&T notifications * fix: prettier
decentraland · May 6, 2024 · 620bdaf · 620bdaf
1 parent 7ba2345
commit 620bdaf
Show file tree

Hide file tree

Showing 8 changed files with 319 additions and 1 deletion.
diff --git a/src/components/Icons/Notifications/PitchIcon.tsx b/src/components/Icons/Notifications/PitchIcon.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+
+const PitchIcon = (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_2576_13)" />
+      <path
+        d="M16.6961 21.9922L13 28.3259V16.6668C13 15.1959 14.1959 14 15.6668 14H20.563C21.2714 14 21.9506 14.2792 22.4506 14.7792L23.5549 15.8835C24.0549 16.3835 24.7341 16.6627 25.4425 16.6627H30.3345C31.8054 16.6627 33.0013 17.8586 33.0013 19.3295V20.6629H19.0004C18.0503 20.6629 17.1753 21.1671 16.6961 21.988V21.9922ZM17.8461 22.6631C18.0878 22.2505 18.5254 22.0005 19.0004 22.0005H35.6681C36.1473 22.0005 36.5849 22.2547 36.8224 22.6714C37.0599 23.0881 37.0599 23.5965 36.8182 24.009L32.1512 32.0095C31.9137 32.4179 31.4762 32.6679 31.0012 32.6679H14.3334C13.8542 32.6679 13.4167 32.4137 13.1792 31.997C12.9417 31.5803 12.9417 31.0719 13.1833 30.6594L17.8503 22.6589L17.8461 22.6631Z"
+        fill="white"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_2576_13"
+          x1="0"
+          y1="0"
+          x2="48"
+          y2="48"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#D80027" />
+          <stop offset="1" stop-color="#720015" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default PitchIcon
diff --git a/src/components/Icons/Notifications/TenderIcon.tsx b/src/components/Icons/Notifications/TenderIcon.tsx
@@ -0,0 +1,35 @@
+import React from 'react'
+
+const TenderIcon = (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_2576_13)" />
+      <path
+        d="M14.6667 14.3333C14.6667 13.5958 14.0708 13 13.3333 13C12.5958 13 12 13.5958 12 14.3333V18.3333V29C12 30.4708 13.1958 31.6667 14.6667 31.6667H22.6667V29H14.6667V19.6667H22.6667V17H14.6667V14.3333ZM24 21C24 21.7375 24.5958 22.3333 25.3333 22.3333H34.6667C35.4042 22.3333 36 21.7375 36 21V15.6667C36 14.9292 35.4042 14.3333 34.6667 14.3333H30.5542C30.2 14.3333 29.8625 14.1917 29.6125 13.9417L29.0583 13.3917C28.8083 13.1417 28.4708 13 28.1167 13H25.3333C24.5958 13 24 13.5958 24 14.3333V21ZM24 33C24 33.7375 24.5958 34.3333 25.3333 34.3333H34.6667C35.4042 34.3333 36 33.7375 36 33V27.6667C36 26.9292 35.4042 26.3333 34.6667 26.3333H30.5542C30.2 26.3333 29.8625 26.1917 29.6125 25.9417L29.0583 25.3875C28.8083 25.1375 28.4708 24.9958 28.1167 24.9958H25.3333C24.5958 24.9958 24 25.5917 24 26.3292V33Z"
+        fill="white"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_2576_13"
+          x1="0"
+          y1="0"
+          x2="48"
+          y2="48"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stop-color="#D80027" />
+          <stop offset="1" stop-color="#720015" />
+        </linearGradient>
+      </defs>
+    </svg>
+  )
+}
+
+export default TenderIcon
diff --git a/...mponents/Notifications/NotificationTypes/Governance/GovernancePitchPassedNotification.tsx b/...mponents/Notifications/NotificationTypes/Governance/GovernancePitchPassedNotification.tsx
@@ -0,0 +1,91 @@
+import React from 'react'
+import {
+  CommonNotificationProps,
+  GovernancePitchPassedNotification
+} from '../../types'
+import NotificationItem from '../../NotificationItem'
+import PitchIcon from '../../../Icons/Notifications/PitchIcon'
+
+const i18N = {
+  en: {
+    description: (link: string): React.ReactNode => (
+      <>
+        Help to advance this idea by proposing potential solutions{' '}
+        <a href={link} className="dcl notification-link">
+          here
+        </a>
+        .
+      </>
+    ),
+    title: (proposalTitle: string): React.ReactNode => (
+      <>
+        The Pitch "
+        <span className="dcl notification-text-highlighted">
+          {proposalTitle}
+        </span>
+        " can now receive Tenders
+      </>
+    )
+  },
+  es: {
+    description: (link: string): React.ReactNode => (
+      <>
+        Ayuda a avanzar esta idea proponiendo soluciones potenciales{' '}
+        <a href={link} className="dcl notification-link">
+          aquí
+        </a>
+        .
+      </>
+    ),
+    title: (proposalTitle: string): React.ReactNode => (
+      <>
+        La Convocatoria "
+        <span className="dcl notification-text-highlighted">
+          {proposalTitle}
+        </span>
+        " ahora puede recibir licitaciones
+      </>
+    )
+  },
+  zh: {
+    description: (link: string): React.ReactNode => (
+      <>
+        通过提出可能的解决方案来帮助推进这个想法{' '}
+        <a href={link} className="dcl notification-link">
+          这里
+        </a>
+        .
+      </>
+    ),
+    title: (proposalTitle: string): React.ReactNode => (
+      <>
+        投标邀请 "
+        <span className="dcl notification-text-highlighted">
+          {proposalTitle}
+        </span>
+        " 现在可以接收投标
+      </>
+    )
+  }
+}
+
+const GovernancePitchPassedNotification = ({
+  notification,
+  locale
+}: CommonNotificationProps<GovernancePitchPassedNotification>) => (
+  <NotificationItem
+    image={{ image: <PitchIcon width="48" height="48" /> }}
+    timestamp={notification.timestamp}
+    isNew={!notification.read}
+    locale={locale}
+  >
+    <p className="dcl notification-item__content-title">
+      {i18N[locale].title(notification.metadata.proposalTitle)}
+    </p>
+    <p className="dcl notification-item__content-description">
+      {i18N[locale].description(notification.metadata.link)}
+    </p>
+  </NotificationItem>
+)
+
+export default GovernancePitchPassedNotification
diff --git a/...ponents/Notifications/NotificationTypes/Governance/GovernanceTenderPassedNotification.tsx b/...ponents/Notifications/NotificationTypes/Governance/GovernanceTenderPassedNotification.tsx
@@ -0,0 +1,93 @@
+import React from 'react'
+import {
+  CommonNotificationProps,
+  GovernanceTenderPassedNotification
+} from '../../types'
+import NotificationItem from '../../NotificationItem'
+import TenderIcon from '../../../Icons/Notifications/TenderIcon'
+
+const i18N = {
+  en: {
+    description: (link: string): React.ReactNode => (
+      <>
+        If think you can tackle this solution, propose a Project and get funding
+        from the DAO{' '}
+        <a href={link} className="dcl notification-link">
+          here
+        </a>
+        .
+      </>
+    ),
+    title: (proposalTitle: string): React.ReactNode => (
+      <>
+        The Tender "
+        <span className="dcl notification-text-highlighted">
+          {proposalTitle}
+        </span>
+        " can now receive Bid Projects
+      </>
+    )
+  },
+  es: {
+    description: (link: string): React.ReactNode => (
+      <>
+        Si crees que puedes abordar esta solución, propón un proyecto y obtén
+        financiación del DAO{' '}
+        <a href={link} className="dcl notification-link">
+          aquí
+        </a>
+        .
+      </>
+    ),
+    title: (proposalTitle: string): React.ReactNode => (
+      <>
+        La Licitación "
+        <span className="dcl notification-text-highlighted">
+          {proposalTitle}
+        </span>
+        " ahora puede recibir Proyectos de Oferta
+      </>
+    )
+  },
+  zh: {
+    description: (link: string): React.ReactNode => (
+      <>
+        如果你认为可以解决这个问题，提出一个项目并从DAO获得资金支持{' '}
+        <a href={link} className="dcl notification-link">
+          这里
+        </a>
+        .
+      </>
+    ),
+    title: (proposalTitle: string): React.ReactNode => (
+      <>
+        投标 "
+        <span className="dcl notification-text-highlighted">
+          {proposalTitle}
+        </span>
+        " 现在可以接收项目投标
+      </>
+    )
+  }
+}
+
+const GovernanceTenderPassedNotification = ({
+  notification,
+  locale
+}: CommonNotificationProps<GovernanceTenderPassedNotification>) => (
+  <NotificationItem
+    image={{ image: <TenderIcon width="48" height="48" /> }}
+    timestamp={notification.timestamp}
+    isNew={!notification.read}
+    locale={locale}
+  >
+    <p className="dcl notification-item__content-title">
+      {i18N[locale].title(notification.metadata.proposalTitle)}
+    </p>
+    <p className="dcl notification-item__content-description">
+      {i18N[locale].description(notification.metadata.link)}
+    </p>
+  </NotificationItem>
+)
+
+export default GovernanceTenderPassedNotification
diff --git a/src/components/Notifications/NotificationTypes/index.ts b/src/components/Notifications/NotificationTypes/index.ts
@@ -12,6 +12,8 @@ import GovernanceNewCommentOnProposalNotification from './Governance/GovernanceN
 import GovernanceNewCommentOnProjectUpdateNotification from './Governance/GovernanceNewCommentOnProjectUpdateNotification'
 import GovernanceProposalEnactedNotification from './Governance/GovernanceProposalEnactedNotification'
 import GovernanceVotingEndedVoterNotification from './Governance/GovernanceVotingEndedVoterNotification'
+import GovernanceTenderPassedNotification from './Governance/GovernanceTenderPassedNotification'
+import GovernancePitchPassedNotification from './Governance/GovernancePitchPassedNotification'
 import LandRentedNotification from './Land/LandRentedNotification'
 import LandRentalEndedNotification from './Land/LandRentalEndedNotification'
 import RewardAssignedNotification from './Reward/RewardAssignedNotification'
@@ -33,6 +35,8 @@ export {
   GovernanceNewCommentOnProjectUpdateNotification,
   GovernanceProposalEnactedNotification,
   GovernanceVotingEndedVoterNotification,
+  GovernancePitchPassedNotification,
+  GovernanceTenderPassedNotification,
   LandRentalEndedNotification,
   LandRentedNotification,
   RewardAssignedNotification,

diff --git a/src/components/Notifications/Notifications.stories.tsx b/src/components/Notifications/Notifications.stories.tsx
@@ -18,7 +18,9 @@ import {
   LandRentedNotification,
   RewardAssignedNotification,
   EventsStartedNotification,
-  EventsStartsSoonNotification
+  EventsStartsSoonNotification,
+  GovernancePitchPassedNotification,
+  GovernanceTenderPassedNotification
 } from './NotificationTypes'
 import { shorten } from '../AddressField/utils'
 
@@ -499,6 +501,44 @@ storiesOf('Notifications Toggle', module)
             updated_at: '2023-11-29T12:51:00.600Z'
           }}
         />
+        <GovernancePitchPassedNotification
+          locale="en"
+          notification={{
+            id: 'AA',
+            read: true,
+            type: DecentralandNotificationType.GOVERNANCE_PITCH_PASSED,
+            address: '0xA',
+            timestamp: new Date().getTime(),
+            metadata: {
+              link: 'https://decentraland.org/governance',
+              title: 'Test Governance Announcement',
+              description: 'Test description',
+              proposalId: 'AAA_PROPOSAL_111',
+              proposalTitle: 'Open Source all code using DAO funds'
+            },
+            created_at: '2023-11-29T12:51:00.600Z',
+            updated_at: '2023-11-29T12:51:00.600Z'
+          }}
+        />
+        <GovernanceTenderPassedNotification
+          locale="en"
+          notification={{
+            id: 'AA',
+            read: true,
+            type: DecentralandNotificationType.GOVERNANCE_TENDER_PASSED,
+            address: '0xA',
+            timestamp: new Date().getTime(),
+            metadata: {
+              link: 'https://decentraland.org/governance',
+              title: 'Test Governance Announcement',
+              description: 'Test description',
+              proposalId: 'AAA_PROPOSAL_111',
+              proposalTitle: 'Open Source all code using DAO funds'
+            },
+            created_at: '2023-11-29T12:51:00.600Z',
+            updated_at: '2023-11-29T12:51:00.600Z'
+          }}
+        />
       </div>
     )
   })

diff --git a/src/components/Notifications/types.ts b/src/components/Notifications/types.ts
@@ -33,6 +33,8 @@ export enum DecentralandNotificationType {
   GOVERNANCE_VOTING_ENDED_VOTER = 'governance_voting_ended_voter',
   GOVERNANCE_NEW_COMMENT_ON_PROPOSAL = 'governance_new_comment_on_proposal',
   GOVERNANCE_NEW_COMMENT_ON_PROJECT_UPDATE = 'governance_new_comment_on_project_update',
+  GOVERNANCE_PITCH_PASSED = 'governance_pitch_passed',
+  GOVERNANCE_TENDER_PASSED = 'governance_tender_passed',
   WORLDS_MISSING_RESOURCES = 'worlds_missing_resources',
   WORLDS_ACCESS_RESTRICTED = 'worlds_access_restricted',
   WORLDS_ACCESS_RESTORED = 'worlds_access_restored',
@@ -141,6 +143,16 @@ export type GovernanceNewCommentOnProjectUpdateNotification =
     CommonGovernanceNotificationMetadata
   >
 
+export type GovernancePitchPassedNotification = RawDecentralandNotification<
+  DecentralandNotificationType.GOVERNANCE_PITCH_PASSED,
+  CommonGovernanceNotificationMetadata
+>
+
+export type GovernanceTenderPassedNotification = RawDecentralandNotification<
+  DecentralandNotificationType.GOVERNANCE_TENDER_PASSED,
+  CommonGovernanceNotificationMetadata
+>
+
 type GovernanceNotifications =
   | GovernanceAnnouncementNotification
   | GovernanceProposalEnactedNotification
@@ -149,6 +161,8 @@ type GovernanceNotifications =
   | GovernanceVotingEndedVoterNotification
   | GovernanceNewCommentOnProposalNotification
   | GovernanceNewCommentOnProjectUpdateNotification
+  | GovernancePitchPassedNotification
+  | GovernanceTenderPassedNotification
 
 // Worlds Notifications
 

diff --git a/src/components/Notifications/utils.ts b/src/components/Notifications/utils.ts
@@ -15,6 +15,8 @@ import {
   GovernanceNewCommentOnProjectUpdateNotification,
   GovernanceProposalEnactedNotification,
   GovernanceVotingEndedVoterNotification,
+  GovernancePitchPassedNotification,
+  GovernanceTenderPassedNotification,
   ItemSoldNotification,
   LandRentalEndedNotification,
   LandRentedNotification,
@@ -69,6 +71,10 @@ export const NotificationComponentByType: DecentralandNotificationComponentByTyp
       GovernanceProposalEnactedNotification,
     [DecentralandNotificationType.GOVERNANCE_VOTING_ENDED_VOTER]:
       GovernanceVotingEndedVoterNotification,
+    [DecentralandNotificationType.GOVERNANCE_PITCH_PASSED]:
+      GovernancePitchPassedNotification,
+    [DecentralandNotificationType.GOVERNANCE_TENDER_PASSED]:
+      GovernanceTenderPassedNotification,
     [DecentralandNotificationType.WORLDS_MISSING_RESOURCES]:
       WorldsMissingResourcesNotification,
     [DecentralandNotificationType.WORLDS_ACCESS_RESTORED]: