feat: New rewards notifications (decentraland#558)

* feat: Add new notifications related to Rewards

* feat: Use a bigger version of the reward icon as the campaign notifications image

* chore: Remove unused type

src/components/Notifications/NotificationTypes/Reward/CampaignGasPriceHigherThanExpectedNotification.tsx

@@ -0,0 +1,69 @@
+import React from 'react'
+
+import Reward from '../../../Icons/Notifications/Reward'
+import {
+  CommonNotificationProps,
+  CampaignGasPriceHigherThanExpectedNotification
+} from '../../types'
+import NotificationItem from '../../NotificationItem'
+import CampaignName from './CampaignName'
+
+const i18N = {
+  en: {
+    description: (
+      metadata: CampaignGasPriceHigherThanExpectedNotification['metadata']
+    ): React.ReactNode => (
+      <>
+        The gas price for the <CampaignName metadata={metadata} /> campaign is
+        lower than expected, and the transactions may not be processed.
+      </>
+    ),
+    title: 'Gas Price Higher Than Expected'
+  },
+  es: {
+    description: (
+      metadata: CampaignGasPriceHigherThanExpectedNotification['metadata']
+    ): React.ReactNode => (
+      <>
+        El precio del gas para la campaña <CampaignName metadata={metadata} />{' '}
+        es más alto de lo esperado, y las transacciones pueden no ser
+        procesadas.
+      </>
+    ),
+    title: 'Precio del Gas Más Alto de lo Esperado'
+  },
+  zh: {
+    description: (
+      metadata: CampaignGasPriceHigherThanExpectedNotification['metadata']
+    ): React.ReactNode => (
+      <>
+        <CampaignName metadata={metadata} />{' '}
+        活动的燃气价格高于预期，交易可能无法处理。
+      </>
+    ),
+    title: '燃气价格高于预期'
+  }
+}
+
+export default function CampaignGasPriceHigherThanExpectedNotification({
+  notification,
+  locale
+}: CommonNotificationProps<CampaignGasPriceHigherThanExpectedNotification>) {
+  return (
+    <NotificationItem
+      image={{
+        image: <Reward width="48" height="48" />
+      }}
+      timestamp={notification.timestamp}
+      isNew={!notification.read}
+      locale={locale}
+    >
+      <p className="dcl notification-item__content-title">
+        {i18N[locale].title}
+      </p>
+      <p className="dcl notification-item__content-description">
+        {i18N[locale].description(notification.metadata)}
+      </p>
+    </NotificationItem>
+  )
+}

src/components/Notifications/NotificationTypes/Reward/CampaignName.tsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import { CampaignOutOfStockNotification } from '../../types'
+
+type CampaignNameProps = {
+  metadata: CampaignOutOfStockNotification['metadata']
+}
+
+export default function CampaignName(props: CampaignNameProps) {
+  const { metadata } = props
+
+  if (metadata.link) {
+    return <a href={metadata.link}>{metadata.campaignName}</a>
+  }
+
+  return <strong>{metadata.campaignName}</strong>
+}

src/components/Notifications/NotificationTypes/Reward/CampaignOutOfFundsNotification.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+
+import Reward from '../../../Icons/Notifications/Reward'
+import {
+  CommonNotificationProps,
+  CampaignOutOfFundsNotification
+} from '../../types'
+import NotificationItem from '../../NotificationItem'
+import CampaignName from './CampaignName'
+
+const i18N = {
+  en: {
+    description: (
+      metadata: CampaignOutOfFundsNotification['metadata']
+    ): React.ReactNode => (
+      <>
+        The <CampaignName metadata={metadata} /> campaign has run out of funds.
+      </>
+    ),
+    title: 'Campaign Out of Funds'
+  },
+  es: {
+    description: (
+      metadata: CampaignOutOfFundsNotification['metadata']
+    ): React.ReactNode => (
+      <>
+        La campaña <CampaignName metadata={metadata} /> se ha quedado sin
+        fondos.
+      </>
+    ),
+    title: 'Campaña sin fondos'
+  },
+  zh: {
+    description: (
+      metadata: CampaignOutOfFundsNotification['metadata']
+    ): React.ReactNode => (
+      <>
+        <CampaignName metadata={metadata} /> 活动资金不足。
+      </>
+    ),
+    title: '活动资金不足'
+  }
+}
+
+export default function CampaignOutOfFundsNotification({
+  notification,
+  locale
+}: CommonNotificationProps<CampaignOutOfFundsNotification>) {
+  return (
+    <NotificationItem
+      image={{
+        image: <Reward width="48" height="48" />
+      }}
+      timestamp={notification.timestamp}
+      isNew={!notification.read}
+      locale={locale}
+    >
+      <p className="dcl notification-item__content-title">
+        {i18N[locale].title}
+      </p>
+      <p className="dcl notification-item__content-description">
+        {i18N[locale].description(notification.metadata)}
+      </p>
+    </NotificationItem>
+  )
+}

src/components/Notifications/NotificationTypes/Reward/CampaignOutOfStockNotification.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+
+import Reward from '../../../Icons/Notifications/Reward'
+import {
+  CommonNotificationProps,
+  CampaignOutOfStockNotification
+} from '../../types'
+import NotificationItem from '../../NotificationItem'
+import CampaignName from './CampaignName'
+
+const i18N = {
+  en: {
+    description: (
+      metadata: CampaignOutOfStockNotification['metadata']
+    ): React.ReactNode => (
+      <>
+        The <CampaignName metadata={metadata} /> campaign has run out of stock.
+      </>
+    ),
+    title: 'Campaign Out of Stock'
+  },
+  es: {
+    description: (
+      metadata: CampaignOutOfStockNotification['metadata']
+    ): React.ReactNode => (
+      <>
+        La campaña <CampaignName metadata={metadata} /> se ha quedado sin stock.
+      </>
+    ),
+    title: 'Campaña sin stock'
+  },
+  zh: {
+    description: (
+      metadata: CampaignOutOfStockNotification['metadata']
+    ): React.ReactNode => (
+      <>
+        <CampaignName metadata={metadata} /> 活动库存不足。
+      </>
+    ),
+    title: '活动资金不足'
+  }
+}
+
+export default function CampaignOutOfStockNotification({
+  notification,
+  locale
+}: CommonNotificationProps<CampaignOutOfStockNotification>) {
+  return (
+    <NotificationItem
+      image={{
+        image: <Reward width="48" height="48" />
+      }}
+      timestamp={notification.timestamp}
+      isNew={!notification.read}
+      locale={locale}
+    >
+      <p className="dcl notification-item__content-title">
+        {i18N[locale].title}
+      </p>
+      <p className="dcl notification-item__content-description">
+        {i18N[locale].description(notification.metadata)}
+      </p>
+    </NotificationItem>
+  )
+}