Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 | import React, { useState } from "react";
import SelfieComponent, { SelfieProps } from "./components/SelfieComponent";
import LoadingComponent from "@components/ProfilePage/PersonalInformation/components/LoadingComponent";
import SelfiePreview from "@components/ProfilePage/PersonalInformation/components/SelfiePreview";
import { Box, Stack } from "@mui/material";
import { useGetUploadedSelfie } from "@sections/VerifyAccountHolder_v2/hooks/useCamera";
import { ProfileSetupFormActions } from "@components/ProfilePage/form.components";
import { useCustomTheme } from "@theme/hooks/useCustomTheme";
function Selfie(props: SelfieProps) {
const [selfieUrl, setSelfieUrl] = useState<string | null>(null);
const [isUploading, setIsUploading] = useState(false);
const { uploadedSelfie } = useGetUploadedSelfie();
const { isMobileView } = useCustomTheme();
const dbSelfieURL = uploadedSelfie?.fileURL;
return (
<div
style={
isMobileView
? {
display: "flex",
flexDirection: "column",
height: props?.completed || selfieUrl ? "100%" : "106%",
}
: {}
}
>
{isUploading ? (
<Box
justifyContent="center"
display="flex"
height="400px"
width="100%"
alignItems="center"
>
<LoadingComponent />
</Box>
) : (
<Box sx={{ ...(isMobileView && { flex: 1 }) }}>
{selfieUrl ? (
<SelfiePreview
selfieUrl={selfieUrl}
onClick={() => {
setSelfieUrl(null);
setIsUploading(false);
props?.setCompleted && props?.setCompleted(false);
}}
/>
) : (
<>
<SelfieComponent
{...props}
setIsUploading={setIsUploading}
setSelfieUrl={setSelfieUrl}
/>
</>
)}
</Box>
)}
<Stack
{...(isMobileView && { display: "flex", justifyContent: "flex-end" })}
>
<ProfileSetupFormActions
secondaryAction={
isMobileView
? {
onClick: selfieUrl ? () => setSelfieUrl(null) : props?.onBack,
}
: {
children: <></>,
sx: {
visible: "none",
},
}
}
primaryAction={{
disabled: isUploading || !dbSelfieURL,
children: props?.completed || selfieUrl ? "Done" : "Next",
type: "button",
onClick: props?.completed
? () => props?.handleReset && props?.handleReset()
: selfieUrl
? () => {
setSelfieUrl(null);
props?.setCompleted && props?.setCompleted(true);
}
: () => setSelfieUrl(dbSelfieURL),
}}
/>
</Stack>
</div>
);
}
export default Selfie;
|