From 7ee44008e903718370e4414cd839e2c888170ae6 Mon Sep 17 00:00:00 2001
From: juanpms2 <juanpablo@lemoncode.net>
Date: Wed, 4 Oct 2023 11:09:26 +0200
Subject: [PATCH] added message

---
 .../export-config/export-config.component.tsx | 20 +++++++++++++---
 .../export-config/export-config.styles.ts     | 24 ++++++++++++++++---
 2 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/apps/react-app/src/common-app/components/export-config/export-config.component.tsx b/apps/react-app/src/common-app/components/export-config/export-config.component.tsx
index e5e99324..5ae0ca13 100644
--- a/apps/react-app/src/common-app/components/export-config/export-config.component.tsx
+++ b/apps/react-app/src/common-app/components/export-config/export-config.component.tsx
@@ -15,6 +15,8 @@ export const ExportConfig: React.FC<Props> = props => {
   const [exportHTMLSettings, setExportHTMLSettings] = React.useState<ExportHTMLSettings>({
     primaryColor: theme.palette.primary[600],
   });
+  const [isDownload, setIsDownload] = React.useState<boolean>(false);
+
   const [htmlPreview, setHtmlPreview] = React.useState<string>(
     onHTMLSettingSelectionChanged(htmlTemplate, exportHTMLSettings)
   );
@@ -24,11 +26,15 @@ export const ExportConfig: React.FC<Props> = props => {
     onHTMLSettingSelectionChanged(htmlTemplate, { primaryColor: event.target.value });
   };
   const handleExportConfigSelection = () => {
+    setIsDownload(true);
     onExportToHTML(exportHTMLSettings);
+
+    setTimeout(() => {
+      cancelExport();
+    }, 2500);
   };
 
   React.useEffect(() => {
-    console.log('exportHTMLSettings', exportHTMLSettings);
     setHtmlPreview(onHTMLSettingSelectionChanged(htmlTemplate, exportHTMLSettings));
   }, [exportHTMLSettings]);
 
@@ -90,13 +96,21 @@ export const ExportConfig: React.FC<Props> = props => {
         <p className={`${classes.title}`}>Ejemplo de previsualización</p>
         <iframe id="iframeCV" className={classes.iframeCV} srcDoc={htmlPreview}></iframe>
         <div className={classes.buttonContainer}>
-          <Button onClick={handleExportConfigSelection} showIcon={false} className={classes.buttonStyle}>
+          <Button
+            onClick={handleExportConfigSelection}
+            showIcon={false}
+            className={classes.buttonStyle}
+            disabled={isDownload}
+          >
             DESCARGAR
           </Button>
-          <Button onClick={cancelExport} showIcon={false} className={classes.buttonStyle}>
+          <Button onClick={cancelExport} showIcon={false} className={classes.buttonStyle} disabled={isDownload}>
             CANCELAR
           </Button>
         </div>
+        {isDownload && (
+          <div className={classes.downloadMessage}>Descarga completada. Revisa tu carpeta de descargas</div>
+        )}
       </div>
     </div>
   );
diff --git a/apps/react-app/src/common-app/components/export-config/export-config.styles.ts b/apps/react-app/src/common-app/components/export-config/export-config.styles.ts
index 3b35cd97..006128ab 100644
--- a/apps/react-app/src/common-app/components/export-config/export-config.styles.ts
+++ b/apps/react-app/src/common-app/components/export-config/export-config.styles.ts
@@ -38,7 +38,6 @@ export const colorFieldset = css`
   @media (min-width: 1024px) {
     justify-content: start;
   }
-
 `;
 export const inputRadioButton = (color: string) => css`
   appearance: none;
@@ -85,8 +84,27 @@ export const buttonContainer = css`
 export const buttonStyle = css`
   max-width: 358px;
   min-width: min-content;
-  widht: 100%;
+  width: 100%;
+
   @media (min-width: 1024px) {
-    width:auto;
+    width: auto;
+  }
+`;
+
+export const downloadMessage = css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: ${theme.spacing(4)};
+  padding: ${theme.spacing(4)};
+  color: ${theme.palette.success[500]};
+  background-color: ${theme.palette.dark[500]};
+
+  ${theme.typography.mobile.h5};
+  @media (min-width: 725px) {
+    ${theme.typography.tablet.h5};
+  }
+  @media (min-width: 1024px) {
+    ${theme.typography.desktop.h5};
   }
 `;