diff --git a/src/front/Components/DesignSystem/Typography/classes.module.scss b/src/front/Components/DesignSystem/Typography/classes.module.scss index 59d8e329..31a68d43 100644 --- a/src/front/Components/DesignSystem/Typography/classes.module.scss +++ b/src/front/Components/DesignSystem/Typography/classes.module.scss @@ -129,4 +129,16 @@ &.purple-flash { color: var(--purple-flash); } + + &.green-flash { + color: var(--green-flash); + } + + &.red-flash { + color: var(--red-flash); + } + + &.orange-flash { + color: var(--orange-flash); + } } diff --git a/src/front/Components/DesignSystem/Typography/index.tsx b/src/front/Components/DesignSystem/Typography/index.tsx index f3e799af..bd212c9b 100644 --- a/src/front/Components/DesignSystem/Typography/index.tsx +++ b/src/front/Components/DesignSystem/Typography/index.tsx @@ -35,6 +35,9 @@ export enum ITypoColor { GREY = "grey", BLACK = "black", PURPLE_FLASH = "purple-flash", + GREEN_FLASH = "green-flash", + ORANGE_FLASH = "orange-flash", + RED_FLASH = "red-flash", } export default class Typography extends React.Component { diff --git a/src/front/Components/DesignSystem/UserFolder/index.tsx b/src/front/Components/DesignSystem/UserFolder/index.tsx index e0fc1d82..f811aa0e 100644 --- a/src/front/Components/DesignSystem/UserFolder/index.tsx +++ b/src/front/Components/DesignSystem/UserFolder/index.tsx @@ -48,6 +48,7 @@ export default class UserFolder extends React.Component { this.closeComponent = this.closeComponent.bind(this); } public override render(): JSX.Element { + console.log(this.props.folder.documents); const documentsAsked: Document[] | null = this.getDocumentsByStatus("ASKED"); const otherDocuments: Document[] | null = this.getValidatedAndPendindDocuments(); const redirectPath = Module.getInstance() diff --git a/src/front/Components/Layouts/DesignSystem/dummyData.ts b/src/front/Components/Layouts/DesignSystem/dummyData.ts index 252c615b..d698dbd9 100644 --- a/src/front/Components/Layouts/DesignSystem/dummyData.ts +++ b/src/front/Components/Layouts/DesignSystem/dummyData.ts @@ -73,6 +73,17 @@ export const docType: DocumentType = { private_description: "Acte de naissance private description", archived_at: new Date(), }; + +export const identityDocType: DocumentType = { + name: "Carte d'identité", + uid: "fezezfazegezrgrezg", + created_at: new Date(), + updated_at: new Date(), + public_description: "Carte d'identité public description", + private_description: "Carte d'identité private description", + archived_at: new Date(), +}; + export const customer: Customer = { uid: "erhtgerfzeare", contact: contact, @@ -123,6 +134,25 @@ export const fileMock2: File = { "https://minteed-prod-euwest3-s3.s3.eu-west-3.amazonaws.com/Qm_Wq_En1_DCA_8yt_RX_Qx_QFA_9_Fm_ZKZH_Qqb_VH_1_Q_Mnv_G_Jtt1_FS_Xp_2a35a36e19", }; +export const identityFile: File = { + uid: "identity_file_uid", + created_at: new Date(), + updated_at: new Date(), + document: document, + file_path: "https://minteed-stg-euwest3-s3.s3.eu-west-3.amazonaws.com/cni_fake_c7259d4923.png" +}; + +export const documentIdentity: Document = { + uid: "ethrthbkjtrbporjbh", + depositor: customer, + document_status: "PENDING", + folder: folder, + document_type: identityDocType, + updated_at: new Date(), + created_at: new Date(), + files: [identityFile], +}; + export const documentPending: Document = { uid: "fzefeazdagrtetrury", depositor: customer, @@ -151,7 +181,7 @@ export const customer2: Customer = { created_at: new Date(), updated_at: new Date(), status: ECustomerStatus.VALIDATED, - documents: [document, documentPending, documentDeposited], + documents: [document, documentPending, documentDeposited, documentIdentity], }; export const folderWithPendingDocument: OfficeFolder = { @@ -165,7 +195,7 @@ export const folderWithPendingDocument: OfficeFolder = { updated_at: new Date(), description: "Description", archived_description: "Archived description", - documents: [document, documentPending, documentDeposited], + documents: [document, documentPending, documentDeposited, documentIdentity], }; export const folderWithPendingDocument1: OfficeFolder = { uid: "gtrtyutyhretgytu", diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/classes.module.scss b/src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/classes.module.scss new file mode 100644 index 00000000..cf2472f7 --- /dev/null +++ b/src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/classes.module.scss @@ -0,0 +1,37 @@ +@import "@Themes/constants.scss"; + +.root{ + background-color: var(--grey-soft); + padding: 24px; + + .result-text{ + color: rgba(0, 0, 0, 0.4); + } + + .result-container{ + display: flex; + + .percentage-container{ + display: flex; + align-items: center; + gap: 8px; + .dot{ + width: 11px; + height: 11px; + border-radius: 50px; + + &[data-color="green-flash"]{ + background-color: var(--green-flash); + } + + &[data-color="orange-flash"]{ + background-color: var(--orange-flash); + } + + &[data-color="red-flash"]{ + background-color: var(--red-flash); + } + } + } + } +} \ No newline at end of file diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/index.tsx b/src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/index.tsx new file mode 100644 index 00000000..f784dc1e --- /dev/null +++ b/src/front/Components/Layouts/Folder/ViewDocuments/OcrResult/index.tsx @@ -0,0 +1,41 @@ +import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography"; +import React from "react"; + +import classes from "./classes.module.scss"; + +type IProps = { + percentage: number; +}; + +type IState = {}; + +export default class OcrResult extends React.Component { + public override render(): JSX.Element | null { + return ( +
+ + Résultat de l'analyse : + +
+ + Document conforme à :  + +
+ + {this.props.percentage}% + +
+
+
+
+ ); + } + + private getColor() { + if (this.props.percentage > 75) { + return ITypoColor.GREEN_FLASH; + } else { + return ITypoColor.RED_FLASH; + } + } +} diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/classes.module.scss b/src/front/Components/Layouts/Folder/ViewDocuments/classes.module.scss index 61d7d101..57fe8c68 100644 --- a/src/front/Components/Layouts/Folder/ViewDocuments/classes.module.scss +++ b/src/front/Components/Layouts/Folder/ViewDocuments/classes.module.scss @@ -31,13 +31,20 @@ } } - .buttons-container { - display: flex; - gap: 24px; - justify-content: center; - margin-top: 32px; - @media (max-width: $screen-s) { - flex-direction: column-reverse; + .footer{ + width: fit-content; + margin: auto; + .ocr-container{ + margin-top: 42px; + } + .buttons-container { + display: flex; + gap: 24px; + justify-content: center; + margin-top: 32px; + @media (max-width: $screen-s) { + flex-direction: column-reverse; + } } } diff --git a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx index 39d10a74..04b5c65e 100644 --- a/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx +++ b/src/front/Components/Layouts/Folder/ViewDocuments/index.tsx @@ -1,5 +1,3 @@ -import "reflect-metadata"; - import LeftArrowIcon from "@Assets/Icons/left-arrow.svg"; import RightArrowIcon from "@Assets/Icons/right-arrow.svg"; import ValidateAnchoringGif from "@Front/Assets/images/validate_anchoring.gif"; @@ -18,7 +16,9 @@ import React from "react"; import BasePage from "../../Base"; import classes from "./classes.module.scss"; +import OcrResult from "./OcrResult"; +import "reflect-metadata"; type IProps = {}; type IPropsClass = { @@ -93,21 +93,29 @@ class ViewDocumentsClass extends BasePage {
)} -
- {this.props.selectedDocument?.document_status === "PENDING" && ( - <> - - - - - )} - {this.props.selectedDocument?.document_status === "VALIDATED" && ( - - - +
+ {this.props.selectedDocument?.document_type.name === "Carte d'identité" && ( +
+ +
)} + +
+ {this.props.selectedDocument?.document_status === "PENDING" && ( + <> + + + + + )} + {this.props.selectedDocument?.document_status === "VALIDATED" && ( + + + + )} +
{ }); } + private getRandomPercentageForOcr() { + // find diff + let difference = 100 - 90; + + // generate random number + let rand = Math.random(); + + // multiply with difference + rand = Math.floor(rand * difference); + + // add with min value + rand = rand + 90; + + return rand; + } + private goToPrevious() { const index = this.state.selectedFileIndex - 1; if (this.hasPrevious()) {