gbc-kyc-kit 2.3.7 → 2.3.8

package/dist/gbc-kyc-kit.es.js

@@ -32835,7 +32835,6 @@ function getDividerUtilityClass(slot) {
   return generateUtilityClass("MuiDivider", slot);
 }
 const dividerClasses = generateUtilityClasses("MuiDivider", ["root", "absolute", "fullWidth", "inset", "middle", "flexItem", "light", "vertical", "withChildren", "withChildrenVertical", "textAlignRight", "textAlignLeft", "wrapper", "wrapperVertical"]);
-var dividerClasses$1 = dividerClasses;
 const _excluded$1m = ["absolute", "children", "className", "component", "flexItem", "light", "orientation", "role", "textAlign", "variant"];
 const useUtilityClasses$13 = (ownerState) => {
   const {
@@ -35469,11 +35468,11 @@ const MenuItemRoot = styled$1(ButtonBase$1, {
   [`&.${menuItemClasses$1.disabled}`]: {
     opacity: (theme.vars || theme).palette.action.disabledOpacity
   },
-  [`& + .${dividerClasses$1.root}`]: {
+  [`& + .${dividerClasses.root}`]: {
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1)
   },
-  [`& + .${dividerClasses$1.inset}`]: {
+  [`& + .${dividerClasses.inset}`]: {
     marginLeft: 52
   },
   [`& .${listItemTextClasses$1.root}`]: {
@@ -39314,6 +39313,8 @@ const DocumentReaderController = (dataDocument, clientId, authorize, eventId, so
           ...error,
           countAttempts: data2.count_try
         });
+        if (error.response.data.code.include("020"))
+          setUploadDocumentByPhone(true);
         if ((_a = error.response.data) == null ? void 0 : _a.message) {
           message2 = error.response.data.message;
         } else if (status2 === 500) {
@@ -39366,10 +39367,10 @@ const DocumentReaderController = (dataDocument, clientId, authorize, eventId, so
   const isPortrait = usePortrait();
   const videoConstraints = useMemo(() => ({
     width: {
-      ideal: isPortrait ? 400 : 640
+      ideal: isPortrait ? 1080 : 1920
     },
     height: {
-      ideal: isPortrait ? 640 : 400
+      ideal: isPortrait ? 1920 : 1080
     },
     aspectRatio: {
       ideal: 4 / 5
@@ -39414,106 +39415,40 @@ const DocumentReaderController = (dataDocument, clientId, authorize, eventId, so
 const validateErrorMessageOCR = (message) => {
   return message === "Tipo de documento no v\xE1lido" || message === "Datos de la imagen no reconocidas" || message === "Dato no reconocido(Primer Nombre)" || message == "Dato no reconocido(Primer Apellido)" || message == "";
 };
-const DocumentGuide = ({
-  documentType = "id"
+const InstructionsComponent = ({
+  title,
+  subtitle
 }) => {
-  const getGuideDimensions = () => {
-    switch (documentType) {
-      case "passport":
-        return {
-          width: "85%",
-          height: "60%",
-          aspectRatio: "1.4"
-        };
-      case "driverLicense":
-        return {
-          width: "85%",
-          height: "55%",
-          aspectRatio: "1.6"
-        };
-      case "id":
-      default:
-        return {
-          width: "77%",
-          height: "90%",
-          aspectRatio: "1.6"
-        };
-    }
-  };
-  const dimensions = getGuideDimensions();
   return /* @__PURE__ */ jsxs(Box$1, {
-    sx: {
-      position: "absolute",
-      top: "50%",
-      left: "50%",
-      transform: "translate(-50%, -50%)",
-      width: dimensions.width,
-      height: dimensions.height,
-      border: "2px dashed rgba(255, 255, 255, 0.7)",
-      borderRadius: "8px",
-      display: "flex",
-      flexDirection: "column",
-      justifyContent: "center",
-      alignItems: "center",
-      zIndex: 5,
-      pointerEvents: "none"
-    },
-    children: [/* @__PURE__ */ jsx$1(Box$1, {
-      sx: {
-        position: "absolute",
-        top: 0,
-        left: 0,
-        width: "20px",
-        height: "20px",
-        borderTop: "3px solid #4CAF50",
-        borderLeft: "3px solid #4CAF50",
-        borderTopLeftRadius: "8px"
-      }
-    }), /* @__PURE__ */ jsx$1(Box$1, {
-      sx: {
-        position: "absolute",
-        top: 0,
-        right: 0,
-        width: "20px",
-        height: "20px",
-        borderTop: "3px solid #4CAF50",
-        borderRight: "3px solid #4CAF50",
-        borderTopRightRadius: "8px"
-      }
-    }), /* @__PURE__ */ jsx$1(Box$1, {
-      sx: {
-        position: "absolute",
-        bottom: 0,
-        left: 0,
-        width: "20px",
-        height: "20px",
-        borderBottom: "3px solid #4CAF50",
-        borderLeft: "3px solid #4CAF50",
-        borderBottomLeftRadius: "8px"
-      }
-    }), /* @__PURE__ */ jsx$1(Box$1, {
-      sx: {
-        position: "absolute",
-        bottom: 0,
-        right: 0,
-        width: "20px",
-        height: "20px",
-        borderBottom: "3px solid #4CAF50",
-        borderRight: "3px solid #4CAF50",
-        borderBottomRightRadius: "8px"
-      }
+    children: [/* @__PURE__ */ jsx$1(Typography$1, {
+      variant: "h6",
+      className: "title",
+      mt: 2,
+      children: title
     }), /* @__PURE__ */ jsx$1(Typography$1, {
       variant: "body2",
-      sx: {
-        color: "white",
-        textShadow: "0px 0px 3px rgba(0,0,0,0.8)",
-        textAlign: "center",
-        padding: "0 10px",
-        backgroundColor: "rgba(0,0,0,0.5)",
-        borderRadius: "4px",
-        marginTop: "10px"
-      },
-      children: "Coloca el documento dentro del marco"
+      children: subtitle
+    }), /* @__PURE__ */ jsxs(List$1, {
+      dense: true,
+      children: [/* @__PURE__ */ jsxs(ListItem$1, {
+        children: [/* @__PURE__ */ jsx$1(ListItemIcon$1, {
+          children: /* @__PURE__ */ jsx$1(LightMode, {})
+        }), /* @__PURE__ */ jsx$1(ListItemText$1, {
+          primary: "Procura tener buena iluminaci\xF3n"
+        })]
+      }), /* @__PURE__ */ jsxs(ListItem$1, {
+        children: [/* @__PURE__ */ jsx$1(ListItemIcon$1, {
+          children: /* @__PURE__ */ jsx$1(SettingsBrightness, {})
+        }), /* @__PURE__ */ jsx$1(ListItemText$1, {
+          primary: "Evita reflejos en el documento de identidad"
+        })]
+      }), /* @__PURE__ */ jsxs(ListItem$1, {
+        children: [/* @__PURE__ */ jsx$1(ListItemIcon$1, {
+          children: /* @__PURE__ */ jsx$1(Spellcheck, {})
+        }), /* @__PURE__ */ jsx$1(ListItemText$1, {
+          primary: "Procura que el texto en el documento sea legible"
+        })]
+      })]
     })]
   });
 };
@@ -39521,29 +39456,17 @@ function UploadDocument2({
   setActivateCamera,
   activateCamera,
   videoConstraints,
-  detail,
   videoRef,
   streamRef,
   onTapToFocus,
   title,
-  documentType = "id"
+  subtitle
 }) {
-  const [focusing, setFocusing] = useState(false);
-  const [focusIndicator, setFocusIndicator] = useState(false);
   useEffect(() => {
     if (activateCamera && videoRef.current) {
       navigator.mediaDevices.getUserMedia({
-        video: {
-          ...videoConstraints || {
-            facingMode: "environment"
-          },
-          advanced: [{
-            focusMode: "continuous"
-          }, {
-            exposureMode: "continuous"
-          }, {
-            whiteBalanceMode: "continuous"
-          }]
+        video: videoConstraints || {
+          facingMode: "environment"
         },
         audio: false
       }).then((stream) => {
@@ -39563,20 +39486,6 @@ function UploadDocument2({
       }
     };
   }, [activateCamera, videoConstraints]);
-  const handleTapToFocus = async (e2) => {
-    setFocusing(true);
-    setFocusIndicator(true);
-    const rect = e2.currentTarget.getBoundingClientRect();
-    (e2.clientX - rect.left) / rect.width;
-    (e2.clientY - rect.top) / rect.height;
-    await onTapToFocus();
-    setTimeout(() => {
-      setFocusing(false);
-      setTimeout(() => {
-        setFocusIndicator(false);
-      }, 500);
-    }, 1e3);
-  };
   return /* @__PURE__ */ jsx$1("div", {
     className: "drag-zone",
     children: /* @__PURE__ */ jsx$1(Box$1, {
@@ -39591,11 +39500,8 @@ function UploadDocument2({
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        children: activateCamera ? /* @__PURE__ */ jsxs(Box$1, {
-          position: "relative",
-          width: "100%",
-          height: "100%",
-          children: [/* @__PURE__ */ jsx$1("video", {
+        children: activateCamera ? /* @__PURE__ */ jsx$1(Box$1, {
+          children: /* @__PURE__ */ jsx$1("video", {
             ref: videoRef,
             style: {
               width: "100%",
@@ -39607,71 +39513,14 @@ function UploadDocument2({
               transform: "translate(-50%, -50%)",
               borderRadius: "5px"
             },
-            onClick: handleTapToFocus,
+            onClick: onTapToFocus,
             playsInline: true,
             muted: true,
             autoPlay: true
-          }), /* @__PURE__ */ jsx$1(DocumentGuide, {
-            documentType
-          }), focusIndicator && /* @__PURE__ */ jsx$1(Box$1, {
-            sx: {
-              position: "absolute",
-              top: "50%",
-              left: "50%",
-              transform: "translate(-50%, -50%)",
-              width: "80px",
-              height: "80px",
-              border: "2px solid white",
-              borderRadius: "50%",
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              zIndex: 10,
-              animation: focusing ? "pulse 1s" : "none",
-              "@keyframes pulse": {
-                "0%": {
-                  transform: "translate(-50%, -50%) scale(1)",
-                  opacity: 1
-                },
-                "50%": {
-                  transform: "translate(-50%, -50%) scale(1.2)",
-                  opacity: 0.7
-                },
-                "100%": {
-                  transform: "translate(-50%, -50%) scale(1)",
-                  opacity: 1
-                }
-              }
-            },
-            children: focusing && /* @__PURE__ */ jsx$1(CircularProgress$1, {
-              size: 40,
-              color: "primary"
-            })
-          }), /* @__PURE__ */ jsx$1(Box$1, {
-            sx: {
-              position: "absolute",
-              bottom: "10px",
-              left: "50%",
-              transform: "translateX(-50%)",
-              backgroundColor: "rgba(0, 0, 0, 0.6)",
-              color: "white",
-              padding: "8px 16px",
-              borderRadius: "20px",
-              fontSize: "14px",
-              zIndex: 10
-            },
-            children: "Toca la pantalla para enfocar en el documento"
-          })]
-        }) : /* @__PURE__ */ jsxs(Box$1, {
-          children: [/* @__PURE__ */ jsx$1(CloudUploadIcon, {}), /* @__PURE__ */ jsx$1(Typography$1, {
-            variant: "h6",
-            className: "title",
-            mt: 2,
-            children: title
-          }), /* @__PURE__ */ jsx$1(Typography$1, {
-            variant: "body2",
-            children: detail
-          })]
+          })
+        }) : /* @__PURE__ */ jsx$1(InstructionsComponent, {
+          title,
+          subtitle
         })
       })
     })
@@ -39683,65 +39532,28 @@ function UploadByGallery({
   side,
   title,
   subtitle,
-  startUpload,
-  onClickToContinue
+  startUpload
 }) {
   const handleClick = () => {
     var _a;
     (_a = fileInputRef.current) == null ? void 0 : _a.click();
   };
-  return /* @__PURE__ */ jsx$1(Box$1, {
-    className: "upload-by-gallery-container",
-    children: !startUpload ? /* @__PURE__ */ jsxs(Box$1, {
-      children: [/* @__PURE__ */ jsx$1(Typography$1, {
-        variant: "h6",
-        className: "title",
-        mt: 2,
-        children: title
-      }), /* @__PURE__ */ jsx$1(Typography$1, {
-        variant: "body2",
-        children: subtitle
-      }), /* @__PURE__ */ jsxs(List$1, {
-        dense: true,
-        children: [/* @__PURE__ */ jsxs(ListItem$1, {
-          children: [/* @__PURE__ */ jsx$1(ListItemIcon$1, {
-            children: /* @__PURE__ */ jsx$1(LightMode, {})
-          }), /* @__PURE__ */ jsx$1(ListItemText$1, {
-            primary: "Procura tener buena iluminaci\xF3n"
-          })]
-        }), /* @__PURE__ */ jsxs(ListItem$1, {
-          children: [/* @__PURE__ */ jsx$1(ListItemIcon$1, {
-            children: /* @__PURE__ */ jsx$1(SettingsBrightness, {})
-          }), /* @__PURE__ */ jsx$1(ListItemText$1, {
-            primary: "Evita reflejos en el documento de identidad"
-          })]
-        }), /* @__PURE__ */ jsxs(ListItem$1, {
-          children: [/* @__PURE__ */ jsx$1(ListItemIcon$1, {
-            children: /* @__PURE__ */ jsx$1(Spellcheck, {})
-          }), /* @__PURE__ */ jsx$1(ListItemText$1, {
-            primary: "Procura que el texto en el documento sea legible"
-          })]
-        })]
-      }), /* @__PURE__ */ jsx$1(CustomButton, {
-        type: "button",
-        onClick: onClickToContinue,
-        children: "Continuar"
-      })]
-    }) : /* @__PURE__ */ jsx$1("div", {
-      className: "drag-zone",
+  return /* @__PURE__ */ jsx$1("div", {
+    className: "drag-zone",
+    children: /* @__PURE__ */ jsx$1(Box$1, {
+      className: "drag-and-drop-container",
       children: /* @__PURE__ */ jsx$1(Box$1, {
-        className: "drag-and-drop-container",
-        children: /* @__PURE__ */ jsxs(Box$1, {
-          onClick: () => handleClick(),
-          position: "relative",
-          zIndex: 1,
-          width: "100%",
-          height: "100%",
-          overflow: "hidden",
-          display: "flex",
-          justifyContent: "center",
-          alignItems: "center",
-          padding: 2,
+        onClick: () => handleClick(),
+        position: "relative",
+        zIndex: 1,
+        width: "100%",
+        height: "100%",
+        overflow: "hidden",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: 2,
+        children: startUpload ? /* @__PURE__ */ jsxs(Fragment, {
           children: [/* @__PURE__ */ jsxs("div", {
             style: {
               display: "flex",
@@ -39749,7 +39561,7 @@ function UploadByGallery({
               alignItems: "center",
               justifyContent: "center"
             },
-            children: [/* @__PURE__ */ jsx$1(CloudUploadIcon, {}), /* @__PURE__ */ jsxs(Typography$1, {
+            children: [/* @__PURE__ */ jsx$1(CloudUploadIcon, {}), /* @__PURE__ */ jsx$1(Typography$1, {
               variant: "body2",
               style: {
                 textAlign: "center",
@@ -39757,9 +39569,7 @@ function UploadByGallery({
                 whiteSpace: "none",
                 margin: "auto"
               },
-              children: [/* @__PURE__ */ jsx$1("strong", {
-                children: "Haz clic aqu\xED"
-              }), " para subir una foto desde tu dispositivo"]
+              children: "Haz clic aqu\xED para subir una foto desde tu dispositivo"
             })]
           }), /* @__PURE__ */ jsx$1("input", {
             ref: fileInputRef,
@@ -39772,6 +39582,9 @@ function UploadByGallery({
               display: "none"
             }
           })]
+        }) : /* @__PURE__ */ jsx$1(InstructionsComponent, {
+          title,
+          subtitle
         })
       })
     })
@@ -39800,46 +39613,6 @@ const createCanvasFromSource = (source2) => {
   ctx == null ? void 0 : ctx.drawImage(source2, 0, 0, width2, height2);
   return { canvas, ctx };
 };
-const analyzeFocusQuality = async (imageData) => {
-  return new Promise((resolve) => {
-    if (typeof imageData === "string") {
-      const img = new Image();
-      img.onload = () => {
-        const { canvas, ctx } = createCanvasFromSource(img);
-        const result = calculateSharpness(canvas, ctx);
-        resolve(result);
-      };
-      img.src = imageData;
-    } else {
-      const result = calculateSharpness(imageData, imageData.getContext("2d"));
-      resolve(result);
-    }
-  });
-};
-const calculateSharpness = (canvas, ctx) => {
-  if (!ctx) {
-    return { isFocused: false, sharpness: 0 };
-  }
-  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
-  const data2 = imageData.data;
-  let sum = 0;
-  let sumSquared = 0;
-  let count = 0;
-  for (let i = 0; i < data2.length; i += 4) {
-    const luminance = (data2[i] + data2[i + 1] + data2[i + 2]) / 3;
-    sum += luminance;
-    sumSquared += luminance * luminance;
-    count++;
-  }
-  const mean = sum / count;
-  const variance = sumSquared / count - mean * mean;
-  const normalizedVariance = Math.min(variance / 1e3, 1);
-  const isFocused = normalizedVariance > 0.3;
-  return {
-    isFocused,
-    sharpness: normalizedVariance
-  };
-};
 const isLowEndDevice = () => {
   const cores = navigator.hardwareConcurrency || 2;
   const memory = navigator.deviceMemory || 2;
@@ -39863,7 +39636,6 @@ function CustomTabPanel(props) {
     dualModeRequired,
     status,
     onUploadImage2,
-    uploadByGallery,
     ...other
   } = props;
   return /* @__PURE__ */ jsx$1("div", {
@@ -39872,7 +39644,9 @@ function CustomTabPanel(props) {
     id: `simple-tabpanel-${index}`,
     "aria-labelledby": `simple-tab-${index}`,
     ...other,
+    className: "tabpanel",
     children: value === index && /* @__PURE__ */ jsx$1(Box$1, {
+      height: "100%",
       children
     })
   });
@@ -39901,16 +39675,11 @@ function SideDocsSelector({
   status,
   onUploadImage2,
   uploadDocumentByPhone,
-  uploadByGallery,
-  setUploadDocumentByPhone,
-  onSendSubmitDocument,
-  documentType = "id"
+  onSendSubmitDocument
 }) {
   const [value, setValue] = React$2.useState(0);
   const [showZoom, setShowZoom] = React$2.useState(false);
-  const [countAnalyzedImage, setCountAnalyzedImage] = useState(0);
   const [hideCaptureButton, setHideCaptureButton] = useState(false);
-  const [startUpload, setStartUpload] = useState(false);
   const handleChange = (event, newValue) => {
     setValue(newValue);
   };
@@ -39926,6 +39695,17 @@ function SideDocsSelector({
   };
   const videoRef = useRef(null);
   const streamRef = useRef(null);
+  const takeScreenshot = async (side) => {
+    const video = videoRef.current;
+    if (!video)
+      return;
+    const {
+      canvas
+    } = createCanvasFromSource(video);
+    const imageData = canvas.toDataURL("image/jpeg");
+    onUploadImage2(side, imageData);
+    processImage();
+  };
   const handleTapToFocus = async () => {
     var _a, _b;
     if (!streamRef.current)
@@ -39935,12 +39715,12 @@ function SideDocsSelector({
     const settings = (_b = track.getSettings) == null ? void 0 : _b.call(track);
     console.log("focus capabilities:", capabilities);
     console.log("focus settings:", settings);
-    if (!capabilities) {
-      console.warn("No se puede acceder a las capacidades de la c\xE1mara");
+    if (!capabilities || !capabilities.focusMode) {
+      console.warn("No se puede acceder a las capacidades de enfoque");
       return;
     }
     try {
-      if (capabilities.focusMode && capabilities.focusMode.includes("continuous")) {
+      if (capabilities.focusMode.includes("continuous")) {
         await track.applyConstraints({
           frameRate: {
             ideal: 30
@@ -39949,8 +39729,7 @@ function SideDocsSelector({
             focusMode: "continuous"
           }]
         });
-        console.log("Enfoque continuo aplicado");
-      } else if (capabilities.focusMode && capabilities.focusMode.includes("single-shot")) {
+      } else if (capabilities.focusMode.includes("single-shot")) {
         await track.applyConstraints({
           frameRate: {
             ideal: 30
@@ -39959,97 +39738,45 @@ function SideDocsSelector({
             focusMode: "single-shot"
           }]
         });
-        console.log("Enfoque de disparo \xFAnico aplicado");
-      } else if (capabilities.focusMode && capabilities.focusMode.includes("manual") && capabilities.focusDistance) {
-        const midDistance = (capabilities.focusDistance.min + capabilities.focusDistance.max) / 2;
+      } else if (capabilities.focusMode.includes("manual") && capabilities.focusDistance) {
         await track.applyConstraints({
           frameRate: {
             ideal: 30
           },
           advanced: [{
             focusMode: "manual",
-            focusDistance: midDistance
+            focusDistance: capabilities.focusDistance.min
           }]
         });
-        console.log("Enfoque manual aplicado a distancia media");
       } else {
         console.warn("No hay modo de enfoque compatible");
       }
-      if (capabilities.exposureMode && capabilities.exposureMode.includes("continuous")) {
-        await track.applyConstraints({
-          advanced: [{
-            exposureMode: "continuous"
-          }]
-        });
-        console.log("Exposici\xF3n continua aplicada");
-      }
-      if (capabilities.whiteBalanceMode && capabilities.whiteBalanceMode.includes("continuous")) {
-        await track.applyConstraints({
-          advanced: [{
-            whiteBalanceMode: "continuous"
-          }]
-        });
-        console.log("Balance de blancos continuo aplicado");
-      }
-      setTimeout(async () => {
-        var _a2;
-        const newSettings = (_a2 = track.getSettings) == null ? void 0 : _a2.call(track);
-        console.log("Nuevos ajustes despu\xE9s del enfoque:", newSettings);
-      }, 1e3);
     } catch (err) {
       console.error("Error al aplicar constraints de enfoque:", err);
     }
   };
-  const checkFocusQuality = async (imageData) => {
-    return await analyzeFocusQuality(imageData);
-  };
-  const takeScreenshot = async (side) => {
-    const video = videoRef.current;
-    if (!video)
-      return;
-    const {
-      canvas
-    } = createCanvasFromSource(video);
-    const imageData = canvas.toDataURL("image/jpeg");
-    const {
-      isFocused,
-      sharpness
-    } = await checkFocusQuality(imageData);
-    if (isFocused && sharpness > 0.3) {
-      onUploadImage2(side, imageData);
-    } else {
-      setCountAnalyzedImage((prevState) => {
-        return prevState + 1;
-      });
-      if (countAnalyzedImage >= 1) {
-        setUploadDocumentByPhone(true);
-        setHideCaptureButton(true);
-        setCountAnalyzedImage(0);
-      } else {
-        alert("La imagen no est\xE1 bien enfocada. Por favor, toca la pantalla para enfocar en el documento y vuelve a intentarlo.");
-      }
-    }
-  };
   const fileInputRef = useRef(null);
   const handleFileChange = async (e2) => {
     const imageData = e2.target.files[0];
     const image = await fileToBase64(imageData);
     const side = e2.target.name;
     onUploadImage2(side, image);
-    if (side === "firstImage") {
-      handleChange((e22) => e22, 1);
-    } else {
+    processImage();
+  };
+  const processImage = () => {
+    if (base64.firstImage && dualModeRequired)
+      handleChange((e2) => e2, 1);
+    if (base64.firstImage && base64.secondImage)
       onSendSubmitDocument();
-    }
   };
   const onClickToContinue = () => {
     setHideCaptureButton(false);
-    setStartUpload(true);
+    setActivateCamera(true);
   };
-  console.log(activateCamera);
   return /* @__PURE__ */ jsxs(Box$1, {
     sx: {
-      width: "100%"
+      width: "100%",
+      height: "100%"
     },
     children: [/* @__PURE__ */ jsx$1(Box$1, {
       sx: {
@@ -40081,7 +39808,7 @@ function SideDocsSelector({
             justifyContent: "flex-start",
             alignItems: "flex-start",
             width: "100%",
-            children: [base64.firstImage ? /* @__PURE__ */ jsxs("div", {
+            children: [base64.firstImage ? /* @__PURE__ */ jsx$1("div", {
               className: "img-container",
               style: {
                 transition: "transform 0.3s ease-in-out, width 0.3s ease-in-out",
@@ -40089,7 +39816,7 @@ function SideDocsSelector({
                 position: "relative",
                 zIndex: 1
               },
-              children: [/* @__PURE__ */ jsx$1("img", {
+              children: /* @__PURE__ */ jsx$1("img", {
                 src: base64.firstImage,
                 onClick: toggleZoom,
                 alt: "thumbnail",
@@ -40098,27 +39825,30 @@ function SideDocsSelector({
                   height: "100%",
                   objectFit: "cover"
                 }
-              }), /* @__PURE__ */ jsxs(Box$1, {
-                style: {
-                  position: "absolute",
-                  top: 0,
-                  right: 0,
-                  display: "flex",
-                  gap: "8px",
-                  zIndex: 20
-                },
+              })
+            }) : uploadDocumentByPhone || isLowEndDevice() ? /* @__PURE__ */ jsx$1(UploadByGallery, {
+              handleFileChange,
+              side: "firstImage",
+              fileInputRef,
+              title: "Cargar documeto",
+              subtitle: "Vamos a cargar el documento desde tu dispositivo. \xA1Ten en cuenta lo siguiente!",
+              startUpload: activateCamera
+            }) : /* @__PURE__ */ jsx$1(UploadDocument2, {
+              videoRef,
+              streamRef,
+              setActivateCamera,
+              activateCamera,
+              videoConstraints,
+              onTapToFocus: handleTapToFocus,
+              title: "Cargar documento",
+              subtitle: "Subir frontal del documento"
+            }), /* @__PURE__ */ jsxs(Box$1, {
+              width: "100%",
+              children: [base64.firstImage && /* @__PURE__ */ jsxs(Box$1, {
+                className: "toolbox-container",
                 children: [/* @__PURE__ */ jsx$1(Box$1, {
                   className: "zoom-button",
                   onClick: toggleZoom,
-                  sx: {
-                    backgroundColor: "rgba(255, 255, 255, 0.7)",
-                    borderRadius: "50%",
-                    padding: "4px",
-                    cursor: "pointer",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center"
-                  },
                   children: /* @__PURE__ */ jsx$1(MUITooltip, {
                     title: "Ampliar",
                     placement: "right",
@@ -40132,15 +39862,6 @@ function SideDocsSelector({
                 }), /* @__PURE__ */ jsx$1(Box$1, {
                   className: "delete-button",
                   onClick: () => deleteImage("firstImage"),
-                  sx: {
-                    backgroundColor: "rgba(255, 255, 255, 0.7)",
-                    borderRadius: "50%",
-                    padding: "4px",
-                    cursor: "pointer",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center"
-                  },
                   children: /* @__PURE__ */ jsx$1(MUITooltip, {
                     title: "Vaciar",
                     placement: "right",
@@ -40151,34 +39872,25 @@ function SideDocsSelector({
                     })
                   })
                 })]
-              })]
-            }) : uploadDocumentByPhone || uploadByGallery || isLowEndDevice() ? /* @__PURE__ */ jsx$1(UploadByGallery, {
-              handleFileChange,
-              side: "firstImage",
-              fileInputRef,
-              title: "Cargar documeto",
-              subtitle: "Vamos a cargar el documento desde tu dispositivo. \xA1Ten en cuenta lo siguiente!",
-              onClickToContinue,
-              startUpload
-            }) : /* @__PURE__ */ jsx$1(UploadDocument2, {
-              videoRef,
-              streamRef,
-              setActivateCamera,
-              activateCamera,
-              videoConstraints,
-              detail: "Subir frontal del documento",
-              onTapToFocus: handleTapToFocus,
-              title: "Cargar documento",
-              documentType
-            }), /* @__PURE__ */ jsxs(Box$1, {
-              width: "100%",
-              children: [activateCamera && !hideCaptureButton && /* @__PURE__ */ jsx$1(CustomButton, {
+              }), !activateCamera && !base64.firstImage && /* @__PURE__ */ jsx$1(CustomButton, {
+                type: "button",
+                onClick: onClickToContinue,
+                children: "Continuar"
+              }), !activateCamera && base64.firstImage && /* @__PURE__ */ jsx$1(CustomButton, {
+                type: "button",
+                onClick: (e2) => handleChange(e2, 1),
+                children: "Cargar reverso del documento"
+              }), activateCamera && !hideCaptureButton && !uploadDocumentByPhone && /* @__PURE__ */ jsx$1(CustomButton, {
                 type: "button",
                 onClick: () => takeScreenshot("firstImage"),
                 children: "Capturar"
-              }), !status && Object.keys(base64).length > 0 && !activateCamera && lib$1(status) && (!dualModeRequired && base64.firstImage || dualModeRequired && base64.firstImage && base64.secondImage) && /* @__PURE__ */ jsx$1(CustomButton, {
-                type: "submit",
-                children: "Procesar"
+              }), !status && Object.keys(base64).length > 0 && !activateCamera && lib$1(status) && (!dualModeRequired && base64.firstImage || dualModeRequired && base64.firstImage && base64.secondImage) && /* @__PURE__ */ jsxs(Box$1, {
+                children: [/* @__PURE__ */ jsx$1(Divider$1, {
+                  children: "O"
+                }), /* @__PURE__ */ jsx$1(CustomButton, {
+                  type: "submit",
+                  children: "Procesar"
+                })]
               })]
             })]
           })
@@ -40197,7 +39909,7 @@ function SideDocsSelector({
             justifyContent: "flex-start",
             alignItems: "flex-start",
             width: "100%",
-            children: [base64.secondImage ? /* @__PURE__ */ jsxs("div", {
+            children: [base64.secondImage ? /* @__PURE__ */ jsx$1("div", {
               className: "img-container",
               style: {
                 transition: "transform 0.3s ease-in-out, width 0.3s ease-in-out",
@@ -40205,7 +39917,7 @@ function SideDocsSelector({
                 position: "relative",
                 zIndex: 1
               },
-              children: [/* @__PURE__ */ jsx$1("img", {
+              children: /* @__PURE__ */ jsx$1("img", {
                 src: base64.secondImage,
                 onClick: toggleZoom,
                 alt: "thumbnail",
@@ -40214,29 +39926,32 @@ function SideDocsSelector({
                   height: "100%",
                   objectFit: "cover"
                 }
-              }), /* @__PURE__ */ jsxs(Box$1, {
-                style: {
-                  position: "absolute",
-                  top: 0,
-                  right: 0,
-                  display: "flex",
-                  gap: "8px",
-                  zIndex: 20
-                },
+              })
+            }) : uploadDocumentByPhone || isLowEndDevice() ? /* @__PURE__ */ jsx$1(UploadByGallery, {
+              handleFileChange,
+              side: "secondImage",
+              fileInputRef,
+              title: "Bien ahora vamos por el reverso",
+              subtitle: "\xA1Recuerda tener en cuenta lo siguiente!",
+              startUpload: activateCamera
+            }) : /* @__PURE__ */ jsx$1(UploadDocument2, {
+              videoRef,
+              streamRef,
+              setActivateCamera,
+              activateCamera,
+              videoConstraints,
+              title: "Bien ahora carguemos el reverso",
+              subtitle: "Asegurate de que sea legible",
+              onTapToFocus: handleTapToFocus
+            }), /* @__PURE__ */ jsxs(Box$1, {
+              width: "100%",
+              children: [base64.secondImage && /* @__PURE__ */ jsxs(Box$1, {
+                className: "toolbox-container",
                 children: [/* @__PURE__ */ jsx$1(Box$1, {
                   className: "zoom-button",
                   onClick: toggleZoom,
-                  sx: {
-                    backgroundColor: "rgba(255, 255, 255, 0.7)",
-                    borderRadius: "50%",
-                    padding: "4px",
-                    cursor: "pointer",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center"
-                  },
                   children: /* @__PURE__ */ jsx$1(MUITooltip, {
-                    title: "Girar",
+                    title: "Ampliar",
                     placement: "right",
                     arrow: true,
                     children: /* @__PURE__ */ jsx$1(ZoomInTwoTone, {
@@ -40248,15 +39963,6 @@ function SideDocsSelector({
                 }), /* @__PURE__ */ jsx$1(Box$1, {
                   className: "delete-button",
                   onClick: () => deleteImage("secondImage"),
-                  sx: {
-                    backgroundColor: "rgba(255, 255, 255, 0.7)",
-                    borderRadius: "50%",
-                    padding: "4px",
-                    cursor: "pointer",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center"
-                  },
                   children: /* @__PURE__ */ jsx$1(MUITooltip, {
                     title: "Vaciar",
                     placement: "right",
@@ -40267,28 +39973,11 @@ function SideDocsSelector({
                     })
                   })
                 })]
-              })]
-            }) : uploadDocumentByPhone || uploadByGallery || isLowEndDevice() ? /* @__PURE__ */ jsx$1(UploadByGallery, {
-              handleFileChange,
-              side: "secondImage",
-              fileInputRef,
-              title: "Bien ahora vamos por el reverso",
-              subtitle: "\xA1Recuerda tener en cuenta lo siguiente!",
-              onClickToContinue,
-              startUpload
-            }) : /* @__PURE__ */ jsx$1(UploadDocument2, {
-              videoRef,
-              streamRef,
-              setActivateCamera,
-              activateCamera,
-              videoConstraints,
-              title: "Bien ahora carguemos el reverso",
-              detail: "Asegurate de que sea legible",
-              onTapToFocus: handleTapToFocus,
-              documentType
-            }), /* @__PURE__ */ jsxs(Box$1, {
-              width: "100%",
-              children: [activateCamera && !hideCaptureButton && /* @__PURE__ */ jsx$1(CustomButton, {
+              }), !activateCamera && !base64.secondImage && /* @__PURE__ */ jsx$1(CustomButton, {
+                type: "button",
+                onClick: onClickToContinue,
+                children: "Continuar"
+              }), activateCamera && !hideCaptureButton && !uploadDocumentByPhone && /* @__PURE__ */ jsx$1(CustomButton, {
                 type: "button",
                 onClick: () => takeScreenshot("secondImage"),
                 children: "Capturar"
@@ -40741,8 +40430,7 @@ function DocumentReader({
   countryCodeAllowed = null,
   validateVpn = false,
   successMessage,
-  dualModeRequired = false,
-  uploadByGallery = false
+  dualModeRequired = true
 }) {
   const {
     onSendSubmitDocument,
@@ -40764,7 +40452,7 @@ function DocumentReader({
     setUploadDocumentByPhone
   } = DocumentReaderController(dataDocument, clientId, authorize, eventId, source2, inProduction, countryCodeAllowed, validateVpn, successMessage, dualModeRequired);
   return /* @__PURE__ */ jsxs("div", {
-    className: `kit-gbc ${mode} without-shadow`,
+    className: `kit-gbc ${mode} without-shadow ocr`,
     children: [/* @__PURE__ */ jsx$1(k$2, {
       position: "top-center",
       autoClose: 5e3,
@@ -40805,7 +40493,6 @@ function DocumentReader({
           status,
           onUploadImage2,
           uploadDocumentByPhone,
-          uploadByGallery,
           setUploadDocumentByPhone,
           onSendSubmitDocument
         })]
@@ -40824,8 +40511,7 @@ DocumentReader.propTypes = {
   eventId: propTypes.exports.PropTypes.string,
   validateVpn: propTypes.exports.PropTypes.bool,
   dualModeRequired: propTypes.exports.PropTypes.bool,
-  successMessage: propTypes.exports.PropTypes.string,
-  uploadByGallery: propTypes.exports.PropTypes.bool
+  successMessage: propTypes.exports.PropTypes.string
 };
 const fetchFaceMatch = async (faceMatch, selfie, inProduction, customHeaders) => {
   const parseReq = {