gbc-kyc-kit 1.1.9 → 1.2.0

package/README.md

@@ -1,6 +1,9 @@
 ## KYC Kit
 
-Components to make a complete secure onboarding
+Components to make a complete secure onboarding.
+Global Bridge Connections KYC Kit can read more than 100 countries documents.
+Ask for your Client ID writing to servicios@globalbridgeconnections.com.py
+How work it? You can see our documentation https://global-bridge-connections-paragu.gitbook.io/dashboard-kyc/
 
 ## Library installation
 
@@ -23,50 +26,23 @@ You could customize all styles of components, just need make reference to the la
 **Important**
 Remember that you can use mode prop to turn between dark or light mode without change styles.
 
-### CSS
+### CSS/SASS/SCSS
 
 ```css
 /* Rest of code */
-body .kit-gbc {
-  background-color: #202124;
-}
-
-body .kit-gbc h4 {
-  color: white;
-}
-/* To change color of Liveness Check Component */
-.liveness {
-  position: inherit;
-  --font-family: Arial, sans-serif;
-  --main-color: #060633;
-  --second-color: #cdcdda;
-  --third-color: #8787f3;
-  --hover-color: #060633;
-  --active-color: #060633;
-}
-```
-
-### SASS/SCSS
-
-```css
-body {
-  /* Rest of code */
-  .kit-gbc {
-    background-color: #202124;
-    h4 {
-      color: white;
-    }
-    /* To change color of Liveness Check Component */
-    .liveness {
-      position: inherit;
-      --font-family: Arial, sans-serif;
-      --main-color: #060633;
-      --second-color: #cdcdda;
-      --third-color: #8787f3;
-      --hover-color: #060633;
-      --active-color: #060633;
-    }
-  }
+:root {
+  --primary: #1976d2;
+  --primary-hov: #2689ed;
+  --secondary: #e8edff;
+  --button-color: #1976d2;
+  --text-button-color: #fff;
+  --secondary: #e8edff;
+  --warning: #f8bb86;
+  --success: #4caf50;
+  --error: #ff1199;
+  --text-color: #8c8c8c;
+  --title-color: #262626;
+  --font-family: "Noto Sans", sans-serif;
 }
 ```
 

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

@@ -18935,7 +18935,7 @@ function CustomButton({
   href
 }) {
   return /* @__PURE__ */ jsx("div", {
-    className: "button-container mt-2",
+    className: `button-container mt-2`,
     children: /* @__PURE__ */ jsx("button", {
       type,
       name,
@@ -20144,14 +20144,14 @@ function StatusComponent({
       }) : null, !lib$1(lists) && /* @__PURE__ */ jsx(ListsAccordion, {
         lists,
         handleReport
+      }), /* @__PURE__ */ jsx(CustomButton, {
+        className: "my-2 col-6 warning-button",
+        onClick: () => clearState(),
+        children: "Verificar nuevamente"
       }), complementarySearch && /* @__PURE__ */ jsx(CustomButton, {
         className: "my-2 col-6",
         onClick: complementarySearch,
         children: "Ampliar criterios de consulta"
-      }), /* @__PURE__ */ jsx(CustomButton, {
-        className: "my-2 col-6",
-        onClick: () => clearState(),
-        children: "Verificar nuevamente"
       })]
     })
   });
@@ -20393,17 +20393,13 @@ function UploadDocument({
   message,
   pic
 }) {
-  return /* @__PURE__ */ jsxs("div", {
-    children: [/* @__PURE__ */ jsxs("div", {
+  return /* @__PURE__ */ jsx("div", {
+    children: /* @__PURE__ */ jsxs("div", {
       className: "first-animation",
       children: [/* @__PURE__ */ jsx(UploadIcon, {}), /* @__PURE__ */ jsx("p", {
         children: message
       })]
-    }), /* @__PURE__ */ jsx("img", {
-      src: pic,
-      width: 200,
-      className: "second-animation"
-    })]
+    })
   });
 }
 function DocumentReader({
@@ -20441,22 +20437,28 @@ function DocumentReader({
       onSubmit: simpleHandleSubmit(onSendSubmitDocument),
       children: /* @__PURE__ */ jsxs("div", {
         className: "sub",
-        children: [/* @__PURE__ */ jsx("h4", {
-          children: "Lectura del documento"
-        }), !lib$1(status) ? /* @__PURE__ */ jsx(StatusComponent, {
-          status,
-          message,
-          clearState
-        }) : /* @__PURE__ */ jsxs(Fragment, {
-          children: [/* @__PURE__ */ jsx("p", {
+        children: [/* @__PURE__ */ jsxs("div", {
+          className: "header-component",
+          children: [/* @__PURE__ */ jsx("h4", {
+            children: "Lectura del documento"
+          }), !lib$1(status) ? /* @__PURE__ */ jsx(StatusComponent, {
+            status,
+            message,
+            clearState
+          }) : /* @__PURE__ */ jsx("p", {
             children: "Utilice la c\xE1mara de su dispositivo para capturar una foto de su documento de identidad."
-          }), /* @__PURE__ */ jsxs("label", {
-            className: "upload-document",
+          })]
+        }), lib$1(status) && /* @__PURE__ */ jsxs("div", {
+          className: `body-id-doc  ${dual && docImage.firstImage && "ready"}`,
+          children: [/* @__PURE__ */ jsxs("label", {
+            className: "upload-document front",
             style: {
-              backgroundImage: `url(${base64 ? base64.firstImage : `../../../assets/img/front_doc.png`})`,
               display: "flex"
             },
-            children: [docImage.firstImage ? "" : /* @__PURE__ */ jsx(UploadDocument, {
+            children: [docImage.firstImage ? /* @__PURE__ */ jsx("img", {
+              src: base64.firstImage,
+              alt: "front-document"
+            }) : /* @__PURE__ */ jsx(UploadDocument, {
               message: "Carga frontal",
               pic: frontID
             }), /* @__PURE__ */ jsx("input", {
@@ -20469,14 +20471,16 @@ function DocumentReader({
                 handleChangeDocument(e2);
               }
             })]
-          }), dual && /* @__PURE__ */ jsxs(Fragment, {
-            children: [/* @__PURE__ */ jsx("hr", {}), /* @__PURE__ */ jsxs("label", {
-              className: "upload-document",
+          }), dual && /* @__PURE__ */ jsx(Fragment, {
+            children: /* @__PURE__ */ jsxs("label", {
+              className: "upload-document back",
               style: {
-                backgroundImage: `url(${base64.secondImage ? base64.secondImage : ""})`,
                 display: "flex"
               },
-              children: [docImage.secondImage ? "" : /* @__PURE__ */ jsx(UploadDocument, {
+              children: [docImage.secondImage ? /* @__PURE__ */ jsx("img", {
+                src: base64.secondImage,
+                alt: "rear-document"
+              }) : /* @__PURE__ */ jsx(UploadDocument, {
                 message: "Carga del Reverso",
                 pic: rearID
               }), /* @__PURE__ */ jsx("input", {
@@ -20489,11 +20493,24 @@ function DocumentReader({
                   handleChangeDocument(e2);
                 }
               })]
-            })]
+            })
+          })]
+        }), dual && base64.firstImage && lib$1(status) && (base64.secondImage ? /* @__PURE__ */ jsxs("div", {
+          className: "both-button",
+          children: [/* @__PURE__ */ jsx(CustomButton, {
+            type: "warning",
+            onClick: () => clearState(),
+            children: "Volver"
           }), /* @__PURE__ */ jsx(CustomButton, {
             type: "submit",
             children: "Procesar"
           })]
+        }) : /* @__PURE__ */ jsx(CustomButton, {
+          onClick: () => clearState(),
+          children: "Volver a cargar la foto frontal"
+        })), !dual && !status && /* @__PURE__ */ jsx(CustomButton, {
+          type: "submit",
+          children: "Procesar"
         })]
       })
     })]