feat: navigation between reward display and reward creation

geyserfund · Apr 9, 2024 · d1478f3 · d1478f3
1 parent 61162f1
commit d1478f3
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 12 deletions.
diff --git a/src/modules/project/pages/projectCreate/components/ProjectCreateLayout.tsx b/src/modules/project/pages/projectCreate/components/ProjectCreateLayout.tsx
@@ -11,6 +11,7 @@ interface ProjectCreateLayoutProps extends Omit<ContainerProps, 'children' | 'ti
   children: ReactNode
   title: ReactNode
   continueButton?: ReactNode
+  backButton?: ReactNode
   onBackClick: () => void
 }
 
@@ -23,6 +24,7 @@ export const ProjectCreateLayout = ({
   onBackClick,
   title,
   continueButton = null,
+  backButton = null,
   ...props
 }: ProjectCreateLayoutProps) => {
   const { t } = useTranslation()
@@ -69,9 +71,13 @@ export const ProjectCreateLayout = ({
         bottom={{ base: '0px', lg: '-50px' }}
         alignSelf="center"
       >
-        <Button flexGrow={1} variant="secondary" onClick={onBackClick} leftIcon={<BiLeftArrowAlt fontSize="25px" />}>
-          {t('Back')}
-        </Button>
+        {backButton ? (
+          backButton
+        ) : (
+          <Button flexGrow={1} variant="secondary" onClick={onBackClick} leftIcon={<BiLeftArrowAlt fontSize="25px" />}>
+            {t('Back')}
+          </Button>
+        )}
         {continueButton}
       </HStack>
     </Container>

diff --git a/src/modules/project/pages/projectCreate/views/ProjectCreateRewards.tsx b/src/modules/project/pages/projectCreate/views/ProjectCreateRewards.tsx
@@ -2,6 +2,7 @@ import { AddIcon } from '@chakra-ui/icons'
 import { Box, Button, VStack } from '@chakra-ui/react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { BiLeftArrowAlt } from 'react-icons/bi'
 import { useNavigate, useParams } from 'react-router-dom'
 
 import TitleWithProgressBar from '../../../../../components/molecules/TitleWithProgressBar'
@@ -55,6 +56,10 @@ export const ProjectCreateRewards = () => {
     navigate(getPath('launchProjectWithNode', project?.id))
   }
 
+  const handleSaveReward = () => {
+    console.log('save reward')
+  }
+
   const handleCreateRewardClick = () => {
     setShowCreateReward(true)
   }
@@ -67,14 +72,38 @@ export const ProjectCreateRewards = () => {
     navigate(getPath('launchProjectStory', project?.id))
   }
 
+  const handleCancel = () => {
+    setShowCreateReward(false)
+  }
+
   return (
     <ProjectProvider projectId={params.projectId || ''}>
       <ProjectCreateLayout
         title={<TitleWithProgressBar title={t('Add Rewards')} subtitle={t('Create a project')} index={4} length={5} />}
-        continueButton={<FormContinueButton flexGrow={1} onClick={handleNext} />}
-        onBackClick={handleBack}
+        continueButton={
+          showCreateReward ? (
+            <Button flexGrow={1} variant="primary" onClick={handleSaveReward}>
+              {t('Save Reward')}
+            </Button>
+          ) : (
+            <FormContinueButton flexGrow={1} onClick={handleNext} />
+          )
+        }
+        backButton={
+          showCreateReward ? (
+            <Button
+              flexGrow={1}
+              variant="secondary"
+              onClick={handleCancel}
+              leftIcon={<BiLeftArrowAlt fontSize="25px" />}
+            >
+              {t('Cancel')}
+            </Button>
+          ) : undefined
+        }
+        onBackClick={showCreateReward ? handleCancel : handleBack}
         minW={720}
-        height="80%"
+        height="100%"
       >
         {showCreateReward ? (
           <ProjectCreateReward />

diff --git a/...ectView/views/projectCreatorViews/sections/rewards/subviews/CreateReward/CreateReward.tsx b/...ectView/views/projectCreatorViews/sections/rewards/subviews/CreateReward/CreateReward.tsx
@@ -43,7 +43,7 @@ export const ProjectCreateReward = () => {
 
   return (
     <ProjectRewardForm
-      buttonText={isLaunch ? t('Save Reward') : t('Publish Reward')}
+      buttonText={t('Publish Reward')}
       titleText={t('Create Reward')}
       rewardSave={createReward}
       rewardSaving={createRewardLoading}

diff --git a/...jectView/views/projectCreatorViews/sections/rewards/subviews/Shared/ProjectRewardForm.tsx b/...jectView/views/projectCreatorViews/sections/rewards/subviews/Shared/ProjectRewardForm.tsx
@@ -563,11 +563,18 @@ export const ProjectRewardForm = ({
             ) : null}
           </FieldContainer>
         </VStack>
-        <Stack>
-          <Button display={{ base: 'block' }} variant="primary" onClick={handleConfirmReward} isLoading={rewardSaving}>
-            {buttonText}
-          </Button>
-        </Stack>
+        {!isLaunch && (
+          <Stack>
+            <Button
+              display={{ base: 'block' }}
+              variant="primary"
+              onClick={handleConfirmReward}
+              isLoading={rewardSaving}
+            >
+              {buttonText}
+            </Button>
+          </Stack>
+        )}
       </CardLayout>
       <UpdateCurrencyModal
         isOpen={isCurrencyChangeModalOpen}