kwikid-components-react
Version:
KwikID's Component Library in React
248 lines (237 loc) • 13 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 _CompareModal = _interopRequireDefault(require("../../compare-modal/CompareModal"));
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"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
// 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: `
The Summary component displays data in a structured format, providing an overview of the information.
It can show user information, form data, and other structured data types.
`
}
},
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;
const summaryDataRedux = summaryData.redux;
// 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
}), /*#__PURE__*/_react.default.createElement(_CompareModal.default, {
data: summaryData.redux
}));
};
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
});
} 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`
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
`;
const DemoRow = _styledComponents.default.div`
margin-bottom: 50px;
`;
const DemoHeading = _styledComponents.default.h3`
margin: 0 0 10px 0;
padding: 0;
font-size: 16px;
font-weight: bold;
color: #333;
`;
const ResponsiveBox = _styledComponents.default.div`
width: ${props => props.width};
max-width: 100%;
border: 1px dashed #ccc;
padding: 5px;
box-sizing: border-box;
position: relative;
&:before {
content: "${props => props.width} width";
position: absolute;
top: -20px;
left: 0;
font-size: 12px;
color: #666;
}
`;
/**
* 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;
const summaryDataRedux = summaryData.redux;
// 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: stepList,
extraBasicInfo: extraBasicInfo,
fingerPrintData: {
stepList: fpStepList,
result: fpResults
},
stepCards: {
cardArray,
cardArrayList,
formattedSmallCardFieldData
},
faceMatchData: faceMatchData,
formData: formData,
qnaData: renderedQnaData,
agentNotes: (_summaryData$redux$us2 = summaryData.redux.user) === null || _summaryData$redux$us2 === void 0 ? void 0 : _summaryData$redux$us2.agentNotes
};
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;