kwikid-components-react
Version:
KwikID's Component Library in React
280 lines (270 loc) • 17 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-color: rgba(208, 208, 208, 0.6980392157); color: var(--color-primary); padding: 10px 0px;",
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"
}]
}]
}
}
},
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
});
} 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;