90 lines
3.0 KiB
TypeScript
90 lines
3.0 KiB
TypeScript
import Title from "@/components/Title";
|
|
import styles from "./styles.module.scss";
|
|
import routes from "@/routes";
|
|
import Button from "../../components/Button";
|
|
import BiometricData from "@/components/palmistry/biometric-data/biometric-data";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useTranslations } from "@/hooks/translations";
|
|
import { ELocalesPlacement } from "@/locales";
|
|
import ScanInstructionSVG from "../../images/SVG/ScanInstruction";
|
|
import { usePreloadImages } from "@/hooks/preload/images";
|
|
import { useUploadImage } from "@/hooks/palmistry/useUploadImage";
|
|
import Loader, { LoaderColor } from "@/components/Loader";
|
|
import { images } from "../../data";
|
|
import { useSelector } from "react-redux";
|
|
import { selectors } from "@/store";
|
|
import {EUnleashFlags, useUnleash} from "@/hooks/ab/unleash/useUnleash.ts";
|
|
|
|
function ScanInstruction() {
|
|
const { translate } = useTranslations(ELocalesPlacement.CompatibilityV2);
|
|
const navigate = useNavigate();
|
|
|
|
const { isReady, variant: v2CompatibilityScanInstructionImage } = useUnleash({
|
|
flag: EUnleashFlags.v2CompatibilityScanInstructionImage
|
|
});
|
|
|
|
const gender = useSelector(selectors.selectQuestionnaire)?.gender || "female";
|
|
|
|
usePreloadImages([
|
|
images("scan-hand/Palm-tach-A.gif"),
|
|
images(`scan-hand/${gender}-Palm-A.png`)
|
|
]);
|
|
|
|
const handleToScannedPhoto = () => {
|
|
navigate(routes.client.compatibilityV2ScannedPhoto());
|
|
};
|
|
|
|
const { isLoading, isError, onSelectFile } = useUploadImage({
|
|
fingersNames: {
|
|
thumb: translate("thumb"),
|
|
index_finger: translate("index_finger"),
|
|
middle_finger: translate("middle_finger"),
|
|
ring_finger: translate("ring_finger"),
|
|
pinky: translate("pinky"),
|
|
},
|
|
keyOfStore: "compatibilityV2",
|
|
onImageUploaded: handleToScannedPhoto
|
|
});
|
|
|
|
const handleClick = () => {
|
|
navigate(routes.client.compatibilityV2Camera());
|
|
};
|
|
|
|
if (!isReady) {return <Loader color={LoaderColor.Black} />;}
|
|
|
|
const imageVariant = v2CompatibilityScanInstructionImage === 'v1' ? 'v1' : 'v0';
|
|
|
|
return (
|
|
<div className={styles.page}>
|
|
<Title variant="h2" className={styles.title}>
|
|
{translate("/scan-instruction.title")}
|
|
</Title>
|
|
<ScanInstructionSVG
|
|
variant={imageVariant}
|
|
/>
|
|
<Button className={styles.button} onClick={handleClick}>
|
|
{translate("/scan-instruction.button")}
|
|
</Button>
|
|
<input
|
|
id="upload-input"
|
|
type="file"
|
|
accept="image/*"
|
|
style={{ display: 'none' }}
|
|
onChange={onSelectFile}
|
|
/>
|
|
<label htmlFor="upload-input" className={styles.labelUpload}>
|
|
{translate("/scan-instruction.upload_photo")}
|
|
{isLoading && <div className={styles.loaderContainer}>
|
|
<Loader color={LoaderColor.Black} />
|
|
</div>}
|
|
</label>
|
|
{isError &&
|
|
<p className={styles.error}>{translate("/scan-instruction.error")}</p>
|
|
}
|
|
<BiometricData className={styles.biometric} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ScanInstruction;
|