feat: New Reward Notifications (#186)

Signed-off-by: Kevin Szuchet <[email protected]>

package.json

@@ -37,7 +37,7 @@
   },
   "homepage": "https://github.com/decentraland/ui2#readme",
   "dependencies": {
-    "@dcl/schemas": "^11.10.5",
+    "@dcl/schemas": "^13.8.6",
     "@dcl/ui-env": "^1.5.1",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",

src/components/Notifications/NotificationTypes/Reward/CampaignGasPriceHigherThanExpectedNotification.i18n.ts

@@ -0,0 +1,25 @@
+const i18n = {
+  en: {
+    description: {
+      start: "The gas price for the",
+      end: "campaign is lower than expected, and the transactions may not be processed.",
+    },
+    title: "Gas Price Higher Than Expected",
+  },
+  es: {
+    description: {
+      start: "El precio del gas para la",
+      end: "campaña 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: {
+      start: "该",
+      end: "活动的燃气价格高于预期，交易可能无法处理。",
+    },
+    title: "燃气价格高于预期",
+  },
+}
+
+export { i18n }

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

@@ -0,0 +1,17 @@
+import React from "react"
+import { i18n } from "./CampaignGasPriceHigherThanExpectedNotification.i18n"
+import { CampaignNotification } from "./CampaignNotification"
+import {
+  CampaignGasPriceHigherThanExpectedNotificationProps,
+  CommonNotificationProps,
+} from "../../types"
+
+const CampaignGasPriceHigherThanExpectedNotification = React.memo(
+  (
+    props: CommonNotificationProps<CampaignGasPriceHigherThanExpectedNotificationProps>
+  ) => {
+    return <CampaignNotification {...props} i18n={i18n} />
+  }
+)
+
+export { CampaignGasPriceHigherThanExpectedNotification }

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

@@ -0,0 +1,40 @@
+import React from "react"
+import { CampaignsCommonNotificationProps } from "./types"
+import { RewardIcon } from "../../../Icon"
+import { NotificationItem } from "../../NotificationItem"
+import {
+  NotificationItemDescription,
+  NotificationItemTitle,
+} from "../../NotificationItem.styled"
+
+const CampaignName = (props: CampaignsCommonNotificationProps) => {
+  const { metadata } = props.notification
+
+  if (metadata.link) {
+    return <a href={metadata.link}>{metadata.campaignName}</a>
+  }
+
+  return <strong>{metadata.campaignName}</strong>
+}
+
+const CampaignNotification = React.memo(
+  (props: CampaignsCommonNotificationProps) => {
+    const { notification, locale, i18n } = props
+    return (
+      <NotificationItem
+        image={<RewardIcon width={48} height={48} />}
+        timestamp={notification.timestamp}
+        isNew={!notification.read}
+        locale={locale}
+      >
+        <NotificationItemTitle>{i18n[locale].title}</NotificationItemTitle>
+        <NotificationItemDescription color="inherit" underline="none">
+          {i18n[locale].description.start} <CampaignName {...props} />{" "}
+          {i18n[locale].description.end}
+        </NotificationItemDescription>
+      </NotificationItem>
+    )
+  }
+)
+
+export { CampaignNotification }

src/components/Notifications/NotificationTypes/Reward/CampaignOutOfFundsNotification.i18n.ts

@@ -0,0 +1,25 @@
+const i18n = {
+  en: {
+    description: {
+      start: "The",
+      end: "campaign has run out of funds.",
+    },
+    title: "Campaign Out of Funds",
+  },
+  es: {
+    description: {
+      start: "La",
+      end: "campaña se ha quedado sin fondos.",
+    },
+    title: "Campaña sin fondos",
+  },
+  zh: {
+    description: {
+      start: "该",
+      end: "活动已经用完资金。",
+    },
+    title: "活动资金用完",
+  },
+}
+
+export { i18n }

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

@@ -0,0 +1,15 @@
+import React from "react"
+import { CampaignNotification } from "./CampaignNotification"
+import { i18n } from "./CampaignOutOfFundsNotification.i18n"
+import {
+  CampaignOutOfFundsNotificationProps,
+  CommonNotificationProps,
+} from "../../types"
+
+const CampaignOutOfFundsNotification = React.memo(
+  (props: CommonNotificationProps<CampaignOutOfFundsNotificationProps>) => {
+    return <CampaignNotification {...props} i18n={i18n} />
+  }
+)
+
+export { CampaignOutOfFundsNotification }

src/components/Notifications/NotificationTypes/Reward/CampaignOutOfStockNotification.i18n.ts

@@ -0,0 +1,25 @@
+const i18n = {
+  en: {
+    description: {
+      start: "The",
+      end: "campaign has run out of stock.",
+    },
+    title: "Campaign Out of Stock",
+  },
+  es: {
+    description: {
+      start: "La",
+      end: "campaña se ha quedado sin stock.",
+    },
+    title: "Campaña sin stock",
+  },
+  zh: {
+    description: {
+      start: "该",
+      end: "活动已经售罄。",
+    },
+    title: "活动售罄",
+  },
+}
+
+export { i18n }

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

@@ -0,0 +1,15 @@
+import React from "react"
+import { CampaignNotification } from "./CampaignNotification"
+import { i18n } from "./CampaignOutOfStockNotification.i18n"
+import {
+  CampaignOutOfStockNotificationProps,
+  CommonNotificationProps,
+} from "../../types"
+
+const CampaignOutOfStockNotification = React.memo(
+  (props: CommonNotificationProps<CampaignOutOfStockNotificationProps>) => {
+    return <CampaignNotification {...props} i18n={i18n} />
+  }
+)
+
+export { CampaignOutOfStockNotification }

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

@@ -1,45 +1,14 @@
 import React from "react"
 import { i18n } from "./RewardAssignedNotification.i18n"
-import { config } from "../../../../config"
-import { RewardIcon } from "../../../Icon"
-import { NotificationItem } from "../../NotificationItem"
-import {
-  NotificationItemDescription,
-  NotificationItemTitle,
-} from "../../NotificationItem.styled"
-import { NotificationItemNFTLink } from "../../NotificationItemNFTLink"
+import { RewardNotification } from "./RewardNotification"
 import {
   CommonNotificationProps,
   RewardAssignedNotificationProps,
 } from "../../types"
-import { getBGColorByRarity } from "../../utils"
 
 const RewardAssignedNotification = React.memo(
   (props: CommonNotificationProps<RewardAssignedNotificationProps>) => {
-    const { notification, locale } = props
-    return (
-      <NotificationItem
-        image={notification.metadata.tokenImage}
-        imageBackgroundColor={getBGColorByRarity(
-          notification.metadata.tokenRarity
-        )}
-        badgeIcon={<RewardIcon />}
-        timestamp={notification.timestamp}
-        isNew={!notification.read}
-        locale={locale}
-      >
-        <NotificationItemTitle>{i18n[locale].title}</NotificationItemTitle>
-        <NotificationItemDescription color="inherit" underline="none">
-          {i18n[locale].description.start}{" "}
-          <NotificationItemNFTLink
-            rarity={notification.metadata.tokenRarity}
-            name={notification.metadata.tokenName}
-            link={config.get("EXPLORER_URL")}
-          />{" "}
-          {i18n[locale].description.end}
-        </NotificationItemDescription>
-      </NotificationItem>
-    )
+    return <RewardNotification {...props} i18n={i18n} />
   }
 )
 

src/components/Notifications/NotificationTypes/Reward/RewardDelayedNotification.i18n.ts

@@ -0,0 +1,25 @@
+const i18n = {
+  en: {
+    description: {
+      start: "We’re working on delivering your",
+      end: "as soon as possible.",
+    },
+    title: "Your Gift is Delayed",
+  },
+  es: {
+    description: {
+      start: "Estamos trabajando en entregar tu",
+      end: "lo antes posible.",
+    },
+    title: "Tu regalo está retrasado",
+  },
+  zh: {
+    description: {
+      start: "我们正在尽快交付您的",
+      end: "。",
+    },
+    title: "您的礼物延迟了",
+  },
+}
+
+export { i18n }

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

@@ -0,0 +1,15 @@
+import React from "react"
+import { i18n } from "./RewardDelayedNotification.i18n"
+import { RewardNotification } from "./RewardNotification"
+import {
+  CommonNotificationProps,
+  RewardDelayedNotificationProps,
+} from "../../types"
+
+const RewardDelayedNotification = React.memo(
+  (props: CommonNotificationProps<RewardDelayedNotificationProps>) => {
+    return <RewardNotification {...props} i18n={i18n} />
+  }
+)
+
+export { RewardDelayedNotification }

src/components/Notifications/NotificationTypes/Reward/RewardInProgressNotification.i18n.ts

@@ -0,0 +1,25 @@
+const i18n = {
+  en: {
+    description: {
+      start: "You’ve received a",
+      end: "for free. Try it out once it arrives!",
+    },
+    title: "A Gift is on its way!",
+  },
+  es: {
+    description: {
+      start: "Recibiste un",
+      end: "gratis. ¡Pruebalo cuando llegue!",
+    },
+    title: "¡Un regalo está en camino!",
+  },
+  zh: {
+    description: {
+      start: "您已免费收到一个",
+      end: "。一旦到达，立即试试吧！",
+    },
+    title: "一份礼物正在路上！",
+  },
+}
+
+export { i18n }

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

@@ -0,0 +1,15 @@
+import React from "react"
+import { i18n } from "./RewardInProgressNotification.i18n"
+import { RewardNotification } from "./RewardNotification"
+import {
+  CommonNotificationProps,
+  RewardInProgressNotificationProps,
+} from "../../types"
+
+const RewardInProgressNotification = React.memo(
+  (props: CommonNotificationProps<RewardInProgressNotificationProps>) => {
+    return <RewardNotification {...props} i18n={i18n} />
+  }
+)
+
+export { RewardInProgressNotification }

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

@@ -0,0 +1,42 @@
+import React from "react"
+import { RewardsCommonNotificationProps } from "./types"
+import { config } from "../../../../config"
+import { RewardIcon } from "../../../Icon"
+import { NotificationItem } from "../../NotificationItem"
+import {
+  NotificationItemDescription,
+  NotificationItemTitle,
+} from "../../NotificationItem.styled"
+import { NotificationItemNFTLink } from "../../NotificationItemNFTLink"
+import { getBGColorByRarity } from "../../utils"
+
+const RewardNotification = React.memo(
+  (props: RewardsCommonNotificationProps) => {
+    const { notification, locale, i18n } = props
+    return (
+      <NotificationItem
+        image={notification.metadata.tokenImage}
+        imageBackgroundColor={getBGColorByRarity(
+          notification.metadata.tokenRarity
+        )}
+        badgeIcon={<RewardIcon />}
+        timestamp={notification.timestamp}
+        isNew={!notification.read}
+        locale={locale}
+      >
+        <NotificationItemTitle>{i18n[locale].title}</NotificationItemTitle>
+        <NotificationItemDescription color="inherit" underline="none">
+          {i18n[locale].description.start}{" "}
+          <NotificationItemNFTLink
+            rarity={notification.metadata.tokenRarity}
+            name={notification.metadata.tokenName}
+            link={config.get("EXPLORER_URL")}
+          />{" "}
+          {i18n[locale].description.end}
+        </NotificationItemDescription>
+      </NotificationItem>
+    )
+  }
+)
+
+export { RewardNotification }