diff --git a/package-lock.json b/package-lock.json index adf3d124..795ea427 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2076,9 +2076,9 @@ } }, "node_modules/@dcl/schemas": { - "version": "13.6.2", - "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-13.6.2.tgz", - "integrity": "sha512-sps6khw7pn8hY/TRr8aH4gV+t5xVi7A32PZ4EVVJzjDAhTXAxa74wAI9cA/y/gR6rYKWu96LtHoEBf7wde8/lQ==", + "version": "13.8.5", + "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-13.8.5.tgz", + "integrity": "sha512-SO0pHJi3xfjwMMbVVLsXm/qrt1L7VCO09MA+eefsGPmfbboiUIBM2mxJFBMxrCn/F/+SSxI3uLHo8xytCjFdkg==", "dependencies": { "ajv": "^8.11.0", "ajv-errors": "^3.0.0", @@ -34322,7 +34322,7 @@ }, "node_modules/npm/node_modules/lodash._baseindexof": { "version": "3.1.0", - "dev": true, + "extraneous": true, "inBundle": true, "license": "MIT" }, @@ -34338,19 +34338,19 @@ }, "node_modules/npm/node_modules/lodash._bindcallback": { "version": "3.0.1", - "dev": true, + "extraneous": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/lodash._cacheindexof": { "version": "3.0.2", - "dev": true, + "extraneous": true, "inBundle": true, "license": "MIT" }, "node_modules/npm/node_modules/lodash._createcache": { "version": "3.1.2", - "dev": true, + "extraneous": true, "inBundle": true, "license": "MIT", "dependencies": { @@ -34365,7 +34365,7 @@ }, "node_modules/npm/node_modules/lodash._getnative": { "version": "3.9.1", - "dev": true, + "extraneous": true, "inBundle": true, "license": "MIT" }, @@ -34383,7 +34383,7 @@ }, "node_modules/npm/node_modules/lodash.restparam": { "version": "3.6.1", - "dev": true, + "extraneous": true, "inBundle": true, "license": "MIT" }, @@ -49159,9 +49159,9 @@ } }, "@dcl/schemas": { - "version": "13.6.2", - "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-13.6.2.tgz", - "integrity": "sha512-sps6khw7pn8hY/TRr8aH4gV+t5xVi7A32PZ4EVVJzjDAhTXAxa74wAI9cA/y/gR6rYKWu96LtHoEBf7wde8/lQ==", + "version": "13.8.5", + "resolved": "https://registry.npmjs.org/@dcl/schemas/-/schemas-13.8.5.tgz", + "integrity": "sha512-SO0pHJi3xfjwMMbVVLsXm/qrt1L7VCO09MA+eefsGPmfbboiUIBM2mxJFBMxrCn/F/+SSxI3uLHo8xytCjFdkg==", "requires": { "ajv": "^8.11.0", "ajv-errors": "^3.0.0", @@ -73555,7 +73555,7 @@ "lodash._baseindexof": { "version": "3.1.0", "bundled": true, - "dev": true + "extraneous": true }, "lodash._baseuniq": { "version": "4.6.0", @@ -73569,17 +73569,17 @@ "lodash._bindcallback": { "version": "3.0.1", "bundled": true, - "dev": true + "extraneous": true }, "lodash._cacheindexof": { "version": "3.0.2", "bundled": true, - "dev": true + "extraneous": true }, "lodash._createcache": { "version": "3.1.2", "bundled": true, - "dev": true, + "extraneous": true, "requires": { "lodash._getnative": "^3.0.0" } @@ -73592,7 +73592,7 @@ "lodash._getnative": { "version": "3.9.1", "bundled": true, - "dev": true + "extraneous": true }, "lodash._root": { "version": "3.0.1", @@ -73607,7 +73607,7 @@ "lodash.restparam": { "version": "3.6.1", "bundled": true, - "dev": true + "extraneous": true }, "lodash.union": { "version": "4.6.0", diff --git a/src/components/Notifications/NotificationTypes/Reward/CampaignGasPriceHigherThanExpectedNotification.tsx b/src/components/Notifications/NotificationTypes/Reward/CampaignGasPriceHigherThanExpectedNotification.tsx new file mode 100644 index 00000000..5de84506 --- /dev/null +++ b/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 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 {' '} + 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 => ( + <> + {' '} + 活动的燃气价格高于预期,交易可能无法处理。 + + ), + title: '燃气价格高于预期' + } +} + +export default function CampaignGasPriceHigherThanExpectedNotification({ + notification, + locale +}: CommonNotificationProps) { + return ( + + }} + timestamp={notification.timestamp} + isNew={!notification.read} + locale={locale} + > +

+ {i18N[locale].title} +

+

+ {i18N[locale].description(notification.metadata)} +

+
+ ) +} diff --git a/src/components/Notifications/NotificationTypes/Reward/CampaignName.tsx b/src/components/Notifications/NotificationTypes/Reward/CampaignName.tsx new file mode 100644 index 00000000..a12b0777 --- /dev/null +++ b/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 {metadata.campaignName} + } + + return {metadata.campaignName} +} diff --git a/src/components/Notifications/NotificationTypes/Reward/CampaignOutOfFundsNotification.tsx b/src/components/Notifications/NotificationTypes/Reward/CampaignOutOfFundsNotification.tsx new file mode 100644 index 00000000..4a6c5a42 --- /dev/null +++ b/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 campaign has run out of funds. + + ), + title: 'Campaign Out of Funds' + }, + es: { + description: ( + metadata: CampaignOutOfFundsNotification['metadata'] + ): React.ReactNode => ( + <> + La campaña se ha quedado sin + fondos. + + ), + title: 'Campaña sin fondos' + }, + zh: { + description: ( + metadata: CampaignOutOfFundsNotification['metadata'] + ): React.ReactNode => ( + <> + 活动资金不足。 + + ), + title: '活动资金不足' + } +} + +export default function CampaignOutOfFundsNotification({ + notification, + locale +}: CommonNotificationProps) { + return ( + + }} + timestamp={notification.timestamp} + isNew={!notification.read} + locale={locale} + > +

+ {i18N[locale].title} +

+

+ {i18N[locale].description(notification.metadata)} +

+
+ ) +} diff --git a/src/components/Notifications/NotificationTypes/Reward/CampaignOutOfStockNotification.tsx b/src/components/Notifications/NotificationTypes/Reward/CampaignOutOfStockNotification.tsx new file mode 100644 index 00000000..30bf3292 --- /dev/null +++ b/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 campaign has run out of stock. + + ), + title: 'Campaign Out of Stock' + }, + es: { + description: ( + metadata: CampaignOutOfStockNotification['metadata'] + ): React.ReactNode => ( + <> + La campaña se ha quedado sin stock. + + ), + title: 'Campaña sin stock' + }, + zh: { + description: ( + metadata: CampaignOutOfStockNotification['metadata'] + ): React.ReactNode => ( + <> + 活动库存不足。 + + ), + title: '活动资金不足' + } +} + +export default function CampaignOutOfStockNotification({ + notification, + locale +}: CommonNotificationProps) { + return ( + + }} + timestamp={notification.timestamp} + isNew={!notification.read} + locale={locale} + > +

+ {i18N[locale].title} +

+

+ {i18N[locale].description(notification.metadata)} +

+
+ ) +} diff --git a/src/components/Notifications/NotificationTypes/Reward/RewardDelayedNotification.tsx b/src/components/Notifications/NotificationTypes/Reward/RewardDelayedNotification.tsx new file mode 100644 index 00000000..0b483496 --- /dev/null +++ b/src/components/Notifications/NotificationTypes/Reward/RewardDelayedNotification.tsx @@ -0,0 +1,84 @@ +import React from 'react' + +import Reward from '../../../Icons/Notifications/Reward' +import { CommonNotificationProps, RewardDelayedNotification } from '../../types' +import NotificationItem from '../../NotificationItem' +import { getBGColorByRarity } from '../../utils' +import NotificationItemNFTLink from '../../NotificationItemNFTLink' +import { config } from '../../../../config' + +const i18N = { + en: { + description: ( + reward: RewardDelayedNotification['metadata'] + ): React.ReactNode => ( + <> + We’re working on delivering your + + as soon as possible. + + ), + title: 'Your Gift is Delayed' + }, + es: { + description: ( + reward: RewardDelayedNotification['metadata'] + ): React.ReactNode => ( + <> + Estamos trabajando en entregar tu + + lo antes posible. + + ), + title: 'Tu regalo está retrasado' + }, + zh: { + description: ( + reward: RewardDelayedNotification['metadata'] + ): React.ReactNode => ( + <> + 我们正在尽快交付您的 + + 。 + + ), + title: '您的礼物延迟了' + } +} + +export default function RewardDelayedNotification({ + notification, + locale +}: CommonNotificationProps) { + return ( + + }} + timestamp={notification.timestamp} + isNew={!notification.read} + locale={locale} + > +

+ {i18N[locale].title} +

+

+ {i18N[locale].description(notification.metadata)} +

+
+ ) +} diff --git a/src/components/Notifications/NotificationTypes/Reward/RewardInProgressNotification.tsx b/src/components/Notifications/NotificationTypes/Reward/RewardInProgressNotification.tsx new file mode 100644 index 00000000..4ef20b9a --- /dev/null +++ b/src/components/Notifications/NotificationTypes/Reward/RewardInProgressNotification.tsx @@ -0,0 +1,87 @@ +import React from 'react' + +import Reward from '../../../Icons/Notifications/Reward' +import { + CommonNotificationProps, + RewardInProgressNotification +} from '../../types' +import NotificationItem from '../../NotificationItem' +import { getBGColorByRarity } from '../../utils' +import NotificationItemNFTLink from '../../NotificationItemNFTLink' +import { config } from '../../../../config' + +const i18N = { + en: { + description: ( + reward: RewardInProgressNotification['metadata'] + ): React.ReactNode => ( + <> + You’ve received a + + for free. Try it out once it arrives! + + ), + title: 'A Gift is on its way!' + }, + es: { + description: ( + reward: RewardInProgressNotification['metadata'] + ): React.ReactNode => ( + <> + Recibiste un + + gratis. ¡Pruebalo cuando llegue! + + ), + title: '¡Un regalo está en camino!' + }, + zh: { + description: ( + reward: RewardInProgressNotification['metadata'] + ): React.ReactNode => ( + <> + 您已免费收到一个 + + 。一旦到达,立即试试吧! + + ), + title: '一份礼物正在路上!' + } +} + +export default function RewardInProgressNotification({ + notification, + locale +}: CommonNotificationProps) { + return ( + + }} + timestamp={notification.timestamp} + isNew={!notification.read} + locale={locale} + > +

+ {i18N[locale].title} +

+

+ {i18N[locale].description(notification.metadata)} +

+
+ ) +} diff --git a/src/components/Notifications/Notifications.stories.tsx b/src/components/Notifications/Notifications.stories.tsx index 9c1246ed..1262946c 100644 --- a/src/components/Notifications/Notifications.stories.tsx +++ b/src/components/Notifications/Notifications.stories.tsx @@ -28,6 +28,11 @@ import { GovernanceVotedOnBehalfNotification } from './NotificationTypes' import { shorten } from '../AddressField/utils' +import RewardInProgressNotification from './NotificationTypes/Reward/RewardInProgressNotification' +import RewardDelayedNotification from './NotificationTypes/Reward/RewardDelayedNotification' +import CampaignOutOfStockNotification from './NotificationTypes/Reward/CampaignOutOfStockNotification' +import CampaignOutOfFundsNotification from './NotificationTypes/Reward/CampaignOutOfFundsNotification' +import CampaignGasPriceHigherThanExpectedNotification from './NotificationTypes/Reward/CampaignGasPriceHigherThanExpectedNotification' storiesOf('Notifications Toggle', module) .add('Without new notifications', () => { @@ -682,6 +687,97 @@ storiesOf('Notifications Toggle', module) }} locale="en" /> + + + + + ) + }) + .add('Campaign Notifications', () => { + return ( +
+ + +
) }) diff --git a/src/components/Notifications/types.ts b/src/components/Notifications/types.ts index 94524119..84a039d7 100644 --- a/src/components/Notifications/types.ts +++ b/src/components/Notifications/types.ts @@ -235,21 +235,55 @@ type LandNotifications = LandRentedNotification | LandRentalEndedNotification // Reward Notifications +type CommonRewardsMetadata = { + tokenName: string + tokenImage: string + tokenRarity: Rarity +} + +type CommonCampaignMetadata = { + link?: string + campaignName: string +} + export type RewardAssignedNotification = RawDecentralandNotification< NotificationType.REWARD_ASSIGNED, - { - tokenName: string - tokenImage: string - tokenRarity: Rarity - } + CommonRewardsMetadata > + +export type RewardInProgressNotification = RawDecentralandNotification< + NotificationType.REWARD_IN_PROGRESS, + CommonRewardsMetadata +> + +export type RewardDelayedNotification = RawDecentralandNotification< + NotificationType.REWARD_DELAYED, + CommonRewardsMetadata +> + +export type CampaignOutOfStockNotification = RawDecentralandNotification< + NotificationType.REWARD_CAMPAIGN_OUT_OF_STOCK, + CommonCampaignMetadata +> + +export type CampaignOutOfFundsNotification = RawDecentralandNotification< + NotificationType.REWARD_CAMPAIGN_OUT_OF_FUNDS, + CommonCampaignMetadata +> + +export type CampaignGasPriceHigherThanExpectedNotification = + RawDecentralandNotification< + NotificationType.REWARD_CAMPAIGN_GAS_PRICE_HIGHER_THAN_EXPECTED, + CommonCampaignMetadata + > + +// events notifications type CommonEventsMetadata = { image: string link: string name: string } -// events notifications export type EventsStartsSoonNotification = RawDecentralandNotification< NotificationType.EVENTS_STARTS_SOON, CommonEventsMetadata & { diff --git a/src/components/Notifications/utils.tsx b/src/components/Notifications/utils.tsx index d18ccd08..9a0d85d4 100644 --- a/src/components/Notifications/utils.tsx +++ b/src/components/Notifications/utils.tsx @@ -31,6 +31,11 @@ import { GovernanceVotedOnBehalfNotification } from './NotificationTypes' import { FunctionComponent } from 'react' +import RewardInProgressNotification from './NotificationTypes/Reward/RewardInProgressNotification' +import CampaignOutOfStockNotification from './NotificationTypes/Reward/CampaignOutOfStockNotification' +import CampaignGasPriceHigherThanExpectedNotification from './NotificationTypes/Reward/CampaignGasPriceHigherThanExpectedNotification' +import CampaignOutOfFundsNotification from './NotificationTypes/Reward/CampaignOutOfFundsNotification' +import RewardDelayedNotification from './NotificationTypes/Reward/RewardDelayedNotification' export const MAXIMUM_FRACTION_DIGITS = 2 @@ -88,7 +93,14 @@ export const NotificationComponentByType: DecentralandNotificationComponentByTyp [NotificationType.LAND_RENTED]: LandRentedNotification, [NotificationType.LAND_RENTAL_ENDED]: LandRentalEndedNotification, [NotificationType.REWARD_ASSIGNED]: RewardAssignedNotification, - [NotificationType.REWARD_IN_PROGRESS]: null, + [NotificationType.REWARD_IN_PROGRESS]: RewardInProgressNotification, + [NotificationType.REWARD_DELAYED]: RewardDelayedNotification, + [NotificationType.REWARD_CAMPAIGN_OUT_OF_FUNDS]: + CampaignOutOfFundsNotification, + [NotificationType.REWARD_CAMPAIGN_OUT_OF_STOCK]: + CampaignOutOfStockNotification, + [NotificationType.REWARD_CAMPAIGN_GAS_PRICE_HIGHER_THAN_EXPECTED]: + CampaignGasPriceHigherThanExpectedNotification, [NotificationType.BADGE_GRANTED]: null, [NotificationType.EVENTS_STARTS_SOON]: EventsStartsSoonNotification, [NotificationType.EVENTS_STARTED]: EventsStartedNotification,