feat(nomad-badges): Implementation of Digital Nomad program

for thematters/developer-resource#326
thematters · Dec 7, 2023 · 5eb225e · 5eb225e
1 parent 939ef08
commit 5eb225e
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 68 deletions.
diff --git a/src/views/User/UserProfile/AsideUserProfile/index.tsx b/src/views/User/UserProfile/AsideUserProfile/index.tsx
@@ -1,8 +1,10 @@
 import dynamic from 'next/dynamic'
 import { useContext, useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
+
 import {
   OPEN_SHOW_NOMAD_BADGE_DIALOG,
+  REFERRAL_QUERY_REFERRAL_KEY,
   TEST_ID,
   URL_USER_PROFILE,
 } from '~/common/enums'
@@ -44,7 +46,10 @@ const DynamicWalletLabel = dynamic(() => import('../WalletLabel'), {
 })
 
 export const AsideUserProfile = () => {
-  const { isInPath, getQuery, deleteQuery } = useRoute()
+  const {
+    isInPath,
+    getQuery, // deleteQuery
+  } = useRoute()
   const viewer = useContext(ViewerContext)
 
   // public user data
@@ -61,7 +66,15 @@ export const AsideUserProfile = () => {
   })
   const shareLink =
     typeof window !== 'undefined'
-      ? `${window.location.origin}${userProfilePath.href}?${URL_USER_PROFILE.OPEN_NOMAD_BADGE_DIALOG.key}=${URL_USER_PROFILE.OPEN_NOMAD_BADGE_DIALOG.value}`
+      ? `${window.location.origin}${userProfilePath.href}?${new URLSearchParams(
+          [
+            [
+              URL_USER_PROFILE.OPEN_NOMAD_BADGE_DIALOG.key,
+              URL_USER_PROFILE.OPEN_NOMAD_BADGE_DIALOG.value,
+            ],
+            [REFERRAL_QUERY_REFERRAL_KEY, viewer.userName!],
+          ].filter(([k, v]) => !!v)
+        ).toString()}`
       : ''
 
   const { data, loading, client } = usePublicQuery<UserProfileUserPublicQuery>(
@@ -251,21 +264,13 @@ export const AsideUserProfile = () => {
                 totalReferredCount={user.status?.totalReferredCount || 0}
                 shareLink={shareLink}
               >
-                {({ openDialog }) => {
-                  if (showBadges) {
-                    setTimeout(() => {
-                      deleteQuery(URL_USER_PROFILE.OPEN_NOMAD_BADGE_DIALOG.key)
-                      openDialog()
-                    })
-                  }
-                  return (
-                    <BadgeNomadLabel
-                      hasTooltip
-                      nomadBadgeLevel={nomadBadgeLevel}
-                      onClick={openDialog}
-                    />
-                  )
-                }}
+                {({ openDialog }) => (
+                  <BadgeNomadLabel
+                    hasTooltip
+                    nomadBadgeLevel={nomadBadgeLevel}
+                    onClick={openDialog}
+                  />
+                )}
               </BadgeNomadDialog>
             )}
             {hasTraveloggersBadge && <TraveloggersBadge hasTooltip />}

diff --git a/src/views/User/UserProfile/BadgeNomadDialog/index.tsx b/src/views/User/UserProfile/BadgeNomadDialog/index.tsx
@@ -1,6 +1,12 @@
 import dynamic from 'next/dynamic'
 
-import { Dialog, Spinner, useDialogSwitch } from '~/components'
+import { OPEN_SHOW_NOMAD_BADGE_DIALOG } from '~/common/enums'
+import {
+  Dialog,
+  Spinner,
+  useDialogSwitch,
+  useEventListener,
+} from '~/components'
 import { UserStatus } from '~/gql/graphql'
 
 type BadgeNomadLabelProps = {
@@ -25,7 +31,7 @@ export const BaseBadgeNomadDialog: React.FC<BadgeNomadDialogProps> = ({
   totalReferredCount,
   shareLink,
 }) => {
-  const { show, openDialog, closeDialog } = useDialogSwitch(true)
+  const { show, openDialog, closeDialog } = useDialogSwitch(false)
 
   return (
     <>
@@ -43,8 +49,15 @@ export const BaseBadgeNomadDialog: React.FC<BadgeNomadDialogProps> = ({
   )
 }
 
-export const BadgeNomadDialog = (props: BadgeNomadDialogProps) => (
-  <Dialog.Lazy mounted={<BaseBadgeNomadDialog {...props} />}>
-    {({ openDialog }) => <>{props.children({ openDialog })}</>}
-  </Dialog.Lazy>
-)
+export const BadgeNomadDialog = (props: BadgeNomadDialogProps) => {
+  const Children = ({ openDialog }: { openDialog: () => void }) => {
+    useEventListener(OPEN_SHOW_NOMAD_BADGE_DIALOG, openDialog)
+    return <>{props?.children({ openDialog })}</>
+  }
+
+  return (
+    <Dialog.Lazy mounted={<BaseBadgeNomadDialog {...props} />}>
+      {({ openDialog }) => <Children openDialog={openDialog} />}
+    </Dialog.Lazy>
+  )
+}
diff --git a/src/views/User/UserProfile/BadgeNomadLabel/index.tsx b/src/views/User/UserProfile/BadgeNomadLabel/index.tsx
@@ -50,4 +50,3 @@ export const BadgeNomadLabel: React.FC<BadgeNomadLabelProps> = ({
     </>
   )
 }
-
diff --git a/src/views/User/UserProfile/Badges/index.tsx b/src/views/User/UserProfile/Badges/index.tsx
@@ -10,23 +10,10 @@ import { ReactComponent as IconNomad3Badge } from '@/public/static/icons/48px/ba
 import { ReactComponent as IconNomad4Badge } from '@/public/static/icons/48px/badge-nomad4-fire.svg'
 import { ReactComponent as IconSeedBadge } from '@/public/static/icons/48px/badge-seed.svg'
 import { ReactComponent as IconTraveloggersBadge } from '@/public/static/icons/48px/badge-traveloggers.svg'
-import { Tooltip, Translate, withIcon } from '~/components'
-import { IconArrowAction24 } from '~/components/Icon/IconArrowAction24'
+import { IconArrowAction24, Tooltip, Translate, withIcon } from '~/components'
 import { UserStatus } from '~/gql/graphql'
 
-import { ReactComponent as IconArchitectBadge } from '@/public/static/icons/48px/badge-architect.svg'
-import { ReactComponent as IconCivicLikerBadge } from '@/public/static/icons/48px/badge-civic-liker.svg'
-import { ReactComponent as IconGoldenMotorBadge } from '@/public/static/icons/48px/badge-golden-motor.svg'
-import { ReactComponent as IconNomad1Badge } from '@/public/static/icons/48px/badge-nomad1-moon.svg'
-import { ReactComponent as IconNomad2Badge } from '@/public/static/icons/48px/badge-nomad2-star.svg'
-import { ReactComponent as IconNomad3Badge } from '@/public/static/icons/48px/badge-nomad3-light.svg'
-import { ReactComponent as IconNomad4Badge } from '@/public/static/icons/48px/badge-nomad4-fire.svg'
-import { ReactComponent as IconSeedBadge } from '@/public/static/icons/48px/badge-seed.svg'
-import { ReactComponent as IconTraveloggersBadge } from '@/public/static/icons/48px/badge-traveloggers.svg'
-import { IconArrowAction, Tooltip, Translate, withIcon } from '~/components'
-import { UserStatus } from '~/gql/graphql'
-
-import { BadgeNomadDialog } from '../BadgeNomadLabel'
+// import { BadgeNomadDialog } from '../BadgeNomadLabel'
 import styles from './styles.module.css'
 
 type badgePros = {

diff --git a/src/views/User/UserProfile/BadgesDialog/index.tsx b/src/views/User/UserProfile/BadgesDialog/index.tsx
@@ -1,12 +1,13 @@
 import { useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 
-import { BREAKPOINTS } from '~/common/enums'
+import { BREAKPOINTS, OPEN_SHOW_NOMAD_BADGE_DIALOG } from '~/common/enums'
 import {
   Button,
   Dialog,
   IconClose20,
   useDialogSwitch,
+  useEventListener,
   useMediaQuery,
 } from '~/components'
 
@@ -118,6 +119,7 @@ export const BaseBadgesDialog = ({
 
 export const BadgesDialog = (props: BadgesDialogProps) => {
   const Children = ({ openDialog }: { openDialog: (step?: Step) => void }) => {
+    useEventListener(OPEN_SHOW_NOMAD_BADGE_DIALOG, openDialog)
     return <>{props?.children({ openDialog })}</>
   }
 

diff --git a/src/views/User/UserProfile/index.tsx b/src/views/User/UserProfile/index.tsx
@@ -3,7 +3,12 @@ import dynamic from 'next/dynamic'
 import { useContext, useEffect } from 'react'
 import { FormattedMessage } from 'react-intl'
 
-import { TEST_ID, URL_USER_PROFILE } from '~/common/enums'
+import {
+  OPEN_SHOW_NOMAD_BADGE_DIALOG,
+  REFERRAL_QUERY_REFERRAL_KEY,
+  TEST_ID,
+  URL_USER_PROFILE,
+} from '~/common/enums'
 import { numAbbr, toPath } from '~/common/utils'
 import {
   Avatar,
@@ -39,7 +44,9 @@ const DynamicWalletLabel = dynamic(() => import('./WalletLabel'), {
 })
 
 export const UserProfile = () => {
-  const { getQuery, deleteQuery } = useRoute()
+  const {
+    getQuery, // deleteQuery
+  } = useRoute()
   const viewer = useContext(ViewerContext)
 
   // public user data
@@ -97,7 +104,15 @@ export const UserProfile = () => {
   })
   const shareLink =
     typeof window !== 'undefined'
-      ? `${window.location.origin}${userProfilePath.href}?${URL_USER_PROFILE.OPEN_NOMAD_BADGE_DIALOG.key}=${URL_USER_PROFILE.OPEN_NOMAD_BADGE_DIALOG.value}`
+      ? `${window.location.origin}${userProfilePath.href}?${new URLSearchParams(
+          [
+            [
+              URL_USER_PROFILE.OPEN_NOMAD_BADGE_DIALOG.key,
+              URL_USER_PROFILE.OPEN_NOMAD_BADGE_DIALOG.value,
+            ],
+            [REFERRAL_QUERY_REFERRAL_KEY, viewer.userName!],
+          ].filter(([k, v]) => !!v)
+        ).toString()}`
       : ''
 
   const badges = user.info.badges || []
@@ -216,30 +231,19 @@ export const UserProfile = () => {
                 isCivicLiker={isCivicLiker}
                 shareLink={shareLink}
               >
-                {({ openDialog }) => {
-                  if (showBadges && hasNomadBadge) {
-                    setTimeout(() => {
-                      deleteQuery(URL_USER_PROFILE.OPEN_NOMAD_BADGE_DIALOG.key)
-                      openDialog('nomad')
-                    })
-                  }
-                  return (
-                    <span
-                      className={styles.badges}
-                      onClick={() => openDialog()}
-                    >
-                      <Badges
-                        hasNomadBadge={hasNomadBadge}
-                        nomadBadgeLevel={nomadBadgeLevel}
-                        hasTraveloggersBadge={hasTraveloggersBadge}
-                        hasSeedBadge={hasSeedBadge}
-                        hasGoldenMotorBadge={hasGoldenMotorBadge}
-                        hasArchitectBadge={hasArchitectBadge}
-                        isCivicLiker={isCivicLiker}
-                      />
-                    </span>
-                  )
-                }}
+                {({ openDialog }) => (
+                  <span className={styles.badges} onClick={() => openDialog()}>
+                    <Badges
+                      hasNomadBadge={hasNomadBadge}
+                      nomadBadgeLevel={nomadBadgeLevel}
+                      hasTraveloggersBadge={hasTraveloggersBadge}
+                      hasSeedBadge={hasSeedBadge}
+                      hasGoldenMotorBadge={hasGoldenMotorBadge}
+                      hasArchitectBadge={hasArchitectBadge}
+                      isCivicLiker={isCivicLiker}
+                    />
+                  </span>
+                )}
               </BadgesDialog>
 
               {user?.info.ethAddress && (
Original file line number	Diff line number	Diff line change
Expand Up		@@ -50,4 +50,3 @@ export const BadgeNomadLabel: React.FC<BadgeNomadLabelProps> = ({
		</>
		)
		}