fix env var conflicts

next.config.js

@@ -4,14 +4,14 @@ const nextConfig = {
 	reactStrictMode: false,
 	publicRuntimeConfig: {
 		// Will be available on both server and client
-		BACK_API_PROTOCOL: process.env.NEXT_PUBLIC_BACK_API_PROTOCOL,
+		NEXT_PUBLIC_BACK_API_PROTOCOL: process.env.NEXT_PUBLIC_BACK_API_PROTOCOL,
-		BACK_API_HOST: process.env.NEXT_PUBLIC_BACK_API_HOST,
+		NEXT_PUBLIC_BACK_API_HOST: process.env.NEXT_PUBLIC_BACK_API_HOST,
-		BACK_API_ROOT_URL: process.env.NEXT_PUBLIC_BACK_API_ROOT_URL,
+		NEXT_PUBLIC_BACK_API_ROOT_URL: process.env.NEXT_PUBLIC_BACK_API_ROOT_URL,
-		BACK_API_VERSION: process.env.NEXT_PUBLIC_BACK_API_VERSION,
+		NEXT_PUBLIC_BACK_API_VERSION: process.env.NEXT_PUBLIC_BACK_API_VERSION,
-		FRONT_APP_HOST: process.env.NEXT_PUBLIC_FRONT_APP_HOST,
+		NEXT_PUBLIC_FRONT_APP_HOST: process.env.NEXT_PUBLIC_FRONT_APP_HOST,
-		FRONT_APP_PORT: process.env.NEXT_PUBLIC_FRONT_APP_PORT,
+		NEXT_PUBLIC_FRONT_APP_PORT: process.env.NEXT_PUBLIC_FRONT_APP_PORT,
-		IDNOT_AUTHORIZE_ENDPOINT: process.env.NEXT_PUBLIC_IDNOT_AUTHORIZE_ENDPOINT,
+		NEXT_PUBLIC_IDNOT_AUTHORIZE_ENDPOINT: process.env.NEXT_PUBLIC_IDNOT_AUTHORIZE_ENDPOINT,
-		IDNOT_CLIENT_ID: process.env.NEXT_PUBLIC_IDNOT_CLIENT_ID,
+		NEXT_PUBLIC_IDNOT_CLIENT_ID: process.env.NEXT_PUBLIC_IDNOT_CLIENT_ID,
 	},
 };
 

package.json

@@ -3,7 +3,7 @@
 	"version": "0.1.0",
 	"private": true,
 	"scripts": {
-		"dev": "next build && next dev",
+		"dev": "next dev",
 		"build": "next build",
 		"start": "next start",
 		"lint": "next lint",

src/front/Components/DesignSystem/DepositDocument/index.tsx

@@ -69,6 +69,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 	}
 
 	public override render(): JSX.Element {
+		console.log("Loading :", this.state.loading);
 		return (
 			<div className={classes["container"]}>
 				<div
@@ -281,12 +282,16 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 	}
 
 	private async onDragDrop(event: React.DragEvent<HTMLDivElement>) {
+		this.setState({
+			loading: true,
+		});
 		event.preventDefault();
 		this.setState({
 			isDragOver: false,
 		});
 		const file = event.dataTransfer.files[0];
 		if (file) this.addFile(file);
+		else this.setState({ loading: false });
 	}
 
 	private async addFile(file: File) {
@@ -294,9 +299,7 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 		formData.append("file", file, file.name);
 		const query = JSON.stringify({ document: { uid: this.props.document.uid } });
 		formData.append("q", query);
-		this.setState({
+
-			loading: true,
-		});
 		const newFile = await Files.getInstance().post(formData);
 		const files = this.state.currentFiles ? [...this.state.currentFiles, newFile] : [newFile];
 
@@ -334,11 +337,18 @@ export default class DepositDocument extends React.Component<IProps, IState> {
 
 	private async onFileChange() {
 		if (!this.inputRef.current) return;
+		this.setState({
+			loading: true,
+		});
 		const files = this.inputRef.current.files;
-		if (!files) return;
+		if (!files) {
+			this.setState({ loading: false });
+			return;
+		}
 		const file = files[0];
 
 		if (file) this.addFile(file);
+		else this.setState({ loading: false });
 	}
 
 	private addDocument() {

src/front/Components/DesignSystem/FilePreview/classes.module.scss

@@ -1,9 +1,12 @@
 .root {
 	height: inherit;
 	min-height: inherit;
+	position: relative;
+
 	.file-container {
 		height: inherit;
 		min-height: inherit;
+
 		.image {
 			width: 100%;
 			height: inherit;
@@ -17,4 +20,15 @@
 			height: inherit;
 		}
 	}
-}
+
+	.loader {
+		width: 48px;
+		height: 48px;
+		z-index: -1;
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+
+}

src/front/Components/DesignSystem/FilePreview/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import Typography, { ITypo, ITypoColor } from "../Typography";
 import classes from "./classes.module.scss";
+import Loader from "../Loader";
 
 type IProps = {
 	href: string;
@@ -12,20 +13,24 @@ type IState = {};
 export default class FilePreview extends React.Component<IProps, IState> {
 	override render() {
 		let type = this.props.href.split(".").pop();
-		if(this.props.fileName) type = this.props.fileName.split(".").pop();
+		if (this.props.fileName) type = this.props.fileName.split(".").pop();
 		return (
 			<div className={classes["root"]}>
+				<div className={classes["loader"]}>
+					<Loader />
+				</div>
+
 				{!type && (
 					<Typography typo={ITypo.H1} color={ITypoColor.BLACK}>
 						Erreur lors du chargement du fichier
 					</Typography>
 				)}
 				<div className={classes["file-container"]}>
-						{type?.toLowerCase() === "pdf" && (
+					{type?.toLowerCase() === "pdf" && (
-							<embed src={this.props.href} width="100%" height="100%" type="application/pdf" className={classes["pdf"]} />
+						<embed src={this.props.href} width="100%" height="100%" type="application/pdf" className={classes["pdf"]} />
-						)}
+					)}
-						{type?.toLowerCase() !== "pdf" && <img src={this.props.href} alt="File preview" className={classes["image"]} />}
+					{type?.toLowerCase() !== "pdf" && <img src={this.props.href} alt="File preview" className={classes["image"]} />}
-					</div>
+				</div>
 			</div>
 		);
 	}

src/front/Components/Elements/InputField/classes.module.scss

@@ -1,122 +0,0 @@
-@import "@Themes/constants.scss";
-@import "@Themes/animation.scss";
-
-.root {
-	padding: 15px 0;
-	width: 100%;
-	height: 100%;
-	will-change: transform, opacity;
-	animation: fadeInFromLeft 500ms;
-
-	> h1 {
-		margin-top: 0;
-	}
-
-	button {
-		margin-top: 10px;
-	}
-
-	.component {
-		width: 100%;
-		display: block;
-		position: relative;
-		height: 40px;
-		padding: 12px 16px 12px 40px;
-		border-width: 1px;
-		border-style: solid;
-		border-color: $borderColor;
-		border-radius: 4px;
-		transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
-		will-change: border-color, box-shadow;
-		background-color: $backgroundColor;
-
-		&:hover {
-			border-color: $primaryColor;
-		}
-
-		&:focus {
-			box-shadow: 0 0 0 2px $primaryColor;
-			border-color: $primaryColor;
-		}
-
-		&.error {
-			border-color: $downColor;
-
-			&:focus {
-				box-shadow: 0 0 0 2px rgba(237, 29, 37, 0.1);
-			}
-		}
-
-		&.success {
-			border-color: $upColor;
-
-			&:focus {
-				box-shadow: 0 0 0 2px rgba(0, 201, 167, 0.1);
-			}
-		}
-	}
-
-	@keyframes zoomIn {
-		from {
-			transform: scale(0.2);
-			opacity: 0;
-		}
-
-		to {
-			transform: scale(1);
-			opacity: 1;
-		}
-	}
-
-	.status {
-		display: block;
-		position: absolute;
-		top: 50%;
-		right: 10px;
-		z-index: 1;
-		width: 20px;
-		height: 20px;
-		margin-top: -10px;
-		font-size: 14px;
-		line-height: 20px;
-		text-align: center;
-		visibility: visible;
-		pointer-events: none;
-		will-change: transform, opacity;
-
-		&.error {
-			animation: zoomIn 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);
-		}
-
-		&.success {
-			animation: zoomIn 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);
-		}
-	}
-
-	.icon {
-		display: block;
-		position: absolute;
-		top: 50%;
-		left: 10px;
-		z-index: 1;
-		width: 20px;
-		height: 20px;
-		margin-top: -10px;
-		font-size: 14px;
-		line-height: 20px;
-		text-align: center;
-		visibility: visible;
-		pointer-events: none;
-	}
-}
-
-.errorMsg {
-	color: $downColor;
-	margin: -15px 0 15px 0;
-	line-height: 24px;
-	will-change: transform, opacity;
-	animation: slideDown 0.3s cubic-bezier(0.12, 0.4, 0.29, 1.46);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}

src/front/Components/Elements/InputField/index.tsx

@@ -1,50 +0,0 @@
-import React, { RefObject } from "react";
-import classes from "./classes.module.scss";
-import classNames from "classnames";
-import Image from "next/image";
-import ErrorIcon from "@Assets/Icons/input-error.svg";
-import SuccessIcon from "@Assets/Icons/input-success.svg";
-
-type IProps = {
-	inputRef?: RefObject<HTMLInputElement>;
-	icon?: string;
-	placeholder?: string;
-	name?: string;
-	value?: string;
-	onChange: any;
-	onBlur?: any;
-	inputStatus: "success" | "error" | "neutral";
-	errorMsg?: string;
-	type: string;
-};
-
-export default class InputField extends React.Component<IProps> {
-	public constructor(props: IProps) {
-		super(props);
-	}
-	public override render(): JSX.Element {
-		return (
-			<>
-				<div className={classNames(classes["root"])}>
-					{this.props.icon && <Image className={classes["icon"]} alt={this.props.icon} src={this.props.icon} />}
-					<input
-						className={classNames(classes["component"], classes[this.props.inputStatus])}
-						ref={this.props.inputRef}
-						type={this.props.type}
-						name={this.props.name}
-						placeholder={this.props.placeholder}
-						value={this.props.value}
-						onChange={this.props.onChange}
-						onBlur={this.props.onBlur}
-						autoComplete={this.props.name}
-					/>
-					<div className={classNames(classes["status"], classes[this.props.inputStatus])}>
-						{this.props.inputStatus === "success" && <Image alt="success icon" src={SuccessIcon} />}
-						{this.props.inputStatus === "error" && <Image alt="error icon" src={ErrorIcon} />}
-					</div>
-				</div>
-				{this.props.errorMsg && <div className={classes["errorMsg"]}>{this.props.errorMsg}</div>}
-			</>
-		);
-	}
-}

src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx

@@ -40,7 +40,7 @@ export default class DefaultDoubleSidePage extends React.Component<IProps, IStat
 					)}
 					{this.props.type === "background" && (
 						<div className={classNames(classes["sides"], classes["background-image-container"])}>
-							<Image alt={"right side image"} src={this.props.image} className={classes["background-image"]} />
+							<Image alt={"right side image"} src={this.props.image} className={classes["background-image"]} priority />
 						</div>
 					)}
 				</div>

src/front/Components/Layouts/Folder/AskDocuments/index.tsx

@@ -275,7 +275,7 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
 	) {
 		try {
 			const documentAsked: [] = values["document_types"] as [];
-			await documentAsked.forEach(async (document) => {
+			for(let i = 0; i < documentAsked.length; i++){
 				await Documents.getInstance().post({
 					folder: {
 						uid: this.props.folderUid,
@@ -284,11 +284,11 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
 						uid: this.props.customerUid,
 					},
 					document_type: {
-						uid: document,
+						uid: documentAsked[i],
 					},
 				});
-			});
+			}
-
+			
 			this.props.router.push(
 				Module.getInstance()
 					.get()

src/front/Components/Layouts/Folder/CreateFolder/index.tsx

@@ -18,7 +18,7 @@ import Users from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
 import User from "le-coffre-resources/dist/Notary";
 import Folders, { IPostFoldersParams } from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
 import { NextRouter, useRouter } from "next/router";
-import BackgroundImage from "./background-image.jpeg";
+import backgroundImage from "@Assets/images/404-background-image.jpeg";
 
 type IFormValues = {
 	folder_number: string;
@@ -73,7 +73,7 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
 
 	public override render(): JSX.Element {
 		return (
-			<DefaultDoubleSidePage title={"Dossier"} image={BackgroundImage} type="background" showHeader={true}>
+			<DefaultDoubleSidePage title={"Dossier"} image={backgroundImage} type="background" showHeader={true}>
 				<div className={classes["root"]}>
 					<BackArrow />
 					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>

src/front/Components/Layouts/Folder/ViewDocuments/index.tsx

@@ -187,7 +187,9 @@ class ViewDocumentsClass extends BasePage<IPropsClass, IState> {
 	override async componentDidMount() {
 		try {
 			const document = await Documents.getInstance().getByUid(this.props.documentUid, {
-				files: true,
+				files: {
+					where: { archived_at: null },
+				},
 				document_type: true,
 				folder: true,
 			});

src/front/Components/Layouts/FolderArchived/FolderInformation/index.tsx

@@ -1,17 +1,17 @@
 import ChevronIcon from "@Assets/Icons/chevron.svg";
+import Folders, { IPutFoldersParams } from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import FolderBoxInformation, { EFolderBoxInformationType } from "@Front/Components/DesignSystem/FolderBoxInformation";
 import QuantityProgressBar from "@Front/Components/DesignSystem/QuantityProgressBar";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
+import Module from "@Front/Config/Module";
+import { OfficeFolder } from "le-coffre-resources/dist/Customer";
 import { NextRouter, useRouter } from "next/router";
 
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import ClientSection from "./ClientSection";
-import { OfficeFolder } from "le-coffre-resources/dist/Customer";
-import Folders, { IPutFoldersParams } from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
-import Module from "@Front/Config/Module";
 
 type IProps = {};
 
@@ -93,7 +93,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 							<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
 							<div className={classes["choose-a-folder"]}>
 								<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
-									Vous n'avez aucun dossier archivé
+									Aucun dossier sélectionné
 								</Typography>
 							</div>
 						</div>

src/front/Components/Layouts/FolderArchived/index.tsx

@@ -8,7 +8,7 @@ type IState = {
 	selectedFolder: IDashBoardFolder | null;
 	isArchivedModalOpen: boolean;
 };
-export default class Folder extends BasePage<IProps, IState> {
+export default class FolderArchived extends BasePage<IProps, IState> {
 	public constructor(props: IProps) {
 		super(props);
 		this.state = {
@@ -31,7 +31,7 @@ export default class Folder extends BasePage<IProps, IState> {
 						<Typography typo={ITypo.H1Bis}>Informations du dossier</Typography>
 						<div className={classes["choose-a-folder"]}>
 							<Typography typo={ITypo.P_18} color={ITypoColor.GREY}>
-								Vous n'avez aucun dossier archivé
+								Aucun dossier sélectionné
 							</Typography>
 						</div>
 					</div>

src/front/Components/Layouts/PageNotFound/index.tsx

@@ -6,7 +6,8 @@ import BasePage from "../Base";
 import classes from "./classes.module.scss";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 
-import backgroundImage from "../Folder/CreateFolder/background-image.jpeg";
+import backgroundImage from "@Assets/images/404-background-image.jpeg";
+
 export default class PageNotFound extends BasePage {
 	public override render(): JSX.Element {
 		return (

src/pages/_app.tsx

@@ -39,15 +39,15 @@ const MyApp = (({
 	const getLayout = Component.getLayout ?? ((page) => <DefaultLayout children={page}></DefaultLayout>);
 
 	const instance = FrontendVariables.getInstance();
-	instance.BACK_API_PROTOCOL = backApiProtocol;
+	instance.BACK_API_PROTOCOL = backApiProtocol ?? "https://";
-	instance.BACK_API_HOST = backApiHost;
+	instance.BACK_API_HOST = backApiHost ?? "api.stg.lecoffre.smart-chain.fr";
-	instance.BACK_API_ROOT_URL = backApiRootUrl;
+	instance.BACK_API_ROOT_URL = backApiRootUrl ?? "/api";
-	instance.BACK_API_VERSION = backApiVersion;
+	instance.BACK_API_VERSION = backApiVersion ?? "/v1";
-	instance.FRONT_APP_HOST = frontAppHost;
+	instance.FRONT_APP_HOST = frontAppHost ?? "app.stg.lecoffre.smart-chain.fr";
-	instance.IDNOT_AUTHORIZE_ENDPOINT = idNotAuthorizeEndpoint;
+	instance.IDNOT_AUTHORIZE_ENDPOINT = idNotAuthorizeEndpoint ?? "https://qual-connexion.idnot.fr/IdPOAuth2/authorize/idnot_idp_v1";
-	instance.IDNOT_CLIENT_ID = idNotClientId;
+	instance.IDNOT_CLIENT_ID = idNotClientId ?? "4501646203F3EF67";
-	instance.FC_AUTHORIZE_ENDPOINT= fcAuthorizeEndpoint;
+	instance.FC_AUTHORIZE_ENDPOINT= fcAuthorizeEndpoint ?? "https://fcp.integ01.dev-franceconnect.fr/api/v1/authorize";
-	instance.FC_CLIENT_ID = fcClientId
+	instance.FC_CLIENT_ID = fcClientId ?? "211286433e39cce01db448d80181bdfd005554b19cd51b3fe7943f6b3b86ab6e";
 
 	return getLayout(<Component {...pageProps} />);
 }) as AppType;