-
Notifications
You must be signed in to change notification settings - Fork 9
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[#364] add information storage screens
- Loading branch information
1 parent
5649541
commit 00e06d9
Showing
14 changed files
with
326 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
import { Box } from "@mui/material"; | ||
|
||
import { Typography } from "@atoms"; | ||
import { theme } from "@/theme"; | ||
|
||
import { StepProps } from "./types"; | ||
|
||
export const Step = ({ | ||
component, | ||
label, | ||
layoutStyles, | ||
stepNumber, | ||
}: StepProps) => { | ||
const { | ||
palette: { boxShadow2 }, | ||
} = theme; | ||
|
||
return ( | ||
<Box | ||
sx={{ | ||
flexDirection: "row", | ||
display: "flex", | ||
width: "100%", | ||
...layoutStyles, | ||
}} | ||
> | ||
<Box | ||
sx={{ | ||
alignItems: "center", | ||
borderRadius: "100%", | ||
boxShadow: `2px 2px 20px 0px ${boxShadow2}`, | ||
display: "flex", | ||
height: 54, | ||
justifyContent: "center", | ||
width: 54, | ||
}} | ||
> | ||
<Typography color="primary" fontWeight={400} variant="title2"> | ||
{stepNumber} | ||
</Typography> | ||
</Box> | ||
|
||
<Box | ||
sx={{ | ||
display: "flex", | ||
flex: 1, | ||
flexDirection: "column", | ||
ml: 3, | ||
}} | ||
> | ||
<Typography fontWeight={500} sx={{ mb: 1.5 }} variant="body1"> | ||
{label} | ||
</Typography> | ||
{component} | ||
</Box> | ||
</Box> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
120 changes: 120 additions & 0 deletions
120
govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StorageInformation.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,120 @@ | ||
import { Dispatch, SetStateAction, useCallback, useState } from "react"; | ||
import { Box } from "@mui/material"; | ||
import OpenInNewIcon from "@mui/icons-material/OpenInNew"; | ||
|
||
import { Button, Spacer, Typography } from "@atoms"; | ||
import { useCreateGovernanceActionForm, useTranslation } from "@hooks"; | ||
import { Step } from "@molecules"; | ||
import { BgCard, ControlledField } from "@organisms"; | ||
import { downloadJson, openInNewTab } from "@utils"; | ||
|
||
export const StorageInformation = ({ | ||
setStep, | ||
}: { | ||
setStep: Dispatch<SetStateAction<number>>; | ||
}) => { | ||
const { t } = useTranslation(); | ||
const { | ||
control, | ||
errors, | ||
createGovernanceAction, | ||
generateJsonBody, | ||
getValues, | ||
watch, | ||
} = useCreateGovernanceActionForm(); | ||
const [isJsonDownloaded, setIsJsonDownloaded] = useState<boolean>(false); | ||
// TODO: change on correct file name | ||
const fileName = getValues("governance_action_type"); | ||
|
||
// TODO: Change link to correct | ||
const openGuideAboutStoringInformation = useCallback( | ||
() => openInNewTab("https://sancho.network/"), | ||
[] | ||
); | ||
|
||
const isActionButtonDisabled = !watch("storingURL") || !isJsonDownloaded; | ||
|
||
const onClickBack = useCallback(() => setStep(5), []); | ||
|
||
const onClickDowloadJson = () => { | ||
const data = getValues(); | ||
const jsonBody = generateJsonBody(data); | ||
downloadJson(jsonBody, fileName); | ||
setIsJsonDownloaded(true); | ||
}; | ||
|
||
return ( | ||
<BgCard | ||
actionButtonLabel={t("continue")} | ||
backButtonLabel={t("back")} | ||
isActionButtonDisabled={isActionButtonDisabled} | ||
onClickActionButton={createGovernanceAction} | ||
onClickBackButton={onClickBack} | ||
> | ||
<Typography sx={{ textAlign: "center" }} variant="headline4"> | ||
{t("createGovernanceAction.storingInformationTitle")} | ||
</Typography> | ||
<Typography | ||
fontWeight={400} | ||
sx={{ mt: 1, textAlign: "center" }} | ||
variant="body1" | ||
> | ||
{t("createGovernanceAction.storingInformationDescription")} | ||
</Typography> | ||
<Box sx={{ my: 4 }}> | ||
<Step | ||
// TODO: add onClick action when available | ||
component={ | ||
<Button | ||
onClick={onClickDowloadJson} | ||
size="extraLarge" | ||
sx={{ width: "fit-content" }} | ||
> | ||
{`${fileName}.jsonld`} | ||
</Button> | ||
} | ||
label={t("createGovernanceAction.storingInformationStep1Label")} | ||
stepNumber={1} | ||
/> | ||
<Spacer y={6} /> | ||
<Step | ||
component={ | ||
<Button | ||
endIcon={ | ||
<OpenInNewIcon | ||
sx={{ | ||
color: "primary", | ||
height: 17, | ||
width: 17, | ||
}} | ||
/> | ||
} | ||
onClick={openGuideAboutStoringInformation} | ||
size="extraLarge" | ||
sx={{ width: "fit-content" }} | ||
variant="text" | ||
> | ||
{t("createGovernanceAction.storingInformationStep2Link")} | ||
</Button> | ||
} | ||
label={t("createGovernanceAction.storingInformationStep2Label")} | ||
stepNumber={2} | ||
/> | ||
<Spacer y={6} /> | ||
<Step | ||
component={ | ||
<ControlledField.Input | ||
{...{ control, errors }} | ||
name="storingURL" | ||
placeholder={t( | ||
"createGovernanceAction.storingInformationURLPlaceholder" | ||
)} | ||
/> | ||
} | ||
label={t("createGovernanceAction.storingInformationStep3Label")} | ||
stepNumber={3} | ||
/> | ||
</Box> | ||
</BgCard> | ||
); | ||
}; |
70 changes: 70 additions & 0 deletions
70
govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/StoreDataInfo.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
import { Dispatch, SetStateAction } from "react"; | ||
import { Box, Link } from "@mui/material"; | ||
|
||
import { Spacer, Typography } from "@atoms"; | ||
import { | ||
useCreateGovernanceActionForm, | ||
useScreenDimension, | ||
useTranslation, | ||
} from "@hooks"; | ||
import { BgCard, ControlledField } from "@organisms"; | ||
import { openInNewTab } from "@utils"; | ||
|
||
export const StoreDataInfo = ({ | ||
setStep, | ||
}: { | ||
setStep: Dispatch<SetStateAction<number>>; | ||
}) => { | ||
const { t } = useTranslation(); | ||
const { control, errors, watch } = useCreateGovernanceActionForm(); | ||
const { isMobile } = useScreenDimension(); | ||
|
||
// TODO: change link when available | ||
const openLink = () => { | ||
openInNewTab("https://www.google.com"); | ||
}; | ||
|
||
const isContinueDisabled = !watch("storeData"); | ||
|
||
const onClickContinue = () => { | ||
setStep(6); | ||
}; | ||
|
||
const onClickBack = () => { | ||
setStep(4); | ||
}; | ||
|
||
return ( | ||
<BgCard | ||
actionButtonLabel={t("continue")} | ||
isActionButtonDisabled={isContinueDisabled} | ||
onClickActionButton={onClickContinue} | ||
onClickBackButton={onClickBack} | ||
> | ||
<Typography sx={{ textAlign: "center" }} variant="headline4"> | ||
{t("createGovernanceAction.storeDataTitle")} | ||
</Typography> | ||
<Link | ||
onClick={openLink} | ||
sx={{ | ||
cursor: "pointer", | ||
fontSize: 16, | ||
fontWeight: 500, | ||
fontFamily: "Poppins", | ||
my: 4, | ||
textAlign: "center", | ||
textDecoration: "none", | ||
}} | ||
> | ||
{t("createGovernanceAction.storeDataLink")} | ||
</Link> | ||
<ControlledField.Checkbox | ||
{...{ control, errors }} | ||
name="storeData" | ||
label={t("createGovernanceAction.storeDataCheckboxLabel")} | ||
/> | ||
<Spacer y={isMobile ? 4 : 12.5} /> | ||
<Box display="flex" flex={1} /> | ||
</BgCard> | ||
); | ||
}; |
2 changes: 2 additions & 0 deletions
2
govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,2 @@ | ||
export * from "./StorageInformation"; | ||
export * from "./StoreDataInfo"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.