From 23131129c2024a815140bae928bee821956fbd51 Mon Sep 17 00:00:00 2001
From: robertu <4065233+robertu7@users.noreply.github.com>
Date: Fri, 26 Jul 2024 18:03:05 +0800
Subject: [PATCH] fix(campaign): open congrats step on mobile and reset to
 badges step after that

---
 .../UserProfile/BadgeGrandDialog/Content.tsx  | 11 +++++++--
 .../User/UserProfile/BadgesDialog/index.tsx   | 23 +++++++++++--------
 2 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/views/User/UserProfile/BadgeGrandDialog/Content.tsx b/src/views/User/UserProfile/BadgeGrandDialog/Content.tsx
index 8a243cea89..41e2f187c7 100644
--- a/src/views/User/UserProfile/BadgeGrandDialog/Content.tsx
+++ b/src/views/User/UserProfile/BadgeGrandDialog/Content.tsx
@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 import { FormattedMessage } from 'react-intl'
 
 import { ReactComponent as IconLeft } from '@/public/static/icons/24px/left.svg'
@@ -17,7 +18,7 @@ const BadgeGrandDialogContent = ({
   closeDialog,
   goBack,
 }: BadgeGrandDialogContentProps) => {
-  const { getQuery } = useRoute()
+  const { getQuery, router } = useRoute()
   const userName = getQuery('name')
   const userProfilePath = toPath({
     page: 'userProfile',
@@ -27,9 +28,15 @@ const BadgeGrandDialogContent = ({
     typeof window !== 'undefined'
       ? `${window.location.origin}${userProfilePath.href}?${URL_USER_PROFILE.OPEN_GRAND_BADGE_DIALOG.key}=${URL_USER_PROFILE.OPEN_GRAND_BADGE_DIALOG.value}`
       : ''
-  const isCongrats =
+  const initialCongrats =
     getQuery(URL_USER_PROFILE.GRAND_BADGE_DIALOG_STEP.key) ===
     URL_USER_PROFILE.GRAND_BADGE_DIALOG_STEP.value
+  const [isCongrats] = useState(initialCongrats)
+
+  // remove `dialog` and `step` query params
+  useEffect(() => {
+    router.replace(userProfilePath.href, undefined, { shallow: true })
+  }, [])
 
   return (
     <>
diff --git a/src/views/User/UserProfile/BadgesDialog/index.tsx b/src/views/User/UserProfile/BadgesDialog/index.tsx
index 3542f7d77b..368bbbaf5d 100644
--- a/src/views/User/UserProfile/BadgesDialog/index.tsx
+++ b/src/views/User/UserProfile/BadgesDialog/index.tsx
@@ -5,6 +5,7 @@ import { ReactComponent as IconTimes } from '@/public/static/icons/24px/times.sv
 import {
   OPEN_GRAND_BADGE_DIALOG,
   OPEN_NOMAD_BADGE_DIALOG,
+  URL_USER_PROFILE,
 } from '~/common/enums'
 import {
   Button,
@@ -12,6 +13,7 @@ import {
   Icon,
   useDialogSwitch,
   useEventListener,
+  useRoute,
 } from '~/components'
 
 import BadgeGrandContent from '../BadgeGrandDialog/Content'
@@ -26,7 +28,6 @@ interface BadgesDialogProps extends BadgesOptions {
   }: {
     openDialog: (step?: Step) => void
   }) => React.ReactNode
-  step?: Step
 }
 
 export const BaseBadgesDialog = ({
@@ -39,24 +40,26 @@ export const BaseBadgesDialog = ({
   hasGoldenMotorBadge,
   hasArchitectBadge,
   isCivicLiker,
-  step: initStep = 'badges',
 }: BadgesDialogProps) => {
   const { show, openDialog, closeDialog } = useDialogSwitch(true)
+  const { getQuery } = useRoute()
+
+  const initNomad =
+    getQuery(URL_USER_PROFILE.OPEN_NOMAD_BADGE_DIALOG.key) ===
+    URL_USER_PROFILE.OPEN_NOMAD_BADGE_DIALOG.value
+  const initGrand =
+    getQuery(URL_USER_PROFILE.OPEN_GRAND_BADGE_DIALOG.key) ===
+    URL_USER_PROFILE.OPEN_GRAND_BADGE_DIALOG.value
+  const initStep = initGrand ? 'grand' : initNomad ? 'nomad' : 'badges'
   const [step, setStep] = useState<Step>(initStep)
+
   const isInBadgesStep = step === 'badges'
   const isInNomadStep = step === 'nomad'
   const isInGrandStep = step === 'grand'
 
-  const openStepDialog = (step?: Step) => {
-    if (step) {
-      setStep(step)
-    }
-    openDialog()
-  }
-
   return (
     <>
-      {children({ openDialog: openStepDialog })}
+      {children({ openDialog })}
 
       <Dialog isOpen={show} onDismiss={closeDialog}>
         {isInBadgesStep && (