Rewards program invitations (#63)

* Update enter program view

* Add invitation form

* Add invitation links view

* Add rewards invitation alias route

* Add invitations stub

* Update program auth

* Update rewards image

* Update colors

* Update invitations flow

* Fix review comments

.env-development

@@ -2,6 +2,6 @@ VITE_MODE=development
 VITE_PORT=8000
 
 VITE_APP_NAME=Rarime App
-VITE_APP_DOMAIN=https://app.stage.rarime.com
+VITE_APP_HOST_URL=https://app.stage.rarime.com
 VITE_DEFAULT_CHAIN=SEPOLIA
 VITE_API_URL=https://api.orgs.app.stage.rarime.com

.env-production

@@ -2,6 +2,6 @@ VITE_MODE=production
 VITE_PORT=8000
 
 VITE_APP_NAME=Rarime App
-VITE_APP_DOMAIN=https://app.rarime.com
+VITE_APP_HOST_URL=https://app.rarime.com
 VITE_DEFAULT_CHAIN=POLYGON
 VITE_API_URL=https://api.orgs.app.rarime.com

src/api/modules/points/enums/events.ts

@@ -28,3 +28,10 @@ export enum EventMetadataFrequencies {
   Unlimited = 'unlimited',
   Custom = 'custom',
 }
+
+export enum EventNames {
+  FreeWeekly = 'free_weekly',
+  GetPoh = 'get_poh',
+  RefferalCommon = 'referral_common',
+  BeReferred = 'be_referred',
+}

src/api/modules/points/helpers/balance.ts

@@ -115,7 +115,12 @@ export const getLeaderboard = async () => {
 }
 
 export const getPointsBalance = async (did: string) => {
-  return api.get<Balance>(`${ApiServicePaths.Points}/v1/public/balances/${did}?rank=true`)
+  return api.get<Balance>(`${ApiServicePaths.Points}/v1/public/balances/${did}`, {
+    query: {
+      rank: true,
+      referral_codes: true,
+    },
+  })
 }
 
 // Withdrawals

src/api/modules/points/helpers/events.ts

@@ -1,10 +1,13 @@
+import { JsonApiResponse } from '@distributedlab/jac'
+
 import { api } from '@/api/clients'
 import { ApiServicePaths } from '@/enums'
+import { identityStore } from '@/store'
 
 import { EventMetadataFrequencies, EventsRequestFilters, EventStatuses } from '../enums'
-import { Event, EventsMeta, EventsRequestQueryParams } from '../types/events'
+import { EventsMeta, EventsRequestQueryParams, PointsEvent } from '../types/events'
 
-export const EVENTS_MOCK: Event[] = [
+export const EVENTS_MOCK: PointsEvent[] = [
   {
     id: '1',
     type: 'event',
@@ -215,7 +218,7 @@ export const EVENTS_MOCK: Event[] = [
 
 export const getEvents = async (query: EventsRequestQueryParams) => {
   const statuses = query.filter?.[EventsRequestFilters.Status]
-  return api.get<Event[], EventsMeta>(`${ApiServicePaths.Points}/v1/public/events`, {
+  return api.get<PointsEvent[], EventsMeta>(`${ApiServicePaths.Points}/v1/public/events`, {
     query: {
       ...query,
       filter: {
@@ -229,11 +232,19 @@ export const getEvents = async (query: EventsRequestQueryParams) => {
 }
 
 export const getEventById = async (id: string) => {
-  return api.get<Event>(`${ApiServicePaths.Points}/v1/public/events/${id}`)
+  // TODO: Uncomment when the endpoint is ready
+  // return api.get<Event>(`${ApiServicePaths.Points}/v1/public/events/${id}`)
+  const res = await getEvents({
+    filter: { [EventsRequestFilters.Did]: identityStore.userDid },
+  })
+  return {
+    ...res,
+    data: res.data.find(event => event.id === id),
+  } as JsonApiResponse<PointsEvent>
 }
 
 export const claimEvent = async (id: string) => {
-  return api.patch<Event>(`${ApiServicePaths.Points}/v1/public/events/${id}`, {
+  return api.patch<PointsEvent>(`${ApiServicePaths.Points}/v1/public/events/${id}`, {
     body: {
       data: {
         id,

src/api/modules/points/types/balance.ts

@@ -7,6 +7,7 @@ export type Balance = {
   is_disabled?: boolean
   is_verified?: boolean
   rank: number
+  referral_codes?: string[]
 }
 
 export type Withdrawal = {

src/api/modules/points/types/events.ts

@@ -39,7 +39,8 @@ export type EventMetadata = {
   dynamic?: Record<string, unknown>
 }
 
-export type Event = {
+// We use `PointsEvent` instead of `Event` to avoid name conflict with global `Event` type
+export type PointsEvent = {
   id: string
   type: 'event'
   status: EventStatuses

src/config.ts

@@ -10,6 +10,7 @@ const SUPPORTED_CHAINS_DETAILS: SupportedChainsDetails = {
 
 export type Config = {
   APP_NAME: string
+  APP_HOST_URL: string
   API_URL: string
   BUILD_VERSION: string
   SUPPORTED_CHAINS_DETAILS: SupportedChainsDetails
@@ -22,6 +23,7 @@ const FALLBACK_DEFAULT_CHAIN = Object.entries(FALLBACK_SUPPORTED_CHAINS)[0][0]
 
 export const config: Config = {
   APP_NAME: import.meta.env.VITE_APP_NAME,
+  APP_HOST_URL: import.meta.env.VITE_APP_HOST_URL,
   API_URL: import.meta.env.VITE_API_URL,
   BUILD_VERSION: packageJson.version || import.meta.env.VITE_APP_BUILD_VERSION,
   SUPPORTED_CHAINS_DETAILS,

src/enums/icons.ts

@@ -24,6 +24,7 @@ export enum Icons {
   Check = 'check',
   Close = 'close',
   CopySimple = 'copy-simple',
+  Discord = 'discord',
   DotsSixVertical = 'dots-six-vertical',
   DotsThreeOutline = 'dots-three-outline',
   Facebook = 'facebook',
@@ -75,12 +76,14 @@ export enum Icons {
   SuitcaseSimple = 'suitcase-simple',
   Sun = 'sun',
   Swap = 'swap',
+  Telegram = 'telegram',
   ThumbsDown = 'thumbs-down',
   ThumbsUp = 'thumbs-up',
   TrashSimple = 'trash-simple',
   TrophyFill = 'trophy-fill',
   Trophy = 'trophy',
   Twitter = 'twitter',
+  TwitterX = 'twitter-x',
   UserCircle = 'user-circle',
   UserFocus = 'user-focus',
   User = 'user',

src/enums/routes.ts

@@ -38,4 +38,6 @@ export enum RoutePaths {
   RewardsEarnHistory = '/rewards/earn-history',
   RewardsLeaderboard = '/rewards/leaderboard',
   RewardsAbout = '/rewards/about',
+
+  RewardsInvitationAlias = '/r/:code',
 }

src/hooks/form.ts

@@ -9,6 +9,7 @@ import {
   useForm as useFormHook,
   UseFormHandleSubmit,
   UseFormRegister,
+  UseFormSetError,
 } from 'react-hook-form'
 import * as Yup from 'yup'
 
@@ -21,6 +22,7 @@ export type Form<T extends FieldValues> = {
   formErrors: FieldErrorsImpl<T>
   register: UseFormRegister<T>
   handleSubmit: UseFormHandleSubmit<T>
+  setError: UseFormSetError<T>
   control: Control<T>
 }
 
@@ -35,6 +37,7 @@ export const useForm = <T extends Yup.AnyObjectSchema, R extends FieldValues>(
     register,
     handleSubmit,
     watch,
+    setError,
     formState: { errors },
   } = useFormHook<R>({
     mode: 'onTouched',
@@ -66,6 +69,7 @@ export const useForm = <T extends Yup.AnyObjectSchema, R extends FieldValues>(
     formErrors: errors,
     register,
     handleSubmit,
+    setError,
     control,
   }
 }

src/pages/Rewards/pages/EarnHistory/components/EventItem.tsx

@@ -1,13 +1,13 @@
 import { Stack, Typography, useTheme } from '@mui/material'
 
-import { Event } from '@/api/modules/points'
+import { PointsEvent } from '@/api/modules/points'
 import { Icons } from '@/enums'
 import { formatDateDMY } from '@/helpers'
 import RewardChip from '@/pages/Rewards/components/RewardChip'
 import { UiIcon } from '@/ui'
 
 interface Props {
-  event: Event
+  event: PointsEvent
 }
 
 export default function EventItem({ event }: Props) {

src/pages/Rewards/pages/EventId/components/EventView.tsx

@@ -1,12 +1,16 @@
 import { Box, Button, Divider, Stack, Typography, useTheme } from '@mui/material'
 
-import { Event } from '@/api/modules/points'
+import { EventNames, PointsEvent } from '@/api/modules/points'
 import { MarkdownViewer } from '@/common'
+import { Icons } from '@/enums'
 import { formatDateTime } from '@/helpers'
 import RewardChip from '@/pages/Rewards/components/RewardChip'
+import { UiIcon } from '@/ui'
+
+import InvitationLinks from './InvitationLinks'
 
 interface Props {
-  event: Event
+  event: PointsEvent
 }
 
 export default function EventView({ event }: Props) {
@@ -27,30 +31,50 @@ export default function EventView({ event }: Props) {
             )}
           </Stack>
         </Stack>
-        <Box
-          component='img'
-          src={event.meta.static.image_url}
-          sx={{
-            bgcolor: palette.action.active,
-            borderRadius: 2,
-            objectFit: 'cover',
-            width: spacing(21),
-            height: spacing(21),
-          }}
-        />
+        {event.meta.static.image_url ? (
+          <Box
+            component='img'
+            src={event.meta.static.image_url}
+            sx={{
+              bgcolor: palette.action.active,
+              borderRadius: 2,
+              objectFit: 'cover',
+              width: spacing(21),
+              height: spacing(21),
+            }}
+          />
+        ) : (
+          <Stack
+            bgcolor={palette.action.active}
+            color={palette.text.primary}
+            borderRadius={2}
+            width={spacing(21)}
+            height={spacing(21)}
+            justifyContent='center'
+            alignItems='center'
+          >
+            <UiIcon name={Icons.Gift} size={10} />
+          </Stack>
+        )}
       </Stack>
       <Divider />
-      <MarkdownViewer>{event?.meta.static.description ?? ''}</MarkdownViewer>
-      {event.meta.static.action_url && (
-        <Button
-          component='a'
-          href={event.meta.static.action_url}
-          target='_blank'
-          rel='noreferrer noopener'
-          sx={{ width: spacing(40) }}
-        >
-          {`Let's Start`}
-        </Button>
+      {event.meta.static.name === EventNames.RefferalCommon ? (
+        <InvitationLinks event={event} />
+      ) : (
+        <>
+          <MarkdownViewer>{event?.meta.static.description ?? ''}</MarkdownViewer>
+          {event.meta.static.action_url && (
+            <Button
+              component='a'
+              href={event.meta.static.action_url}
+              target='_blank'
+              rel='noreferrer noopener'
+              sx={{ width: spacing(40) }}
+            >
+              {`Let's Start`}
+            </Button>
+          )}
+        </>
       )}
     </Stack>
   )

src/pages/Rewards/pages/EventId/components/InvitationLinks.tsx

@@ -0,0 +1,59 @@
+import { CircularProgress, Stack, Typography, useTheme } from '@mui/material'
+import { useEffect, useMemo } from 'react'
+
+import { PointsEvent } from '@/api/modules/points'
+import { NoDataView } from '@/common'
+import { rewardsStore, useRewardsState } from '@/store'
+
+import ReferralLink from './ReferralLink'
+
+interface Props {
+  event: PointsEvent
+}
+
+const MAX_REFERRAL_CODES = 5
+
+export default function InvitationLinks({ event }: Props) {
+  const { balance } = useRewardsState()
+  const { palette } = useTheme()
+
+  const referralCodes = useMemo(() => {
+    return balance?.referral_codes ?? []
+  }, [balance])
+
+  useEffect(() => {
+    rewardsStore.loadBalance()
+  }, [])
+
+  return balance ? (
+    referralCodes.length ? (
+      <Stack spacing={5}>
+        <Stack spacing={2}>
+          <Typography variant='subtitle3'>
+            Invited {MAX_REFERRAL_CODES - referralCodes.length}/{MAX_REFERRAL_CODES}
+          </Typography>
+          <Typography variant='body3' color={palette.text.secondary}>
+            STUB: Invite friends and earn RMO
+          </Typography>
+        </Stack>
+        <Stack spacing={2}>
+          {new Array(MAX_REFERRAL_CODES).fill(null).map((_, index) => (
+            <ReferralLink
+              key={index}
+              index={index}
+              reward={Math.floor(event.meta.static.reward / MAX_REFERRAL_CODES)}
+              code={referralCodes[index]}
+              isUsed={index >= referralCodes.length}
+            />
+          ))}
+        </Stack>
+      </Stack>
+    ) : (
+      <NoDataView title='No invitation links' />
+    )
+  ) : (
+    <Stack alignItems='center' p={20}>
+      <CircularProgress color='secondary' />
+    </Stack>
+  )
+}