kwikid-components-react
Version:
KwikID's Component Library in React
455 lines (445 loc) • 23.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.ResponsiveBehaviorDemo = exports.AgentlessExample = exports.AgentExample = void 0;
var _kwikidToolkit = require("kwikid-toolkit");
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _Summary = _interopRequireDefault(require("../Summary"));
var _Summary2 = require("../Summary.converter");
var _Summary3 = require("../Summary.helper");
var _sessionDataAgent = _interopRequireDefault(require("./data/session-data-agent.json"));
var _sessionDataAgentless = _interopRequireDefault(require("./data/session-data-agentless.json"));
var _hideCards = _interopRequireDefault(require("./data/hide-cards.json"));
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
// Mock session data for Agent flow with more realistic structure
const mockAgentData = _sessionDataAgent.default;
// Updated mock data for Agentless mode based on the sample structure
const mockAgentlessData = _sessionDataAgentless.default;
/**
* Summary component displays a summary of data in a structured format
*/
var _default = exports.default = {
title: "DataViewer/Summary",
component: _Summary.default,
parameters: {
docs: {
description: {
component: "\nThe Summary component displays data in a structured format, providing an overview of the information.\nIt can show user information, form data, and other structured data types.\n "
}
},
componentSubtitle: "Data summary visualization component"
}
};
const AgentTemplate = () => {
var _summaryDataRedux$use, _summaryDataRedux$ste, _summaryAgentData$ste, _summaryAgentData$ste2, _summaryAgentData$use, _summaryAgentData$use2, _summaryData$redux$us;
// Use mock agent data for Agent flow
const summaryData = mockAgentData;
// Corrected approach for summaryDataRedux to handle potential null for isLivlinessCheck
const summaryDataRedux = _objectSpread(_objectSpread({}, summaryData.redux), {}, {
isLivlinessCheck: summaryData.redux.isLivlinessCheck === null ? undefined : summaryData.redux.isLivlinessCheck
});
// Prepare data
const cardArray = (0, _Summary3.getData)(summaryData);
const qnaArray = (0, _Summary3.getQnaArray)(summaryData);
const groupedQnaArray = qnaArray && (0, _Summary3.getQnaObj)(qnaArray);
const groupedQnAObj = groupedQnaArray && (0, _Summary3.getGroupedQnaObj)(groupedQnaArray);
// Get step cards data
const cardArrayList = (0, _Summary2.getConvertedCardData)(cardArray);
const formattedSmallCardFieldData = (0, _Summary3.getFormattedSmallCardFieldData)(cardArray);
const summaryAgentData = {
redux: summaryDataRedux,
user: summaryDataRedux.user,
step_list: (_summaryDataRedux$use = summaryDataRedux.user) === null || _summaryDataRedux$use === void 0 ? void 0 : _summaryDataRedux$use.overall_summary,
steps: summaryDataRedux.steps,
facematch: (_summaryDataRedux$ste = summaryDataRedux.steps) === null || _summaryDataRedux$ste === void 0 ? void 0 : _summaryDataRedux$ste.facematch_data,
selfie_step: summaryDataRedux.selfieStep
};
const userInfoSummary = (0, _Summary3.getBasicInfo)((0, _Summary3.getAgentUserInfoSummary)(summaryDataRedux, summaryAgentData.user, summaryAgentData.selfie_step));
const userInfoConfig = {
isWrapped: !!(0, _kwikidToolkit.isNotEmptyValue)(summaryDataRedux)
};
const stepList = (0, _kwikidToolkit.isNotEmptyValue)(summaryDataRedux) ? (0, _Summary2.getConvertedStepList)(summaryDataRedux) : null;
const extraBasicInfo = (0, _Summary2.getConvertedExtraUserInfoData)(summaryAgentData.user);
const fpStepList = (_summaryAgentData$ste = summaryAgentData.steps) === null || _summaryAgentData$ste === void 0 ? void 0 : (_summaryAgentData$ste2 = _summaryAgentData$ste.step_list) === null || _summaryAgentData$ste2 === void 0 ? void 0 : _summaryAgentData$ste2.filter(item => item.doc_type === "Finger Print");
const fpResults = ((_summaryAgentData$use = summaryAgentData.user) === null || _summaryAgentData$use === void 0 ? void 0 : _summaryAgentData$use.fp_results) || null;
const faceMatchData = (0, _kwikidToolkit.isNotEmptyValue)(summaryAgentData.facematch) ? (0, _Summary3.getFacematchArray)(summaryAgentData.facematch) : null;
const renderedQnaData = (0, _kwikidToolkit.isNotEmptyValue)(summaryAgentData === null || summaryAgentData === void 0 ? void 0 : (_summaryAgentData$use2 = summaryAgentData.user) === null || _summaryAgentData$use2 === void 0 ? void 0 : _summaryAgentData$use2.extras) ? groupedQnAObj && (0, _Summary2.getConvertedQnaData)(groupedQnAObj, summaryAgentData.user.extras, summaryAgentData.redux) : groupedQnaArray && (0, _Summary2.getConvertedQnaData)(groupedQnaArray);
const formData = null;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Summary.default, {
userInfo: {
data: userInfoSummary,
config: userInfoConfig
},
stepList: stepList,
extraBasicInfo: extraBasicInfo,
fingerPrintData: {
stepList: fpStepList,
result: fpResults
},
stepCards: {
cardArray,
cardArrayList,
formattedSmallCardFieldData
},
faceMatchData: faceMatchData,
formData: formData,
qnaData: renderedQnaData,
agentNotes: (_summaryData$redux$us = summaryData.redux.user) === null || _summaryData$redux$us === void 0 ? void 0 : _summaryData$redux$us.agentNotes,
dataComparision: {
config: {
layout: {
id: "comparison-container",
type: "div",
styles: "width: 100%; height: 100%; display: flex; flex-direction: row; gap: 16px;",
components: [{
id: "left-panel-document",
type: "div",
styles: "flex: 1; display: flex; flex-direction: column; border: 1px solid #e0e0e0; border-radius: 0.5rem; overflow: hidden;",
components: [{
components: [{
id: "document-title",
source: {
key: "PREDEFINED",
props: {
predefinedValue: "Data Comparision"
}
},
styles: "font-size: 14px; font-weight: 500; margin: 0px auto; text-align: center;",
type: "h3"
}],
id: "document-header",
styles: "background: #f8f9fa; border-radius: 12px; padding: 20px 28px; box-shadow: 0 2px 8px rgba(30,41,59,0.06); margin-bottom: 18px; display: flex; flex-direction: row; align-items: flex-start;",
type: "div"
}, {
components: [{
id: "document-iframe",
source: {
key: "OBJECT",
props: {
object: {
key: "DATA",
path: "$.userInfo.data[0].value"
}
}
},
styles: "flex: 1; border: none;",
type: "iframe"
}],
id: "document-container",
styles: "flex: 1; display: flex;",
type: "div"
}, {
id: "document-title",
source: {
key: "PREDEFINED",
props: {
predefinedValue: "Label value pairs"
}
},
styles: "font-size: 22px; font-weight: 700; color: #333; margin:10px; letter-spacing: -0.5px; text-align: left;",
type: "h3"
}, {
components: [{
id: "label-value-pairs",
props: {
config: {
orientation: "horizontal",
case: {
label: "default",
value: "default"
},
tooltip: {
show: true
}
},
data: [{
key: "verification_id",
label: "Verification ID",
value: "VER-2024-789",
type: "text"
}, {
key: "verification_status",
label: "Verification Status",
value: "Completed",
type: "status"
}, {
key: "face_match_score",
label: "Face Match Score",
value: "98.5%",
type: "text"
}, {
key: "liveness_check",
label: "Liveness Check",
value: true,
type: "boolean"
}, {
key: "document_image",
label: "Document Image",
value: "https://picsum.photos/200/200",
type: "image"
}, {
key: "verification_video",
label: "Verification Video",
value: "https://example.com/videos/verification.mp4",
type: "video"
}, {
key: "document_pdf",
label: "Document PDF",
value: "https://www.africau.edu/images/default/sample.pdf",
type: "pdf"
}, {
key: "verification_metadata",
label: "Verification Metadata",
value: JSON.stringify({
timestamp: "2024-03-15T14:30:00Z",
location: "Mumbai, India"
}, null, 2),
type: "code"
}]
},
type: "label-value-pair"
}],
id: "document-container",
styles: "flex: 1; display: flex; margin:10px",
type: "div"
}]
}]
}
}
},
hideCards: _hideCards.default
}));
};
const AgentExample = exports.AgentExample = AgentTemplate.bind({});
const AgentlessExample = () => {
// Use the updated mock agentless data
const summaryData = mockAgentlessData;
const userInfoData = summaryData.basic_summary.user_info;
try {
// Try/catch to debug any issues
const cardArray = (0, _Summary3.getData)(summaryData);
const cardArrayList = (0, _Summary2.getConvertedCardData)(cardArray || []);
const formattedSmallCardFieldData = (0, _Summary3.getFormattedSmallCardFieldData)(cardArray || []);
const summaryAgentlessData = {
data_store: summaryData,
step_list: summaryData.data,
facematch: summaryData.facematch_data,
user_info: userInfoData
};
const defAgentlessUserInfoSummary = (0, _Summary3.defUserSummary)(summaryAgentlessData.user_info);
const userInfoSummary = (0, _Summary3.getAgentlessUserInfoSummary)(defAgentlessUserInfoSummary, summaryAgentlessData.data_store);
const stepList = (0, _kwikidToolkit.isNotEmptyValue)(summaryAgentlessData.step_list) ? (0, _Summary2.getConvertedStepList)(summaryAgentlessData.step_list) : null;
const faceMatchData = (0, _kwikidToolkit.isNotEmptyValue)(summaryAgentlessData.facematch) ? (0, _Summary3.getFacematchArray)(summaryAgentlessData.facematch) : null;
const formData = (0, _kwikidToolkit.isNotEmptyValue)(summaryAgentlessData.step_list) ? (0, _Summary2.getConvertedFormData)(summaryAgentlessData.step_list) : null;
return /*#__PURE__*/_react.default.createElement(_Summary.default, {
userInfo: {
data: userInfoSummary,
config: {}
},
stepList: stepList,
extraBasicInfo: {},
fingerPrintData: {
stepList: {},
result: {}
},
stepCards: {
cardArray: cardArray || [],
cardArrayList: cardArrayList || [],
formattedSmallCardFieldData: formattedSmallCardFieldData || {}
},
faceMatchData: faceMatchData,
formData: formData,
hideCards: _hideCards.default,
dataComparision: {
config: {
layout: {
id: "comparison-container",
type: "div",
styles: "width: 100%; height: 100%; display: flex; flex-direction: row; gap: 16px;",
components: [{
id: "left-panel-document",
type: "div",
styles: "flex: 1; display: flex; flex-direction: column; border: 1px solid #e0e0e0; border-radius: 0.5rem; overflow: hidden;",
components: [{
components: [{
id: "document-title",
source: {
key: "PREDEFINED",
props: {
predefinedValue: "Data Comparision"
}
},
styles: "font-size: 14px; font-weight: 500; margin: 0px auto; text-align: center;",
type: "h3"
}],
id: "document-header",
styles: "background: #f8f9fa; border-radius: 12px; padding: 20px 28px; box-shadow: 0 2px 8px rgba(30,41,59,0.06); margin-bottom: 18px; display: flex; flex-direction: row; align-items: flex-start;",
type: "div"
}, {
id: "document-title",
source: {
key: "PREDEFINED",
props: {
predefinedValue: "Label value pairs"
}
},
styles: "font-size: 22px; font-weight: 700; color: #333; margin:10px; letter-spacing: -0.5px; text-align: left;",
type: "h3"
}, {
components: [{
id: "label-value-pairs",
props: {
config: {
orientation: "horizontal",
case: {
label: "default",
value: "default"
},
tooltip: {
show: true
}
},
data: [{
key: "session_id",
label: "Session ID",
value: "AGNTLESS-2024-001",
type: "text"
}, {
key: "onboarding_method",
label: "Onboarding Method",
value: "Self-Service",
type: "text"
}, {
key: "user_email",
label: "User Email",
value: "user.agentless@example.com",
type: "text"
}, {
key: "kyc_status",
label: "KYC Status",
value: "Pending Verification",
type: "status"
}, {
key: "selfie_uploaded",
label: "Selfie Uploaded",
value: true,
type: "boolean"
}, {
key: "document_type",
label: "Document Type",
value: "Aadhaar Card",
type: "text"
}, {
key: "document_uploaded",
label: "Document Uploaded",
value: true,
type: "boolean"
}, {
key: "timestamp",
label: "Timestamp",
value: "2024-04-10T12:45:00Z",
type: "text"
}]
},
type: "label-value-pair"
}],
id: "document-container",
styles: "flex: 1; display: flex; margin:10px",
type: "div"
}]
}]
}
}
}
});
} catch (error) {
// Return a fallback UI if an error occurs
console.error("Error in AgentlessExample:", error);
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h3", null, "Error in AgentlessExample"), /*#__PURE__*/_react.default.createElement("p", null, "Check the console for details"));
}
};
// Styled components for responsive demo
exports.AgentlessExample = AgentlessExample;
const DemoContainer = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n gap: 20px;\n width: 100%;\n"])));
const DemoRow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n margin-bottom: 50px;\n"])));
const DemoHeading = _styledComponents.default.h3(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n margin: 0 0 10px 0;\n padding: 0;\n font-size: 16px;\n font-weight: bold;\n color: #333;\n"])));
const ResponsiveBox = _styledComponents.default.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: ", ";\n max-width: 100%;\n border: 1px dashed #ccc;\n padding: 5px;\n box-sizing: border-box;\n position: relative;\n\n &:before {\n content: \"", " width\";\n position: absolute;\n top: -20px;\n left: 0;\n font-size: 12px;\n color: #666;\n }\n"])), props => props.width, props => props.width);
/**
* Demonstrates the Summary component behavior in different container widths
*/
const ResponsiveBehaviorDemo = () => {
var _summaryDataRedux$use2, _summaryDataRedux$ste2, _summaryAgentData$ste3, _summaryAgentData$ste4, _summaryAgentData$use3, _summaryAgentData$use4, _summaryData$redux$us2;
// Use the same data transformation pattern as in AgentExample
const summaryData = mockAgentData;
// Corrected approach for summaryDataRedux to handle potential null for isLivlinessCheck
const summaryDataRedux = _objectSpread(_objectSpread({}, summaryData.redux), {}, {
isLivlinessCheck: summaryData.redux.isLivlinessCheck === null ? undefined : summaryData.redux.isLivlinessCheck
});
// Prepare data
const cardArray = (0, _Summary3.getData)(summaryData);
const qnaArray = (0, _Summary3.getQnaArray)(summaryData);
const groupedQnaArray = qnaArray && (0, _Summary3.getQnaObj)(qnaArray);
const groupedQnAObj = groupedQnaArray && (0, _Summary3.getGroupedQnaObj)(groupedQnaArray);
// Get step cards data
const cardArrayList = (0, _Summary2.getConvertedCardData)(cardArray);
const formattedSmallCardFieldData = (0, _Summary3.getFormattedSmallCardFieldData)(cardArray);
const summaryAgentData = {
redux: summaryDataRedux,
user: summaryDataRedux.user,
step_list: (_summaryDataRedux$use2 = summaryDataRedux.user) === null || _summaryDataRedux$use2 === void 0 ? void 0 : _summaryDataRedux$use2.overall_summary,
steps: summaryDataRedux.steps,
facematch: (_summaryDataRedux$ste2 = summaryDataRedux.steps) === null || _summaryDataRedux$ste2 === void 0 ? void 0 : _summaryDataRedux$ste2.facematch_data,
selfie_step: summaryDataRedux.selfieStep
};
const userInfoSummary = (0, _Summary3.getBasicInfo)((0, _Summary3.getAgentUserInfoSummary)(summaryDataRedux, summaryAgentData.user, summaryAgentData.selfie_step));
const userInfoConfig = {
isWrapped: !!(0, _kwikidToolkit.isNotEmptyValue)(summaryDataRedux)
};
const stepList = (0, _kwikidToolkit.isNotEmptyValue)(summaryDataRedux) ? (0, _Summary2.getConvertedStepList)(summaryDataRedux) : null;
const extraBasicInfo = (0, _Summary2.getConvertedExtraUserInfoData)(summaryAgentData.user);
const fpStepList = (_summaryAgentData$ste3 = summaryAgentData.steps) === null || _summaryAgentData$ste3 === void 0 ? void 0 : (_summaryAgentData$ste4 = _summaryAgentData$ste3.step_list) === null || _summaryAgentData$ste4 === void 0 ? void 0 : _summaryAgentData$ste4.filter(item => item.doc_type === "Finger Print");
const fpResults = ((_summaryAgentData$use3 = summaryAgentData.user) === null || _summaryAgentData$use3 === void 0 ? void 0 : _summaryAgentData$use3.fp_results) || null;
const faceMatchData = (0, _kwikidToolkit.isNotEmptyValue)(summaryAgentData.facematch) ? (0, _Summary3.getFacematchArray)(summaryAgentData.facematch) : null;
const renderedQnaData = (0, _kwikidToolkit.isNotEmptyValue)(summaryAgentData === null || summaryAgentData === void 0 ? void 0 : (_summaryAgentData$use4 = summaryAgentData.user) === null || _summaryAgentData$use4 === void 0 ? void 0 : _summaryAgentData$use4.extras) ? groupedQnAObj && (0, _Summary2.getConvertedQnaData)(groupedQnAObj, summaryAgentData.user.extras, summaryAgentData.redux) : groupedQnaArray && (0, _Summary2.getConvertedQnaData)(groupedQnaArray);
const formData = null;
// Combine all data for the component
const transformedData = {
userInfo: {
data: userInfoSummary,
config: userInfoConfig
},
stepList,
extraBasicInfo,
fingerPrintData: {
stepList: fpStepList,
result: fpResults
},
stepCards: {
cardArray,
cardArrayList,
formattedSmallCardFieldData
},
faceMatchData,
formData,
qnaData: renderedQnaData,
agentNotes: (_summaryData$redux$us2 = summaryData.redux.user) === null || _summaryData$redux$us2 === void 0 ? void 0 : _summaryData$redux$us2.agentNotes,
hideCards: {
hideCards: _hideCards.default
}
};
return /*#__PURE__*/_react.default.createElement(DemoContainer, null, /*#__PURE__*/_react.default.createElement(DemoRow, null, /*#__PURE__*/_react.default.createElement(DemoHeading, null, "Small Container (680px)"), /*#__PURE__*/_react.default.createElement(ResponsiveBox, {
width: "680px"
}, /*#__PURE__*/_react.default.createElement(_Summary.default, transformedData))), /*#__PURE__*/_react.default.createElement(DemoRow, null, /*#__PURE__*/_react.default.createElement(DemoHeading, null, "Regular Container (1000px)"), /*#__PURE__*/_react.default.createElement(ResponsiveBox, {
width: "1000px"
}, /*#__PURE__*/_react.default.createElement(_Summary.default, transformedData))));
};
exports.ResponsiveBehaviorDemo = ResponsiveBehaviorDemo;