Create React Library Example 😄
; +}; + +export default App; +``` + +## Changelog + +### Summary for Version [1.8.2-beta.1] - 2024-06-05 + +For a detailed changelog, see the [CHANGELOG.md](./CHANGELOG.md) file. + + +### Published from DIGIT Frontend +DIGIT Frontend Repo (https://github.com/egovernments/Digit-Frontend/tree/develop) + +### Contributors + +[jagankumar-egov] [nipunarora-eGov] [Tulika-eGov] [Ramkrishna-egov] [nabeelmd-eGov] [anil-egov] [vamshikrishnakole-wtt-egov] + +## License + +MIT © [jagankumar-egov](https://github.com/jagankumar-egov) + + + diff --git a/micro-ui/web/micro-ui-internals/packages/libraries/package.json b/micro-ui/web/micro-ui-internals/packages/libraries/package.json new file mode 100644 index 00000000..36cd012e --- /dev/null +++ b/micro-ui/web/micro-ui-internals/packages/libraries/package.json @@ -0,0 +1,51 @@ +{ + "name": "@egovernments/digit-ui-libraries", + "version": "1.8.11", + "main": "dist/index.js", + "module": "dist/index.modern.js", + "source": "src/index.js", + "license": "MIT", + "files": [ + "dist" + ], + "scripts": { + "build": "microbundle-crl --compress --no-sourcemap --format cjs", + "start": "microbundle-crl watch --no-compress --format modern,cjs", + "prepublish": "yarn build" + }, + "peerDependencies": { + "react": "17.0.2" + }, + "devDependencies": { + "gh-pages": "2.2.0", + "microbundle-crl": "0.13.11", + "react-dom": "17.0.2", + "react-scripts": "^4.0.1" + }, + "dependencies": { + "axios": "0.21.1", + "babel-preset-react": "6.24.1", + "@egovernments/digit-ui-components": "0.2.0-studio.1", + "date-fns": "2.28.0", + "html2canvas": "1.4.1", + "dom-to-image": "2.6.0", + "i18next": "19.9.2", + "i18next-react-postprocessor": "3.0.7", + "pdfmake": "0.1.72", + "react": "17.0.2", + "react-i18next": "11.16.2", + "react-query": "3.6.1", + "react-redux": "7.2.8", + "react-router-dom": "5.3.0", + "redux": "4.1.2", + "xlsx": "0.17.5" + }, + "author": "JaganKumarWelcome to the Sample Module!
;
+};
+export default SamplePage;
+```
+
+### 6. Import the Module in Root Application
+Modify `root-app` to include the new module:
+```js
+import {initSampleComponents} from "@egovernments/digit-ui-module-sample";
+
+const modules = ["sample"];
+
+initSampleComponents()
+
+```
+
+### 7. Run and Test
+Build and start the application:
+```sh
+yarn install
+yarn start
+```
+Navigate to `http://localhost:3000/sample` to see the new module in action.
+
+## Conclusion
+This guide provides a structured approach to integrating a new module into the DIGIT UI platform. Follow these steps to create, configure, and deploy your module efficiently.
+
+For more details, refer to the official [DIGIT Developer Guide](https://core.digit.org/guides/developer-guide/ui-developer-guide/create-a-new-ui-module-package).
+
+
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)
+
+## Documentation
+
+Documentation Site (https://core.digit.org/guides/developer-guide/ui-developer-guide/digit-ui)
+Workbench Documentation(https://workbench.digit.org/platform/functional-specifications/workbench-ui)
+
+## Maintainer
+
+- [jagankumar-egov](https://www.github.com/jagankumar-egov)
+
+
+### Published from DIGIT Frontend
+DIGIT Frontend Repo (https://github.com/egovernments/Digit-Frontend/tree/master)
+
+
+
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/PublicServices/package.json b/micro-ui/web/micro-ui-internals/packages/modules/PublicServices/package.json
new file mode 100644
index 00000000..525618d4
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/PublicServices/package.json
@@ -0,0 +1,36 @@
+{
+ "name": "@egovernments/digit-ui-module-public-services",
+ "version": "0.0.1",
+ "description": "Public Service Module UI",
+ "main": "dist/index.js",
+ "module": "dist/index.modern.js",
+ "source": "src/Module.js",
+ "files": [
+ "dist"
+ ],
+ "scripts": {
+ "start": "microbundle-crl watch --no-compress --format modern,cjs",
+ "build": "microbundle-crl --compress --no-sourcemap --format cjs",
+ "prepublish": "yarn build"
+ },
+ "peerDependencies": {
+ "react": "17.0.2",
+ "react-router-dom": "5.3.0"
+ },
+ "dependencies": {
+ "@egovernments/digit-ui-react-components": "1.8.19",
+ "@egovernments/digit-ui-components": "0.2.0-studio.1",
+ "react": "17.0.2",
+ "react-date-range": "^1.4.0",
+ "react-dom": "17.0.2",
+ "react-hook-form": "6.15.8",
+ "react-i18next": "11.16.2",
+ "react-query": "3.6.1",
+ "react-router-dom": "5.3.0"
+ },
+ "resolutions": {
+ "styled-components": "5.0.0"
+ },
+ "author": "Jagankumar deleteItem(item, index)}>
+
+ ) : null}
+
+
+
+
+
+
+
+ handleUpdateField({ type: "VALUE", value: event.target.value, item: item, index: index })}
+ />
+
+
+ navigate("home")}>
+
+
+ {props.label}
; +}; + +const Close = () => ( + +); + +const CloseBtn = (props) => { + return ( +
+
+ );
+};
+
+const AttendanceActionModal = ({ t, action, tenantId, state, id, closeModal, submitAction, actionData, applicationData, businessService, moduleCode,applicationDetails,workflowDetails, saveAttendanceState}) => {
+ const [config, setConfig] = useState({});
+
+ const userUuid = Digit.UserService.getUser()?.info.uuid;
+ const { isLoading, data:employeeData } = Digit.Hooks.hrms.useHRMSSearch(
+ { uuids : userUuid }, tenantId
+ );
+
+ const empData = employeeData?.Employees[0]
+ const empDepartment = empData?.assignments?.[0].department
+ const empDesignation = empData?.assignments?.[0].designation
+ const empName = empData?.user?.name
+
+ useEffect(() => {
+ const selectedAction = action?.action
+ switch(selectedAction) {
+ case "VERIFY":
+ submitBasedOnAction(action, 'Verify muster roll')
+ break;
+ case "REJECT":
+ setConfig(
+ configAttendanceRejectModal({
+ t,
+ action,
+ empDepartment,
+ empDesignation,
+ empName
+ })
+ )
+ break;
+ case "APPROVE":
+ setConfig(
+ configAttendanceApproveModal({
+ t,
+ action
+ })
+ )
+ break;
+ case "RESUBMIT":
+ submitBasedOnAction(action, 'Resubmit muster roll')
+ break;
+ case "SAVE":
+ submitBasedOnAction(action, 'Verify muster roll')
+ break;
+ default:
+ break
+ }
+ }, [employeeData]);
+
+ function onSubmit (data) {
+ submitBasedOnAction(action, data?.comments)
+ }
+
+ const submitBasedOnAction = (action, comments) => {
+ let musterRoll = { tenantId, id: applicationDetails?.applicationDetails?.[0]?.applicationData?.id}
+ let workflow = { action: action?.action, comments: (comments || `${action?.action} done`), assignees: [] }
+
+ const selectedAction = action?.action
+ switch(selectedAction) {
+ case "SAVE":
+ musterRoll.individualEntries = saveAttendanceState?.updatePayload
+ workflow.action = 'VERIFY'
+ break;
+ case "RESUBMIT":
+ musterRoll.additionalDetails = { computeAttendance : true }
+ break;
+ default:
+ break;
+ }
+ const dataTobeSubmitted = {musterRoll, workflow}
+ submitAction(dataTobeSubmitted)
+ }
+
+ const cardStyle = () => {
+ if(config.label.heading === "Processing Details") {
+ return {
+ "padding" : "0px"
+ }
+ }
+ return {}
+ }
+
+ return action && config?.form ? (
+ {props.label}
; +}; + +const Close = () => ( + +); + +const CloseBtn = (props) => { + return ( +
+
+ );
+};
+
+const ActionModal = ({ t, action, tenantId, state, id, closeModal, submitAction, actionData, applicationDetails, applicationData, businessService, moduleCode,workflowDetails }) => {
+ const mutation1 = Digit.Hooks.obps.useObpsAPI(
+ applicationData?.landInfo?.address?.city ? applicationData?.landInfo?.address?.city : tenantId,
+ false
+ );
+ const { data: approverData, isLoading: PTALoading } = Digit.Hooks.useEmployeeSearch(
+ tenantId,
+ {
+ roles: workflowDetails?.data?.initialActionState?.nextActions?.filter(ele=>ele?.action==action?.action)?.[0]?.assigneeRoles?.map(role=>({code:role})),
+ isActive: true,
+ },
+ { enabled: !action?.isTerminateState }
+ );
+
+ const queryClient = useQueryClient();
+ const [config, setConfig] = useState({});
+ const [defaultValues, setDefaultValues] = useState({});
+ const [approvers, setApprovers] = useState([]);
+ const [selectedApprover, setSelectedApprover] = useState({});
+ const [file, setFile] = useState(null);
+ const [uploadedFile, setUploadedFile] = useState(null);
+ const [error, setError] = useState(null);
+ const [selectedFinancialYear, setSelectedFinancialYear] = useState(null);
+ const mobileView = Digit.Utils.browser.isMobile() ? true : false;
+
+ useEffect(() => {
+ setApprovers(approverData?.Employees?.map((employee) => ({ uuid: employee?.uuid, name: employee?.user?.name })));
+ }, [approverData]);
+
+ function selectFile(e) {
+ setFile(e.target.files[0]);
+ }
+
+ useEffect(() => {
+ (async () => {
+ setError(null);
+ if (file) {
+ const allowedFileTypesRegex = /(.*?)(jpg|jpeg|png|image|pdf)$/i
+ if (file.size >= 5242880) {
+ setError(t("CS_MAXIMUM_UPLOAD_SIZE_EXCEEDED"));
+ } else if (file?.type && !allowedFileTypesRegex.test(file?.type)) {
+ setError(t(`NOT_SUPPORTED_FILE_TYPE`))
+ } else {
+ try {
+ const response = await Digit.UploadServices.Filestorage("OBPS", file, Digit.ULBService.getStateId() || tenantId?.split(".")[0]);
+ if (response?.data?.files?.length > 0) {
+ setUploadedFile(response?.data?.files[0]?.fileStoreId);
+ } else {
+ setError(t("CS_FILE_UPLOAD_ERROR"));
+ }
+ } catch (err) {
+ setError(t("CS_FILE_UPLOAD_ERROR"));
+ }
+ }
+ }
+ })();
+ }, [file]);
+
+ const getInspectionDocs = (docs) => {
+ let refinedDocs = [];
+ docs && docs.map((doc,ind) => {
+ refinedDocs.push({
+ "documentType":(doc.documentType+"_"+doc.documentType.split("_")[1]).replaceAll("_","."),
+ "fileStoreId":doc.fileStoreId,
+ "fileStore":doc.fileStoreId,
+ "fileName":"",
+ "dropDownValues": {
+ "value": (doc.documentType+"_"+doc.documentType.split("_")[1]).replaceAll("_","."),
+ }
+ })
+ })
+ return refinedDocs;
+ }
+
+ const getQuestion = (data) => {
+ let refinedQues = [];
+ var i;
+ for(i=0; i{props.label}
; +}; + +const Close = () => ( + +); + +const CloseBtn = (props) => { + return ( +
+
+ );
+};
+
+const ActionModal = ({ t, action, tenantId, state, id, closeModal, submitAction, actionData, applicationData, businessService, moduleCode }) => {
+ const { data: approverData, isLoading: PTALoading } = Digit.Hooks.useEmployeeSearch(
+ tenantId,
+ {
+ roles: action?.assigneeRoles?.map?.((e) => ({ code: e })),
+ isActive: true,
+ },
+ { enabled: !action?.isTerminateState }
+ );
+
+ const [config, setConfig] = useState({});
+ const [defaultValues, setDefaultValues] = useState({});
+ const [approvers, setApprovers] = useState([]);
+ const [selectedApprover, setSelectedApprover] = useState({});
+ const [file, setFile] = useState(null);
+ const [uploadedFile, setUploadedFile] = useState(null);
+ const [error, setError] = useState(null);
+ const mobileView = Digit.Utils.browser.isMobile() ? true : false;
+
+ useEffect(() => {
+ setApprovers(approverData?.Employees?.map((employee) => ({ uuid: employee?.uuid, name: employee?.user?.name })));
+ }, [approverData]);
+
+ function selectFile(e) {
+ setFile(e.target.files[0]);
+ }
+
+ useEffect(() => {
+ (async () => {
+ setError(null);
+ if (file) {
+ const allowedFileTypesRegex = /(.*?)(jpg|jpeg|png|image|pdf)$/i
+ if (file.size >= 5242880) {
+ setError(t("CS_MAXIMUM_UPLOAD_SIZE_EXCEEDED"));
+ } else if (file?.type && !allowedFileTypesRegex.test(file?.type)) {
+ setError(t(`NOT_SUPPORTED_FILE_TYPE`))
+ } else {
+ try {
+ const response = await Digit.UploadServices.Filestorage("OBPS", file, Digit.ULBService.getStateId() || tenantId?.split(".")[0]);
+ if (response?.data?.files?.length > 0) {
+ setUploadedFile(response?.data?.files[0]?.fileStoreId);
+ } else {
+ setError(t("CS_FILE_UPLOAD_ERROR"));
+ }
+ } catch (err) {
+ setError(t("CS_FILE_UPLOAD_ERROR"));
+ }
+ }
+ }
+ })();
+ }, [file]);
+
+ function submit(data) {
+ let workflow = { action: action?.action, comments: data?.comments, businessService, moduleName: moduleCode };
+ applicationData = {
+ ...applicationData,
+ action: action?.action,
+ comment: data?.comments,
+ assignee: !selectedApprover?.uuid ? null : [selectedApprover?.uuid],
+ wfDocuments: uploadedFile
+ ? [
+ {
+ documentType: action?.action + " DOC",
+ fileName: file?.name,
+ fileStoreId: uploadedFile,
+ },
+ ]
+ : null,
+ };
+ submitAction({
+ Licenses: [applicationData],
+ }, false, {isStakeholder: true, bpa: false});
+ }
+
+ useEffect(() => {
+ if (action) {
+ setConfig(
+ configBPAREGApproverApplication({
+ t,
+ action,
+ approvers,
+ selectedApprover,
+ setSelectedApprover,
+ selectFile,
+ uploadedFile,
+ setUploadedFile,
+ businessService,
+ error
+ })
+ );
+ }
+ }, [action, approvers, uploadedFile, error]);
+
+ return action && config.form ? (
+ {props.label}
; +}; + +const Close = () => ( + +); + +const CloseBtn = (props) => { + return ( +
+
+ );
+};
+
+const ExpenditureActionModal = ({ t, action, tenantId, state, id, closeModal, submitAction, actionData, applicationData, businessService, moduleCode,applicationDetails,workflowDetails }) => {
+
+ let { loiNumber, estimateNumber } = Digit.Hooks.useQueryParams();
+ const [config, setConfig] = useState({});
+ const [defaultValues, setDefaultValues] = useState({});
+ const [approvers, setApprovers] = useState([]);
+ const [selectedApprover, setSelectedApprover] = useState({});
+
+ const [department, setDepartment] = useState([]);
+ const [selectedDept,setSelectedDept] = useState({})
+
+ const [designation, setDesignation] = useState([]);
+ const [selectedDesignation,setSelectedDesignation] = useState({})
+
+ const mdmsConfig = {
+ moduleName: "common-masters",
+ department : {
+ masterName: "Department",
+ localePrefix: "COMMON_MASTERS_DEPARTMENT",
+ },
+ designation : {
+ masterName: "Designation",
+ localePrefix: "COMMON_MASTERS_DESIGNATION",
+ }
+ }
+
+ const { isLoading: mdmsLoading, data: mdmsData,isSuccess:mdmsSuccess } = Digit.Hooks.useCustomMDMS(
+ Digit.ULBService.getStateId(),
+ mdmsConfig?.moduleName,
+ [{name : mdmsConfig?.designation?.masterName}, {name : mdmsConfig?.department?.masterName}, {name : mdmsConfig?.rejectReasons?.masterName}],
+ {
+ select: (data) => {
+ let designationData = _.get(data, `${mdmsConfig?.moduleName}.${mdmsConfig?.designation?.masterName}`, []);
+ designationData = designationData.filter((opt) => opt?.active).map((opt) => ({ ...opt, name: `${mdmsConfig?.designation?.localePrefix}_${opt.code}` }));
+ designationData?.map(designation => {designation.i18nKey = designation?.name})
+
+ let departmentData = _.get(data, `${mdmsConfig?.moduleName}.${mdmsConfig?.department?.masterName}`, []);
+ departmentData = departmentData.filter((opt) => opt?.active).map((opt) => ({ ...opt, name: `${mdmsConfig?.department?.localePrefix}_${opt.code}` }));
+ departmentData?.map(department => { department.i18nKey = department?.name})
+
+ return {designationData, departmentData};
+ },
+ enabled: mdmsConfig?.moduleName ? true : false,
+ }
+ );
+ useEffect(() => {
+ setDepartment(mdmsData?.departmentData)
+ setDesignation(mdmsData?.designationData)
+ }, [mdmsData]);
+
+
+
+ const { isLoading: approverLoading, isError, error, data: employeeDatav1 } = Digit.Hooks.hrms.useHRMSSearch({ designations: selectedDesignation?.code, departments: selectedDept?.code, roles: action?.assigneeRoles?.toString(), isActive: true }, Digit.ULBService.getCurrentTenantId(), null, null, { enabled: action?.action === "CHECK" || action?.action === "TECHNICALSANCATION"});
+
+
+ employeeDatav1?.Employees.map(emp => emp.nameOfEmp = emp?.user?.name || "NA")
+
+ useEffect(() => {
+ setApprovers(employeeDatav1?.Employees?.length > 0 ? employeeDatav1?.Employees.filter(emp => emp?.nameOfEmp !== "NA") : [])
+ }, [employeeDatav1])
+
+ useEffect(() => {
+
+ if(action?.action?.includes("CHECK")){
+ setConfig(
+ configViewBillCheckModal({
+ t,
+ action,
+ businessService,
+ approvers,
+ selectedApprover,
+ setSelectedApprover,
+ designation,
+ selectedDesignation,
+ setSelectedDesignation,
+ department,
+ selectedDept,
+ setSelectedDept,
+ approverLoading
+ })
+ )
+ }else if(action?.action?.includes("APPROVE")){
+ setConfig(
+ configViewBillApproveModal({
+ t,
+ action
+ })
+ )
+ }
+ else if(action?.action?.includes("REJECT")){
+ setConfig(
+ configViewBillRejectModal({
+ t,
+ action,
+ })
+ )
+ }
+ }, [approvers,designation,department]);
+
+ const dummy_exp_response = {
+ CHECK : {
+ header: "Bill Forwarded Successfully",
+ id: "Bill/2021-22/09/0001",
+ info: "Bill ID",
+ message: "Bill has been successfully created and forwarded for approval.",
+ responseData:{},
+ requestData:{},
+ links : []
+ },
+ REJECT : {
+ header: "Bill Rejected Successfully",
+ id: "Bill/2021-22/09/0001",
+ info: "Bill ID",
+ message: "Bill has been Rejected.",
+ responseData:{},
+ requestData:{},
+ links : []
+ },
+ APPROVE : {
+ header: "Bill Approved Successfully",
+ id: "Bill/2021-22/09/0001",
+ info: "Bill ID",
+ message: "Bill has been approved",
+ responseData:{},
+ requestData:{},
+ links : []
+ }
+ }
+
+
+ function submit (_data) {
+ const workflow = {
+ action: action?.action,
+ comment: _data?.comments,
+ response : dummy_exp_response,
+ type : "bills",
+ assignees: selectedApprover?.uuid ? [selectedApprover?.uuid] : undefined
+ }
+ submitAction({workflow});
+ }
+
+ const cardStyle = () => {
+ if(config.label.heading === "Processing Details") {
+ return {
+ "padding" : "0px"
+ }
+ }
+ return {}
+ }
+
+ return (
+ <>
+ {
+ action && config?.form ?
+ {props.label}
; +}; + +const Close = () => ( + +); + +const CloseBtn = (props) => { + return ( +
+
+ );
+};
+
+const ActionModal = ({ t, action, tenantId, state, id, closeModal, submitAction, actionData }) => {
+ const { data: dsoData, isLoading: isDsoLoading, isSuccess: isDsoSuccess, error: dsoError } = Digit.Hooks.fsm.useDsoSearch(tenantId);
+ const { isLoading, isSuccess, isError, data: applicationData, error } = Digit.Hooks.fsm.useSearch(
+ tenantId,
+ { applicationNos: id },
+ {
+ staleTime: Infinity,
+ select: (details) => {
+ let { additionalDetails } = details;
+
+ const parseTillObject = (str) => {
+ if (typeof str === "object") return str;
+ else return parseTillObject(JSON.parse(str));
+ };
+
+ additionalDetails = parseTillObject(additionalDetails);
+ return { ...details, additionalDetails };
+ },
+ }
+ );
+ const client = useQueryClient();
+ const stateCode = Digit.ULBService.getStateId();
+ const { data: vehicleList, isLoading: isVehicleData, isSuccess: isVehicleDataLoaded } = Digit.Hooks.fsm.useMDMS(
+ stateCode,
+ "Vehicle",
+ "VehicleType",
+ { staleTime: Infinity }
+ );
+ const [dsoList, setDsoList] = useState([]);
+ const [vehicleNoList, setVehicleNoList] = useState([]);
+ const [config, setConfig] = useState({});
+ const [dso, setDSO] = useState(null);
+ const [vehicleNo, setVehicleNo] = useState(null);
+ const [vehicleMenu, setVehicleMenu] = useState([]);
+ const [vehicle, setVehicle] = useState(null);
+ const [defaultValues, setDefautValue] = useState({
+ capacity: vehicle?.capacity,
+ wasteCollected: vehicle?.capacity,
+ });
+ // const [toastError, setToastError] = useState(false);
+ const { data: Reason, isLoading: isReasonLoading } = Digit.Hooks.fsm.useMDMS(stateCode, "FSM", "Reason", { staleTime: Infinity }, [
+ "ReassignReason",
+ "RejectionReason",
+ "DeclineReason",
+ "CancelReason",
+ ]);
+
+ const [reassignReason, selectReassignReason] = useState(null);
+ const [rejectionReason, setRejectionReason] = useState(null);
+ const [declineReason, setDeclineReason] = useState(null);
+ const [cancelReason, selectCancelReason] = useState(null);
+
+ const [formValve, setFormValve] = useState(false);
+
+ useEffect(() => {
+ if (isSuccess && isVehicleDataLoaded) {
+ const [vehicle] = vehicleList.filter((item) => item.code === applicationData.vehicleType);
+ setVehicleMenu([vehicle]);
+ setVehicle(vehicle);
+ setDefautValue({
+ capacity: vehicle?.capacity,
+ wasteCollected: vehicle?.capacity,
+ });
+ }
+ }, [isVehicleDataLoaded, isSuccess]);
+
+ useEffect(() => {
+ if (vehicle && isDsoSuccess) {
+ const dsoList = dsoData.filter((dso) => dso.vehicles.find((dsoVehicle) => dsoVehicle.type === vehicle.code));
+ setDsoList(dsoList);
+ }
+ }, [vehicle, isDsoSuccess]);
+
+ useEffect(() => {
+ if (isSuccess && isDsoSuccess && applicationData.dsoId) {
+ const [dso] = dsoData.filter((dso) => dso.id === applicationData.dsoId);
+ const vehicleNoList = dso.vehicles.filter((vehicle) => vehicle.type === applicationData.vehicleType);
+ setVehicleNoList(vehicleNoList);
+ }
+ }, [isSuccess, isDsoSuccess]);
+
+ useEffect(() => {
+ reassignReason || (actionData && actionData[0] && actionData[0].comment?.length > 0) ? setFormValve(true) : setFormValve(false);
+ }, [reassignReason]);
+
+ useEffect(() => {
+ setFormValve(rejectionReason ? true : false);
+ }, [rejectionReason]);
+
+ useEffect(() => {
+ setFormValve(declineReason ? true : false);
+ }, [declineReason]);
+
+ useEffect(() => {
+ setFormValve(cancelReason ? true : false);
+ }, [cancelReason]);
+
+ function selectDSO(dsoDetails) {
+ setDSO(dsoDetails);
+ }
+
+ function selectVehicleNo(vehicleNo) {
+ setVehicleNo(vehicleNo);
+ }
+
+ function selectVehicle(value) {
+ setVehicle(value);
+ setDefautValue({
+ capacity: value?.capacity,
+ wasteCollected: value?.capacity,
+ });
+ }
+
+ function addCommentToWorkflow(state, workflow, data) {
+ workflow.comments = data.comments ? state.code + "~" + data.comments : state.code;
+ }
+
+ function submit(data) {
+ const workflow = { action: action };
+
+ if (dso) applicationData.dsoId = dso.id;
+ if (vehicleNo && action === "ACCEPT") applicationData.vehicleId = vehicleNo.id;
+ if (vehicleNo && action === "DSO_ACCEPT") applicationData.vehicleId = vehicleNo.id;
+ if (vehicle && action === "ASSIGN") applicationData.vehicleType = vehicle.code;
+ if (data.date) applicationData.possibleServiceDate = new Date(`${data.date}`).getTime();
+ if (data.desluged) applicationData.completedOn = new Date(data.desluged).getTime();
+ if (data.wasteCollected) applicationData.wasteCollected = data.wasteCollected;
+ if (reassignReason) addCommentToWorkflow(reassignReason, workflow, data);
+ if (rejectionReason) addCommentToWorkflow(rejectionReason, workflow, data);
+ if (declineReason) addCommentToWorkflow(declineReason, workflow, data);
+ if (cancelReason) addCommentToWorkflow(cancelReason, workflow, data);
+
+ submitAction({ fsm: applicationData, workflow });
+ }
+ useEffect(() => {
+ switch (action) {
+ case "DSO_ACCEPT":
+ case "ACCEPT":
+ setFormValve(vehicleNo ? true : false);
+ return setConfig(
+ configAcceptDso({
+ t,
+ dsoData,
+ dso,
+ vehicle,
+ vehicleNo,
+ vehicleNoList,
+ selectVehicleNo,
+ action,
+ })
+ );
+
+ case "ASSIGN":
+ case "GENERATE_DEMAND":
+ case "FSM_GENERATE_DEMAND":
+ setFormValve(dso && vehicle ? true : false);
+ return setConfig(
+ configAssignDso({
+ t,
+ dsoData,
+ dso,
+ selectDSO,
+ vehicleMenu,
+ vehicle,
+ selectVehicle,
+ action,
+ })
+ );
+ case "REASSIGN":
+ case "REASSING":
+ case "FSM_REASSING":
+ dso && vehicle && (reassignReason || (actionData && actionData[0] && actionData[0].comment?.length > 0))
+ ? setFormValve(true)
+ : setFormValve(false);
+ return setConfig(
+ configReassignDSO({
+ t,
+ dsoData,
+ dso,
+ selectDSO,
+ vehicleMenu,
+ vehicle,
+ selectVehicle,
+ reassignReasonMenu: Reason?.ReassignReason,
+ reassignReason,
+ selectReassignReason,
+ action,
+ showReassignReason: actionData && actionData[0] && actionData[0].comment?.length > 0 ? false : true,
+ })
+ );
+ case "COMPLETE":
+ case "COMPLETED":
+ setFormValve(true);
+ return setConfig(configCompleteApplication({ t, vehicle, applicationCreatedTime: applicationData?.auditDetails?.createdTime, action }));
+ case "SUBMIT":
+ case "FSM_SUBMIT":
+ return history.push(`/${window?.contextPath}/employee/fsm/modify-application/` + applicationNumber);
+ case "DECLINE":
+ case "DSO_REJECT":
+ //declinereason
+ setFormValve(declineReason ? true : false);
+ return setConfig(
+ configRejectApplication({
+ t,
+ rejectMenu: Reason?.DeclineReason,
+ setReason: setDeclineReason,
+ reason: declineReason,
+ action,
+ })
+ );
+ case "REJECT":
+ case "SENDBACK":
+ // rejectionReason
+ setFormValve(rejectionReason ? true : false);
+ return setConfig(
+ configRejectApplication({
+ t,
+ rejectMenu: Reason?.RejectionReason,
+ setReason: setRejectionReason,
+ reason: rejectionReason,
+ action,
+ })
+ );
+ case "CANCEL":
+ ///cancellreason
+ setFormValve(cancelReason ? true : false);
+ return setConfig(
+ configRejectApplication({
+ t,
+ rejectMenu: Reason?.CancelReason,
+ setReason: selectCancelReason,
+ reason: cancelReason,
+ action,
+ })
+ );
+
+ case "PAY":
+ case "ADDITIONAL_PAY_REQUEST":
+ case "FSM_PAY":
+ return history.push(`/${window?.contextPath}/employee/payment/collect/FSM.TRIP_CHARGES/${applicationNumber}`);
+ default:
+ break;
+ }
+ }, [action, isDsoLoading, dso, vehicleMenu, rejectionReason, vehicleNo, vehicleNoList, Reason]);
+
+ return action && config.form && !isDsoLoading && !isReasonLoading && isVehicleDataLoaded ? (
+ {props.label}
; +}; + +const Close = () => ( + +); + +const CloseBtn = (props) => { + return ( +
+
+ );
+};
+
+const ActionModal = ({ t, action, tenantId, state, id, closeModal, submitAction, actionData, applicationData, businessService, moduleCode }) => {
+
+ const { data: approverData, isLoading: PTALoading } = Digit.Hooks.useEmployeeSearch(
+ tenantId,
+ {
+ roles: action?.assigneeRoles?.map?.((e) => ({ code: e })),
+ isActive: true,
+ },
+ { enabled: !action?.isTerminateState }
+ );
+
+ const queryClient = useQueryClient();
+ const [config, setConfig] = useState({});
+ const [defaultValues, setDefaultValues] = useState({});
+ const [approvers, setApprovers] = useState([]);
+ const [selectedApprover, setSelectedApprover] = useState({});
+ const [file, setFile] = useState(null);
+ const [uploadedFile, setUploadedFile] = useState(null);
+ const [error, setError] = useState(null);
+ const mobileView = Digit.Utils.browser.isMobile() ? true : false;
+ const history = useHistory();
+
+ useEffect(() => {
+ setApprovers(approverData?.Employees?.map((employee) => ({ uuid: employee?.uuid, name: employee?.user?.name })));
+ }, [approverData]);
+
+ function selectFile(e) {
+ setFile(e.target.files[0]);
+ }
+
+ useEffect(() => {
+ (async () => {
+ setError(null);
+ if (file) {
+ const allowedFileTypesRegex = /(.*?)(jpg|jpeg|png|image|pdf)$/i
+ if (file.size >= 5242880) {
+ setError(t("CS_MAXIMUM_UPLOAD_SIZE_EXCEEDED"));
+ } else if (file?.type && !allowedFileTypesRegex.test(file?.type)) {
+ setError(t(`NOT_SUPPORTED_FILE_TYPE`))
+ } else {
+ try {
+ const response = await Digit.UploadServices.Filestorage("NOC", file, Digit.ULBService.getStateId() || tenantId?.split(".")[0]);
+ if (response?.data?.files?.length > 0) {
+ setUploadedFile(response?.data?.files[0]?.fileStoreId);
+ } else {
+ setError(t("CS_FILE_UPLOAD_ERROR"));
+ }
+ } catch (err) {
+ setError(t("CS_FILE_UPLOAD_ERROR"));
+ }
+ }
+ }
+ })();
+ }, [file]);
+
+
+ function submit(data) {
+ let enteredDocs = JSON.parse(sessionStorage.getItem("NewNOCDocs"));
+ let newDocs = applicationData?.documents?.length > 0 ? [...applicationData?.documents] : [];
+ enteredDocs.map((d,index) => {
+ newDocs.push(d);
+ })
+ applicationData = {
+ ...applicationData,
+ workflow:{
+ action: action?.action,
+ comment: data?.comments ? data?.comments : null,
+ assignee: !selectedApprover?.uuid ? null : [selectedApprover?.uuid],
+ documents: uploadedFile
+ ? [
+ {
+ documentType: action?.action + " DOC",
+ fileName: file?.name,
+ fileStoreId: uploadedFile,
+ },
+ ]
+ : null,
+ },
+ documents: newDocs,
+ };
+
+
+ submitAction({
+ Noc: applicationData,
+ }, false, {isNoc: true});
+ }
+
+ useEffect(() => {
+ if (action) {
+ setConfig(
+ configNOCApproverApplication({
+ t,
+ action,
+ approvers,
+ selectedApprover,
+ setSelectedApprover,
+ selectFile,
+ uploadedFile,
+ setUploadedFile,
+ businessService,
+ assigneeLabel: "WF_ASSIGNEE_NAME_LABEL",
+ error
+ })
+ );
+ }
+ }, [action, approvers, uploadedFile, error]);
+
+ return action && config.form ? (
+ {props.label}
; +}; + +const Close = () => ( + +); + +const CloseBtn = (props) => { + return ( +
+
+ );
+};
+
+const ActionModal = ({ t, action, tenantId, state, id, closeModal, submitAction, actionData, applicationData, businessService, moduleCode }) => {
+ const { data: approverData, isLoading: PTALoading } = Digit.Hooks.useEmployeeSearch(
+ tenantId,
+ {
+ roles: action?.assigneeRoles?.map?.((e) => ({ code: e })),
+ isActive: true,
+ },
+ { enabled: !action?.isTerminateState }
+ );
+ const { isLoading: financialYearsLoading, data: financialYearsData } = Digit.Hooks.pt.useMDMS(
+ tenantId,
+ businessService,
+ "FINANCIAL_YEARLS",
+ {},
+ {
+ details: {
+ tenantId: Digit.ULBService.getStateId(),
+ moduleDetails: [{ moduleName: "egf-master", masterDetails: [{ name: "FinancialYear", filter: "[?(@.module == 'PT')]" }] }],
+ },
+ }
+ );
+
+ const [config, setConfig] = useState({});
+ const [defaultValues, setDefaultValues] = useState({});
+ const [approvers, setApprovers] = useState([]);
+ const [selectedApprover, setSelectedApprover] = useState(null);
+ const [file, setFile] = useState(null);
+ const [uploadedFile, setUploadedFile] = useState(null);
+ const [error, setError] = useState(null);
+ const [financialYears, setFinancialYears] = useState([]);
+ const [selectedFinancialYear, setSelectedFinancialYear] = useState(null);
+ const [disableActionSubmit, setDisableActionSubmit] = useState(false);
+
+ useEffect(() => {
+ if (financialYearsData && financialYearsData["egf-master"]) {
+ setFinancialYears(financialYearsData["egf-master"]?.["FinancialYear"]);
+ }
+ }, [financialYearsData]);
+
+ useEffect(() => {
+ setApprovers(approverData?.Employees?.map((employee) => ({ uuid: employee?.uuid, name: employee?.user?.name })));
+ }, [approverData]);
+
+ function selectFile(e) {
+ setFile(e.target.files[0]);
+ }
+
+ useEffect(() => {
+ (async () => {
+ setError(null);
+ if (file) {
+ if (file.size >= 5242880) {
+ setError(t("CS_MAXIMUM_UPLOAD_SIZE_EXCEEDED"));
+ } else {
+ try {
+ const response = await Digit.UploadServices.Filestorage("PT", file, Digit.ULBService.getStateId());
+ if (response?.data?.files?.length > 0) {
+ setUploadedFile(response?.data?.files[0]?.fileStoreId);
+ } else {
+ setError(t("CS_FILE_UPLOAD_ERROR"));
+ }
+ } catch (err) {
+ setError(t("CS_FILE_UPLOAD_ERROR"));
+ }
+ }
+ }
+ })();
+ }, [file]);
+
+ function submit(data) {
+ if (!action?.showFinancialYearsModal) {
+ let workflow = { action: action?.action, comment: data?.comments, businessService, moduleName: moduleCode };
+ workflow["assignes"] = action?.isTerminateState || !selectedApprover ? [] : [selectedApprover];
+ if (uploadedFile)
+ workflow["documents"] = [
+ {
+ documentType: action?.action + " DOC",
+ fileName: file?.name,
+ fileStoreId: uploadedFile,
+ },
+ ];
+
+ submitAction({
+ Property: {
+ ...applicationData,
+ workflow,
+ },
+ });
+ } else {
+ submitAction({
+ customFunctionToExecute: action?.customFunctionToExecute,
+ Assessment: {
+ financialYear: selectedFinancialYear?.name,
+ propertyId: applicationData?.propertyId,
+ tenantId,
+ source: applicationData?.source,
+ channel: applicationData?.channel,
+ assessmentDate: Date.now(),
+ },
+ });
+ }
+ }
+
+ useEffect(() => {
+ if (action) {
+ if (action?.showFinancialYearsModal) {
+ setConfig(
+ configPTAssessProperty({
+ t,
+ action,
+ financialYears,
+ selectedFinancialYear,
+ setSelectedFinancialYear,
+ })
+ );
+ } else {
+ setConfig(
+ configPTApproverApplication({
+ t,
+ action,
+ approvers,
+ selectedApprover,
+ setSelectedApprover,
+ selectFile,
+ uploadedFile,
+ setUploadedFile,
+ businessService,
+ })
+ );
+ }
+ }
+ }, [action, approvers, financialYears, selectedFinancialYear, uploadedFile]);
+
+ return action && config.form ? (
+ {props.label}
; +}; + +const Close = () => ( + +); + +const CloseBtn = (props) => { + return ( +
+
+ );
+};
+
+const ActionModal = ({ t, action, tenantId, state, id, closeModal, submitAction, actionData, applicationData, businessService, moduleCode }) => {
+ const { data: approverData, isLoading: PTALoading } = Digit.Hooks.useEmployeeSearch(
+ tenantId,
+ {
+ roles: action?.assigneeRoles?.map?.((e) => ({ code: e })),
+ isActive: true,
+ },
+ { enabled: !action?.isTerminateState }
+ );
+ const { isLoading: financialYearsLoading, data: financialYearsData } = Digit.Hooks.pt.useMDMS(
+ tenantId,
+ businessService,
+ "FINANCIAL_YEARLS",
+ {},
+ {
+ details: {
+ tenantId: Digit.ULBService.getStateId(),
+ moduleDetails: [{ moduleName: "egf-master", masterDetails: [{ name: "FinancialYear", filter: "[?(@.module == 'TL')]" }] }],
+ },
+ }
+ );
+
+ const [config, setConfig] = useState({});
+ const [defaultValues, setDefaultValues] = useState({});
+ const [approvers, setApprovers] = useState([]);
+ const [selectedApprover, setSelectedApprover] = useState({});
+ const [file, setFile] = useState(null);
+ const [uploadedFile, setUploadedFile] = useState(null);
+ const [error, setError] = useState(null);
+ const [financialYears, setFinancialYears] = useState([]);
+ const [selectedFinancialYear, setSelectedFinancialYear] = useState(null);
+
+ useEffect(() => {
+ if (financialYearsData && financialYearsData["egf-master"]) {
+ setFinancialYears(financialYearsData["egf-master"]?.["FinancialYear"]);
+ }
+ }, [financialYearsData]);
+
+ useEffect(() => {
+ setApprovers(approverData?.Employees?.map((employee) => ({ uuid: employee?.uuid, name: employee?.user?.name })));
+ }, [approverData]);
+
+ function selectFile(e) {
+ setFile(e.target.files[0]);
+ }
+
+ useEffect(() => {
+ (async () => {
+ setError(null);
+ if (file) {
+ if (file.size >= 5242880) {
+ setError(t("CS_MAXIMUM_UPLOAD_SIZE_EXCEEDED"));
+ } else {
+ try {
+ const response = await Digit.UploadServices.Filestorage("PT", file, Digit.ULBService.getStateId());
+ if (response?.data?.files?.length > 0) {
+ setUploadedFile(response?.data?.files[0]?.fileStoreId);
+ } else {
+ setError(t("CS_FILE_UPLOAD_ERROR"));
+ }
+ } catch (err) {
+ setError(t("CS_FILE_UPLOAD_ERROR"));
+ }
+ }
+ }
+ })();
+ }, [file]);
+
+ function submit(data) {
+ let workflow = { action: action?.action, comments: data?.comments, businessService, moduleName: moduleCode };
+ applicationData = {
+ ...applicationData,
+ action: action?.action,
+ comment: data?.comments,
+ assignee: !selectedApprover?.uuid ? null : [selectedApprover?.uuid],
+ // assignee: action?.isTerminateState ? [] : [selectedApprover?.uuid],
+ wfDocuments: uploadedFile
+ ? [
+ {
+ documentType: action?.action + " DOC",
+ fileName: file?.name,
+ fileStoreId: uploadedFile,
+ },
+ ]
+ : null,
+ };
+ submitAction({
+ Licenses: [applicationData],
+ });
+ }
+
+ useEffect(() => {
+ if (action) {
+ setConfig(
+ configTLApproverApplication({
+ t,
+ action,
+ approvers,
+ selectedApprover,
+ setSelectedApprover,
+ selectFile,
+ uploadedFile,
+ setUploadedFile,
+ businessService,
+ })
+ );
+ }
+ }, [action, approvers, financialYears, selectedFinancialYear, uploadedFile]);
+
+ return action && config.form ? (
+ {props.label}
; +}; + +const Close = () => ( + +); + +const CloseBtn = (props) => { + return ( +
+
+ );
+};
+
+const convertDateToEpochNew = (dateString, dayStartOrEnd = "dayend") => {
+ //example input format : "2018-10-02"
+ try {
+ const parts = dateString.match(/(\d{4})-(\d{1,2})-(\d{1,2})/);
+ const DateObj = new Date(Date.UTC(parts[1], parts[3] - 1, parts[2]));
+
+ DateObj.setMinutes(DateObj.getMinutes() + DateObj.getTimezoneOffset());
+ if (dayStartOrEnd === "dayend") {
+ DateObj.setHours(DateObj.getHours() + 24);
+ DateObj.setSeconds(DateObj.getSeconds() - 1);
+ }
+ return DateObj.getTime();
+ } catch (e) {
+ return dateString;
+ }
+};
+
+const ActionModal = ({ t, action, tenantId, state, id, closeModal, submitAction, actionData, applicationData, businessService, moduleCode }) => {
+ const { data: approverData, isLoading: PTALoading } = Digit.Hooks.useEmployeeSearch(
+ tenantId,
+ {
+ roles: action?.assigneeRoles?.map?.((e) => ({ code: e })),
+ isActive: true,
+ },
+ { enabled: !action?.isTerminateState }
+ );
+
+ const [config, setConfig] = useState({});
+ const [defaultValues, setDefaultValues] = useState({});
+ const [approvers, setApprovers] = useState([]);
+ const [selectedApprover, setSelectedApprover] = useState({});
+ const [file, setFile] = useState(null);
+ const [uploadedFile, setUploadedFile] = useState(null);
+ const [error, setError] = useState(null);
+
+ useEffect(() => {
+ setApprovers(approverData?.Employees?.map((employee) => ({ uuid: employee?.uuid, name: employee?.user?.name })));
+ }, [approverData]);
+
+ function selectFile(e) {
+ setFile(e.target.files[0]);
+ }
+
+ useEffect(() => {
+ (async () => {
+ setError(null);
+ if (file) {
+ const allowedFileTypesRegex = /(.*?)(jpg|jpeg|png|image|pdf)$/i
+ if (file.size >= 5242880) {
+ setError(t("CS_MAXIMUM_UPLOAD_SIZE_EXCEEDED"));
+ } else if (file?.type && !allowedFileTypesRegex.test(file?.type)) {
+ setError(t(`NOT_SUPPORTED_FILE_TYPE`))
+ } else {
+ try {
+ const response = await Digit.UploadServices.Filestorage("WS", file, Digit.ULBService.getCurrentTenantId());
+ if (response?.data?.files?.length > 0) {
+ setUploadedFile(response?.data?.files[0]?.fileStoreId);
+ } else {
+ setError(t("CS_FILE_UPLOAD_ERROR"));
+ }
+ } catch (err) {
+ console.error("Modal -> err ", err);
+ setError(t("CS_FILE_UPLOAD_ERROR"));
+ }
+ }
+ }
+ })();
+ }, [file]);
+
+ function submit(data) {
+ if(applicationData?.isBillAmend){
+ const comments = data?.comments ? data.comments : null
+
+ const additionalDetails = { ...applicationData?.billAmendmentDetails?.additionalDetails, comments }
+ const amendment = {
+ ...applicationData?.billAmendmentDetails,
+ workflow:{
+ businessId:applicationData?.billAmendmentDetails?.amendmentId,
+ action:action?.action,
+ tenantId:tenantId,
+ businessService:"BS.AMENDMENT",
+ moduleName:"BS"
+ },
+ additionalDetails,
+ comment: data?.comments || "",
+ wfDocuments: uploadedFile
+ ? [
+ {
+ documentType: action?.action + " DOC",
+ fileName: file?.name,
+ fileStoreId: uploadedFile,
+ },
+ ]
+ : null,
+ processInstance: {
+ action: action?.action,
+ assignes: !selectedApprover?.uuid ? [] : [{ uuid: selectedApprover?.uuid }],
+ comment: data?.comments || "",
+ documents: uploadedFile
+ ? [
+ {
+ documentType: action?.action + " DOC",
+ fileName: file?.name,
+ fileStoreId: uploadedFile,
+ },
+ ]
+ : []
+ }
+ }
+ //amendment?.additionalDetails?.comments = comments
+ submitAction({AmendmentUpdate:amendment})
+ return
+ }
+ let workflow = { action: action?.action, comments: data?.comments, businessService, moduleName: moduleCode };
+ applicationData = {
+ ...applicationData,
+ action: action?.action,
+ comment: data?.comments || "",
+ assignee: !selectedApprover?.uuid ? [] : [selectedApprover?.uuid],
+ assignes: !selectedApprover?.uuid ? [] : [{ uuid: selectedApprover?.uuid }],
+ wfDocuments: uploadedFile
+ ? [
+ {
+ documentType: action?.action + " DOC",
+ fileName: file?.name,
+ fileStoreId: uploadedFile,
+ },
+ ]
+ : null,
+ processInstance: {
+ ...applicationData?.processInstance,
+ action: action?.action,
+ assignes: !selectedApprover?.uuid ? [] : [{ uuid: selectedApprover?.uuid }],
+ comment: data?.comments || "",
+ documents: uploadedFile
+ ? [
+ {
+ documentType: action?.action + " DOC",
+ fileName: file?.name,
+ fileStoreId: uploadedFile,
+ },
+ ]
+ : []
+ }
+ };
+
+ if (data?.date) {
+ const connectionExecutionDate = cloneDeep(data?.date);
+ applicationData.connectionExecutionDate = convertDateToEpochNew(connectionExecutionDate)
+ }
+ if (applicationData?.processInstance?.businessService == "DisconnectWSConnection" || applicationData?.processInstance?.businessService == "DisconnectSWConnection"){
+ applicationData?.serviceType == "WATER" ?
+ submitAction({ WaterConnection: applicationData, disconnectRequest: true }) :
+ submitAction({ SewerageConnection: applicationData, disconnectRequest: true })
+ } else {
+ const adhocRebateData = sessionStorage.getItem("Digit.ADHOC_ADD_REBATE_DATA");
+ const parsedAdhocRebateData = adhocRebateData ? JSON.parse(adhocRebateData) : "";
+ if (parsedAdhocRebateData?.value?.adhocPenalty) applicationData.additionalDetails.adhocPenalty = parseInt(parsedAdhocRebateData?.value?.adhocPenalty) || "";
+ if (parsedAdhocRebateData?.value?.adhocPenaltyComment) applicationData.additionalDetails.adhocPenaltyComment = parsedAdhocRebateData?.value?.adhocPenaltyComment || "";
+ if (parsedAdhocRebateData?.value?.adhocPenaltyReason) applicationData.additionalDetails.adhocPenaltyReason = parsedAdhocRebateData?.value?.adhocPenaltyReason || "";
+ if (parsedAdhocRebateData?.value?.adhocRebate) applicationData.additionalDetails.adhocRebate = parseInt(parsedAdhocRebateData?.value?.adhocRebate) || "";
+ if (parsedAdhocRebateData?.value?.adhocRebateComment) applicationData.additionalDetails.adhocRebateComment = parsedAdhocRebateData?.value?.adhocRebateComment || "";
+ if (parsedAdhocRebateData?.value?.adhocRebateReason) applicationData.additionalDetails.adhocRebateReason = parsedAdhocRebateData?.value?.adhocRebateReason || "";
+ applicationData?.serviceType == "WATER" ? submitAction({ WaterConnection: applicationData }) : submitAction({ SewerageConnection: applicationData });
+ }
+ }
+
+ useEffect(() => {
+ if (applicationData?.processInstance?.businessService == "DisconnectWSConnection" || applicationData?.processInstance?.businessService == "DisconnectSWConnection") {
+ if (action) {
+ setConfig(
+ configWSDisConnectApplication({
+ t,
+ action,
+ approvers,
+ selectedApprover,
+ setSelectedApprover,
+ selectFile,
+ uploadedFile,
+ setUploadedFile,
+ businessService,
+ error
+ })
+ );
+ }
+ } else {
+ if (action) {
+ setConfig(
+ configWSApproverApplication({
+ t,
+ action,
+ approvers,
+ selectedApprover,
+ setSelectedApprover,
+ selectFile,
+ uploadedFile,
+ setUploadedFile,
+ businessService,
+ error
+ })
+ );
+ }
+ }
+ }, [action, approvers, uploadedFile, error]);
+
+ return action && config.form ? (
+ {props.label}
; +}; + +const Close = () => ( + +); + +const CloseBtn = (props) => { + return ( +
+
+ );
+};
+
+const convertDateToEpochNew = (dateString, dayStartOrEnd = "dayend") => {
+ //example input format : "2018-10-02"
+ try {
+ const parts = dateString.match(/(\d{4})-(\d{1,2})-(\d{1,2})/);
+ const DateObj = new Date(Date.UTC(parts[1], parts[3] - 1, parts[2]));
+
+ DateObj.setMinutes(DateObj.getMinutes() + DateObj.getTimezoneOffset());
+ if (dayStartOrEnd === "dayend") {
+ DateObj.setHours(DateObj.getHours() + 24);
+ DateObj.setSeconds(DateObj.getSeconds() - 1);
+ }
+ return DateObj.getTime();
+ } catch (e) {
+ return dateString;
+ }
+};
+
+
+const WorksActionModal = ({ t, action, tenantId, state, id, closeModal, submitAction, actionData, applicationData, businessService, moduleCode,applicationDetails,workflowDetails }) => {
+ //here according to the action selected render appropriate modal
+
+ // const { data: approverData, isLoading: PTALoading } = Digit.Hooks.useEmployeeSearch(
+ // tenantId,
+ // {
+ // roles: action?.assigneeRoles?.map?.((e) => ({ code: e })),
+ // isActive: true,
+ // },
+ // { enabled: !action?.isTerminateState }
+ // );
+ let { loiNumber, estimateNumber } = Digit.Hooks.useQueryParams();
+ const [config, setConfig] = useState({});
+ const [approvers, setApprovers] = useState([]);
+ const [selectedApprover, setSelectedApprover] = useState({});
+
+ const [department, setDepartment] = useState([]);
+ const [selectedDept,setSelectedDept] = useState({})
+
+ const [rejectionReason, setRejectionReason] = useState([]);
+ const [selectedReason,setSelectedReason] = useState([])
+
+ const [designation, setDesignation] = useState([]);
+ const [selectedDesignation,setSelectedDesignation] = useState({})
+
+ //get approverDept,designation,approver(hrms),rejectionReason
+
+ const rejectReasons = [
+ {
+ name: "Estimate Details are incorrect"
+ },
+ {
+ name: "Financial Details are incorrect"
+ },
+ {
+ name: "Agreement Details are incorrect"
+ },
+ {
+ name: "Vendor Details are incorrect"
+ },
+ {
+ name: "Attachments provided are wrong"
+ },
+ {
+ name: "Others"
+ },
+ ]
+
+ const { isLoading: mdmsLoading, data: mdmsData,isSuccess:mdmsSuccess } = Digit.Hooks.useCustomMDMS(
+ Digit.ULBService.getCurrentTenantId(),
+ "common-masters",
+ [
+ {
+ "name": "Designation"
+ },
+ {
+ "name": "Department"
+ }
+ ]
+ );
+
+ mdmsData?.["common-masters"]?.Designation?.map(designation => {
+ designation.i18nKey = `ES_COMMON_DESIGNATION_${designation?.name}`
+ })
+
+ mdmsData?.["common-masters"]?.Department?.map(department => {
+ department.i18nKey = `ES_COMMON_${department?.code}`
+ })
+ // const { data: approverData, isLoading: approverLoading } = Digit.Hooks.useEmployeeSearch(
+ // tenantId,
+ // {
+ // roles: action?.assigneeRoles?.map?.((e) => ({ code: e })),
+ // isActive: true,
+ // },
+ // { enabled: !action?.isTerminateState }
+ // );
+
+
+ // const { isLoading: approverLoading, isError,isSuccess:approverSuccess, error, data: employeeDatav1 } = Digit.Hooks.hrms.useHRMSSearch({ Designation: selectedDesignation?.code, Department: selectedDept?.code }, Digit.ULBService.getCurrentTenantId(), null, null, { enabled: !!(selectedDept?.code && selectedDesignation?.code) });
+ // employeeDatav1?.Employees.map(emp => emp.nameOfEmp = emp.user.name)
+
+
+ // useEffect(() => {
+
+ // setApprovers(approverData?.Employees?.map((employee) => ({ uuid: employee?.uuid, name: employee?.user?.name })));
+ // }, [approverData]);
+
+ useEffect(() => {
+
+ //setApprovers(approverData?.Employees?.map((employee) => ({ uuid: employee?.uuid, name: employee?.user?.name })));
+ //setApprovers(employeeDatav1?.Employees?.length > 0 ? employeeDatav1?.Employees : [])
+ setDepartment(mdmsData?.["common-masters"]?.Department)
+ setDesignation(mdmsData?.["common-masters"]?.Designation)
+ setRejectionReason(rejectReasons)
+ }, [mdmsData]);
+
+
+
+ const { isLoading: approverLoading, isError, error, data: employeeDatav1 } = Digit.Hooks.hrms.useHRMSSearch({ designations: selectedDesignation?.code, departments: selectedDept?.code, roles: action?.assigneeRoles?.toString(), isActive: true }, Digit.ULBService.getCurrentTenantId(), null, null, { enabled: action?.action === "CHECK" || action?.action === "TECHNICALSANCATION"});
+
+
+ employeeDatav1?.Employees.map(emp => emp.nameOfEmp = emp?.user?.name || "NA")
+
+ useEffect(() => {
+ setApprovers(employeeDatav1?.Employees?.length > 0 ? employeeDatav1?.Employees.filter(emp => emp?.nameOfEmp !== "NA") : [])
+ }, [employeeDatav1])
+
+
+ // if (employeeDatav1?.Employees?.length > 0) {
+ // setApprovers(employeeDatav1?.Employees)
+ // }
+
+ useEffect(() => {
+
+ if(action?.action?.includes("CHECK") || action?.action?.includes("TECHNICALSANCATION")){
+ setConfig(
+ configCheckModal({
+ t,
+ action,
+ businessService,
+ approvers,
+ selectedApprover,
+ setSelectedApprover,
+ designation,
+ selectedDesignation,
+ setSelectedDesignation,
+ department,
+ selectedDept,
+ setSelectedDept,
+ approverLoading
+ })
+ )
+ }else if(action?.action?.includes("APPROVE") || action?.action?.includes("ADMINSANCTION")){
+ setConfig(
+ configApproveModal({
+ t,
+ action
+ })
+ )
+ }
+ else if(action?.action?.includes("REJECT")){
+ setConfig(
+ configRejectModal({
+ t,
+ action,
+ rejectReasons,
+ selectedReason,
+ setSelectedReason,
+ loiNumber,
+ department,
+ estimateNumber
+ })
+ )
+ }
+ }, [approvers,designation,department]);
+
+
+ function submit (_data) {
+ //make the update object here and call submitAction
+ //if the action is reject then you need to make a search call and get creater's uuid
+ const workflow = {
+ action: action?.action,
+ comment: _data?.comments,
+ assignees: selectedApprover?.uuid ? [selectedApprover?.uuid] : undefined
+ }
+
+ if(action?.action.includes("REJECT")) {
+ workflow.assignee = [applicationData?.auditDetails?.createdBy]
+ }
+
+ Object.keys(workflow).forEach(key => {
+ if (workflow[key] === undefined) {
+ delete workflow[key];
+ }
+ });
+ {estimateNumber ? submitAction({estimate:applicationData,workflow}) :
+ submitAction({letterOfIndent:applicationData,workflow})}
+
+ }
+
+ // if(mdmsLoading || approverLoading ) {
+ // return
+ {index === 0 && !detail.asSectionHeader ? (
+ {t(detail.title)}
+ ) : (
+
+
+ {isNocLocation ? `${t(detail.title)}` : t(detail.title)}
+ {detail?.Component ?
+
+ )}
+ {/* TODO, Later will move to classes */}
+ {/* Here Render the table for adjustment amount details detail.isTable is true for that table*/}
+ {/* {detail?.isTable && (
+
+
+ )} */}
+ {detail?.isTable &&
+ {detail?.title &&
+ !detail?.title.includes("NOC") &&
+ detail?.values?.map((value, index) => {
+ if (value.map === true && value.value !== "N/A") {
+ return |
} />;
+ }
+ if (value?.isLink == true) {
+ return (
+
+
+
+ {t(value?.title)}
+
+
+
+ ) : isNocLocation || isBPALocation ? (
+ `${t(value.title)}`
+ ) : (
+ t(value.title)
+ )
+ }
+ text={
+ | {t(header)} | + ))} +
|---|
| {t(element)} | )} +
| {t(element)} | )} +
+
+
+ {value?.value}
+
+
+
+ }
+ last={index === detail?.values?.length - 1}
+ caption={value.caption}
+ className="border-none"
+ rowContainerStyle={getRowStyles()}
+ />
+ );
+ }
+ return (
+
+ {doc.isNotDuplicate &&
+ )) } */}
+ {detail?.additionalDetails?.floors &&
+
+ |
+
+
+
+
}
+ +
+
+
+ {detail?.additionalDetails?.redirectUrl?.title}
+
+
+
+ )}
+ {detail?.additionalDetails?.estimationDetails &&
+
+ );
+ };
+
+function ApplicationDetailsWarningPopup({ action,workflowDetails,businessService,isWarningPop,closeWarningPopup }) {
+const { t } = useTranslation();
+const isMobile = window.Digit.Utils.browser.isMobile();
+return (
+
+
+ {t("PT_YOU_HAVE")} ₹{action?.AmountDueForPay} {t("PT_DUE_WARNING_MSG2")}
+
+ window.location.assign(`${window.location.origin}${action?.redirectionUrl?.pathname}`)} style={{ marginLeft: "10px" }} />
+
+
+ {bpaTaxDocuments?.map((document, index) => {
+ return (
+
+ );
+}
+
+function SelectDocument({
+ t,
+ document: doc,
+ setDocuments,
+ error,
+ setError,
+ documents,
+ setCheckRequiredFields,
+ index,
+ applicationStatus,
+ actions,
+ bpaTaxDocuments,
+ checkEnablingDocs
+}) {
+
+ const filteredDocument = documents?.filter((item) => item?.documentType?.includes(doc?.code))[0];
+ const tenantId = Digit.ULBService.getStateId();
+ const [selectedDocument, setSelectedDocument] = useState(
+ filteredDocument
+ ? { ...filteredDocument, active: true, code: filteredDocument?.documentType, i18nKey: filteredDocument?.documentType }
+ : doc?.dropdownData?.length === 1
+ ? doc?.dropdownData[0]
+ : {}
+ );
+ const [file, setFile] = useState(null);
+ const [uploadedFile, setUploadedFile] = useState(() => filteredDocument?.fileStoreId || null);
+ const [selectArrayFiles, SetSelectArrayFiles] = useState([]);
+ const handleSelectDocument = (value) => setSelectedDocument(value);
+ const allowedFileTypes = /(.*?)(jpg|jpeg|png|image|pdf)$/i;
+
+ function selectfiles(e) {
+ e && setFile(e.file);
+ }
+
+
+ useEffect(() => {
+ if (selectedDocument?.code) {
+ setDocuments((prev) => {
+ const filteredDocumentsByDocumentType = prev?.filter((item) => item?.documentType !== selectedDocument?.code);
+ if (uploadedFile?.length === 0 || uploadedFile === null) return filteredDocumentsByDocumentType;
+ const filteredDocumentsByFileStoreId = filteredDocumentsByDocumentType?.filter((item) => item?.fileStoreId !== uploadedFile);
+ return [
+ ...filteredDocumentsByFileStoreId,
+ {
+ documentType: selectedDocument?.code,
+ fileStoreId: uploadedFile,
+ documentUid: uploadedFile,
+ fileName: file?.name || "",
+ id: documents ? documents.find(x => x.documentType === selectedDocument?.code)?.id : undefined,
+ },
+ ];
+ });
+ }
+ }, [uploadedFile, selectedDocument]);
+
+ useEffect(() => {
+ (async () => {
+ if (selectArrayFiles.length > 0) {
+ sessionStorage.removeItem("BPA_DOCUMENTS");
+ doc.newUploadedDocs = [];
+ selectArrayFiles.map(newDoc => {
+ if (selectedDocument?.code) {
+ doc.newUploadedDocs.push({
+ documentType: selectedDocument?.code,
+ fileStoreId: newDoc?.fileStoreId?.fileStoreId,
+ documentUid: newDoc?.fileStoreId?.fileStoreId,
+ tenantId: newDoc?.fileStoreId?.tenantId
+ });
+ }
+ })
+ bpaTaxDocuments[index] = doc;
+ sessionStorage.setItem("BPA_DOCUMENTS", JSON.stringify(bpaTaxDocuments));
+ }
+ })();
+ }, [selectArrayFiles, selectedDocument]);
+
+ useEffect(() => {
+ (async () => {
+
+ })();
+ }, [file]);
+
+ const getData = (index, state) => {
+ let data = Object.fromEntries(state);
+ let newArr = Object.values(data);
+ if (Object.keys(data).length !== 0) SetSelectArrayFiles(newArr);
+ selectfiles(newArr[newArr.length - 1]);
+ }
+
+ return (
+
+
+ );
+ })}
+
+ {`${t(doc?.code)}`}
+ {doc?.uploadedDocuments?.length &&
+ );
+}
+
+export default BPADocuments;
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/DocumentsPreview.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/DocumentsPreview.js
new file mode 100644
index 00000000..dfd57683
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/DocumentsPreview.js
@@ -0,0 +1,49 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { CardSubHeader, PDFSvg } from "@egovernments/digit-ui-react-components";
+
+function DocumentsPreview({ documents, svgStyles = {}, isSendBackFlow = false, isHrLine = false, titleStyles }) {
+ const { t } = useTranslation();
+ const isStakeholderApplication = window.location.href.includes("stakeholder");
+
+ return (
+
+
+ {doc?.required ? `${t(doc?.code)}* ` : `${t(doc?.code)}`}
+
+
+
+
: null
+ }
+
+ getData(index, e)}
+ t={t}
+ allowedFileTypesRegex={allowedFileTypes}
+ allowedMaxSizeInMB={5}
+ acceptFiles= "image/*, .pdf, .png, .jpeg, .jpg"
+ />
+
+
+ {!isStakeholderApplication && documents?.map((document, index) => (
+
+ {document?.title ? {t(document?.title)} : null}
+
: null} +
+ ))}
+ {isStakeholderApplication && documents?.map((document, index) => (
+
+ {document?.title ? {t(document?.title)} : null}
+
+ ))}
+
+ );
+}
+
+export default DocumentsPreview;
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/InfoDetails.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/InfoDetails.js
new file mode 100644
index 00000000..12e2f64f
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/InfoDetails.js
@@ -0,0 +1,34 @@
+import React from "react";
+import { InfoBannerIcon } from "@egovernments/digit-ui-react-components";
+
+const EyeSvgINdex = ({ style }) => {
+ return
+
+
+
+}
+const InfoDetails = ({ t, userType = false, infoBannerLabel = "", infoClickLable = "", infoClickInfoLabel = "", infoClickInfoLabel1 = "" }) => {
+ userType = userType || Digit.SessionStorage.get("userType");
+ return (
+
+ {document?.values && document?.values.length > 0 ? document?.values?.map((value, index) => (
+
+ }
+
+ {isHrLine && documents?.length != index + 1 ?
+
+ {t(value?.title)}
+ {isSendBackFlow ? value?.documentType?.includes("NOC") ?{t(value?.documentType.split(".")[1])}
:{t(value?.documentType)}
: ""} + + )) : !(window.location.href.includes("citizen")) &&{t("BPA_NO_DOCUMENTS_UPLOADED_LABEL")}
: null} +
+ {document?.values && document?.values.length > 0 ? document?.values?.map((value, index) => (
+
+ }
+
+
+
+
+ )) : !(window.location.href.includes("citizen")) && {t(value?.title)}
+ {value?.docInfo ?{`${t(value?.docInfo)}`}
: null}
+ {`${t(value?.title)}`}
+{t("BPA_NO_DOCUMENTS_UPLOADED_LABEL")}
+
+
+
+
+
+ {`${t(infoClickLable)} `}
+ {t(infoBannerLabel)}
+
+ {` ${t(infoClickInfoLabel1)}`}
+
+
+ {isCitizen?{`${t(`BPA_FI_REPORT`)}`} :
+ {`${t(`BPA_FI_REPORT`)}`} }
+ {fiReport.map((fiData, index) =>
+
+
+
+ {fiReport?.length == 1 ? `${t(`BPA_FI_REPORT`)}` : `${t(`BPA_FI_REPORT`)} - ${index + 1}`}
+ |
+ |
+ {fiData?.questions?.length &&
+ fiData?.questions?.map((qstn) =>
+
+
)}
+
+ |
+ |
+
)}
+
+
+ {doc?.required ? `${t("TL_BUTTON_UPLOAD FILE")}*` : `${t("TL_BUTTON_UPLOAD FILE")}`}
+
+
+ );
+}
+const NOCDocuments = ({ t, noc, docs, isNoc, applicationData,NOCdata, bpaActionsDetails }) => {
+ const tenantId = Digit.ULBService.getStateId();
+ const stateId = Digit.ULBService.getStateId();
+ const bpaApplicationStatus = applicationData?.status || "";
+ const actions = bpaActionsDetails?.data?.nextActions || [];
+ const { isLoading: nocDocsLoading, data: nocDocs } = Digit.Hooks.obps.useMDMS(stateId, "NOC", ["DocumentTypeMapping"], { enabled: isNoc });
+ const { isLoading: bpaDocsLoading, data: bpaDocs } = Digit.Hooks.obps.useMDMS(stateId, "BPA", ["DocTypeMapping"], { enabled: !isNoc });
+ const { isLoading: commonDocsLoading, data: commonDocs } = Digit.Hooks.obps.useMDMS(stateId, "common-masters", ["DocumentType"]);
+ const [commonDocMaping, setCommonDocMaping] = useState([]);
+ const [nocTaxDocuments, setNocTaxDocuments] = useState([]);
+ const [checkEnablingDocs, setCheckEnablingDocs] = useState(false);
+ const [nocDocuments, setNocDocuments] = Digit.Hooks.useSessionStorage(noc?.nocType, []);
+ const [error, setError] = useState(null);
+ const isEmployee = window.location.href.includes("/employee/")
+
+ useEffect(() => {
+ setCommonDocMaping(commonDocs?.["common-masters"]?.DocumentType);
+ }, [commonDocs]);
+
+ useEffect(() => {
+ let documents = [];
+ let filteredData
+ if (isNoc) {
+ filteredData = nocDocs?.NOC?.DocumentTypeMapping?.filter((data => {
+ return data?.applicationType === noc?.applicationType && data?.nocType === noc?.nocType
+ }));
+ }
+ else {
+ filteredData = bpaDocs?.BPA?.DocTypeMapping?.filter(data => (data.WFState == applicationData?.status && data.RiskType == applicationData?.riskType && data.ServiceType == applicationData?.additionalDetails?.serviceType && data.applicationType == applicationData?.additionalDetails?.applicationType))
+ }
+ if (filteredData?.[0]?.docTypes?.[0]) {
+ filteredData[0].docTypes[0].nocType = filteredData[0].nocType;
+ filteredData[0].docTypes[0].additionalDetails = {
+ submissionDetails: noc?.additionalDetails,
+ applicationStatus: noc?.applicationStatus,
+ appNumberLink: noc?.applicationNo,
+ nocNo: noc?.nocNo
+ }
+ documents.push(filteredData[0].docTypes[0]);
+ }
+ let documentsList = [];
+ if (documents && documents.length > 0) {
+ documents.map((doc) => {
+ let code = doc.documentType;
+ let nocType = doc.nocType;
+ doc.dropdownData = [];
+ commonDocMaping?.forEach((value) => {
+ let values = value.code.slice(0, code?.length);
+ if (code === values) {
+ doc.hasDropdown = true;
+ doc.dropdownData.push(value);
+ }
+ });
+ documentsList.push(doc);
+ });
+ setNocTaxDocuments(documentsList);
+ }
+ }, [nocDocs, commonDocMaping]);
+
+ useEffect(() => {
+ if (bpaApplicationStatus === 'NOC_VERIFICATION_INPROGRESS' && actions?.length > 0) setCheckEnablingDocs(true);
+ else setCheckEnablingDocs(false);
+ }, [applicationData, bpaActionsDetails])
+
+ return (
+
+ getData(e)}
+ t={t}
+ allowedFileTypesRegex={allowedFileTypes}
+ allowedMaxSizeInMB={5}
+ acceptFiles="image/*, .pdf, .png, .jpeg, .jpg"
+ />
+
+
+
+ |
+ {NOCdata && NOCdata.map((noc,index) => {
+ if (noc?.value) {
+ if (noc?.field == "STATUS") {
+ return |
+ } else {
+ return |
+ }
+ }
+ })}
+
+
+ );
+}
+
+export default NOCDocuments;
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/PermissionCheck.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/PermissionCheck.js
new file mode 100644
index 00000000..89007789
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/PermissionCheck.js
@@ -0,0 +1,87 @@
+import { CheckBox, LinkButton, TextInput,Close, CardSubHeader } from "@egovernments/digit-ui-react-components";
+import React, { useEffect, useState } from "react";
+
+const PermissionCheck = ({ permissions, t }) => {
+ const [approvalChecks, setApprovalChecks, clearApprovals] = Digit.Hooks.useSessionStorage("OBPS_APPROVAL_CHECKS", permissions?.map(permission => ({ label: permission, checked: false }))); //useState(() => permissions?.map(permission => ({ label: permission, checked: false })))
+ const [newApprovals, setNewApprovals, clearNewApprovals] = Digit.Hooks.useSessionStorage('OBPS_NEW_APPROVALS', []);
+
+ useEffect(() => {
+ return () => {
+ Digit.SessionStorage.del("OBPS_NEW_APPROVALS");
+ Digit.SessionStorage.del("OBPS_APPROVAL_CHECKS");
+ }
+ }, [])
+
+ const handleAdd = () => {
+ setNewApprovals([...newApprovals, { label: '' }]);
+ }
+
+ const handleRemove = (index) => {
+ const values = [...newApprovals];
+ values.splice(index, 1);
+ setNewApprovals([...values]);
+ }
+
+ const handleChange = (event, index) => {
+ setNewApprovals(() => {
+ return newApprovals?.map((approval, id) => {
+ if (index === id) {
+ return {
+ label: event?.target?.value,
+ }
+ }
+ return approval;
+ })
+ })
+ }
+
+ const handleCheck = (event, label, index) => {
+ const isChecked = event.target.checked;
+ setApprovalChecks(() => {
+ return approvalChecks?.map((approval, id) => {
+ if (index === id) {
+ return {
+ ...approval,
+ checked: isChecked
+ }
+ }
+ return approval;
+ })
+ })
+ }
+
+ return (
+
+ {t("BPA_PERMIT_CONDITIONS")}
+ {approvalChecks?.map((permission, index) => (
+ handleCheck(event, permission?.label, index))}
+ isLabelFirst={true}
+ index={index}
+ />
+ ))}
+ {newApprovals?.map((approval, index) => (
+ handleChange(event, index)} textInputStyle={{maxWidth: "830px", width: "830px"}} placeholder={"Enter permit conditions.........."} />
+ {
+
+
+ }
+ style={{ }}
+ onClick={(e) => handleRemove(index)}
+ />}
+
+ ))}
+
+ {!isStakeholderApplication && documents?.map((document, index) => (
+
+ {document?.title ? {t(document?.title)} : null}
+
+ ))}
+ {isStakeholderApplication && documents?.map((document, index) => (
+
+ {document?.title ? {t(document?.title)} : null}
+
+ ))}
+
+ );
+}
+
+export default PropertyDocuments;
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/PropertyEstimates.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/PropertyEstimates.js
new file mode 100644
index 00000000..c4cde767
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/PropertyEstimates.js
@@ -0,0 +1,39 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { StatusTable, Row, BreakLine } from "@egovernments/digit-ui-react-components";
+
+function PropertyEstimates({ taxHeadEstimatesCalculation }) {
+ const { taxHeadEstimates } = taxHeadEstimatesCalculation;
+ const { t } = useTranslation();
+
+ return (
+
+ {document?.values && document?.values.length>0 ? document?.values?.map((value, index) => (
+
+ }
+
+
+
+ {t(value?.title)}
+ {isSendBackFlow? value?.documentType?.includes("NOC")?{t(value?.documentType.split(".")[1])}
:{t(value?.documentType)}
:""} + + )):!(window.location.href.includes("citizen"))&&{t("BPA_NO_DOCUMENTS_UPLOADED_LABEL")}
+ {document?.values && document?.values.length>0 ? document?.values?.map((value, index) => (
+
+ }
+
+
+
+
+ )):!(window.location.href.includes("citizen"))&& {t(value?.title)}
+ {value?.docInfo ?{`${t(value?.docInfo)}`}
: null}
+ {decodeURIComponent(pdfFiles[value.fileStoreId]?.split(",")[0].split("?")[0].split("/").pop().slice(13))}
*/}
+ {`${t(value?.title)}`}
+{t("BPA_NO_DOCUMENTS_UPLOADED_LABEL")}
+
+ |
+ |
+ );
+ })}
+ |
+
+
+ );
+}
+
+export default PropertyEstimates;
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/PropertyFloors.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/PropertyFloors.js
new file mode 100644
index 00000000..4f33bbdc
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/PropertyFloors.js
@@ -0,0 +1,49 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { CardSubHeader, StatusTable, Row, CardSectionHeader } from "@egovernments/digit-ui-react-components";
+
+function PropertyFloors({ floors }) {
+ const { t } = useTranslation();
+
+ return (
+
+ {t(floor?.title)}
+ {floor?.values?.map((value, index) => {
+ return (
+
+
+ {t(value.title)}
+
+
+
+
+ );
+ })}
+
+ ))}
+
+ {value?.values?.map((value, index) => {
+ if (value.map === true && value.value !== "N/A") {
+ return |
} />;
+ }
+ return (
+ |
+ );
+ })}
+
+
+ {/* TODO, Later will move to classes */}
+ 1
+ ? { marginBottom: "8px", paddingBottom: "9px", color: "#0B0C0C", fontSize: "16px", lineHeight: "19px" }
+ : { marginBottom: "8px", color: "#505A5F", fontSize: "24px" }
+ }
+ >
+ {checkLocation && Number(checkOwnerLength) > 1 ? `${t(owner?.title)} ${index + 1}` : t(owner?.title)}
+
+
+
+
+ {owner?.values?.map((value, index) => {
+ if (value.map === true && value.value !== "N/A") {
+ return |
} />;
+ }
+ return (
+
+ |
+
+ );
+ })}
+
+
+
+ ))}
+
+
+);
+
+export default Reason;
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/ScruntinyDetails.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/ScruntinyDetails.js
new file mode 100644
index 00000000..bde27623
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/ScruntinyDetails.js
@@ -0,0 +1,46 @@
+import { StatusTable, Row, PDFSvg, CardLabel, CardSubHeader } from "@egovernments/digit-ui-react-components";
+import React, { Fragment } from "react";
+import { useTranslation } from "react-i18next";
+
+const ScruntinyDetails = ({ scrutinyDetails, paymentsList=[] }) => {
+ const { t } = useTranslation();
+ let count = 0;
+ const getTextValues = (data) => {
+ if (data?.value && data?.isTransLate) return {t(data?.value)};
+ else if (data?.value && data?.isTransLate) return t(data?.value);
+ else if (data?.value) return data?.value;
+ else t("NA");
+ }
+ return (
+ {headComment}
+{otherComment}
+
+
+
+
}
+
+ {scrutinyDetails?.values?.map((value, index) => {
+ if (value?.isUnit) return |
+ else if (value?.isHeader && !value?.isUnit) return {t(value?.title)}
+ else if (value?.isSubTitle && !value?.isUnit) return {t(value?.title)}
+ else return |
+ })}
+ {scrutinyDetails?.permit?.map((value,ind) => {
+ return {value?.title}
+ })}
+
+
+
+
+ {edcrDetails?.values?.map((value, index) => {
+ if (value?.isHeader) return {t(value?.title)}
+ else return |
+ })}
+
+
+ {edcrDetails?.subOccupancyTableDetails?.[0]?.value?.planDetail?.blocks.map((block, index) => (
+
0 ? {marginBottom: "30px", background: "#FAFAFA", border: "1px solid #D6D5D4", padding: "8px", borderRadius: "4px", maxWidth: "950px", minWidth: "280px"} : {marginBottom: "30px"}}>
+ {t("BPA_BLOCK_SUBHEADER")} {index + 1}
+
+ |
+
+
+ { return { style: {} } }}
+ />
+
+ ))}
+
+
+ )
+}
+
+export default SubOccupancyTable;
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/SubWorkTableDetails.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/SubWorkTableDetails.js
new file mode 100644
index 00000000..08b89e68
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/SubWorkTableDetails.js
@@ -0,0 +1,77 @@
+import { EditIcon } from '@egovernments/digit-ui-react-components';
+import React from 'react'
+import { useTranslation } from "react-i18next";
+import { useHistory } from 'react-router-dom';
+
+const SubWorkTableDetails = ({data}) => {
+ const { t } = useTranslation();
+ const history = useHistory();
+ const getStyles = (index) => {
+ let obj = {}
+ switch (index) {
+ case 1:
+ obj = { "width": "1vw" }
+ break;
+ case 2:
+ obj = { "width": "60vw" }
+ break;
+ case 3:
+ obj = { "width": "20vw" }
+ break;
+ case 4:
+ obj = { "width": "10vw" }
+ break;
+ default:
+ obj = { "width": "1vw" }
+ break;
+ }
+ return obj
+ }
+ const renderHeader = (headers) => {
+ return headers?.map((key, index) => {
+ return
+
+
+ )
+}
+
+export default SubWorkTableDetails
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/TLCaption.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/TLCaption.js
new file mode 100644
index 00000000..e5fbcde2
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/TLCaption.js
@@ -0,0 +1,34 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { TelePhone, DisplayPhotos, UnMaskComponent } from "@egovernments/digit-ui-react-components";
+import Reason from "./Reason";
+
+const TLCaption = ({ data,OpenImage,privacy={}}) => {
+
+ const { t } = useTranslation();
+ return (
+
+ {units.map((unit, index) => (
+ // TODO, Later will move to classes
+
+ );
+}
+
+export default TLTradeAccessories;
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/TLTradeUnits.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/TLTradeUnits.js
new file mode 100644
index 00000000..bf1c1fbc
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/TLTradeUnits.js
@@ -0,0 +1,51 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { CardSubHeader, StatusTable, Row, CardSectionHeader } from "@egovernments/digit-ui-react-components";
+
+function TLTradeUnits({ units }) {
+ const { t } = useTranslation();
+ return (
+
+ {units.map((unit, index) => (
+ // TODO, Later will move to classes
+
+ );
+}
+
+export default TLTradeUnits;
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/ViewBreakup.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/ViewBreakup.js
new file mode 100644
index 00000000..5608aeb2
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/ViewBreakup.js
@@ -0,0 +1,73 @@
+import React, { useState, Fragment } from "react";
+import { useTranslation } from "react-i18next";
+import { CardSectionHeader, Modal, Row, StatusTable } from "@egovernments/digit-ui-react-components";
+
+const ViewBreakup = ({ wsAdditionalDetails, workflowDetails }) => {
+ const { t } = useTranslation();
+ const [popup, showPopUp] = useState(false);
+ const [breakUpData, setBreakUpData] = useState({});
+
+ const Heading = (props) => {
+ return
+
+ )
+}
+
+export default ViewBreakup;
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/WSAdditonalDetails.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/WSAdditonalDetails.js
new file mode 100644
index 00000000..06814062
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/WSAdditonalDetails.js
@@ -0,0 +1,399 @@
+import { StatusTable, Row, CardSubHeader } from "@egovernments/digit-ui-react-components";
+import React, { Fragment } from "react";
+import { useTranslation } from "react-i18next";
+import { getQueryStringParams } from "../../../ws/src/utils";
+
+const cardSubHeaderStyles = () => {
+ // return { fontSize: "24px", padding: "0px", margin: "0px", color: "#505A5F" };
+ return { fontSize: "24px", marginBottom: "16px", marginTop: "32px" };
+};
+
+const cardDivStyles = () => {
+ return {
+ border: "1px solid #D6D5D4",
+ background: "#FAFAFA",
+ borderRadius: "4px",
+ padding: "10px 10px 0px 10px",
+ marginBottom: "10px",
+ display: "flex",
+ };
+};
+
+const convertEpochToDate = (dateEpoch) => {
+ if (dateEpoch) {
+ const dateFromApi = new Date(dateEpoch);
+ let month = dateFromApi.getMonth() + 1;
+ let day = dateFromApi.getDate();
+ let year = dateFromApi.getFullYear();
+ month = (month > 9 ? "" : "0") + month;
+ day = (day > 9 ? "" : "0") + day;
+ return `${day}/${month}/${year}`;
+ } else {
+ return null;
+ }
+};
+
+const WSAdditonalDetails = ({ wsAdditionalDetails, oldValue }) => {
+ const { t } = useTranslation();
+ let filters = getQueryStringParams(location.search);
+ const serviceType = filters?.service;
+ const isModify = filters?.mode;
+
+ const oldValueData = oldValue?.[1];
+
+ const stringReplaceAll = (str = "", searcher = "", replaceWith = "") => {
+ if (searcher == "") return str;
+ while (str.includes(searcher)) {
+ str = str.replace(searcher, replaceWith);
+ }
+ return str;
+ };
+
+ const renderSWConnectionDetails = () => {
+ return (
+
+
+ );
+};
+
+export default WSAdditonalDetails;
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/WSFeeEstimation.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/WSFeeEstimation.js
new file mode 100644
index 00000000..9a4fe591
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/WSFeeEstimation.js
@@ -0,0 +1,346 @@
+import React, { useState, Fragment, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Card, CardSectionHeader, CardLabel } from "@egovernments/digit-ui-react-components";
+import { Modal, Dropdown, Row, StatusTable, TextInput, Toast } from "@egovernments/digit-ui-react-components";
+import cloneDeep from "lodash/cloneDeep";
+
+const Penality_menu = [
+ {
+ title: "PT_PENDING_DUES_FROM_EARLIER",
+ value: "Pending dues from earlier",
+ },
+ {
+ title: "PT_MISCALCULATION_OF_EARLIER_ASSESSMENT",
+ value: "Miscalculation of earlier Assessment",
+ },
+ {
+ title: "PT_ONE_TIME_PENALITY",
+ value: "One time penality",
+ },
+ {
+ title: "PT_OTHERS",
+ value: "Others",
+ },
+]
+const Rebate_menu = [
+ {
+ title: "PT_ADVANCED_PAID_BY_CITIZEN_EARLIER",
+ value: "Advanced Paid By Citizen Earlier",
+ },
+ {
+ title: "PT_REBATE_PROVIDED_BY_COMMISSIONER_EO",
+ value: "Rebate provided by commissioner/EO",
+ },
+ {
+ title: "PT_ADDITIONAL_AMOUNT_CHARGED_FROM_THE_CITIZEN",
+ value: "Additional amount charged from the citizen",
+ },
+ {
+ title: "PT_OTHERS",
+ value: "Others",
+ },
+];
+
+
+const WSFeeEstimation = ({ wsAdditionalDetails, workflowDetails }) => {
+ const { t } = useTranslation();
+ const [sessionFormData, setSessionFormData, clearSessionFormData] = Digit.Hooks.useSessionStorage("ADHOC_ADD_REBATE_DATA", {});
+ const [sessionBillFormData, setSessionBillFormData, clearBillSessionFormData] = Digit.Hooks.useSessionStorage("ADHOC_BILL_ADD_REBATE_DATA", {});
+ const isPaid = wsAdditionalDetails?.additionalDetails?.isPaid ? true : false;
+ const [popup, showPopUp] = useState(false);
+ const [fields, setFields] = useState(sessionFormData ? sessionFormData : {});
+ const [showToast, setShowToast] = useState(null);
+ const [billDetails, setBillDetails] = useState(wsAdditionalDetails.additionalDetails.data ? wsAdditionalDetails.additionalDetails.data : {});
+ const [values, setValues] = useState(wsAdditionalDetails.additionalDetails.values ? wsAdditionalDetails.additionalDetails.values : []);
+
+ const stateCode = Digit.ULBService.getStateId();
+ const { isMdmsLoading, data: mdmsRes } = Digit.Hooks.ws.useMDMS(stateCode, "BillingService", ["TaxHeadMaster"]);
+
+ useEffect(() => {
+ const data = { ...wsAdditionalDetails?.additionalDetails?.appDetails?.additionalDetails };
+ setSessionFormData(data);
+ setFields(data);
+ if (sessionFormData?.billDetails?.length > 0) {
+ const values = [
+ { title: "WS_APPLICATION_FEE_HEADER", value: sessionFormData?.billDetails?.[0]?.fee },
+ { title: "WS_SERVICE_FEE_HEADER", value: sessionFormData?.billDetails?.[0]?.charge },
+ { title: "WS_TAX_HEADER", value: sessionFormData?.billDetails?.[0]?.taxAmount },
+ ];
+ setValues(values);
+ setBillDetails(sessionFormData?.billDetails?.[0]);
+ }
+ }, []);
+
+ let validation = {};
+
+ const Heading = (props) => {
+ return
+
+ )
+}
+
+export default WSFeeEstimation;
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/WeekDateRange.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/WeekDateRange.js
new file mode 100644
index 00000000..75069dd7
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/WeekDateRange.js
@@ -0,0 +1,30 @@
+import React, { useCallback, useState } from "react";
+import { useTranslation } from "react-i18next";
+
+const WeekDateRange = (props) => {
+ const [localSearchParams, setLocalSearchParams] = useState(() => ({}));
+ const { t } = useTranslation();
+ const handleChange = useCallback((data) => {
+ setLocalSearchParams(() => ({ ...data }));
+ }, []);
+
+ return (
+
+ {getFilteredDsoData(dsoData, vehicle) && !getFilteredDsoData(dsoData, vehicle).length ? (
+ {t("ES_COMMON_NO_DSO_AVAILABLE_WITH_SUCH_VEHICLE")}
+ ) : null}
+
+ ),
+ },
+ {
+ label: t("ES_FSM_ACTION_VEHICLE_CAPACITY_IN_LTRS"),
+ isMandatory: true,
+ type: "text",
+ populators: {
+ name: "capacity",
+ validation: {
+ required: true,
+ },
+ },
+ disable: true,
+ },
+ // {
+ // label: t("ES_FSM_ACTION_SERVICE_DATE"),
+ // isMandatory: true,
+ // type: "date",
+ // populators: {
+ // name: "date",
+ // validation: {
+ // required: true,
+ // },
+ // min: Digit.Utils.date.getDate(),
+ // defaultValue: Digit.Utils.date.getDate(),
+ // },
+ // },
+ {
+ label: t("ES_FSM_ACTION_SERVICE_DATE"),
+ isMandatory: true,
+ type: "custom",
+ populators: {
+ name: "date",
+ validation: {
+ required: true,
+ },
+ customProps: { min: Digit.Utils.date.getDate() },
+ defaultValue: Digit.Utils.date.getDate(),
+ component: (props, customProps) => {
+ setUploadedFile(null);
+ }}
+ message={uploadedFile ? `1 ${t(`ES_PT_ACTION_FILEUPLOADED`)}` : t(`CS_ACTION_NO_FILEUPLOADED`)}
+ accept= "image/*, .pdf, .png, .jpeg, .jpg"
+ iserror={error}
+ />
+ ),
+ },
+ ],
+ },
+ ],
+ };
+};
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/BPAREGApproverApplication.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/BPAREGApproverApplication.js
new file mode 100644
index 00000000..0bdba14b
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/BPAREGApproverApplication.js
@@ -0,0 +1,71 @@
+import { Dropdown, UploadFile } from "@egovernments/digit-ui-react-components";
+import React from "react";
+
+export const configBPAREGApproverApplication = ({
+ t,
+ action,
+ approvers,
+ selectedApprover,
+ setSelectedApprover,
+ selectFile,
+ uploadedFile,
+ setUploadedFile,
+ assigneeLabel,
+ businessService,
+ error
+}) => {
+ let checkCondtions = true;
+ if (action?.action == "SENDBACKTOCITIZEN") checkCondtions = false;
+ if (action.isTerminateState) checkCondtions = false;
+
+ return {
+ label: {
+ heading: `WF_${action?.action}_APPLICATION`,
+ submit: `WF_${businessService?.toUpperCase()}_${action?.action}`,
+ cancel: "WF_EMPLOYEE_BPAREG_CANCEL",
+ },
+ form: [
+ {
+ body: [
+ {
+ label: !checkCondtions ? null : t("WF_ASSIGNEE_NAME_LABEL"),
+ placeholder: !checkCondtions ? null : t("WF_ASSIGNEE_NAME_PLACEHOLDER"),
+ type: "dropdown",
+ populators: !checkCondtions ? null : (
+ {
+ setUploadedFile(null);
+ }}
+ message={uploadedFile ? `1 ${t(`ES_PT_ACTION_FILEUPLOADED`)}` : t(`CS_ACTION_NO_FILEUPLOADED`)}
+ accept= "image/*, .pdf, .png, .jpeg, .jpg"
+ iserror={error}
+ />
+ )
+ },
+ ],
+ },
+ ],
+ };
+};
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/CompleteApplication.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/CompleteApplication.js
new file mode 100644
index 00000000..a4c7c96b
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/CompleteApplication.js
@@ -0,0 +1,46 @@
+import React from "react";
+import { DatePicker } from "@egovernments/digit-ui-react-components";
+
+export const configCompleteApplication = ({ t, vehicle, applicationCreatedTime = 0, action }) => ({
+ label: {
+ heading: `ES_FSM_ACTION_TITLE_${action}`,
+ submit: `CS_COMMON_${action}`,
+ cancel: "CS_COMMON_CANCEL",
+ },
+ form: [
+ {
+ body: [
+ {
+ label: t("ES_FSM_ACTION_DESLUGED_DATE_LABEL"),
+ isMandatory: true,
+ type: "custom",
+ populators: {
+ name: "desluged",
+ validation: {
+ required: true,
+ },
+ defaultValue: Digit.Utils.date.getDate(),
+ customProps: {
+ min: Digit.Utils.date.getDate(applicationCreatedTime),
+ max: Digit.Utils.date.getDate(),
+ },
+ component: (props, customProps) => {
+ setUploadedFile(null);
+ }}
+ showHint={true}
+ message={uploadedFile ? `1 ${t(`ES_PT_ACTION_FILEUPLOADED`)}` : t(`CS_ACTION_NO_FILEUPLOADED`)}
+ accept= "image/*, .pdf, .png, .jpeg, .jpg"
+ iserror={error}
+ />
+ ),
+ },
+ ],
+ },
+ ],
+ };
+};
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/PTApproverApplication.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/PTApproverApplication.js
new file mode 100644
index 00000000..afcc6a19
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/PTApproverApplication.js
@@ -0,0 +1,66 @@
+import { Dropdown, UploadFile } from "@egovernments/digit-ui-react-components";
+import React from "react";
+
+export const configPTApproverApplication = ({
+ t,
+ action,
+ approvers,
+ selectedApprover,
+ setSelectedApprover,
+ selectFile,
+ uploadedFile,
+ setUploadedFile,
+ assigneeLabel,
+ businessService,
+}) => {
+ return {
+ label: {
+ heading: `WF_${action?.action}_APPLICATION`,
+ submit: `WF_${businessService}_${action?.action}`,
+ cancel: "ES_PT_COMMON_CANCEL",
+ },
+ form: [
+ {
+ body: [
+ {
+ label: action.isTerminateState || action?.action === "SENDBACKTOCITIZEN" ? null : t(assigneeLabel || `WF_ROLE_${action.assigneeRoles?.[0]}`),
+ // isMandatory: !action.isTerminateState,
+ type: "dropdown",
+ populators: action.isTerminateState || action?.action === "SENDBACKTOCITIZEN" ? null : (
+ {
+ setUploadedFile(null);
+ }}
+ showHint={true}
+ hintText={t("PT_ATTACH_RESTRICTIONS_SIZE")}
+ message={uploadedFile ? `1 ${t(`ES_PT_ACTION_FILEUPLOADED`)}` : t(`ES_PT_ACTION_NO_FILEUPLOADED`)}
+ />
+ ),
+ },
+ ],
+ },
+ ],
+ };
+};
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/PTAssessProperty.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/PTAssessProperty.js
new file mode 100644
index 00000000..dd04037a
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/PTAssessProperty.js
@@ -0,0 +1,26 @@
+import React from "react";
+import { RadioButtons } from "@egovernments/digit-ui-react-components";
+
+export const configPTAssessProperty = ({ t, action, financialYears, selectedFinancialYear, setSelectedFinancialYear }) => {
+ return {
+ label: {
+ heading: `WF_${action.action}_APPLICATION`,
+ submit: `WF_PT.CREATE_${action.action}`,
+ cancel: "ES_PT_COMMON_CANCEL",
+ },
+ form: [
+ {
+ body: [
+ {
+ label: t("ES_PT_FINANCIAL_YEARS"),
+ isMandatory: true,
+ type: "radio",
+ populators: (
+ {
+ setUploadedFile(null);
+ }}
+ message={uploadedFile ? `1 ${t(`ES_PT_ACTION_FILEUPLOADED`)}` : t(`CS_ACTION_NO_FILEUPLOADED`)}
+ />
+ )
+ },
+ // {
+ // label: action.docUploadRequired ? t("ES_PT_UPLOAD_FILE") : null,
+ // populators: action.docUploadRequired ? (
+ // {
+ // setUploadedFile(null);
+ // }}
+ // message={uploadedFile ? `1 ${t(`ES_PT_ACTION_FILEUPLOADED`)}` : t(`ES_PT_ACTION_NO_FILEUPLOADED`)}
+ // />
+ // ) : null,
+ // },
+ ],
+ },
+ ],
+ };
+};
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/WSApproverApplication.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/WSApproverApplication.js
new file mode 100644
index 00000000..2f5f2d45
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/WSApproverApplication.js
@@ -0,0 +1,73 @@
+import { Dropdown, UploadFile } from "@egovernments/digit-ui-react-components";
+import React from "react";
+
+export const configWSApproverApplication = ({
+ t,
+ action,
+ approvers,
+ selectedApprover,
+ setSelectedApprover,
+ selectFile,
+ uploadedFile,
+ setUploadedFile,
+ assigneeLabel,
+ businessService,
+ error
+}) => {
+ let checkCondtions = true;
+ if (action?.action?.includes("SEND_BACK") || action?.action == "APPROVE_FOR_CONNECTION") checkCondtions = false;
+ if (action.isTerminateState) checkCondtions = false;
+
+ return {
+ label: {
+ heading: `WF_${action?.action}_APPLICATION`,
+ submit: `WF_${businessService?.toUpperCase()}_${action?.action}`,
+ cancel: "CS_COMMON_CANCEL",
+ },
+ form: [
+ {
+ body: [
+ {
+ label: !checkCondtions ? null : t("WF_ASSIGNEE_NAME_LABEL"),
+ placeholder: !checkCondtions ? null : t("WF_ASSIGNEE_NAME_PLACEHOLDER"),
+ // isMandatory: false,
+ type: "dropdown",
+ populators: !checkCondtions ? null : (
+ {
+ setUploadedFile(null);
+ }}
+ message={uploadedFile ? `1 ${t(`ES_PT_ACTION_FILEUPLOADED`)}` : t(`CS_ACTION_NO_FILEUPLOADED`)}
+ error={error}
+ iserror={error}
+ />
+ )
+ },
+ ],
+ },
+ ],
+ };
+};
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/WSDisconnectApplication.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/WSDisconnectApplication.js
new file mode 100644
index 00000000..5acdcebe
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/WSDisconnectApplication.js
@@ -0,0 +1,89 @@
+import { Dropdown, UploadFile, DatePicker } from "@egovernments/digit-ui-react-components";
+import React from "react";
+
+export const configWSDisConnectApplication = ({
+ t,
+ action,
+ approvers,
+ selectedApprover,
+ setSelectedApprover,
+ selectFile,
+ uploadedFile,
+ setUploadedFile,
+ assigneeLabel,
+ businessService,
+ error
+}) => {
+ let checkCondtions = true, isDatePickerDisplay = false;
+ if (action?.action?.includes("SEND_BACK") || action?.action == "APPROVE_FOR_DISCONNECTION" || action?.action == "RESUBMIT_APPLICATION") checkCondtions = false;
+ if (action.isTerminateState) checkCondtions = false;
+ if (action?.action == "EXECUTE_DISCONNECTION" || action?.action == "DISCONNECTION_EXECUTED") isDatePickerDisplay = true;
+
+
+ return {
+ label: {
+ heading: `WF_${action?.action}_APPLICATION`,
+ submit: `WF_${businessService?.toUpperCase()}_${action?.action}`,
+ cancel: "CS_COMMON_CANCEL",
+ },
+ form: [
+ {
+ body: [
+ {
+ label: !checkCondtions ? null : t("WF_ASSIGNEE_NAME_LABEL"),
+ placeholder: !checkCondtions ? null : t("WF_ASSIGNEE_NAME_PLACEHOLDER"),
+ // isMandatory: false,
+ type: "dropdown",
+ populators: !checkCondtions ? null : (
+ {
+ setUploadedFile(null);
+ }}
+ message={uploadedFile ? `1 ${t(`ES_PT_ACTION_FILEUPLOADED`)}` : t(`CS_ACTION_NO_FILEUPLOADED`)}
+ error={error}
+ iserror={error}
+ />
+ )
+ },
+ ],
+ },
+ ],
+ };
+};
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/configApproveModal.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/configApproveModal.js
new file mode 100644
index 00000000..03beb885
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/configApproveModal.js
@@ -0,0 +1,53 @@
+import { Dropdown } from '@egovernments/digit-ui-react-components';
+import React, { useState } from 'react'
+
+const configApproveModal = ({
+ t,
+ action
+}) => {
+ if(action?.action === 'ADMINSANCTION'){
+ return {
+ label: {
+ heading: `WORKS_APPROVE_ESTIMATE`,
+ submit: `WORKS_APPROVE_ESTIMATE`,
+ cancel: "CS_COMMON_CANCEL",
+ },
+ form: [
+ {
+ body: [
+ {
+ label: t("WF_COMMON_COMMENTS"),
+ type: "textarea",
+ populators: {
+ name: "comments",
+ },
+ },
+ ]
+ }
+ ]
+ }
+
+ }else
+ return {
+ label: {
+ heading: `WORKS_APPROVE_LOI`,
+ submit: `WORKS_APPROVE_LOI`,
+ cancel: "CS_COMMON_CANCEL",
+ },
+ form: [
+ {
+ body: [
+ {
+ label: t("WF_COMMON_COMMENTS"),
+ type: "textarea",
+ populators: {
+ name: "comments",
+ },
+ },
+ ]
+ }
+ ]
+ }
+}
+
+export default configApproveModal
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/configAttendanceApproveModal.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/configAttendanceApproveModal.js
new file mode 100644
index 00000000..06a29a26
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/configAttendanceApproveModal.js
@@ -0,0 +1,27 @@
+
+const configAttendanceApproveModal = ({ t, action }) => {
+ if (action?.applicationStatus === "APPROVED") {
+ return {
+ label: {
+ heading: t("ATM_PROCESSINGMODAL_HEADER"),
+ submit: t("ATM_FORWARD_FOR_APPROVAL"),
+ cancel: t("CS_COMMON_CANCEL"),
+ },
+ form: [
+ {
+ body: [
+ {
+ label: t("WF_COMMON_COMMENTS"),
+ type: "textarea",
+ populators: {
+ name: "comments",
+ },
+ },
+ ],
+ },
+ ]
+ };
+ }
+};
+
+export default configAttendanceApproveModal;
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/configAttendanceCheckModal.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/configAttendanceCheckModal.js
new file mode 100644
index 00000000..374219cc
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/configAttendanceCheckModal.js
@@ -0,0 +1,93 @@
+const configAttendanceCheckModal = ({
+ t,
+ action,
+ businessService,
+ approvers,
+ selectedApprover,
+ setSelectedApprover,
+ designation,
+ selectedDesignation,
+ setSelectedDesignation,
+ department,
+ selectedDept,
+ setSelectedDept,
+ approverLoading = false,
+}) => {
+ let checkConditions = true;
+ if (action.isTerminateState) checkConditions = false;
+
+ if (designation?.length === 0 || department?.length === 0) return {};
+
+ if (action?.applicationStatus === "ATTENDANCE_CHECKED") {
+ return {
+ label: {
+ heading: t("ATM_PROCESSINGMODAL_HEADER"),
+ submit: t("ATM_FORWARD_FOR_CHECK"),
+ cancel: t("WORKS_CANCEL"),
+ },
+ form: [
+ {
+ body: [
+ {
+ isMandatory: true,
+ key: "department",
+ type: "radioordropdown",
+ label: !checkConditions ? null : t("ATM_APPROVER_DEPT"),
+ disable: false,
+ populators: {
+ name: "department",
+ optionsKey: "i18nKey",
+ error: "Department is required",
+ required: true,
+ options: department,
+ },
+ },
+ {
+ isMandatory: true,
+ key: "designation",
+ type: "radioordropdown",
+ label: !checkConditions ? null : t("ATM_APPROVER_DESIGNATION"),
+ disable: false,
+ populators: {
+ name: "designation",
+ optionsKey: "i18nKey",
+ error: "Designation is required",
+ required: true,
+ options: designation,
+ },
+ },
+ {
+ isMandatory: true,
+ key: "approvers",
+ type: "radioordropdown",
+ label: !checkConditions ? null : t("WORKS_APPROVER"),
+ disable: false,
+ populators: {
+ name: "approvers",
+ optionsKey: "nameOfEmp",
+ error: "Designation is required",
+ required: true,
+ options: approvers,
+ },
+ },
+ {
+ label: t("WF_COMMON_COMMENTS"),
+ type: "textarea",
+ populators: {
+ name: "comments",
+ },
+ },
+ ],
+ },
+ ],
+ defaultValues: {
+ department: "",
+ designation: "",
+ approvers: "",
+ comments: "",
+ },
+ };
+ }
+};
+
+export default configAttendanceCheckModal;
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/configAttendanceRejectModal.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/configAttendanceRejectModal.js
new file mode 100644
index 00000000..c732127a
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/configAttendanceRejectModal.js
@@ -0,0 +1,61 @@
+import { LabelFieldPair,CardLabel} from '@egovernments/digit-ui-react-components';
+import React from 'react'
+
+const configAttendanceRejectModal = ({
+ t,
+ empDepartment,
+ empDesignation,
+ empName
+}) => {
+
+ const fieldLabelStyle = {
+ "display" : "grid",
+ "gridTemplateColumns" : "60% 1fr"
+ };
+
+ return {
+ label: {
+ heading: t("ATM_PROCESSINGMODAL_HEADER"),
+ submit: t("ATM_CONFIRM_REJECT"),
+ cancel: t("CS_COMMON_CANCEL"),
+ },
+ form: [
+ {
+ body: [
+ {
+ withoutLabel:true,
+ populators:
+ {t("ATM_DEPARTMENT")}
+ {empDepartment}
+ ,
+ },
+ {
+ withoutLabel:true,
+ populators:
+ {t("ATM_DESIGNATION")}
+ {empDesignation}
+ ,
+ },
+ {
+ withoutLabel:true,
+ populators:
+ {t("ATM_REJECTED_BY")}
+ {empName}
+ ,
+ },
+ {
+ label: t("WF_COMMON_COMMENTS"),
+ type: "textarea",
+ key: "org_name",
+ populators: {
+ name: "comments",
+ },
+ },
+ ]
+ }
+ ]
+ }
+
+}
+
+export default configAttendanceRejectModal
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/configCheckModal.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/configCheckModal.js
new file mode 100644
index 00000000..c267eb9f
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/configCheckModal.js
@@ -0,0 +1,105 @@
+import { Dropdown,Loader } from '@egovernments/digit-ui-react-components';
+import React,{useState} from 'react'
+
+const configCheckModal = ({
+ t,
+ action,
+ businessService,
+ approvers,
+ selectedApprover,
+ setSelectedApprover,
+ designation,
+ selectedDesignation,
+ setSelectedDesignation,
+ department,
+ selectedDept,
+ setSelectedDept,
+ approverLoading=false,
+}) => {
+
+ let checkConditions = true
+ if (action.isTerminateState) checkConditions = false;
+
+ if(designation?.length===0 || department?.length===0) return {}
+
+ return {
+ label: {
+ heading: `WORKS_CHECK_FORWARD`,
+ submit: `WORKS_FORWARD_FOR_APPROVAL`,
+ cancel: "WORKS_CANCEL",
+ },
+ form: [
+ {
+ body:[
+ {
+ label: !checkConditions ? null : t("WORKS_APPROVER_DEPT"),
+ placeholder: !checkConditions ? null : t("WF_ASSIGNEE_NAME_PLACEHOLDER"),
+ isMandatory: true,
+ type: "goToDefaultCase",
+ populators: !checkConditions ? null : (
+ {
+ setSelectedDept(val)
+ setSelectedApprover("")
+ //setValue()
+ }}
+ selected={selectedDept}
+ t={t}
+ />
+ ),
+ },
+ {
+ label: !checkConditions ? null : t("WORKS_APPROVER_DESIGNATION"),
+ //placeholder: !checkConditions ? null : t("WF_ASSIGNEE_NAME_PLACEHOLDER"),
+ isMandatory: true,
+ type: "goToDefaultCase",
+ populators: !checkConditions ? null : (
+ {
+ setSelectedDesignation(val)
+ setSelectedApprover("")
+ //resetting approver dropdown when dept/designation changes
+ }}
+ selected={selectedDesignation}
+ t={t}
+ />
+ ),
+ },
+ {
+ label: !checkConditions ? null : t("WORKS_APPROVER"),
+ //placeholder: !checkConditions ? null : t("WF_ASSIGNEE_NAME_PLACEHOLDER"),
+ isMandatory: true,
+ type: "goToDefaultCase",
+ populators: !checkConditions ? null : (
+ approverLoading ?
+ {t("WORKS_DEPARTMENT")}
+ {"ENGG"}
+ ,
+ },
+ {
+ //label: t("WORKS_LOI_ID"),
+ //type: "text",
+ withoutLabel: true,
+ populators:
+ {t("WORKS_LOI_ID")}
+ {loiNumber}
+
+ },
+ {
+ label: !checkConditions ? null : t("WORKS_REJECT_REASON"),
+ //placeholder: !checkConditions ? null : t("WF_ASSIGNEE_NAME_PLACEHOLDER"),
+ // isMandatory: false,
+ type: "goToDefaultCase",
+ populators: !checkConditions ? null : (
+
+ {t("WORKS_DEPARTMENT")}
+ {"ENGG"}
+ ,
+ },
+ {
+ //label: t("WORKS_LOI_ID"),
+ //type: "text",
+ withoutLabel: true,
+ populators:
+ {t("WORKS_ESTIMATE_ID")}
+ {estimateNumber}
+
+ },
+ {
+ label: !checkConditions ? null : t("WORKS_REJECT_REASON"),
+ //placeholder: !checkConditions ? null : t("WF_ASSIGNEE_NAME_PLACEHOLDER"),
+ // isMandatory: false,
+ type: "goToDefaultCase",
+ populators: !checkConditions ? null : (
+
+ {t("EXP_DEPARTMENT")}
+ Engineering
+ ,
+ },
+ {
+ withoutLabel:true,
+ populators:
+ {t("EXP_DESIGNATION")}
+ Junior Engineer
+ ,
+ },
+ {
+ withoutLabel:true,
+ populators:
+ {t("EXP_APPROVER")}
+ {"RASHMI"}
+ ,
+ },
+ {
+ label: t("WF_COMMON_COMMENTS"),
+ type: "textarea",
+ populators: {
+ name: "comments",
+ },
+ },
+ ],
+ },
+ ],
+ defaultValues: {
+ comments: "",
+ },
+ };
+}
+
+export default configViewBillApprovalModal
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/configViewBillCheckModal.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/configViewBillCheckModal.js
new file mode 100644
index 00000000..53204b28
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/configViewBillCheckModal.js
@@ -0,0 +1,107 @@
+import { Dropdown, Loader } from '@egovernments/digit-ui-react-components';
+import React, { useState } from 'react'
+
+const configViewBillCheckModal = ({
+ t,
+ approvers,
+ selectedApprover,
+ setSelectedApprover,
+ designation,
+ selectedDesignation,
+ setSelectedDesignation,
+ department,
+ selectedDept,
+ setSelectedDept,
+ approverLoading = false,
+}) => {
+
+ let checkConditions = true
+
+
+ if (designation?.length === 0 || department?.length === 0) return {}
+
+ return {
+ label: {
+ heading: t("EXP_FORWARD_BILL_FOR_APPROVAL"),
+ submit: t("EXP_FORWARD_BILL_FOR_APPROVAL"),
+ cancel: t("CS_COMMON_CANCEL"),
+ },
+ form: [
+ {
+ body: [
+ {
+ label: !checkConditions ? null : t("WORKS_APPROVER_DEPT"),
+ placeholder: !checkConditions ? null : t("WF_ASSIGNEE_NAME_PLACEHOLDER"),
+ isMandatory: true,
+ type: "goToDefaultCase",
+ populators: !checkConditions ? null : (
+ {
+ setSelectedDept(val)
+ setSelectedApprover("")
+ //setValue()
+ }}
+ selected={selectedDept}
+ t={t}
+ />
+ ),
+ },
+ {
+ label: !checkConditions ? null : t("WORKS_APPROVER_DESIGNATION"),
+ //placeholder: !checkConditions ? null : t("WF_ASSIGNEE_NAME_PLACEHOLDER"),
+ isMandatory: true,
+ type: "goToDefaultCase",
+ name: "designation",
+ populators: !checkConditions ? null : (
+ {
+ setSelectedDesignation(val)
+ setSelectedApprover("")
+ //resetting approver dropdown when dept/designation changes
+ }}
+ selected={selectedDesignation}
+ t={t}
+ />
+ ),
+ },
+ {
+ label: !checkConditions ? null : t("WORKS_APPROVER"),
+ //placeholder: !checkConditions ? null : t("WF_ASSIGNEE_NAME_PLACEHOLDER"),
+ isMandatory: true,
+ type: "goToDefaultCase",
+ populators: !checkConditions ? null : (
+ approverLoading ?
+ {t("EXP_DEPARTMENT")}
+ Engineering
+ ,
+ },
+ {
+ withoutLabel:true,
+ populators:
+ {t("EXP_DESIGNATION")}
+ Junior Engineer
+ ,
+ },
+ {
+ withoutLabel:true,
+ populators:
+ {t("EXP_REJECTED_BY")}
+ {"RASHMI"}
+ ,
+ },
+ {
+ label: t("WF_COMMON_COMMENTS"),
+ type: "textarea",
+ populators: {
+ name: "comments",
+ },
+ },
+ ]
+ }
+ ],
+ defaultValues : {
+ comments : "",
+ }
+ }
+}
+
+export default configViewBillRejectModal
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/index.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/index.js
new file mode 100644
index 00000000..a736b8ed
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/index.js
@@ -0,0 +1,47 @@
+import { configAssignDso } from "./AssignDso";
+import { configCompleteApplication } from "./CompleteApplication";
+import { configReassignDSO } from "./ReassignDso";
+import { configRejectApplication } from "./RejectApplication";
+import { configAcceptDso } from "./AcceptDso";
+import { configPTApproverApplication } from "./PTApproverApplication";
+import { configPTAssessProperty } from "./PTAssessProperty";
+import { configTLApproverApplication } from "./TLApproverApplication";
+import { configBPAREGApproverApplication } from "./BPAREGApproverApplication";
+import { configBPAApproverApplication } from "./BPAApproverApplication";
+import { configNOCApproverApplication } from "./NOCApproverApplication";
+import { configWSApproverApplication } from "./WSApproverApplication";
+import { configWSDisConnectApplication } from "./WSDisconnectApplication";
+import configCheckModal from "./configCheckModal"
+import configApproveModal from "./configApproveModal"
+import configRejectModal from "./configRejectModal"
+import configAttendanceApproveModal from "./configAttendanceApproveModal";
+import configAttendanceCheckModal from "./configAttendanceCheckModal";
+import configAttendanceRejectModal from "./configAttendanceRejectModal";
+import configViewBillApproveModal from "./configViewBillApproveModal";
+import configViewBillCheckModal from "./configViewBillCheckModal";
+import configViewBillRejectModal from "./configViewBillRejectModal";
+
+export {
+ configAttendanceRejectModal,
+ configAttendanceCheckModal,
+ configAttendanceApproveModal,
+ configCheckModal,
+ configApproveModal,
+ configRejectModal,
+ configAssignDso,
+ configCompleteApplication,
+ configReassignDSO,
+ configRejectApplication,
+ configAcceptDso,
+ configPTApproverApplication,
+ configPTAssessProperty,
+ configTLApproverApplication,
+ configBPAREGApproverApplication,
+ configBPAApproverApplication,
+ configNOCApproverApplication,
+ configWSApproverApplication,
+ configWSDisConnectApplication,
+ configViewBillRejectModal,
+ configViewBillCheckModal,
+ configViewBillApproveModal
+};
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/index.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/index.js
new file mode 100644
index 00000000..feb622ab
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/index.js
@@ -0,0 +1,368 @@
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useQueryClient } from "react-query";
+import { format } from "date-fns";
+
+import { Loader } from "@egovernments/digit-ui-react-components";
+
+import ActionModal from "./Modal";
+
+import { useHistory, useParams } from "react-router-dom";
+import ApplicationDetailsContent from "./components/ApplicationDetailsContent";
+import ApplicationDetailsToast from "./components/ApplicationDetailsToast";
+import ApplicationDetailsActionBar from "./components/ApplicationDetailsActionBar";
+import ApplicationDetailsWarningPopup from "./components/ApplicationDetailsWarningPopup";
+
+const ApplicationDetails = (props) => {
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const state = Digit.ULBService.getStateId();
+ const { t } = useTranslation();
+ const history = useHistory();
+ let { id: applicationNumber } = useParams();
+ const [displayMenu, setDisplayMenu] = useState(false);
+ const [selectedAction, setSelectedAction] = useState(null);
+ const [showModal, setShowModal] = useState(false);
+ const [isEnableLoader, setIsEnableLoader] = useState(false);
+ const [isWarningPop, setWarningPopUp] = useState(false);
+ const [modify, setModify] = useState(false);
+ const [saveAttendanceState, setSaveAttendanceState] = useState({ displaySave : false, updatePayload: []})
+
+ const {
+ applicationDetails,
+ showToast,
+ setShowToast,
+ isLoading,
+ isDataLoading,
+ applicationData,
+ mutate,
+ nocMutation,
+ workflowDetails,
+ businessService,
+ closeToast,
+ moduleCode,
+ timelineStatusPrefix,
+ forcedActionPrefix,
+ statusAttribute,
+ ActionBarStyle,
+ MenuStyle,
+ paymentsList,
+ showTimeLine = true,
+ oldValue,
+ isInfoLabel = false,
+ clearDataDetails,
+ noBoxShadow,
+ sectionHeadStyle,
+ showActionBar = true
+ } = props;
+
+ useEffect(() => {
+ if (showToast) {
+ workflowDetails.revalidate();
+ }
+ }, [showToast]);
+
+ function onActionSelect(action) {
+ if (action) {
+ if(action?.isToast){
+ setShowToast({ key: "error", error: { message: action?.toastMessage } });
+ setTimeout(closeToast, 5000);
+ }
+ else if (action?.isWarningPopUp) {
+ setWarningPopUp(true);
+ } else if (action?.redirectionUrll) {
+ //here do the loi edit upon rejection
+ if (action?.redirectionUrll?.action === "EDIT_LOI_APPLICATION") {
+ history.push(`${action?.redirectionUrll?.pathname}`, { data: action?.redirectionUrll?.state });
+ }
+ if (action?.redirectionUrll?.action === "EDIT_ESTIMATE_APPLICATION") {
+ history.push(`${action?.redirectionUrll?.pathname}`,{ data: action?.redirectionUrll?.state });
+ }
+
+ } else if (!action?.redirectionUrl) {
+ if(action?.action === 'EDIT') setModify(true)
+ else setShowModal(true);
+ } else {
+ history.push({
+ pathname: action.redirectionUrl?.pathname,
+ state: { ...action.redirectionUrl?.state },
+ });
+ }
+ }
+ setSelectedAction(action);
+ setDisplayMenu(false);
+ }
+
+ const queryClient = useQueryClient();
+
+ const closeModal = () => {
+ setSelectedAction(null);
+ setShowModal(false);
+ };
+
+ const closeWarningPopup = () => {
+ setWarningPopUp(false);
+ };
+
+ const getResponseHeader = (action) => {
+
+ if(action?.includes("CHECK")){
+ return t("WORKS_LOI_RESPONSE_FORWARD_HEADER")
+ } else if (action?.includes("APPROVE")){
+ return t("WORKS_LOI_RESPONSE_APPROVE_HEADER")
+ }else if(action?.includes("REJECT")){
+ return t("WORKS_LOI_RESPONSE_REJECT_HEADER")
+ }
+ }
+
+ const getResponseMessage = (action,updatedLOI) => {
+
+ if (action?.includes("CHECK")) {
+ return t("WORKS_LOI_RESPONSE_MESSAGE_CHECK", { loiNumber: updatedLOI?.letterOfIndentNumber,name:"Nipun",designation:"SE" })
+ } else if (action?.includes("APPROVE")) {
+ return t("WORKS_LOI_RESPONSE_MESSAGE_APPROVE", { loiNumber: updatedLOI?.letterOfIndentNumber })
+ } else if (action?.includes("REJECT")) {
+ return t("WORKS_LOI_RESPONSE_MESSAGE_REJECT", { loiNumber: updatedLOI?.letterOfIndentNumber })
+ }
+ }
+
+ const getEstimateResponseHeader = (action) => {
+
+ if(action?.includes("CHECK")){
+ return t("WORKS_ESTIMATE_RESPONSE_FORWARD_HEADER")
+ } else if (action?.includes("TECHNICALSANCATION")){
+ return t("WORKS_ESTIMATE_RESPONSE_FORWARD_HEADER")
+ }else if (action?.includes("ADMINSANCTION")){
+ return t("WORKS_ESTIMATE_RESPONSE_APPROVE_HEADER")
+ }else if(action?.includes("REJECT")){
+ return t("WORKS_ESTIMATE_RESPONSE_REJECT_HEADER")
+ }
+ }
+
+ const getEstimateResponseMessage = (action,updatedEstimate) => {
+
+ if (action?.includes("CHECK")) {
+ return t("WORKS_ESTIMATE_RESPONSE_MESSAGE_CHECK", { estimateNumber: updatedEstimate?.estimateNumber,Name:"Super",Designation:"SE",Department:"Health" })
+ } else if (action?.includes("TECHNICALSANCATION")) {
+ return t("WORKS_ESTIMATE_RESPONSE_MESSAGE_CHECK", { estimateNumber: updatedEstimate?.estimateNumber,Name:"Super",Designation:"SE",Department:"Health" })
+ } else if (action?.includes("ADMINSANCTION")) {
+ return t("WORKS_ESTIMATE_RESPONSE_MESSAGE_APPROVE", { estimateNumber: updatedEstimate?.estimateNumber })
+ } else if (action?.includes("REJECT")) {
+ return t("WORKS_ESTIMATE_RESPONSE_MESSAGE_REJECT", { estimateNumber: updatedEstimate?.estimateNumber })
+ }
+ }
+
+ const getAttendanceResponseHeaderAndMessage = (action) => {
+ let response = {}
+ if (action?.includes("VERIFY")) {
+ response.header = t("ATM_ATTENDANCE_VERIFIED")
+ response.message = t("ATM_ATTENDANCE_VERIFIED_SUCCESS")
+ } else if (action?.includes("REJECT")) {
+ response.header = t("ATM_ATTENDANCE_REJECTED")
+ response.message = t("ATM_ATTENDANCE_REJECTED_SUCCESS")
+ } else if (action?.includes("APPROVE")) {
+ response.header = t("ATM_ATTENDANCE_APPROVED")
+ response.message = t("ATM_ATTENDANCE_APPROVED_SUCCESS")
+ }
+ return response
+ }
+
+ const submitAction = async (data, nocData = false, isOBPS = {}) => {
+ const performedAction = data?.workflow?.action
+ setIsEnableLoader(true);
+ if (mutate) {
+ setIsEnableLoader(true);
+ mutate(data, {
+ onError: (error, variables) => {
+ setIsEnableLoader(false);
+ setShowToast({ key: "error", error });
+ setTimeout(closeToast, 5000);
+ },
+ onSuccess: (data, variables) => {
+ setIsEnableLoader(false);
+ //just history.push to the response component from here and show relevant details
+ if(data?.letterOfIndents?.[0]){
+ const updatedLOI = data?.letterOfIndents?.[0]
+ const state = {
+ header:getResponseHeader(performedAction,updatedLOI),
+ id: updatedLOI?.letterOfIndentNumber,
+ info: t("WORKS_LOI_ID"),
+ message: getResponseMessage(performedAction,updatedLOI),
+ links: [
+ {
+ name: t("WORKS_CREATE_NEW_LOI"),
+ redirectUrl: `/${window.contextPath}/employee/works/create-loi`,
+ code: "",
+ svg: "CreateEstimateIcon",
+ isVisible:false,
+ type:"add"
+ },
+ {
+ name: t("WORKS_GOTO_LOI_INBOX"),
+ redirectUrl: `/${window.contextPath}/employee/works/LOIInbox`,
+ code: "",
+ svg: "CreateEstimateIcon",
+ isVisible:true,
+ type:"inbox"
+ },
+ ],
+ responseData:data,
+ requestData:variables
+ }
+ history.push(`/${window.contextPath}/employee/works/response`, state)
+ }
+ if(data?.estimates?.[0]){
+ const updatedEstimate = data?.estimates?.[0]
+ const state = {
+ header:getEstimateResponseHeader(performedAction,updatedEstimate),
+ id: updatedEstimate?.estimateNumber,
+ info: t("WORKS_ESTIMATE_ID"),
+ message: getEstimateResponseMessage(performedAction,updatedEstimate),
+ links: [
+ {
+ name: t("WORKS_CREATE_ESTIMATE"),
+ redirectUrl: `/${window.contextPath}/employee/works/create-estimate`,
+ code: "",
+ svg: "CreateEstimateIcon",
+ isVisible:false,
+ type:"add"
+ },
+ {
+ name: t("WORKS_GOTO_ESTIMATE_INBOX"),
+ redirectUrl: `/${window.contextPath}/employee/works/inbox`,
+ code: "",
+ svg: "RefreshIcon",
+ isVisible:true,
+ type:"inbox"
+ },
+ ],
+ responseData:data,
+ requestData:variables
+ }
+ history.push(`/${window.contextPath}/employee/works/response`, state)
+ }
+ if (isOBPS?.bpa) {
+ data.selectedAction = selectedAction;
+ history.replace(`/${window?.contextPath}/employee/obps/response`, { data: data });
+ }
+ if (isOBPS?.isStakeholder) {
+ data.selectedAction = selectedAction;
+ history.push(`/${window?.contextPath}/employee/obps/stakeholder-response`, { data: data });
+ }
+ if (isOBPS?.isNoc) {
+ history.push(`/${window?.contextPath}/employee/noc/response`, { data: data });
+ }
+ if (data?.Amendments?.length > 0 ){
+ //RAIN-6981 instead just show a toast here with appropriate message
+ //show toast here and return
+ //history.push("/${window?.contextPath}/employee/ws/response-bill-amend", { status: true, state: data?.Amendments?.[0] })
+
+ if(variables?.AmendmentUpdate?.workflow?.action.includes("SEND_BACK")){
+ setShowToast({ key: "success", label: t("ES_MODIFYSWCONNECTION_SEND_BACK_UPDATE_SUCCESS")})
+ } else if (variables?.AmendmentUpdate?.workflow?.action.includes("RE-SUBMIT")){
+ setShowToast({ key: "success", label: t("ES_MODIFYSWCONNECTION_RE_SUBMIT_UPDATE_SUCCESS") })
+ } else if (variables?.AmendmentUpdate?.workflow?.action.includes("APPROVE")){
+ setShowToast({ key: "success", label: t("ES_MODIFYSWCONNECTION_APPROVE_UPDATE_SUCCESS") })
+ }
+ else if (variables?.AmendmentUpdate?.workflow?.action.includes("REJECT")){
+ setShowToast({ key: "success", label: t("ES_MODIFYWSCONNECTION_REJECT_UPDATE_SUCCESS") })
+ }
+ return
+ }
+ if(data?.musterRolls?.[0]) {
+ const musterRoll = data?.musterRolls?.[0]
+ const response = getAttendanceResponseHeaderAndMessage(performedAction)
+ const state = {
+ header: response?.header,
+ message: response?.message,
+ info: t("ATM_REGISTER_ID_WEEK"),
+ id: `${musterRoll.registerId} | ${format(new Date(musterRoll.startDate), "dd/MM/yyyy")} - ${format(new Date(musterRoll.endDate), "dd/MM/yyyy")}`,
+ }
+ history.push(`/${window.contextPath}/employee/attendencemgmt/response`, state)
+ }
+ setShowToast({ key: "success", action: selectedAction });
+ clearDataDetails && setTimeout(clearDataDetails, 3000);
+ setTimeout(closeToast, 5000);
+ queryClient.clear();
+ queryClient.refetchQueries("APPLICATION_SEARCH");
+ //push false status when reject
+
+ },
+ });
+ }
+
+ closeModal();
+ };
+
+ if (isLoading || isEnableLoader) {
+ return
+ {!isLoading ? (
+
+
+ ) : (
+
+ );
+};
+
+export default ApplicationDetails;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/.babelrc b/micro-ui/web/micro-ui-internals/packages/ui-components/.babelrc
new file mode 100644
index 00000000..e77a2b3d
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/.babelrc
@@ -0,0 +1,4 @@
+{
+ "presets": ["@babel/preset-env", "@babel/preset-react"],
+ "plugins": ["@babel/plugin-proposal-nullish-coalescing-operator", "@babel/plugin-proposal-optional-chaining"]
+ }
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/.gitignore b/micro-ui/web/micro-ui-internals/packages/ui-components/.gitignore
new file mode 100644
index 00000000..1747c795
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/.gitignore
@@ -0,0 +1,143 @@
+# Created by https://www.toptal.com/developers/gitignore/api/node,react
+# Edit at https://www.toptal.com/developers/gitignore?templates=node,react
+
+### eGov ###
+packages/css/example/index.css
+package-lock.json
+locales/
+build/
+packages/**/dist/
+
+# yarn #
+.yarn
+.yarnrc.yml
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+.env*.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+dist-storybook
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+### react ###
+.DS_*
+**/*.backup.*
+**/*.back.*
+
+node_modules
+
+*.sublime*
+
+psd
+thumb
+sketch
+
+# vs code
+.vscode/
+
+# End of https://www.toptal.com/developers/gitignore/api/node,react
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/.storybook/main.js b/micro-ui/web/micro-ui-internals/packages/ui-components/.storybook/main.js
new file mode 100644
index 00000000..3daf2f52
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/.storybook/main.js
@@ -0,0 +1,14 @@
+module.exports = {
+ stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+ addons: ["@storybook/addon-links", "@storybook/addon-essentials","@storybook/addon-postcss"],
+ docs: {
+ autodocs: 'tag',
+ },
+ titlePrefix: 'MyComponents',
+ features: {
+ postcss: false,
+ },
+};
+
+
+
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/.storybook/preview-head.html b/micro-ui/web/micro-ui-internals/packages/ui-components/.storybook/preview-head.html
new file mode 100644
index 00000000..d59ccaf7
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/.storybook/preview-head.html
@@ -0,0 +1,24 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/.storybook/preview.js b/micro-ui/web/micro-ui-internals/packages/ui-components/.storybook/preview.js
new file mode 100644
index 00000000..043db6e5
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/.storybook/preview.js
@@ -0,0 +1,56 @@
+// import "@egovernments/digit-ui-components-css/example/index.css";
+import "@egovernments/digit-ui-components-css/dist/index.css";
+// import { initCoreLibraries } from "@egovernments/digit-ui-libraries-core";
+import { initLibraries } from "@egovernments/digit-ui-libraries";
+
+// import '../src/index.css';
+//:point_down: Configures Storybook to log the actions( onArchiveTask and onPinTask ) in the UI.
+/** @type { import('@storybook/react').Preview } */
+
+export const globalTypes = {
+ theme: {
+ description: "Global theme for components",
+ defaultValue: "light",
+ toolbar: {
+ // The label to show for this toolbar item
+ title: "Theme",
+ icon: "circlehollow",
+ // Array of plain string values or MenuItem shape (see below)
+ items: ["light", "dark"],
+ // Change title based on selected value
+ dynamicTitle: true,
+ },
+ },
+};
+
+const preview = {
+ parameters: {
+ actions: { argTypesRegex: "^on[A-Z].*" },
+ controls: {
+ expanded: true,
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/,
+ },
+ },
+ backgrounds: {
+ default: "twitter",
+ values: [
+ {
+ name: "twitter",
+ value: "#00ACED",
+ },
+ {
+ name: "facebook",
+ value: "#3B5998",
+ },
+ ],
+ },
+ },
+};
+
+initLibraries().then(() => {
+ console.info("DIGIT Contant, HOOKS enabled", window?.Digit);
+});
+
+export default preview;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/CHANGELOG.md b/micro-ui/web/micro-ui-internals/packages/ui-components/CHANGELOG.md
new file mode 100644
index 00000000..f7c05137
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/CHANGELOG.md
@@ -0,0 +1,473 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+### [0.2.0-beta.8] - 2025-04-03
+## Updates
+- Version Update for stability
+
+### [0.2.0-beta.7] - 2025-03-26
+## Enhancements & New features
+## Edit Row data within InboxSearchComposer within rows and with popups based on config
+## Added customizers support i.e., we don't need to mention functions in UICustomizations.js we can directly mention within component level
+
+### [0.2.0-beta.5] - 2025-03-26
+## Fixes
+- Fixed Tab Functionality in InboxSearchComposer
+
+### [0.2.0-beta.3] - 2025-03-20
+## Fixes
+- Fixed multiple calls issue in InboxSearchLinks
+- Fixed onSubmit function for FilterCard
+
+### [0.2.0-beta.2] - 2025-03-13
+## Enhancements
+- Multiselect Dropdown now supports adding limit for chips and onClick function
+
+## New Changes Added
+- InboxSearchComposer now supports footer actions
+- Updated the config structure for results table - inbox and search screens
+
+
+## [0.2.0-beta.1] - 2025-03-06
+## New Components Added
+- ResultsDataTableWrapper and ResultsDataTable components were added
+- Integrated InboxSearchComposer with ResultsDataTableWrapper
+
+## Enhancements in Multiselectdropdown
+- Limiting chips to be shown functionality
+- Frozen Data functionality
+- Searchable functionality for nested multiselect variant
+
+## Other Changes
+- Added onClose function as a prop in SidePanel
+
+## [0.2.0] - 2025-02-19
+### New Components Added
+
+## Atoms
+- Accordion
+- ActionButton
+- AlertCard
+- BackLink
+- BreadCrumb
+- Button
+- CheckBox
+- Chip
+- Divider
+- Dropdown
+- Panels
+- FileUpload
+- Loader
+- MultiselectDropdown
+- OTPInput
+- RadioButton
+- SelectionTag
+- Stepper
+- Switch
+- Tab
+- Tag
+- TextBlock
+- TextInput
+- Timeline
+- Toast
+- Toggle
+- Tooltip
+
+## Molecules
+- AccordionList
+- PopUp
+- Card (Basic,FormCard,SummaryCard)
+- BottomSheet
+- ButtonGroup
+- Header
+- SidePanel
+- PanelCard
+- FilterCard
+- Footer
+- Hamburger
+- LandingPageCard
+- MenuCard
+- MetricCard
+- SideNav
+- TableMolecule
+- TimelineMolecule
+- TooltipWrapper
+
+## MoleculeGroup
+- LandingPageWrapper
+- MenuCardWrapper
+
+### New Changes Added
+- Added external link support in LandingPageCards
+- Added external link support in BreadCrumbs
+- Added Spacers, Colors, Typography library
+- Added Icons
+- Added Animations
+- Added Error Message Component.
+- Added Info Button Component.
+- Added RemoveableTag Component.
+- Added Uploader Component With Three Varinats UploadFile,UploadPopup and UploadImage.
+- Supporting multiple variants in Dropdown and MultiSelectDropdown components
+
+
+## [0.0.2-beta.66] - 2025-02-13
+### New Changes
+- Added id prop for checkox input
+
+## [0.0.2-beta.65] - 2025-01-27
+### New Changes
+- ViewCard is renamed as SummaryCard
+- ViewCardFieldPair is renamed as SummaryCardFieldPair
+- Header is renamed as HeaderComponent
+- TopBar is renamed as Header
+- Hamburger is renamed as HamburgerButton
+- MobileSideNav is renamed as Hamburger
+- LoaderScreen Component is removed
+- LoaderComponent is renamed as Loader
+
+## [0.0.2-beta.60] - 2024-12-26
+### New Changes
+- SelectionCard Component is renamed as SelectionTag Component
+- AccordionWrapper Molecule is renamed as AccordionList
+- Sidebar Molecule is renamed as SideNav
+- MobileSideBar Molecule is renamed as MobileSideNav
+- SlideOverMenu Molecule is renamed as SidePanel
+- InfoCard Component is renamed as AlertCard
+- Uploader Component is renamed as FileUpload
+- ActionBar Component is renamed as Footer
+
+## [0.0.2-beta.56] - 2024-11-16
+### New Changes
+- Added id for every field use with digit-ui-libraries with v1.8.5 for proper integartion
+
+## [0.0.2-beta.54] - 2024-11-16
+### New Changes
+- Fixed Navigation redirection for landing page card if it is an external url.
+
+
+## [0.0.2-beta.51] - 2024-11-06
+### New Changes
+- ButtonsGroup has been renamed as ButtonGroup
+
+## [0.0.2-beta.50] - 2024-10-29
+### New Changes
+- Updated Breadcrumb crumb.path property to crumb.internalLink or crumb.externalLink
+
+## [0.0.2-beta.46] - 2024-10-11
+### New Changes
+- Added MaterialUI Icons,Updated Colors and Spacers Stories
+
+## [0.0.2-beta.44] - 2024-10-07
+### New Changes
+- Added NestedTable, FilterCard and FormCards
+
+## [0.0.2-beta.42] - 2024-09-23
+### New Changes
+- Added Table Molecule
+
+## [0.0.2-beta.41] - 2024-09-19
+### New Changes
+- Added OTPInput
+
+## [0.0.2-beta.40] - 2024-09-18
+### New Changes
+- Added ChipsKey for Multiselectdropdown and configuration for close icon in chips
+
+## [0.0.2-beta.39] - 2024-09-12
+### New Changes
+- Added Tab Component and other changes
+
+## [0.0.2-beta.38] - 2024-09-12
+### fixes
+- Css version fix
+
+## [0.0.2-beta.37] - 2024-09-06
+### New Changes
+- Css version fix
+
+## [0.0.2-beta.36] - 2024-09-06
+### New Changes
+- Updated SelectionCard Component
+
+## [0.0.2-beta.35] - 2024-09-06
+### New Changes
+- Added LandingPageCard,MenuCard Molecules
+
+## [0.0.2-beta.34] - 2024-09-05
+### New Changes
+- Updated Accordion with animation
+
+## [0.0.2-beta.33] - 2024-09-04
+### New Changes
+- Added BottomSheet Draggable Functionality
+
+## [0.0.2-beta.32] - 2024-09-04
+### New Changes
+- Updated Tooltip with header and description
+
+## [0.0.2-beta.28] - 2024-08-29
+### New Changes
+- Updated Sidebar and added AccordionWrapper
+
+## [0.0.2-beta.27] - 2024-08-27
+### New Changes
+- Fixed MobileSidebar issue
+
+## [0.0.2-beta.26] - 2024-08-27
+### New Changes
+- Changed Classname for Submitbar disabled
+
+## [0.0.2-beta.25] - 2024-08-22
+### New Changes
+- Updated Sidebar,SVGs,Added Spacers and Accordion
+
+## [0.0.2-beta.24] - 2024-08-16
+### New Changes
+- Added Switch Component
+
+## [0.0.2-beta.22] - 2024-08-07
+### New Changes
+- Fixes on usgae of utils
+
+## [0.0.2-beta.22] - 2024-08-07
+### New Changes
+- Updated Tooltip Component
+
+## [0.0.2-beta.21] - 2024-08-02
+### New Changes
+- Added Tag Component
+
+## [0.0.2-beta.20] - 2024-07-30
+### New Changes
+- Added Error State for Timeline, SelectionCard Component
+
+## [0.0.2-beta.18] - 2024-07-24
+### New Changes
+- Fixed header dropdown selection
+
+## [0.0.2-beta.17] - 2024-07-23
+### New Changes
+- Updated multiselectdropdown
+
+## [0.0.2-beta.16] - 2024-07-22
+### New Changes
+- Updated prop for Menu
+
+## [0.0.2-beta.15] - 2024-07-18
+### New Changes
+- Added translation for option label
+
+## [0.0.2-beta.14] - 2024-07-16
+### New Changes
+- Added Sidebar and Hamburger
+- Updated Colors as constants
+
+
+## [0.0.2-beta.13] - 2024-07-08
+### New Changes
+- Updated Button OnClick and added digit footer images
+
+## [0.0.2-beta.12] - 2024-07-05
+### New Changes
+- Updated Button
+
+
+## [0.0.2-beta.11] - 2024-07-04
+### New Changes
+- Added ActionBar, Header, ActionButton variant for Button
+- Updated Timeline Molecule
+
+## [0.0.2-beta.10] - 2024-06-28
+### New Changes
+- Added Card Variants
+
+## [0.0.2-beta.9] - 2024-06-25
+### New Changes
+- Updated Uploader preview
+
+## [0.0.2-beta.8] - 2024-06-24
+### New Changes
+- Added Title prop for Button
+
+## [0.0.2-beta.7] - 2024-06-24
+### New Changes
+- Added ViewMore button for Timeline Molecule.
+
+## [0.0.2-beta.6] - 2024-06-19
+### New Changes
+- Added BreadCrumb Component.
+
+## [0.0.2-beta.5] - 2024-06-17
+### New Changes
+- Added Timeline Molecule.
+
+## [0.0.2-beta.4] - 2024-06-15
+### Changed
+- fix: Fixed prop for the document upload.
+
+## [0.0.2-beta.3] - 2024-06-14
+### Changed
+- Updated Storybook
+- Modified BackButton as BackLink
+
+## [0.0.2-beta.1] - 2024-06-04
+### Changed
+- Updated Popup Classname
+- Added InfoCard Header Classname
+
+## [0.0.2] - 2024-06-03
+- New components and enhancements for old components
+
+### New Changes
+
+- Added Error Message Component.
+- Added Info Button Component.
+- Added Panels Component.
+- Added Popup Component With Two Variants defualt and alert.
+- Added RemoveableTag Component.
+- Added Stepper Component.
+- Added TextBlock Component.
+- Added Timeline Component.
+- Added Uploader Component With Three Varinats UploadFile,UploadPopup and UploadImage.
+- Added PanelCard Molecule.
+
+### Enhancements
+
+- Updated Button Component Styles.
+- Updated Dropdown Component Styles and Added SelectAll Option.
+- Updated InfoCard Component Styles.
+- Added Animation for Toast.
+- Added new prop named type for Toast replacing the separate props for `info`, `warning`, and `error`.
+- Updated Typography with lineHeight
+- Updated Color Typography
+
+## [0.0.1-beta.32] - YYYY-MM-DD
+### Changed
+- Updated Panel Success Animation
+
+## [0.0.1-beta.31] - YYYY-MM-DD
+### Added
+- New prop named `activeSteps` in Stepper
+
+## [0.0.1-beta.30] - YYYY-MM-DD
+### Changed
+- Updated Panel Animation Styles
+
+## [0.0.1-beta.29] - YYYY-MM-DD
+### Added
+- PopUp, Panels, and Panel Cards
+
+## [0.0.1-beta.28] - YYYY-MM-DD
+### Added
+- `restrictSelection` prop in MultiSelectDropdown
+
+## [0.0.1-beta.27] - YYYY-MM-DD
+### Added
+- Uploader variants and its CSS
+
+## [0.0.1-beta.26] - YYYY-MM-DD
+### Changed
+- Updated Toast Usage
+
+## [0.0.1-beta.25] - YYYY-MM-DD
+### Changed
+- Updated RemoveableTag component to have error
+
+## [0.0.1-beta.24] - YYYY-MM-DD
+### Changed
+- Updated numeric type to disable input and use only buttons
+- Made date and time fields clickable
+
+## [0.0.1-beta.23] - YYYY-MM-DD
+### Added
+- New props `showIcon`, `truncateMessage`, and `maxLength` to ErrorMessage component
+
+## [0.0.1-beta.22] - YYYY-MM-DD
+### Changed
+- `Toast` component now has a new prop `type`, replacing the separate props for `info`, `warning`, and `error`
+
+## [0.0.1-beta.21] - YYYY-MM-DD
+### Added
+- `categorySelectAllState` in the nestedmultiselect variant of MultiSelectDropdown
+
+## [0.0.1-beta.20] - YYYY-MM-DD
+### Changed
+- Updated MultiSelectDropdown `categoryselectall` functionality
+- Added key navigation for dropdown options
+
+## [0.0.1-beta.19] - YYYY-MM-DD
+### Changed
+- Made CheckBox more customizable
+- Added custom color for Button
+
+## [0.0.1-beta.18] - YYYY-MM-DD
+### Changed
+- Updated dropdown option labels
+
+## [0.0.1-beta.17] - YYYY-MM-DD
+### Changed
+- Updated Toast info variant CSS
+- Updated category option CSS
+
+## [0.0.1-beta.16] - YYYY-MM-DD
+### Added
+- Error boundary atom
+
+## [0.0.1-beta.15] - YYYY-MM-DD
+### Added
+- Info variant for Toast
+
+## [0.0.1-beta.14] - YYYY-MM-DD
+### Changed
+- Updated dropdown options label to use `optionsKey`
+
+## [0.0.1-beta.13] - YYYY-MM-DD
+### Changed
+- Updated nested and tree dropdown variant
+
+## [0.0.1-beta.12] - YYYY-MM-DD
+### Changed
+- Enhancements of components
+
+## [0.0.1-beta.11] - YYYY-MM-DD
+### Changed
+- Updated `mobilenumber` classname
+
+## [0.0.1-beta.10] - YYYY-MM-DD
+### Changed
+- Updated header and textinput classnames
+
+## [0.0.1-beta.9] - YYYY-MM-DD
+### Changed
+- Updated key to `IS_STRING_MANIPULATED`
+
+## [0.0.1-beta.8] - YYYY-MM-DD
+### Changed
+- Updated the string manipulation based on `globalConfig` flag `isStringManipulated`
+
+## [0.0.1-beta.7] - YYYY-MM-DD
+### Changed
+- Updated classnames
+
+## [0.0.1-beta.6] - YYYY-MM-DD
+### Changed
+- Updated version
+
+## [0.0.1-beta.5] - YYYY-MM-DD
+### Changed
+- Modified classnames
+
+## [0.0.1-beta.4] - YYYY-MM-DD
+### Fixed
+- Fixed some date issues
+
+## [0.0.1] - 2024-03-22
+### Added Base version
+- Button Component.
+- Dropdown Component.
+- InfoCard Component.
+- Toast.
+- Input fields.
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/README.md b/micro-ui/web/micro-ui-internals/packages/ui-components/README.md
new file mode 100644
index 00000000..da62ccff
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/README.md
@@ -0,0 +1,137 @@
+
+# digit-ui-components
+
+## Install
+
+```bash
+npm install --save @egovernments/digit-ui-components
+```
+
+## Limitation
+
+```bash
+This Package is more specific to DIGIT-UI's can be used across mission's
+```
+
+## Usage
+
+After adding the dependency make sure you have this dependency in
+
+```bash
+frontend/micro-ui/web/package.json
+```
+
+```json
+"@egovernments/digit-ui-components":"0.0.1",
+```
+
+then navigate to App.js
+
+```bash
+ frontend/micro-ui/web/src/App.js
+```
+
+# Syntax for importing any components
+
+```jsx
+import { SVG } from "@egovernments/digit-ui-components";
+
+",
+ "scripts": {
+ "example": "cd example && npm run start",
+ "build": "microbundle-crl --compress --no-sourcemap --format cjs",
+ "start": "microbundle-crl watch --no-compress --format modern,cjs",
+ "prepare": "yarn build",
+ "publish:components": "npm publish --tag core-v0.1",
+ "predeploy": "cd example && yarn install && yarn run build",
+ "deploy": "gh-pages -d example/build",
+ "storybook": "start-storybook -p 6006 -s public",
+ "build-storybook": "build-storybook -s public -o dist-storybook",
+ "deploy-storybook": "npm run build-storybook && surge --project dist-storybook --domain svg-components-$npm_package_version.surge.sh"
+ },
+ "peerDependencies": {
+ "react": "17.0.2",
+ "react-dom": "17.0.2",
+ "react-router-dom": "5.3.0"
+ },
+ "devDependencies": {
+ "@storybook/addon-actions": "6.4.20",
+ "@storybook/addon-essentials": "6.4.20",
+ "@storybook/addon-links": "6.4.20",
+ "@storybook/node-logger": "6.4.20",
+ "@storybook/preset-create-react-app": "3.2.0",
+ "@storybook/react": "6.4.20",
+ "@storybook/blocks":"8.3.5",
+ "babel-eslint": "10.1.0",
+ "cross-env": "7.0.3",
+ "gh-pages": "2.2.0",
+ "husky": "7.0.4",
+ "lint-staged": "12.3.7",
+ "microbundle-crl": "0.13.11",
+ "react": "17.0.2",
+ "react-dom": "17.0.2",
+ "react-query": "3.6.1",
+ "react-responsive": "9.0.2",
+ "react-router-dom": "5.3.0",
+ "react-scripts": "^4.0.1"
+ },
+ "files": [
+ "dist"
+ ],
+ "dependencies": {
+ "react-data-table-component": "7.6.2",
+ "@egovernments/digit-ui-components-css": "0.2.1",
+ "@egovernments/digit-ui-libraries": "1.8.11",
+ "@egovernments/digit-ui-svg-components": "1.0.14",
+ "@googlemaps/js-api-loader": "1.13.10",
+ "autoprefixer": "^10.4.15",
+ "postcss-flexbugs-fixes": "^5.0.2",
+ "react-date-range": "1.3.0",
+ "react-hook-form": "6.15.8",
+ "react-i18next": "11.16.2",
+ "react-table": "7.7.0",
+ "react-drag-drop-files": "2.3.10",
+ "@cyntler/react-doc-viewer": "1.10.3",
+ "react-webcam":"7.2.0",
+ "react-lottie":"1.2.4",
+ "styled-components":"5.0.0"
+ },
+ "resolutions": {
+ "styled-components": "5.0.0"
+ },
+ "browserslist": {
+ "production": [
+ ">0.2%",
+ "not dead",
+ "not op_mini all"
+ ],
+ "development": [
+ "last 1 chrome version",
+ "last 1 firefox version",
+ "last 1 safari version"
+ ]
+ },
+ "keywords": [
+ "digit",
+ "core",
+ "components",
+ "dpg"
+ ]
+}
+
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/postcss.config.js b/micro-ui/web/micro-ui-internals/packages/ui-components/postcss.config.js
new file mode 100644
index 00000000..fb81ebad
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/postcss.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+ plugins: [
+ require('postcss-flexbugs-fixes'),
+ require('autoprefixer'),
+ // Add more plugins as needed
+ ],
+ };
+
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/public/index.html b/micro-ui/web/micro-ui-internals/packages/ui-components/public/index.html
new file mode 100644
index 00000000..6ee18937
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/public/index.html
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
+
+
+
+
+
+ DIGIT Component StoryBook
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms-groups/CustomDropdown.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms-groups/CustomDropdown.js
new file mode 100644
index 00000000..550f629d
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms-groups/CustomDropdown.js
@@ -0,0 +1,71 @@
+import _ from "lodash";
+import React from "react";
+import { Loader } from "../atoms";
+import RadioButtons from "../atoms/RadioButtons";
+import Dropdown from "../atoms/Dropdown";
+
+const CustomDropdown = ({ t, config, inputRef, label, onChange, value, errorStyle, disable, type, additionalWrapperClass = "" }) => {
+ const master = { name: config?.mdmsConfig?.masterName };
+ if (config?.mdmsConfig?.filter) {
+ master["filter"] = config?.mdmsConfig?.filter;
+ }
+ const { isLoading, data } = Digit.Hooks.useCustomMDMS(Digit.ULBService.getStateId(), config?.mdmsConfig?.moduleName, [master], {
+ select: config?.mdmsConfig?.select
+ ? Digit.Utils.createFunction(config?.mdmsConfig?.select)
+ : (data) => {
+ const optionsData = _.get(data, `${config?.mdmsConfig?.moduleName}.${config?.mdmsConfig?.masterName}`, []);
+ return optionsData
+ .filter((opt) => (opt?.hasOwnProperty("active") ? opt.active : true))
+ .map((opt) => ({ ...opt, name: `${config?.mdmsConfig?.localePrefix}_${Digit.Utils.locale.getTransformedLocale(opt.code)}` }));
+ },
+ enabled: config?.mdmsConfig ? true : false,
+ });
+ if (isLoading) {
+ return
+ {type === "radio" ? (
+ {
+ onChange(e, config.name);
+ }}
+ disable={disable}
+ selectedOption={value}
+ defaultValue={value}
+ t={t}
+ errorStyle={errorStyle}
+ additionalWrapperClass={additionalWrapperClass}
+ innerStyles={config?.innerStyles}
+ />
+ ) : (
+ {
+ onChange(e, config.name);
+ }}
+ disable={disable}
+ selected={value || config.defaultValue}
+ defaultValue={value || config.defaultValue}
+ t={t}
+ errorStyle={errorStyle}
+ optionCardStyles={config?.optionsCustomStyle}
+ />
+ )}
+
+ );
+};
+
+export default CustomDropdown;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms-groups/index.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms-groups/index.js
new file mode 100644
index 00000000..4a8e1d5a
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms-groups/index.js
@@ -0,0 +1,3 @@
+import CustomDropdown from "./CustomDropdown";
+
+export { CustomDropdown };
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Accordion.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Accordion.js
new file mode 100644
index 00000000..7b04e90f
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Accordion.js
@@ -0,0 +1,186 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { SVG } from "./SVG";
+import { Colors } from "../constants/colors/colorconstants";
+import { iconRender } from "../utils/iconRender";
+import { Spacers } from "../constants/spacers/spacers";
+import Divider from "./Divider";
+import StringManipulator from "./StringManipulator";
+
+const Accordion = ({
+ title,
+ children,
+ icon,
+ iconFill,
+ iconWidth,
+ iconHeight,
+ number,
+ isOpenInitially,
+ onToggle,
+ customClassName,
+ customStyles,
+ hideCardBorder,
+ hideDivider,
+ hideCardBg,
+ hideBorderRadius,
+ isClosed,
+ isChild
+}) => {
+ const [isOpen, setIsOpen] = useState(isOpenInitially);
+
+ const iconColor = Colors.lightTheme.primary[1];
+ const toggleIconColor = Colors.lightTheme.text.primary;
+ const toggleiconSize = Spacers.spacer6;
+ const iconSize = Spacers.spacer6;
+
+ const toggleAccordion = () => {
+ setIsOpen(!isOpen);
+ onToggle && onToggle(!isOpen);
+ };
+
+ useEffect(() => {
+ if (isClosed !== undefined && isClosed) {
+ setIsOpen(false);
+ }
+ }, [isClosed]);
+
+ return (
+
+
+ );
+};
+
+AppContainer.propTypes = {
+ className: PropTypes.string,
+ style: PropTypes.object,
+ children: PropTypes.node,
+};
+
+export default AppContainer;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/BackLink.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/BackLink.js
new file mode 100644
index 00000000..19be6386
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/BackLink.js
@@ -0,0 +1,89 @@
+import React,{useEffect,useState} from "react";
+import { SVG } from "./SVG";
+import { useTranslation } from "react-i18next";
+import PropTypes from "prop-types";
+import { Colors} from "../constants/colors/colorconstants";
+
+const BackLink = ({
+ style,
+ className = "",
+ variant,
+ onClick,
+ hideIcon = false,
+ hideLabel = false,
+ disabled = false,
+ iconFill,
+ label = ""
+}) => {
+ const { t } = useTranslation();
+
+ const [isMobileView, setIsMobileView] = useState(
+ window.innerWidth <= 480
+ );
+ const onResize = () => {
+ if (window.innerWidth <= 480) {
+ if (!isMobileView) {
+ setIsMobileView(true);
+ }
+ } else {
+ if (isMobileView) {
+ setIsMobileView(false);
+ }
+ }
+ };
+ useEffect(() => {
+ window.addEventListener("resize", onResize);
+ return () => {
+ window.removeEventListener("resize", onResize);
+ };
+ }, []);
+
+ const diabledIconColor = Colors.lightTheme.text.disabled;
+ const iconColor = Colors.lightTheme.primary[2];
+
+ const icon =
+ variant === "primary" ? (
+
; +}; + +BreakLine.propTypes = { + className: PropTypes.string, + style: PropTypes.object, +}; + +export default BreakLine; diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Button.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Button.js new file mode 100644 index 00000000..6e5655f9 --- /dev/null +++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Button.js @@ -0,0 +1,216 @@ +import React, { useState, useRef, useEffect } from "react"; +import PropTypes from "prop-types"; +import StringManipulator from "./StringManipulator"; +import Menu from "./Menu"; +import { Colors } from "../constants/colors/colorconstants"; +import { iconRender } from "../utils/iconRender"; + +const Button = (props) => { + const [dropdownStatus, setDropdownStatus] = useState(false); + const actionRef = useRef(null); + + useEffect(() => { + const handleClickOutside = (event) => { + if (actionRef?.current && !actionRef?.current.contains(event.target)) { + setDropdownStatus(false); + } + }; + + if (dropdownStatus) { + document.addEventListener("mousedown", handleClickOutside); + } else { + document.removeEventListener("mousedown", handleClickOutside); + } + + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, [dropdownStatus]); + + const diabledIconColor = Colors.lightTheme.text.disabled; + const iconColor = Colors.lightTheme.primary[1]; + const primaryIconColor = Colors.lightTheme.paper.primary; + + //To render the icon + const IconRender = () => { + const iconFill = props.iconFill + ? props.iconFill + : props?.variation === "primary" + ? primaryIconColor + : props?.isDisabled + ? diabledIconColor + : iconColor; + const iconReq = + props?.type === "actionButton" && + props?.showBottom && + dropdownStatus && + !props.icon + ? "ArrowDropUp" + : props?.type === "actionButton" && + props?.showBottom && + !dropdownStatus && + !props?.icon + ? "ArrowDropDown" + : props?.type === "actionButton" && + !props?.showBottom && + dropdownStatus && + !props.icon + ? "ArrowDropDown" + : props?.type === "actionButton" && + !props?.showBottom && + !dropdownStatus && + !props?.icon + ? "ArrowDropUp" + : props?.icon; + let width, height; + + if (props.size === "large") { + width = props.variation === "link" ? "1.25rem" : "1.5rem"; + height = props.variation === "link" ? "1.25rem" : "1.5rem"; + } else if (props.size === "medium") { + width = "1.25rem"; + height = "1.25rem"; + } else if (props.size === "small") { + width = "0.875rem"; + height = "0.875rem"; + } else { + width = "1.5rem"; + height = "1.5rem"; + } + return iconRender( + iconReq, + iconFill, + width, + height, + `digit-button-customIcon ${props?.size ? props?.size : ""} ${ + props?.variation ? props?.variation : "" + }` + ); + }; + + const icon = IconRender(); + + const formattedLabel = props?.label + ? props?.variation === "link" + ? props?.label + : StringManipulator( + "CAPITALIZEFIRSTLETTER", + StringManipulator("TRUNCATESTRING", props?.label, { + maxLength: 64, + }) + ) + : ""; + + const handleActionButtonClick = (e) => { + e.stopPropagation(); + setDropdownStatus(!dropdownStatus); + }; + + const buttonElement = ( + + ); + + return props?.type === "actionButton" ? ( +
+ {props.children}
+
+ );
+};
+
+export default CardHeader;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CardLabel.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CardLabel.js
new file mode 100644
index 00000000..5913a7c7
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CardLabel.js
@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const CardLabel = (props) => {
+ return (
+
+ {props.children.map((child, index) => {
+ return props.children.length === ++index ? (
+
+ );
+ } else {
+ return null;
+ }
+};
+
+CheckPoint.propTypes = {
+ /**
+ * Is checkpoint completed or not?
+ */
+ isCompleted: PropTypes.bool,
+ /**
+ * key value
+ */
+ key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ /**
+ * checkpoint content
+ */
+ label: PropTypes.string,
+ info: PropTypes.string,
+};
+
+CheckPoint.defaultProps = {
+ isCompleted: false,
+ key: 0,
+ label: "",
+ info: "",
+};
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CustomSVG.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CustomSVG.js
new file mode 100644
index 00000000..1108423d
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CustomSVG.js
@@ -0,0 +1,3607 @@
+import React from "react";
+
+const CreateEstimateIcon = ({ className, style = {}, fill = "#C84C0E",width = '18',height ='18' }) => (
+
+);
+
+const GotoInboxIcon = ({ className, style = {}, fill = "#C84C0E",width="15",height="13" }) => (
+
+);
+
+const ArrowLeft = ({ className,width="19",height="19",fill="black"}) => (
+
+);
+
+const ArrowLeftWhite = ({ className, fill = "white", style = {},width="16",height="16" }) => (
+
+);
+const PrivacyMaskIcon = ({ className, style = {} ,width="22",height="15",fill="#EEEEEE"}) => (
+
+);
+
+const ArrowDown = ({ className, onClick, styles, disable,width="18",height="18",fill="black"}) => (
+
+);
+
+const ArrowBack = ({ className, onClick ,width="18",height="18",fill="black"}) => (
+
+);
+
+const ArrowForward = ({ className, onClick,width="18",height = "18",fill ="black" }) => (
+
+);
+
+const ArrowToFirst = ({ className, onClick,width="18",height="18",fill="#505A5F"}) => (
+
+);
+
+const ArrowToLast = ({ className, onClick,fill="#505A5F",width="18",height="18" }) => (
+
+);
+
+const DownloadPrefixIcon = ({ className, onClick,width="24",height="24",fill="#C84C0E" }) => (
+
+);
+
+const CameraSvg = ({ className, fill="black", width="46",height="42" }) => (
+
+);
+
+const DeleteBtn = ({ className, onClick, fill="white",width="18",height="18" }) => (
+
+);
+
+const SuccessSvg = ({ className,fill="#00703C" ,width="24",height="24"}) => (
+
+);
+
+const ErrorSvg = ({ className,fill="#D4351C" ,width="24",height="24" }) => (
+
+);
+
+const StarFilled = ({ className, id, onClick, styles, percentage = 100,fill="#C84C0E" ,width="48",height="48" }) => (
+
+);
+
+const StarEmpty = ({ className, onClick, styles,fill="#C84C0E" ,width="48",height="48" }) => (
+
+);
+
+const DownloadImgIcon = ({width="14",height="17",fill="#C84C0E"}) => (
+
+);
+
+const PrevIcon = ({fill="#0B0C0C" ,width="8",height="12"}) => (
+
+);
+
+const ViewsIcon = ({fill="#C84C0E" ,width="22",height="16"}) => (
+
+);
+
+const DocumentIcon = ({fill="#C84C0E" ,width="100",height="100",onClick}) => (
+
+);
+
+const DocumentIconSolid = ({fill="#FFFFFF" ,width="24",height="24"}) => (
+
+);
+
+const SurveyIconSolid = ({fill="#FFFFFF" ,width="24",height="24"}) => (
+
+);
+
+const PMBIcon = ({fill="#C84C0E" ,width="32",height="16"}) => (
+
+);
+
+const PMBIconSolid = ({fill="#FFFFFF" ,width="24",height="24"}) => (
+
+);
+
+const EventsIconSolid = ({fill="#FFFFFF" ,width="24",height="24"}) => (
+
+);
+
+const DustbinIcon = ({fill="#C84C0E" ,width="14",height="18"}) => (
+
+);
+
+const ImageIcon = ({fill="#000000" ,width="24",height="24"}) => (
+
+);
+
+// const DocumentSVG = ({className}) =>
+
+// const PDFSvg = ({className, width = 100, height = 100, style, viewBox="0 0 34 34" }) =>
+
+const DocumentSVG = ({fill="#505A5F" ,width="80",height="80",onClick}) => (
+
+);
+
+const PDFSvg = ({
+ className,
+ width = 80,
+ height = 80,
+ style = {
+ background: "#f6f6f6",
+ padding: "8px",
+ boxShadow: "0px 2px 0px #d6d5d3",
+ borderRadius: "4px",
+ },
+ viewBox = "0 0 80 80",
+ fill="#505A5F"
+}) => (
+
+);
+
+const SearchIconSvg = ({ className, onClick,fill="#C84C0E" ,width="24",height="24" }) => (
+
+);
+
+const CheckSvg = ({ className, style = {},fill="#C84C0E" ,width="24",height="24" }) => (
+
+);
+
+const RoundedCheck = ({ className,fill="#FFFFFF" ,width="24",height="24" }) => (
+
+);
+
+const Calender = ({ className, onClick,fill="black" ,width="24",height="24" }) => (
+
+);
+
+const Phone = ({ className, fillcolor, style,fill="#C84C0E" ,width="24",height="24" }) => (
+
+);
+
+const FilterSvg = ({ className,style,onClick,fill="#C84C0E" ,width="24",height="24" }) => (
+
+);
+
+const SortSvg = ({ className,fill="#505A5F" ,width="24",height="16" }) => (
+
+);
+
+const Close = ({ className, style,fill="#9E9E9E" ,width="24",height="24" }) => (
+
+);
+
+const Feedback = ({ className,fill="#C84C0E" ,width="24",height="24" }) => (
+
+);
+
+// Download Icon
+
+const GetApp = ({ className ,fill="#C84C0E" ,width="24",height="24" }) => (
+
+);
+
+const HamburgerIcon = ({ className, styles ,fill="#C84C0E" ,width="24",height="24" }) => (
+
+);
+
+export const HomeIcon = ({ className, styles,fill="#C84C0E" ,width="24",height="24" }) => (
+
+);
+
+export const LanguageIcon = ({ className, styles,fill="#C84C0E" ,width="24",height="24" }) => (
+
+);
+
+export const LogoutIcon = ({ className, styles,fill="#C84C0E" ,width="24",height="24" }) => (
+
+);
+
+const CalendarIcon = (props,fill="black" ,width="24",height="24") => (
+
+);
+
+const SortDown = (style,onClick,fill="#C84C0E" ,width="24",height="24") => (
+
+);
+
+const SortUp = (style,onClick,fill="#C84C0E" ,width="24",height="24") => (
+
+);
+
+const ArrowRightInbox = ({ style,fill="#C84C0E" ,width="20",height="14" }) => (
+
+);
+
+const ShippingTruck = ({ className, styles,fill="#C84C0E" ,width="24",height="24" }) => (
+
+);
+
+function CloseSvg({ onClick,fill="#C84C0E" ,width="24",height="24" }) {
+ return (
+
+ );
+}
+
+const UpwardArrow = ({ rotate = 0, marginRight = 0,fill="#00703C" ,width="11",height="16" }) => (
+
+);
+
+const DownwardArrow = (props,fill="#E54D42" ,width="24",height="24") => (
+ 
onClick(source, index)}>
+ );
+};
+
+const DisplayPhotos = (props) => {
+ return (
+
; +}; + +Divider.propTypes = { + className: PropTypes.string, + style: PropTypes.object, +}; + +export default Divider; diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Dropdown.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Dropdown.js new file mode 100644 index 00000000..1412d04c --- /dev/null +++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Dropdown.js @@ -0,0 +1,690 @@ +import PropTypes from "prop-types"; +import React, { useEffect, useRef, useState } from "react"; +import { SVG } from "./SVG"; +import TreeSelect from "./TreeSelect"; +import { CustomSVG } from "./CustomSVG"; +import Menu from "./Menu"; +import { Colors } from "../constants/colors/colorconstants"; +import { iconRender } from "../utils/iconRender"; +import { getUserType } from "../utils/digitUtils"; +import StringManipulator from "./StringManipulator"; + +const TextField = (props) => { + const [value, setValue] = useState( + props.selectedVal ? props.selectedVal : "" + ); + + useEffect(() => { + if (!props.keepNull) + if (props.selectedVal) setValue(props.selectedVal); + else { + setValue(""); + props.setFilter(""); + } + else setValue(""); + }, [props.selectedVal, props.forceSet]); + + function inputChange(e) { + if (props.freeze) return; + + setValue(e.target.value); + // the dropdown searchablility is made configurable through isSearchable prop + if (props.isSearchable) { + props.setFilter(e.target.value); + } + } + + function broadcastToOpen() { + if (!props.disable) { + props.dropdownDisplay(true); + } + } + + function broadcastToClose() { + props.dropdownDisplay(false); + } + + const replaceDotWithColon = (inputString) => { + if ( + props?.variant === "nesteddropdown" || + (props?.variant === "treedropdown" && inputString) + ) { + const updatedInputString = inputString.replace(/\./g, ": "); + return updatedInputString; + } + return inputString; + }; + + /* Custom function to scroll and select in the dropdowns while using key up and down */ + const keyChange = (e) => { + if (e.key == "ArrowDown") { + props.setOptionIndex((state) => + state + 1 == props.addProps.length ? 0 : state + 1 + ); + if (props.addProps.currentIndex + 1 == props.addProps.length) { + e?.target?.parentElement?.parentElement?.children + ?.namedItem("jk-dropdown-unique") + ?.scrollTo?.(0, 0); + } else { + props?.addProps?.currentIndex > 2 && + e?.target?.parentElement?.parentElement?.children + ?.namedItem("jk-dropdown-unique") + ?.scrollBy?.(0, 45); + } + e.preventDefault(); + } else if (e.key == "ArrowUp") { + props.setOptionIndex((state) => + state !== 0 ? state - 1 : props.addProps.length - 1 + ); + if (props.addProps.currentIndex == 0) { + e?.target?.parentElement?.parentElement?.children + ?.namedItem("jk-dropdown-unique") + ?.scrollTo?.(100000, 100000); + } else { + props?.addProps?.currentIndex > 2 && + e?.target?.parentElement?.parentElement?.children + ?.namedItem("jk-dropdown-unique") + ?.scrollBy?.(0, -45); + } + e.preventDefault(); + } + else if (e.key === "Enter") { + if (props.addProps.length === 1) { + props.addProps.selectOption(0); + } + else { + props.addProps.selectOption(props.addProps.currentIndex); + } + e.preventDefault(); + } + }; + + return ( + { + broadcastToClose(); + props?.onBlur?.(e); + if (props.selectedVal !== props.filterVal) { + setTimeout(() => { + props.setforceSet((val) => val + 1); + }, 1000); + } + }} + onKeyDown={keyChange} + readOnly={props.disable} + autoFocus={props.autoFocus} + placeholder={props.placeholder} + autoComplete={"off"} + style={props.style} + title={props.showToolTip ? replaceDotWithColon(value) : undefined} + /> + ); +}; + +const translateDummy = (text) => { + return text; +}; + +const Dropdown = (props) => { + const user_type = getUserType(); + const [dropdownStatus, setDropdownStatus] = useState(false); + const [menuStatus, setMenuStatus] = useState(false); + const [selectedOption, setSelectedOption] = useState( + props.selected ? props.selected : null + ); + const [filterVal, setFilterVal] = useState(""); + const [isActive, setIsActive] = useState(-1); + const [forceSet, setforceSet] = useState(0); + const [optionIndex, setOptionIndex] = useState(-1); + const optionRef = useRef(null); + const dropdownComponentRef = useRef(null); + const menuRef = useRef(null); + const selectorRef = useRef(null); + const hasCustomSelector = props.customSelector ? true : false; + const t = props.t || translateDummy; + + + const scrollIntoViewIfNeeded = () => { + if (dropdownComponentRef.current) { + const rect = dropdownComponentRef.current.getBoundingClientRect(); + const viewportWidth = window.innerWidth; + const viewportHeight = window.innerHeight; + + // Check if the component is outside the viewport + const isOutsideViewport = + rect.top < 0 || rect.left < 0 || rect.bottom > viewportHeight || rect.right > viewportWidth; + + if (isOutsideViewport) { + // Scroll to make the component visible + dropdownComponentRef.current.scrollIntoView({ + behavior: "smooth", // Optional: smooth scrolling + block: "center", // Scroll to the center vertically + inline: "center", // Scroll to the center horizontally + }); + } + } + }; + + useEffect(() => { + scrollIntoViewIfNeeded(); + }, []); // Runs on mount + + + useEffect(() => { + setSelectedOption(props.selected); + }, [props.selected]); + + function dropdownSwitch() { + if (!props.disabled) { + var current = dropdownStatus; + if (!current) { + document.addEventListener("mousedown", handleClick, false); + } + setDropdownStatus(!current); + props?.onBlur?.(); + } + } + + function menuSwitch(){ + if(!props.disabled){ + var current = menuStatus; + if (!current) { + document.addEventListener("mousedown", handleClickOutside, false); + } + setMenuStatus(!current); + props?.onBlur?.(); + } + } + + function handleClickOutside(e) { + if (!menuRef.current || !menuRef.current.contains(e.target)) { + if(selectorRef?.current && selectorRef?.current.contains(e.target)){ + return ; + } + else{ + document.removeEventListener("mousedown", handleClickOutside, false); + setMenuStatus(false); + } + } + } + + function handleClick(e) { + if (!optionRef.current || !optionRef.current.contains(e.target)) { + document.removeEventListener("mousedown", handleClick, false); + setDropdownStatus(false); + } + } + + function dropdownOn(val) { + const waitForOptions = () => setTimeout(() => setDropdownStatus(val), 500); + const timerId = waitForOptions(); + return () => { + clearTimeout(timerId); + }; + } + + function onSelect(val) { + if (val !== selectedOption || props.allowMultiselect) { + props.select(val); + setSelectedOption(val); + setDropdownStatus(false); + } else { + setSelectedOption(val); + setforceSet(forceSet + 1); + setDropdownStatus(false); + } + } + + function setFilter(val) { + setFilterVal(val); + } + + let filteredOption = + (props.option && + props.option?.filter( + (option) => + t(option[props?.optionKey]) + ?.toUpperCase() + ?.indexOf(filterVal?.toUpperCase()) > -1 + )) || + []; + function selectOption(ind) { + const optionsToSelect = + props.variant === "nesteddropdown" || props.variant === "treedropdown" + ? flattenedOptions + : filteredOption; + onSelect(optionsToSelect[ind]); + } + + if (props.isBPAREG && selectedOption) { + let isSelectedSameAsOptions = + props.option?.filter((ob) => ob?.code === selectedOption?.code)?.length > + 0; + if (!isSelectedSameAsOptions) setSelectedOption(null); + } + + const inputBorderColor = Colors.lightTheme.generic.inputBorder; + const dividerColor = Colors.lightTheme.generic.divider; + const primaryColor = Colors.lightTheme.paper.primary; + + const IconRender = (iconReq, isActive) => { + const iconFill = isActive ? primaryColor : inputBorderColor; + return iconRender( + iconReq, + iconFill, + "1.25rem", + "1.25rem", + "" + ); + }; + + const flattenOptions = (options) => { + let flattened = []; + + const flattenNestedOptions = (nestedOptions) => { + nestedOptions.forEach((nestedOption) => { + flattened.push(nestedOption); + if (nestedOption.options) { + flattenNestedOptions(nestedOption.options); + } + }); + }; + + const parentOptionsWithChildren = options.filter( + (option) => option.options && option.options.length > 0 + ); + + parentOptionsWithChildren.forEach((option) => { + if (option.options) { + flattened.push(option); + flattenNestedOptions(option.options); + } else { + flattened.push(option); + } + }); + + return flattened; + }; + + const flattenedOptions = flattenOptions(filteredOption); + + const renderOption = (option, index) => { + const handleMouseDown = (e) => { + if (e.button === 0) setIsActive(index); + }; + const handleMouseUp = () => { + setIsActive(-1); + }; + + return ( +
+
+ );
+ case "uploadImage":
+ return (
+
+
+ );
+ case "uploadField":
+ default:
+ return (
+
+
+ );
+ }
+ };
+
+ return (
+
+
+ );
+};
+
+FileUpload.propTypes = {
+ hintText: PropTypes.string,
+ showHint: PropTypes.bool,
+ label: PropTypes.string,
+ showLabel: PropTypes.bool,
+ showAsTags: PropTypes.bool,
+ showAsPreview: PropTypes.bool,
+ customClass: PropTypes.string,
+ uploadedFiles: PropTypes.arrayOf(
+ PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object]))
+ ),
+ disableButton: PropTypes.bool,
+ buttonType: PropTypes.string,
+ onUpload: PropTypes.func,
+ removeTargetedFile: PropTypes.func,
+ onDelete: PropTypes.func,
+ iserror: PropTypes.string,
+ disabled: PropTypes.bool,
+ inputStyles: PropTypes.object,
+ multiple: PropTypes.bool,
+ accept: PropTypes.string,
+ id: PropTypes.string,
+ showDownloadButton: PropTypes.bool,
+ showReUploadButton: PropTypes.bool,
+};
+
+FileUpload.defaultProps = {
+ disableButton: false,
+};
+
+export default FileUpload;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Footer.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Footer.js
new file mode 100644
index 00000000..16b642c5
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Footer.js
@@ -0,0 +1,76 @@
+import React,{useState,useEffect} from "react";
+import PropTypes from "prop-types";
+
+const Footer = (props) => {
+
+ const [isMobileView, setIsMobileView] = useState(window.innerWidth <= 480);
+ const onResize = () => {
+ if (window.innerWidth <= 480) {
+ if (!isMobileView) {
+ setIsMobileView(true);
+ }
+ } else {
+ if (isMobileView) {
+ setIsMobileView(false);
+ }
+ }
+ };
+ useEffect(() => {
+ window.addEventListener("resize", () => {
+ onResize();
+ });
+ return () => {
+ window.removeEventListener("resize", () => {
+ onResize();
+ });
+ };
+ });
+
+ const hasActionFields = props?.actionFields?.length > 0;
+ const allowedActionFields = hasActionFields
+ ? props?.actionFields.slice(0, props?.maxActionFieldsAllowed || 5)
+ : [];
+ const sortedActionFields = [...allowedActionFields].sort((a, b) => {
+ const typeOrder = { primary: 3, secondary: 2, tertiary: 1 };
+ const getTypeOrder = (button) =>
+ typeOrder[(button.props.variation || "").toLowerCase()];
+ return getTypeOrder(a) - getTypeOrder(b);
+ });
+ const finalActionFields = props?.sortActionFields
+ ? isMobileView
+ ? sortedActionFields.reverse()
+ : sortedActionFields
+ : allowedActionFields;
+
+
+
+ return (
+
+ {props.children}
+
+ );
+};
+
+HeaderComponent.propTypes = {
+ className: PropTypes.string,
+ styles: PropTypes.object,
+ children: PropTypes.node,
+};
+
+export default HeaderComponent;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/HomeFooter.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/HomeFooter.js
new file mode 100644
index 00000000..d47b00b1
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/HomeFooter.js
@@ -0,0 +1,22 @@
+import React from "react";
+
+function HomeFooter(props) {
+ const info = window?.Digit?.UserService?.getUser()?.info || null;
+ const userType = info?.type || null;
+ const additionalClassname = userType === "EMPLOYEE" ? "employee" : "citizen";
+
+ return (
+
+
+ );
+};
+
+MobileNumber.propTypes = {
+ userType: PropTypes.string,
+ isMandatory: PropTypes.bool,
+ name: PropTypes.string,
+ placeholder: PropTypes.string,
+ onChange: PropTypes.func,
+ inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.instanceOf(Element) })]),
+ value: PropTypes.any,
+ className: PropTypes.string,
+ style: PropTypes.object,
+ maxLength: PropTypes.number,
+ minlength: PropTypes.number,
+ max: PropTypes.number,
+ pattern: PropTypes.string,
+ min: PropTypes.number,
+ disable: PropTypes.bool,
+ errorStyle: PropTypes.bool,
+ hideSpan: PropTypes.bool,
+ title: PropTypes.string,
+ step: PropTypes.string,
+ autoFocus: PropTypes.bool,
+ onBlur: PropTypes.func,
+};
+
+MobileNumber.defaultProps = {
+ isMandatory: false,
+};
+
+export default MobileNumber;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/MultiSelectDropdown.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/MultiSelectDropdown.js
new file mode 100644
index 00000000..e061794e
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/MultiSelectDropdown.js
@@ -0,0 +1,859 @@
+import React, { useEffect, useReducer, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import Chip from "./Chip";
+import { SVG } from "./SVG";
+import Button from "./Button";
+import TreeSelect from "./TreeSelect";
+import { Colors} from "../constants/colors/colorconstants";
+import { iconRender } from "../utils/iconRender";
+
+const MultiSelectDropdown = ({
+ options,
+ optionsKey,
+ selected = [],
+ onSelect,
+ onClose,
+ defaultLabel = "",
+ defaultUnit = "",
+ props,
+ isPropsNeeded = false,
+ ServerStyle = {},
+ config,
+ disabled,
+ variant,
+ addSelectAllCheck = false,
+ addCategorySelectAllCheck = false,
+ selectAllLabel = "",
+ categorySelectAllLabel = "",
+ restrictSelection = false,
+ isSearchable=false,
+ chipsKey,
+ frozenData = [],
+ handleViewMore
+}) => {
+ const [active, setActive] = useState(false);
+ const [searchQuery, setSearchQuery] = useState();
+ const [optionIndex, setOptionIndex] = useState(-1);
+ const [selectAllChecked, setSelectAllChecked] = useState(false);
+ const [categorySelected, setCategorySelected] = useState({});
+ const dropdownRef = useRef();
+ const { t } = useTranslation();
+
+ function reducer(state, action) {
+ switch (action.type) {
+ case "ADD_TO_SELECTED_EVENT_QUEUE":
+ // Check if the item already exists to prevent duplication
+ if (state.some((e) => e.code === action.payload?.[1]?.code)) {
+ return state; // Return state unchanged if item is already in queue
+ }
+ return [
+ ...state,
+ { code: action.payload?.[1]?.code,name: action?.payload?.[1]?.name, propsData: action.payload,},
+ ];
+ case "REMOVE_FROM_SELECTED_EVENT_QUEUE":
+ const newState = state?.filter(
+ (e) => e?.code !== action.payload?.[1]?.code
+ );
+ onSelect(
+ newState.map((e) => e.propsData),
+ getCategorySelectAllState(),
+ props
+ ); // Update the form state here
+ if (onClose && !active) {
+ setSearchQuery("");
+ onClose(
+ newState.map((e) => e.propsData),
+ getCategorySelectAllState(),
+ props
+ );
+ }
+ return newState;
+ case "REPLACE_COMPLETE_STATE":
+ return action.payload;
+ default:
+ return state;
+ }
+ }
+
+ useEffect(() => {
+ dispatch({
+ type: "REPLACE_COMPLETE_STATE",
+ payload: fnToSelectOptionThroughProvidedSelection(selected),
+ });
+ }, [selected?.length]);
+
+ function fnToSelectOptionThroughProvidedSelection(selected) {
+ return selected?.map((e) => ({ code: e?.code, name: e?.name,propsData: [null, e] }));
+ }
+ const [alreadyQueuedSelectedState, dispatch] = useReducer(
+ reducer,
+ selected,
+ fnToSelectOptionThroughProvidedSelection
+ );
+
+ useEffect(() => {
+ if (!active) {
+ setSearchQuery("");
+ onSelect(
+ alreadyQueuedSelectedState?.map((e) => e.propsData),
+ getCategorySelectAllState(),
+ props
+ );
+ }
+ if (onClose) {
+ onClose(
+ alreadyQueuedSelectedState?.map((e) => e.propsData),
+ getCategorySelectAllState(),
+ props
+ );
+ }
+ }, [active]);
+
+ useEffect(() => {
+ const initialCategorySelectedState = options?.reduce((acc, category) => {
+ if (category.options) {
+ var filteredCategoryOptions = category?.options;
+ if (searchQuery?.length > 0) {
+ filteredCategoryOptions = category?.options?.filter((option) => t(option?.code)?.toLowerCase()?.includes(searchQuery?.toLowerCase()));
+ }
+ acc[category.code] = filteredCategoryOptions.every((option) =>
+ alreadyQueuedSelectedState.some((selectedOption) => selectedOption.code === option.code)
+ );
+ }
+ return acc;
+ }, {});
+ setCategorySelected(initialCategorySelectedState);
+ }, [options, alreadyQueuedSelectedState, searchQuery]);
+
+ const checkSelection = (optionstobeiterated) => {
+ if (optionstobeiterated && optionstobeiterated.length > 0) {
+ return optionstobeiterated?.every((option) =>
+ alreadyQueuedSelectedState.some(
+ (selectedOption) => selectedOption.code === option.code
+ )
+ );
+ } else {
+ return false;
+ }
+ };
+
+ useEffect(() => {
+ const allOptionsSelected =
+ variant === "nestedmultiselect"
+ ? checkSelection(flattenedOptions?.filter((option) => !option.options))
+ : checkSelection(options);
+
+ setSelectAllChecked(allOptionsSelected);
+
+ const newCategorySelected = { ...categorySelected };
+ options
+ ?.filter((option) => option.options)
+ ?.forEach((category) => {
+ newCategorySelected[category.code] = undefined;
+ });
+ options
+ ?.filter((option) => option.options)
+ ?.forEach((category) => {
+ // If the category has already been marked as false, skip further processing for this category.
+ if (newCategorySelected[category.code] === false) return;
+ let filteredCategoryOptions = category?.options;
+ if (searchQuery?.length > 0) {
+ filteredCategoryOptions = category?.options?.filter((option) =>
+ t(option?.code)?.toLowerCase()?.includes(searchQuery?.toLowerCase())
+ );
+ }
+ if (filteredCategoryOptions?.length > 0) {
+ const allChildrenSelected = checkSelection(filteredCategoryOptions);
+ if (!allChildrenSelected) {
+ newCategorySelected[category.code] = false; // Mark as false if any child is not selected.
+ } else {
+ newCategorySelected[category.code] = true; // Mark as true if all children are selected.
+ }
+ }
+ });
+ setCategorySelected(newCategorySelected);
+ }, [options, alreadyQueuedSelectedState, searchQuery]);
+
+ function handleOutsideClickAndSubmitSimultaneously() {
+ setActive(false);
+ }
+
+ window?.Digit?.Hooks.useClickOutside(
+ dropdownRef,
+ handleOutsideClickAndSubmitSimultaneously,
+ active,
+ { capture: true }
+ );
+
+ useEffect(() => {
+ setOptionIndex(0);
+ }, [searchQuery]);
+
+ function onSearch(e) {
+ setSearchQuery(e.target.value);
+ }
+
+ function onSelectToAddToQueue(...props) {
+ if (!restrictSelection) {
+ if (variant === "treemultiselect") {
+ const currentoptions = props[0];
+ currentoptions?.forEach((option) => {
+ const isAlreadySelected = alreadyQueuedSelectedState.some(
+ (selectedOption) => selectedOption.code === option.code
+ );
+ if (!isAlreadySelected) {
+ dispatch({
+ type: "ADD_TO_SELECTED_EVENT_QUEUE",
+ payload: [null, option],
+ });
+ } else {
+ dispatch({
+ type: "REMOVE_FROM_SELECTED_EVENT_QUEUE",
+ payload: [null, option],
+ });
+ const parentOption = findParentOption(option, options);
+ if (parentOption) {
+ dispatch({
+ type: "REMOVE_FROM_SELECTED_EVENT_QUEUE",
+ payload: [null, parentOption],
+ });
+ }
+ }
+ });
+ } else {
+ const isChecked = arguments[0].target.checked;
+ isChecked
+ ? dispatch({ type: "ADD_TO_SELECTED_EVENT_QUEUE", payload: arguments })
+ : dispatch({
+ type: "REMOVE_FROM_SELECTED_EVENT_QUEUE",
+ payload: arguments,
+ });
+ }
+ onSelect(
+ alreadyQueuedSelectedState?.map((e) => e.propsData),
+ getCategorySelectAllState(),
+ props
+ );
+ } else {
+ onSelect();
+ }
+ }
+
+ const primaryColor = Colors.lightTheme.paper.primary;
+ const inputBorderColor = Colors.lightTheme.generic.inputBorder;
+ const primaryIconColor = Colors.lightTheme.primary[1];
+ const dividerColor = Colors.lightTheme.generic.divider;
+ const background = Colors.lightTheme.paper.secondary;
+
+ const IconRender = (iconReq, isActive, isSelected) => {
+ const iconFill = isActive || isSelected ? primaryColor : inputBorderColor;
+ return iconRender(
+ iconReq,
+ iconFill,
+ "1.25rem",
+ "1.25rem",
+ ""
+ );
+ };
+
+ const handleClearAll = () => {
+ dispatch({ type: "REPLACE_COMPLETE_STATE", payload: [] });
+ onSelect([], getCategorySelectAllState(), props);
+ if (onClose) {
+ onClose([], getCategorySelectAllState(), props);
+ }
+ };
+
+ const handleSelectAll = () => {
+ if (!restrictSelection) {
+ if (selectAllChecked) {
+ dispatch({ type: "REPLACE_COMPLETE_STATE", payload: [] });
+ setSelectAllChecked(false);
+ } else {
+ const payload =
+ variant === "nestedmultiselect"
+ ? flattenedOptions
+ ?.filter((option) => !option.options)
+ ?.map((option) => ({
+ code: option.code,
+ name: option.name,
+ propsData: [null, option],
+ }))
+ : options.map((option) => ({
+ code: option.code,
+ name: option.name,
+ propsData: [null, option],
+ }));
+ dispatch({
+ type: "REPLACE_COMPLETE_STATE",
+ payload: payload,
+ });
+ setSelectAllChecked(true);
+ }
+ onSelect(
+ alreadyQueuedSelectedState?.map((e) => e.propsData),
+ getCategorySelectAllState(),
+ props
+ );
+ } else {
+ onSelect();
+ }
+ };
+
+ const handleCategorySelection = (parentOption) => {
+ if (!restrictSelection) {
+ const childoptions = parentOption.options;
+ if (!categorySelected[parentOption.code]) {
+ childoptions?.forEach((option) => {
+ const isAlreadySelected = alreadyQueuedSelectedState.some((selectedOption) => selectedOption.code === option.code);
+ if (!isAlreadySelected) {
+ dispatch({
+ type: "ADD_TO_SELECTED_EVENT_QUEUE",
+ payload: [null, option],
+ });
+ }
+ });
+ } else {
+ childoptions?.forEach((option) => {
+ dispatch({
+ type: "REMOVE_FROM_SELECTED_EVENT_QUEUE",
+ payload: [null, option],
+ });
+ });
+ }
+ setCategorySelected((prev) => ({
+ ...prev,
+ [parentOption.code]: !categorySelected[parentOption.code],
+ }));
+ onSelect(
+ alreadyQueuedSelectedState?.map((e) => e.propsData),
+ getCategorySelectAllState(),
+ props
+ );
+ } else {
+ onSelect();
+ }
+ };
+
+ function getCategorySelectAllState() {
+ if (variant === "nestedmultiselect") {
+ const categorySelectAllState = {};
+ options
+ ?.filter((option) => option.options)
+ ?.forEach((category) => {
+ categorySelectAllState[category.code] = {
+ isSelectAllChecked: categorySelected[category.code] || false,
+ };
+ });
+ return categorySelectAllState;
+ }
+ return {};
+ }
+
+
+ const replaceDotWithColon = (inputString) => {
+ if (inputString) {
+ const updatedInputString = inputString.replace(/\./g, ": ");
+ return updatedInputString;
+ }
+ };
+
+ const countFinalChildOptions = (totalselectedOptions) => {
+ let count = 0;
+ totalselectedOptions?.forEach((option) => {
+ if (!option.propsData[1]?.options) {
+ count += 1;
+ }
+ });
+ return count;
+ };
+
+ const selectOptionThroughKeys = (e, option) => {
+ if (!option) return;
+ let checked = alreadyQueuedSelectedState.find(
+ (selectedOption) => selectedOption?.code === option?.code
+ )
+ ? true
+ : false;
+ if (!checked) {
+ dispatch({
+ type: "ADD_TO_SELECTED_EVENT_QUEUE",
+ payload: [null, option],
+ });
+ } else {
+ dispatch({
+ type: "REMOVE_FROM_SELECTED_EVENT_QUEUE",
+ payload: [null, option],
+ });
+ }
+ };
+
+ /* Custom function to scroll and select in the dropdowns while using key up and down */
+ const keyChange = (e) => {
+ const optionToScroll =
+ variant === "nestedmultiselect" ? flattenedOptions : filteredOptions;
+
+ if (optionToScroll.length === 0) {
+ return; // No options to navigate
+ }
+
+ if (e.key == "ArrowDown") {
+ setOptionIndex((state) =>
+ state + 1 == optionToScroll.length ? 0 : state + 1
+ );
+ if (optionIndex + 1 == optionToScroll.length) {
+ e?.target?.parentElement?.parentElement?.children
+ ?.namedItem("jk-dropdown-unique")
+ ?.scrollTo?.(0, 0);
+ } else {
+ optionIndex > 2 &&
+ e?.target?.parentElement?.parentElement?.children
+ ?.namedItem("jk-dropdown-unique")
+ ?.scrollBy?.(0, 45);
+ }
+ e.preventDefault();
+ } else if (e.key == "ArrowUp") {
+ setOptionIndex((state) =>
+ state !== 0 ? state - 1 : optionToScroll.length - 1
+ );
+ if (optionIndex === 0) {
+ e?.target?.parentElement?.parentElement?.children
+ ?.namedItem("jk-dropdown-unique")
+ ?.scrollTo?.(100000, 100000);
+ } else {
+ optionIndex > 2 &&
+ e?.target?.parentElement?.parentElement?.children
+ ?.namedItem("jk-dropdown-unique")
+ ?.scrollBy?.(0, -45);
+ }
+ e.preventDefault();
+ } else if (e.key == "Enter") {
+ selectOptionThroughKeys(e, optionToScroll[optionIndex]);
+ }
+ };
+
+ const filteredOptions =
+ searchQuery?.length > 0
+ ? options
+ ?.map((option) => {
+ if (option?.options && option.options.length > 0) {
+ const matchingNestedOptions = option?.options?.filter(
+ (nestedOption) =>
+ t(nestedOption.code)
+ .toLowerCase()
+ .includes(searchQuery.toLowerCase())
+ );
+
+ if (matchingNestedOptions.length > 0) {
+ return {
+ ...option,
+
+ options: matchingNestedOptions,
+ };
+ }
+ } else if (option?.code) {
+ if (
+ t(option.code).toLowerCase().includes(searchQuery.toLowerCase())
+ ) {
+ return option;
+ }
+ }
+
+ return null;
+ })
+ ?.filter(Boolean)
+ : options;
+
+ const parentOptionsWithChildren = filteredOptions?.filter(
+ (option) => option.options && option.options.length > 0
+ );
+
+ const flattenOptions = (options) => {
+ let flattened = [];
+ options?.forEach((option) => {
+ const existingOption = flattened.find(
+ (flattenedOption) => flattenedOption?.code === option?.code
+ );
+ if (existingOption) {
+ // If the code already exists, merge the new options
+ if (option.options) {
+ existingOption.options = existingOption.options || [];
+ existingOption.options = existingOption.options.concat(option.options);
+ }
+ } else {
+ flattened.push(option);
+ }
+ // Flatten any nested options
+ if (option.options) {
+ flattened = flattened.concat(option.options);
+ }
+ });
+ // Remove duplicates by 'code' within the flattened array
+ flattened = flattened?.filter(
+ (option, index, self) =>
+ index === self.findIndex((o) => o.code === option.code)
+ );
+ flattened.forEach((option) => {
+ if (option.options) {
+ option.options = option?.options?.filter(
+ (opt, idx, arr) => idx === arr.findIndex((o) => o.code === opt.code)
+ );
+ }
+ });
+ return flattened;
+ };
+
+ const flattenedOptions = flattenOptions(parentOptionsWithChildren);
+
+ function findParentOption(childOption, options) {
+ for (const option of options) {
+ if (
+ option.options &&
+ option.options.some((child) => child.code === childOption.code)
+ ) {
+ return option;
+ }
+ if (option.options) {
+ const parentOption = findParentOption(childOption, option.options);
+ if (parentOption) {
+ return parentOption;
+ }
+ }
+ }
+ return null;
+ }
+
+ const MenuItem = ({ option, index }) => {
+ const [isActive, setIsActive] = useState(false);
+ const isFrozen = frozenData.some((frozenOption) => frozenOption.code === option.code);
+ return (
+
+ {(tableDetails?.tableDescription ||
+ tableDetails?.tableTitle ||
+ tableDetails?.addClose) && (
+
+ ) : (
+ renderNestedTable()
+ );
+};
+
+
+NestedTable.propTypes = {
+ nestedData: PropTypes.arrayOf(PropTypes.object).isRequired,
+ toggleRowExpansion: PropTypes.func.isRequired,
+ rowIndex: PropTypes.number.isRequired,
+ };
+
+export default NestedTable;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/NoResultsFound.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/NoResultsFound.js
new file mode 100644
index 00000000..74618947
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/NoResultsFound.js
@@ -0,0 +1,29 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { SVG } from "./SVG";
+
+const NoResultsFound = (props) => {
+ const { t } = useTranslation();
+ const iconHeight = props?.height || 262;
+ const iconWidth = props?.width || 336;
+ return (
+
+
+ );
+};
+
+export default Numeric;
+
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/OTPInput.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/OTPInput.js
new file mode 100644
index 00000000..a4f34050
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/OTPInput.js
@@ -0,0 +1,156 @@
+import React,{ useState, useRef, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import ErrorMessage from "./ErrorMessage";
+
+const OTPInput = ({
+ length = 6,
+ type = "numeric",
+ onChange,
+ placeholder,
+ className,
+ style,
+ label,
+ inline,
+ masking = false,
+}) => {
+ const [otp, setOtp] = useState(Array(length).fill(""));
+ const inputRefs = useRef([]);
+ const [error, setError] = useState(null);
+ const { t } = useTranslation();
+
+ useEffect(() => {
+ inputRefs.current[0].focus();
+ }, []);
+
+ const handleInputChange = (e, index) => {
+ const value = e.target.value;
+ const isAlphanumeric = /^[a-zA-Z0-9]*$/;
+
+ if (
+ (type === "numeric" && !isNaN(value) && value !== " ") ||
+ (type === "alphanumeric" && isAlphanumeric.test(value))
+ ) {
+ const newOtp = [...otp];
+ newOtp[index] = value;
+ setOtp(newOtp);
+ if (newOtp.join("").length === length && !newOtp.includes("")) {
+ const finalOtp = newOtp.join("");
+ const callbackError = onChange(finalOtp);
+ setError(callbackError || null);
+ }
+
+ if (value && index < length - 1) {
+ inputRefs.current[index + 1].focus();
+ }
+ }
+ };
+
+ const handlePaste = (e) => {
+ e.preventDefault();
+ const pastedData = e.clipboardData.getData("text").slice(0, length);
+ const newOtp = [...otp];
+ let pasteIndex = 0;
+ for (let i = 0; i < newOtp.length && pasteIndex < pastedData.length; i++) {
+ const char = pastedData[pasteIndex];
+
+ if (
+ (type === "numeric" && !isNaN(char) && char !== " ") ||
+ (type === "alphanumeric" && /^[a-zA-Z0-9]*$/.test(char))
+ ) {
+ newOtp[i] = char;
+ pasteIndex++;
+ }
+ }
+
+ setOtp(newOtp);
+ if (newOtp.join("").length === length && !newOtp.includes("")) {
+ const finalOtp = newOtp.join("");
+ const callbackError = onChange(finalOtp);
+ setError(callbackError || null);
+ }
+
+ // Focusing on the next input after the last pasted character
+ const nextIndex = pasteIndex < length ? pasteIndex : length - 1;
+ inputRefs.current[nextIndex].focus();
+ };
+
+ const handleKeyDown = (e, index) => {
+ if (e.key === "Backspace") {
+ e.preventDefault();
+ const newOtp = [...otp];
+
+ // Remove the current value and shift all subsequent values to the left
+ for (let i = index; i < newOtp.length - 1; i++) {
+ newOtp[i] = newOtp[i + 1];
+ }
+ newOtp[newOtp.length - 1] = "";
+
+ setOtp(newOtp);
+ onChange(newOtp.join(""));
+ if (index > 0) {
+ inputRefs.current[index - 1].focus(); // Move back to the previous input
+ }
+ } else if (e.key === "Enter") {
+ if (index === length - 1) {
+ if (otp.join("").length === length && !otp.includes("")) {
+ const finalOtp = otp.join("");
+ const callbackError = onChange(finalOtp);
+ setError(callbackError || null);
+ }
+ } else {
+ inputRefs.current[index + 1].focus(); // Move to next input on Enter
+ }
+ } else if (e.key === "ArrowRight" && index < length - 1) {
+ inputRefs.current[index + 1].focus(); // Move to next input with ArrowRight
+ } else if (e.key === "ArrowLeft" && index > 0) {
+ inputRefs.current[index - 1].focus(); // Move to previous input with ArrowLeft
+ }
+ };
+
+ const handleBlur = (index) => {
+ if (index === length - 1) {
+ const callbackError = onChange(otp.join("")); // Trigger callback on blur of the last input
+ setError(callbackError || null);
+ }
+ };
+
+ return (
+
+
+ );
+};
+
+export default PlusMinusInput;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/PopUp.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/PopUp.js
new file mode 100644
index 00000000..7fe70bce
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/PopUp.js
@@ -0,0 +1,304 @@
+import React, { useState, Fragment, useRef, useEffect } from "react";
+import PropTypes from "prop-types";
+import { SVG } from "./SVG";
+import StringManipulator from "./StringManipulator";
+import warningOutlineAnimation from "../constants/animations/warningOutline.json";
+import Animation from "./Animation";
+import { Colors } from "../constants/colors/colorconstants";
+import { iconRender } from "../utils/iconRender";
+
+const PopUp = (props) => {
+ const [isOverflowing, setIsOverflowing] = useState(false);
+ const childrenWrapRef = useRef(null);
+ const overlayRef = useRef(null);
+ const [isClosing, setIsClosing] = useState(false);
+
+ const [isMobileView, setIsMobileView] = useState(window.innerWidth <= 480);
+
+ const checkOverflow = () => {
+ if (childrenWrapRef.current) {
+ const isOverflow =
+ childrenWrapRef.current.scrollHeight >
+ childrenWrapRef.current.clientHeight;
+ setIsOverflowing(isOverflow);
+ }
+ };
+
+ const onResize = () => {
+ if (window.innerWidth <= 480) {
+ if (!isMobileView) {
+ setIsMobileView(true);
+ }
+ } else {
+ if (isMobileView) {
+ setIsMobileView(false);
+ }
+ }
+ checkOverflow();
+ };
+
+ useEffect(() => {
+ const handleScroll = () => checkOverflow();
+ const childrenWrap = childrenWrapRef.current;
+
+ if (childrenWrap) {
+ childrenWrap.addEventListener("scroll", handleScroll);
+ checkOverflow();
+ }
+
+ return () => {
+ if (childrenWrap) {
+ childrenWrap.removeEventListener("scroll", handleScroll);
+ }
+ };
+ }, [props.children]);
+
+ useEffect(() => {
+ window.addEventListener("resize", onResize);
+
+ checkOverflow();
+
+ return () => {
+ window.removeEventListener("resize", onResize);
+ };
+ }, []);
+
+ useEffect(() => {
+ if (overlayRef.current) {
+ overlayRef.current.focus();
+ }
+ }, [overlayRef]);
+
+ const iconColor = Colors.lightTheme.alert.error;
+
+ const IconRender = (type, iconReq, iconFill) => {
+ const fill = iconFill || iconColor;
+ const width = type === "alert" ? "48px" : "32px";
+ const height = type === "alert" ? "48px" : "32px";
+ return iconRender(
+ iconReq,
+ fill,
+ width,
+ height,
+ `digit-popup-customIcon ${type ? type : ""}`
+ );
+ };
+
+ const iconGenerated = IconRender(
+ props?.type,
+ props?.customIcon,
+ props?.iconFill
+ );
+
+ const hasFooterChildren = props?.footerChildren?.length > 0;
+
+ const allowedFooter = hasFooterChildren
+ ? props?.footerChildren?.slice(0, props?.maxFooterButtonsAllowed || 5)
+ : [];
+
+ const sortedFooterButtons = [...allowedFooter]?.sort((a, b) => {
+ const typeOrder = { primary: 3, secondary: 2, tertiary: 1 };
+ const getTypeOrder = (button) =>
+ typeOrder[(button.props.variation || "").toLowerCase()];
+ return getTypeOrder(a) - getTypeOrder(b);
+ });
+
+ const finalFooterArray = props?.sortFooterButtons
+ ? isMobileView
+ ? sortedFooterButtons.reverse()
+ : sortedFooterButtons
+ : allowedFooter;
+
+ const handleClose = () => {
+ setIsClosing(true);
+ setTimeout(() => {
+ props?.onClose();
+ }, 300);
+ };
+
+ const handleKeyDown = (event) => {
+ if (event.key === "Escape") {
+ handleClose();
+ }
+ if (event.key === "Enter") {
+ const submitButton = props?.footerChildren?.find(
+ (child) => child.props.type?.toLowerCase() === "submit"
+ );
+ if (submitButton) {
+ submitButton.props.onClick();
+ }
+ }
+ };
+
+ const handleOverlayClick = () => {
+ setIsClosing(true);
+ setTimeout(() => {
+ props?.onOverlayClick();
+ }, 300);
+ };
+
+ return (
+ {
+ const user = window?.Digit?.UserService.getUser();
+ const userType = window?.Digit?.UserService.getType();
+ function getLoginRedirectionLink() {
+ if (userType === "employee") {
+ return `/${window?.contextPath}/employee/user/language-selection`;
+ } else {
+ return `/${window?.contextPath}/citizen/login`;
+ }
+ }
+ if (!user || !user.access_token) {
+ // not logged in so redirect to login page with the return url
+ return 
props.onFeedback(e,ref)}/>)
+ stars.push(
+ props.onFeedback(e, star, index)}
+ />
+ );
+ } else if (i - props.currentRating > 0 && i - props.currentRating < 1) {
+ const index = i;
+ stars.push(
+ props.onFeedback(e, star, index)}
+ percentage={Math.round((props.currentRating - parseInt(props.currentRating)) * 100)}
+ />
+ );
+ } else {
+ const index = i;
+ // stars.push(
props.onFeedback(e,ref)}/>)
+ stars.push(
+ props.onFeedback(e, star, index)}
+ />
+ );
+ }
+ }
+
+ return (
+ {t(header)}
+ }
+ }
+ }
+
+ const renderContent = () => {
+ return (
+ activeLink?.name === uiConf.uiConfig.navLink
+ )?.[0]?.uiConfig?.fields
+ : uiConfig?.fields
+ }
+ control={control}
+ formData={formData}
+ errors={errors}
+ register={register}
+ setValue={setValue}
+ getValues={getValues}
+ setError={setError}
+ clearErrors={clearErrors}
+ labelStyle={{ fontSize: "16px" }}
+ apiDetails={apiDetails}
+ data={data}
+ />
+ );
+ };
+
+ const navConfigMain = tabData?.map((tab) => ({
+ key: tab.key,
+ label: showTabCount? `${t(tab?.label)}(${data?.count || data?.TotalCount || data?.totalCount})`: t(tab?.label) || `Tab ${tab.key + 1}`,
+ active: tab.active,
+ }));
+
+ const activeTab = tabData?.find((tab) => tab.active)?.key || 0;
+
+ return (
+ 0}
+ configItemKey={"key"}
+ configDisplayKey={"label"}
+ activeLink={activeTab}
+ setActiveLink={(key) => {
+ clearSearch({});
+ onTabChange(key);
+ }}
+ fromSearchComp={true}
+ horizontalLine={uiConfig?.horizontalLine}
+ >
+ {uiConfig?.type === "filter" ? (
+
+ {renderContent()}
+
+ ) : (
+
+ );
+}
+
+export default SearchComponent
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/SelectionTag.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/SelectionTag.js
new file mode 100644
index 00000000..45b90e59
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/SelectionTag.js
@@ -0,0 +1,120 @@
+import React, { useState} from "react";
+import PropTypes from "prop-types";
+import ErrorMessage from "./ErrorMessage";
+import { useTranslation } from "react-i18next";
+import { Colors } from "../constants/colors/colorconstants";
+import { iconRender } from "../utils/iconRender";
+
+const SelectionTag = ({
+ width,
+ errorMessage,
+ options,
+ onSelectionChanged,
+ allowMultipleSelection = true,
+ selected,
+ withContainer
+}) => {
+ const { t } = useTranslation();
+ const [selectedOptions, setSelectedOptions] = useState(selected || []);
+
+ const handleOptionClick = (option) => {
+ const updatedSelections = [...selectedOptions];
+ const isSelected = updatedSelections.some(
+ (selectedOption) => selectedOption.code === option.code
+ );
+
+ if (allowMultipleSelection) {
+ if (isSelected) {
+ // Remove the option if it's already selected
+ const index = updatedSelections.findIndex(
+ (selectedOption) => selectedOption.code === option.code
+ );
+ updatedSelections.splice(index, 1);
+ } else {
+ updatedSelections.push(option);
+ }
+ } else {
+ if (isSelected) {
+ updatedSelections.length = 0; // Clear selection if already selected
+ } else {
+ updatedSelections.length = 0; // Clear all and select the current option
+ updatedSelections.push(option);
+ }
+ }
+ setSelectedOptions(updatedSelections);
+ onSelectionChanged(updatedSelections);
+ };
+
+ const secondaryIconColor = Colors.lightTheme.generic.inputBorder;
+ const primaryIconColor = Colors.lightTheme.paper.primary;
+
+ const IconRender = (iconReq, isActive) => {
+ const iconFill = isActive ? primaryIconColor : secondaryIconColor;
+ return iconRender(
+ iconReq,
+ iconFill,
+ "1.5rem",
+ "1.5rem",
+ ""
+ );
+ };
+
+ const renderOption = (option) => {
+ const isSelected = selectedOptions.some(
+ (selectedOption) => selectedOption.code === option.code
+ );
+ return (
+ 
+ );
+ case "document":
+ return renderFileIcon(value?.fileType, value?.onClick);
+ case "action":
+ return (
+
+ );
+ case "custom":
+ return renderCustomContent ? renderCustomContent(value) : null;
+ default:
+ return
+
+ );
+});
+
+const Table = ({
+ className = "table",
+ t,
+ data,
+ columns,
+ getCellProps,
+ currentPage = 0,
+ pageSizeLimit = 10,
+ disableSort = true,
+ autoSort = false,
+ initSortId = "",
+ onSearch = false,
+ manualPagination = true,
+ totalRecords,
+ onNextPage,
+ onPrevPage,
+ globalSearch,
+ onSort = noop,
+ onPageSizeChange,
+ onLastPage,
+ onFirstPage,
+ isPaginationRequired = true,
+ sortParams = [],
+ showAutoSerialNo = false,
+ customTableWrapperClassName = "",
+ styles = {},
+ tableTopComponent,
+ tableRef,
+ isReportTable = false,
+ showCheckBox = false,
+ actionLabel = "CS_COMMON_DOWNLOAD",
+ tableSelectionHandler = () => {},
+}) => {
+ const {
+ getTableProps,
+ getTableBodyProps,
+ headerGroups,
+ rows,
+ prepareRow,
+ page,
+ canPreviousPage,
+ canNextPage,
+ pageOptions,
+ pageCount,
+ gotoPage,
+ nextPage,
+ previousPage,
+ setPageSize,
+ setGlobalFilter,
+ state: { pageIndex, pageSize, sortBy, globalFilter, selectedRowIds },
+ } = useTable(
+ {
+ columns,
+ data,
+ initialState: { pageIndex: currentPage, pageSize: pageSizeLimit, sortBy: autoSort ? [{ id: initSortId, desc: false }] : sortParams },
+ pageCount: totalRecords > 0 ? Math.ceil(totalRecords / pageSizeLimit) : -1,
+ manualPagination: manualPagination,
+ disableMultiSort: false,
+ disableSortBy: disableSort,
+ manualSortBy: autoSort ? false : true,
+ autoResetPage: false,
+ autoResetSortBy: false,
+ disableSortRemove: true,
+ disableGlobalFilter: onSearch === false ? true : false,
+ globalFilter: globalSearch || "text",
+ useControlledState: (state) => {
+ return React.useMemo(() => ({
+ ...state,
+ pageIndex: manualPagination ? currentPage : state.pageIndex,
+ }));
+ },
+ },
+ useGlobalFilter,
+ useSortBy,
+ usePagination,
+ useRowSelect,
+ (hooks) => {
+ if (showCheckBox) {
+ hooks.visibleColumns.push((columns) => [
+ {
+ id: "selection",
+ Header: ({ getToggleAllPageRowsSelectedProps }) => (
+
+
+ {tableTopComponent ? tableTopComponent : null}
+
+
+ {headerGroups.map((headerGroup) => (
+
+
+ {isPaginationRequired && (
+
+ );
+};
+
+export default Table;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TableBody.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TableBody.js
new file mode 100644
index 00000000..46627ed0
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TableBody.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+const TableBody = ({ children,style,className }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+TableBody.propTypes = {
+ className: PropTypes.string,
+ style: PropTypes.object,
+ children: PropTypes.node
+};
+
+TableBody.defaultProps = {
+ className: "",
+ style: {},
+ children: []
+};
+
+export default TableBody;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TableCell.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TableCell.js
new file mode 100644
index 00000000..397bc0a7
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TableCell.js
@@ -0,0 +1,245 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Switch from "./Switch";
+import CheckBox from "./CheckBox";
+import StringManipulator from "./StringManipulator";
+import Tag from "./Tag";
+import Button from "./Button";
+import TextInput from "./TextInput";
+import Dropdown from "./Dropdown";
+import MultiSelectDropdown from "./MultiSelectDropdown";
+
+const TableCell = ({
+ isHeader,
+ isFooter,
+ colSpan,
+ className,
+ columnType,
+ cellData,
+ children,
+ style,
+ cellref,
+ accessor,
+ updateTableData,
+ tableData,
+ rowIndex,
+ cellIndex,
+}) => {
+ const getValueFromAccessor = (cellData, accessor) => {
+ return accessor
+ ? accessor
+ .split("?.")
+ .reduce((acc, key) => (acc ? acc[key] : undefined), cellData)
+ : cellData;
+ };
+
+ const renderTableCell = () => {
+ switch (columnType) {
+ case "serialno":
+ return accessor ? getValueFromAccessor(cellData, accessor) : cellData;
+ case "numeric":
+ return accessor ? getValueFromAccessor(cellData, accessor) : cellData;
+ case "text":
+ case "description": {
+ const defaultmaxChars = columnType === "text" ? 64 : 256;
+ if (typeof cellData === "object") {
+ return (
+ {
+ updateTableData(rowIndex, cellIndex, event);
+ if (cellData?.onToggle) {
+ cellData.onToggle(event);
+ }
+ }}
+ />
+ );
+ case "checkbox":
+ return (
+ {
+ updateTableData(rowIndex, cellIndex, event?.target?.checked);
+ if (cellData?.onChange) {
+ cellData.onChange(event?.target?.checked);
+ }
+ }}
+ label={cellData?.label}
+ value={cellData?.value}
+ disabled={cellData?.disabled}
+ ref={cellData?.ref}
+ checked={tableData?.[rowIndex]?.values?.[cellIndex] || false}
+ inputRef={cellData?.inputRef}
+ pageType={cellData?.pageType}
+ style={cellData?.style}
+ index={cellData?.index}
+ isLabelFirst={cellData?.isLabelFirst}
+ hideLabel={cellData?.hideLabel}
+ props={cellData?.props}
+ mainClassName={cellData?.mainClassName}
+ />
+ );
+ case "button":
+ return (
+
+ );
+ case "textinput":
+ return (
+ {
+ updateTableData(rowIndex, cellIndex, event?.target?.value);
+ if (cellData?.onChange) {
+ cellData.onChange(event?.target?.value);
+ }
+ }}
+ >
+ );
+ case "dropdown":
+ return (
+ {
+ updateTableData(rowIndex, cellIndex, newValue);
+ if (cellData?.select) {
+ cellData.select(newValue);
+ }
+ }}
+ >
+ );
+ case "multiselectdropdown":
+ return (
+ {
+ updateTableData(rowIndex, cellIndex, newValue);
+ if (cellData?.onSelect) {
+ cellData.onSelect(newValue);
+ }
+ }}
+ >
+ );
+ case "custom":
+ default:
+ return accessor ? getValueFromAccessor(cellData, accessor) : cellData;
+ }
+ };
+
+ if (isHeader) {
+ return (
+
+ {children}
+
+ );
+ }
+
+ if (isFooter) {
+ return (
+
+ {children}
+
+ );
+ }
+
+ return (
+
+ {renderTableCell()}
+
+ );
+};
+
+
+TableCell.propTypes = {
+ className: PropTypes.string,
+ style: PropTypes.object,
+ children: PropTypes.node,
+ isHeader: PropTypes.bool,
+ isFooter: PropTypes.bool,
+ colSpan: PropTypes.number,
+ columnType: PropTypes.string,
+ accessor: PropTypes.string,
+ cellData: PropTypes.any,
+ cellref: PropTypes.oneOfType([
+ PropTypes.func,
+ PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+ ]),
+ updateTableData: PropTypes.func,
+ tableData: PropTypes.array,
+ rowIndex: PropTypes.number,
+ cellIndex: PropTypes.number,
+};
+
+TableCell.defaultProps = {
+ className: "",
+ style: {},
+ children: []
+};
+
+export default TableCell;
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TableFooter.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TableFooter.js
new file mode 100644
index 00000000..8ae13bae
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TableFooter.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+const TableFooter = ({ children ,className,style}) => {
+ return (
+
+ {children}
+
+ );
+};
+
+TableFooter.propTypes = {
+ className: PropTypes.string,
+ style: PropTypes.object,
+ children: PropTypes.node
+};
+
+TableFooter.defaultProps = {
+ className: "",
+ style: {},
+ children: []
+};
+
+export default TableFooter;
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TableHeader.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TableHeader.js
new file mode 100644
index 00000000..d21c84e3
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TableHeader.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+const TableHeader = ({ children,className,style }) => {
+ return (
+
+ {children}
+
+ );
+};
+
+TableHeader.propTypes = {
+ className: PropTypes.string,
+ style: PropTypes.object,
+ children: PropTypes.node
+};
+
+TableHeader.defaultProps = {
+ className: "",
+ style: {},
+ children: []
+};
+
+export default TableHeader;
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TableMain.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TableMain.js
new file mode 100644
index 00000000..11ee3022
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TableMain.js
@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+const TableMain = ({ children,className,style}) => {
+ return (
+
+ {children}
+
+ );
+};
+
+TableMain.propTypes = {
+ className: PropTypes.string,
+ style: PropTypes.object,
+ children: PropTypes.node
+};
+
+TableMain.defaultProps = {
+ className: "",
+ style: {},
+ children: []
+};
+export default TableMain;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TableRow.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TableRow.js
new file mode 100644
index 00000000..c248977a
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TableRow.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from "prop-types";
+
+const TableRow = ({ children ,className,onClick}) => {
+ return (
+
+ {children}
+
+ );
+};
+
+TableRow.propTypes = {
+ className: PropTypes.string,
+ style: PropTypes.object,
+ children: PropTypes.node
+};
+
+TableRow.defaultProps = {
+ className: "",
+ style: {},
+ children: []
+};
+
+export default TableRow;
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Tag.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Tag.js
new file mode 100644
index 00000000..019766d9
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Tag.js
@@ -0,0 +1,92 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { SVG } from "./SVG";
+import { Colors } from "../constants/colors/colorconstants";
+import { iconRender } from "../utils/iconRender";
+
+const Tag = ({
+ className,
+ label,
+ style,
+ type,
+ icon,
+ stroke,
+ showIcon,
+ labelStyle,
+ onClick,
+ alignment,
+ iconClassName,
+ iconColor
+}) => {
+ const MonochromeIconColor = Colors.lightTheme.primary[2];
+ const SuccessIconColor = Colors.lightTheme.alert.success;
+ const ErrorIconColor = Colors.lightTheme.alert.error;
+ const WarningIconColor = Colors.lightTheme.alert.warning;
+
+ let iconToShow;
+ if (icon) {
+ iconToShow = iconRender(icon,iconColor || MonochromeIconColor, "1rem", "1rem", `digit-tag-customIcon ${iconClassName}`);;
+ } else {
+ switch (type) {
+ case "error":
+ iconToShow = (
+
+ {props?.text}
+
+);
+
+TelePhone.propTypes = {
+ text: PropTypes.string,
+ mobile: PropTypes.string.isRequired,
+ className: PropTypes.string,
+ style: PropTypes.object,
+};
+
+export default TelePhone;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TextArea.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TextArea.js
new file mode 100644
index 00000000..90638b0b
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TextArea.js
@@ -0,0 +1,89 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { SVG } from "./SVG";
+import StringManipulator from "./StringManipulator";
+import { getUserType } from "../utils/digitUtils";
+
+const TextArea = (props) => {
+ const user_type = getUserType();
+
+ function textAreaAdjust(event) {
+ const element = event.target;
+ const initialHeight = 6.25 * parseFloat(getComputedStyle(element).fontSize);
+
+ element.style.height = "auto"; // Setting height to auto to get the natural height
+ const contentHeight = element.scrollHeight;
+ // Set the height only if the content height exceeds the initial height
+ if (contentHeight > initialHeight) {
+ element.style.height = `${contentHeight}px`;
+ } else {
+ element.style.height = `${initialHeight}px`;
+ }
+ }
+
+ return (
+
+
+
+ );
+};
+
+TextArea.propTypes = {
+ placeholder: PropTypes.string,
+ name: PropTypes.string.isRequired,
+ inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+ style: PropTypes.object,
+ id: PropTypes.string,
+ value: PropTypes.string,
+ onChange: PropTypes.func,
+ className: PropTypes.string,
+ nonEditable: PropTypes.bool,
+ minlength: PropTypes.number,
+ maxlength: PropTypes.number,
+ autoComplete: PropTypes.string,
+ disabled: PropTypes.bool,
+ pattern: PropTypes.string,
+ validation: PropTypes.object,
+ ValidationRequired: PropTypes.bool,
+ hintText: PropTypes.string,
+ charCount: PropTypes.bool,
+ errors: PropTypes.object,
+ error: PropTypes.string,
+ resizeSmart: PropTypes.bool,
+};
+
+TextArea.defaultProps = {
+ inputRef: undefined,
+ onChange: undefined,
+ resizeSmart: false,
+};
+
+export default TextArea;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TextBlock.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TextBlock.js
new file mode 100644
index 00000000..55533696
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TextBlock.js
@@ -0,0 +1,73 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const TextBlock = ({
+ wrapperClassName,
+ headerContentClassName,
+ caption,
+ captionClassName,
+ header,
+ headerClassName,
+ subHeader,
+ subHeaderClassName,
+ body,
+ bodyClassName,
+ style
+}) => {
+ return (
+
+
+ );
+};
+
+TextInput.propTypes = {
+ required: PropTypes.bool,
+ name: PropTypes.string.isRequired,
+ placeholder: PropTypes.string,
+ onChange: PropTypes.func,
+ inputRef: PropTypes.oneOfType([
+ PropTypes.func,
+ PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+ ]),
+ value: PropTypes.any,
+ className: PropTypes.string,
+ style: PropTypes.object,
+ maxlength: PropTypes.number,
+ minlength: PropTypes.number,
+ max: PropTypes.number,
+ pattern: PropTypes.string,
+ min: PropTypes.number,
+ disabled: PropTypes.bool,
+ nonEditable: PropTypes.bool,
+ allowNegativeValues:PropTypes.bool,
+ errorStyle: PropTypes.bool,
+ title: PropTypes.string,
+ step: PropTypes.string,
+ autoFocus: PropTypes.bool,
+ onBlur: PropTypes.func,
+ onKeyPress: PropTypes.func,
+ textInputStyle: PropTypes.object,
+ defaultValue: PropTypes.any,
+ customClass: PropTypes.string,
+ signature: PropTypes.bool,
+ signatureImg: PropTypes.node,
+ onIconSelection: PropTypes.func,
+ type: PropTypes.string,
+ watch: PropTypes.func,
+ onFocus: PropTypes.func,
+ errors: PropTypes.object,
+ config: PropTypes.object,
+ error: PropTypes.string,
+};
+
+TextInput.defaultProps = {
+ required: false,
+};
+
+function DatePicker(props) {
+ useEffect(() => {
+ if (props?.shouldUpdate) {
+ props?.setDate(getDDMMYYYY(props?.data[props.name], "yyyymmdd"));
+ }
+ }, [props?.data]);
+
+ useEffect(() => {
+ props.setDate(getDDMMYYYY(props?.defaultValue));
+ }, []);
+
+ return (
+
+ );
+}
+
+function getDDMMYYYY(date) {
+ if (!date) return "";
+
+ return new Date(date).toLocaleString("en-In").split(",")[0];
+}
+
+export default TextInput;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Timeline.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Timeline.js
new file mode 100644
index 00000000..4f5e0cdf
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Timeline.js
@@ -0,0 +1,173 @@
+import React, { useState } from "react";
+import { SVG } from "./SVG";
+import StringManipulator from "./StringManipulator";
+import Button from "./Button";
+import { Colors} from "../constants/colors/colorconstants";
+
+const Timeline = ({
+ label,
+ subElements,
+ variant,
+ viewDetailsLabel,
+ hideDetailsLabel,
+ additionalElements,
+ inline,
+ individualElementStyles,
+ showConnector,
+ className,
+ isLastStep,
+ isNextActiveStep,
+ showDefaultValueForDate,
+ isError,
+ initialVisibleAdditionalElementsCount = 0
+}) => {
+ const [showDetails, setShowDetails] = useState(false);
+
+ const [isMobileView, setIsMobileView] = React.useState(
+ window.innerWidth / window.innerHeight <= 9 / 16
+ );
+ const onResize = () => {
+ if (window.innerWidth / window.innerHeight <= 9 / 16) {
+ if (!isMobileView) {
+ setIsMobileView(true);
+ }
+ } else {
+ if (isMobileView) {
+ setIsMobileView(false);
+ }
+ }
+ };
+ React.useEffect(() => {
+ window.addEventListener("resize", () => {
+ onResize();
+ });
+ return () => {
+ window.addEventListener("resize", () => {
+ onResize();
+ });
+ };
+ });
+
+ const toggleDetails = () => {
+ setShowDetails(!showDetails);
+ };
+
+ const hasAdditionalElements =
+ additionalElements && additionalElements.length > 0;
+
+ const defaultLabel =
+
+ isError ? "Failed!" :
+ variant === "inprogress"
+ ? "Inprogress"
+ : variant === "upcoming"
+ ? "Upcoming"
+ : variant === "completed"
+ ? "Completed"
+ : "";
+
+ const color = Colors.lightTheme.paper.primary;
+
+ return (
+
+ {showHint &&
+ );
+};
+UploadFile.propTypes = {
+ hintText: PropTypes.string,
+ customClass: PropTypes.string,
+ uploadedFiles: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object]))),
+ enableButton: PropTypes.bool,
+ showHint: PropTypes.bool,
+ buttonType: PropTypes.string,
+ onUpload: PropTypes.func.isRequired,
+ removeTargetedFile: PropTypes.func.isRequired,
+ onDelete: PropTypes.func,
+ iserror: PropTypes.string,
+ showHintBelow: PropTypes.bool,
+ message: PropTypes.string,
+ disabled: PropTypes.bool,
+ inputStyles: PropTypes.object,
+ multiple: PropTypes.bool,
+ accept: PropTypes.string,
+ id: PropTypes.string,
+};
+
+export default UploadFile;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/UploadImage.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/UploadImage.js
new file mode 100644
index 00000000..b34e0acc
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/UploadImage.js
@@ -0,0 +1,416 @@
+import React, { useState, useEffect, useRef, Fragment } from "react";
+import { SVG } from "./SVG";
+import Webcam from "react-webcam";
+import Button from "./Button";
+import ErrorMessage from "./ErrorMessage";
+import { Colors} from "../constants/colors/colorconstants";
+import { CustomSVG } from "./CustomSVG";
+
+const UploadImage = ({
+ multiple,
+ userType,
+ onSubmit,
+ fileData,
+ onFileDelete,
+ previews,
+ uploadedFilesCount,
+ handleFileClick,
+}) => {
+ const [openUploadSlide, setOpenUploadSlide] = useState(false);
+ const [capturedImages, setCapturedImages] = useState([]);
+ const [isWebcamOpen, setIsWebcamOpen] = useState(false);
+ const webRef = useRef(null);
+ let imgData = "";
+ const [isMobileView, setIsMobileView] = React.useState(
+ window.innerWidth <= 480
+ );
+ const onResize = () => {
+ if (window.innerWidth <= 480) {
+ if (!isMobileView) {
+ setIsMobileView(true);
+ }
+ } else {
+ if (isMobileView) {
+ setIsMobileView(false);
+ }
+ }
+ };
+ useEffect(() => {
+ window.addEventListener("resize", onResize);
+ return () => {
+ window.removeEventListener("resize", onResize);
+ };
+ }, []);
+
+ const selectfile = (e) => {
+ handleChange(e);
+ };
+
+ const closeDrawer = () => {
+ setOpenUploadSlide(false);
+ };
+
+ const toggleWebcam = () => {
+ setIsWebcamOpen(!isWebcamOpen);
+ closeDrawer();
+ };
+
+ const toggleOpenUploadSlide = () => {
+ setOpenUploadSlide(!openUploadSlide);
+ };
+
+ const captureImg = () => {
+ if (webRef.current) {
+ imgData = webRef.current.getScreenshot();
+ const blob = dataURItoBlob(imgData);
+ const fileName = generateFileName();
+ const file = new File([blob], fileName, { type: "image/jpeg" });
+ handleChange(file);
+ }
+ };
+
+ function dataURItoBlob(dataURI) {
+ const byteString = atob(dataURI.split(",")[1]);
+ const mimeString = dataURI.split(",")[0].split(":")[1].split(";")[0];
+ const ab = new ArrayBuffer(byteString.length);
+ const ia = new Uint8Array(ab);
+ for (let i = 0; i < byteString.length; i++) {
+ ia[i] = byteString.charCodeAt(i);
+ }
+ return new Blob([ab], { type: mimeString });
+ }
+
+ function generateFileName() {
+ return `image_${Date.now()}.jpg`;
+ }
+
+ const handleChange = (event) => {
+ closeDrawer();
+ setIsWebcamOpen(false);
+ const files = event.target?.files;
+ const newFiles = files ? [...files] : event;
+
+ let newCapturedImages;
+ if (multiple) {
+ if (Array.isArray(newFiles)) {
+ newCapturedImages = [...capturedImages, ...newFiles];
+ } else {
+ newCapturedImages = [...capturedImages, newFiles];
+ }
+ } else {
+ if (Array.isArray(newFiles)) {
+ newCapturedImages = [newFiles[0]];
+ } else {
+ newCapturedImages = [newFiles];
+ }
+ }
+ setCapturedImages(newCapturedImages);
+ };
+
+ const handleFileDeletion = (fileToRemove) => {
+ const updatedCapturedImages = capturedImages.filter(
+ (file) => file !== fileToRemove
+ );
+ setCapturedImages(updatedCapturedImages);
+ onFileDelete(fileToRemove);
+ };
+
+ const errorColor = Colors.lightTheme.alert.error;
+
+ const getFileUploadIcon = (fileType, isError) => {
+ switch (fileType) {
+ case "application/pdf":
+ return (
+
+ {!(uploadedFilesCount === 1 && !multiple) && (
+
+ );
+};
+
+export default UploadImage;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/UploadWidget.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/UploadWidget.js
new file mode 100644
index 00000000..badc53d2
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/UploadWidget.js
@@ -0,0 +1,256 @@
+import React, { useState, useMemo, useEffect, useRef } from "react";
+import { FileUploader } from "react-drag-drop-files";
+import { useTranslation } from "react-i18next";
+import Button from "./Button";
+import { SVG } from "./SVG";
+import { CustomSVG } from "./CustomSVG";
+import ErrorMessage from "./ErrorMessage";
+import AlertCard from "./AlertCard";
+import { Colors} from "../constants/colors/colorconstants";
+
+const UploadWidget = ({
+ onSubmit,
+ fileData,
+ onFileDelete,
+ errors,
+ additionalElements,
+ multiple,
+ handleFileClick,
+ showErrorCard,
+ iserror,
+ showDownloadButton,
+ showReUploadButton,
+ fileTypes,
+}) => {
+ const { t } = useTranslation();
+ const [files, setFiles] = useState([]);
+ const types = fileTypes?.split(",");
+ const [isMobileView, setIsMobileView] = React.useState(
+ window.innerWidth <= 480
+ );
+ const onResize = () => {
+ if (window.innerWidth <= 480) {
+ if (!isMobileView) {
+ setIsMobileView(true);
+ }
+ } else {
+ if (isMobileView) {
+ setIsMobileView(false);
+ }
+ }
+ };
+ useEffect(() => {
+ window.addEventListener("resize", onResize);
+
+ return () => {
+ window.removeEventListener("resize", onResize);
+ };
+ }, []);
+
+ const errorColor = Colors.lightTheme.alert.error;
+ const primaryColor = Colors.lightTheme.paper.primary;
+ const inputBorderColor = Colors.lightTheme.generic.inputBorder;
+ const primaryTwo = Colors.lightTheme.primary[2];
+ const disabledColor = Colors.lightTheme.text.disabled;
+
+
+ const dragDropJSX = (
+
+ {((multiple === false && (!fileData || fileData?.length === 0)) ||
+ multiple === true) && (
+
+ );
+};
+
+export default UploadWidget;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/WhatsNewCard.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/WhatsNewCard.js
new file mode 100644
index 00000000..001014d5
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/WhatsNewCard.js
@@ -0,0 +1,20 @@
+import React from "react"
+import { useTranslation } from "react-i18next"
+
+const WhatsNewCard = ({header, actions, eventNotificationText, timePastAfterEventCreation, timeApproxiamationInUnits}) => {
+ const { t } = useTranslation();
+
+ const getTransformedLocale = label => {
+ if (typeof label === "number") return label;
+ return label && label.toUpperCase().replace(/[.:-\s\/]/g, "_");
+ };
+
+ return
+ This is a nested accordion demonstrating component composition. The
+ isChild prop ensures proper styling and behavior.
+
+ ),
+ icon:"",
+ number:""
+};
+
+export const Custom = Template.bind({});
+Custom.args = {
+ title: "Section Header",
+ children: `Dummy text refers to the bits of content that are used to fill a website. This text helps web designers better envision how the website will look as a finished product. It is important to understand that dummy text has no meaning whatsoever. Its sole purpose is to fill out blank spaces with “word-like” content, without making any copyright infringements.
+ Dummy text refers to the bits of content that are used to fill a website. This text helps web designers better envision how the website will look as a finished product. It is important to understand that dummy text has no meaning whatsoever. Its sole purpose is to fill out blank spaces with “word-like” content, without making any copyright infringements.`,
+ customClassName: "custom-accordion",
+ customStyles: {
+ borderColor: "#C84C0E",
+ backgroundColor: "#FFFFFF",
+ },
+ hideCardBorder: false,
+ hideDivider: false,
+ hideCardBg: false,
+ hideBorderRadius: false,
+ icon:"",
+ number:"",
+ isOpenInitially: false,
+};
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/ActionButton.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/ActionButton.stories.js
new file mode 100644
index 00000000..e18943ee
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/ActionButton.stories.js
@@ -0,0 +1,183 @@
+import React from "react";
+import Button from "../Button";
+import Iframe from "../Iframe";
+
+export default {
+ title: "Atoms/Action Button",
+ component: Button,
+ argTypes: {
+ label: {
+ control: "text",
+ name:"Label"
+ },
+ variation: {
+ control: "select",
+ options: ["primary", "secondary", "teritiary", "link"],
+ table: { disable: true },
+ },
+ size: {
+ control: "select",
+ options: ["large", "medium", "small"],
+ table: { disable: true },
+ },
+ className: {
+ control: "text",
+ table: { disable: true },
+ },
+ style: {
+ control: { type: "object" },
+ table: { disable: true },
+ },
+ onClick: {
+ control: "function",
+ table: { disable: true },
+ },
+ title: {
+ control: "text",
+ table: { disable: true },
+ },
+ isSearchable: {
+ control: "boolean",
+ name:"Searchable"
+ },
+ showBottom: {
+ control: "select",
+ options: ["DropUp", "DropDown"],
+ name: "ActionButton",
+ mapping: {
+ DropUp: false,
+ DropDown: true,
+ },
+ },
+ optionsKey: {
+ control: "text",
+ table: { disable: true },
+ },
+ options: {
+ control: {
+ type: "array",
+ separator: ",",
+ },
+ table: { disable: true },
+ },
+ isDisabled: {
+ control: "select",
+ options: ["Default", "Disabled"],
+ name: "State",
+ mapping: {
+ Default: false,
+ Disabled: true,
+ },
+ },
+ textStyles: { table: { disable: true } },
+ iconFill: { table: { disable: true } },
+ icon: { table: { disable: true } },
+ onOptionSelect: { table: { disable: true } },
+ type: { table: { disable: true } },
+ WithIcon: {
+ control: "boolean",
+ table: { disable: true },
+ },
+ isSuffix: {
+ control: "select",
+ options: ["Prefix", "Suffix"],
+ name: "Icon",
+ mapping: {
+ Prefix: false,
+ Suffix: true,
+ },
+ table: { disable: true },
+ if: { arg: "WithIcon", truthy: true },
+ },
+ },
+};
+
+const commonStyles = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ color: "#363636",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ transform: "translate(-50%, -50%)",
+};
+
+const Template = (args) => {
+ const { ...restArgs } = args;
+
+ return (
+ 
,
+ ,
+ ,
+ ,
+ ,
+ ,
+ 
,
+ ,
+];
+
+const additionalElementsWithAction = [
+ ...additionalElements,
+
+
+ );
+};
+
+export const Documentation = () => (
+
+);
+
+Documentation.storyName = "Docs";
+Documentation.argTypes = {
+ WithCustomSeparator: { table: { disable: true } },
+ WithIcons: { table: { disable: true }},
+};
+
+export const Basic = Template.bind({});
+Basic.args = {
+ ...commonArgs
+};
+
+export const Collapsed = Template.bind({});
+Collapsed.args = {
+ ...commonArgs,
+ maxItems: 3,
+};
+
+export const Custom = Template.bind({});
+Custom.args = {
+ ...commonArgs,
+ maxItems: 3,
+ itemsBeforeCollapse: 1,
+ itemsAfterCollapse: 2,
+ spanStyle: {
+ color: "#0B4B66",
+ },
+};
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/ButtonDocs.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/ButtonDocs.stories.js
new file mode 100644
index 00000000..1951a81a
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/ButtonDocs.stories.js
@@ -0,0 +1,105 @@
+import React from "react";
+import Button from "../Button";
+import Iframe from "../Iframe";
+
+export default {
+ title: "Atoms/Button",
+ component: Button,
+ argTypes: {
+ label: {
+ control: "text",
+ table: { disable: true }
+ },
+ variation: {
+ control: "select",
+ options: ["primary", "secondary", "teritiary", "link"],
+ table: { disable: true },
+ },
+ size: { control: "select", options: ["large", "medium", "small"] ,table: { disable: true }},
+ className: {
+ control: "text",
+ table: { disable: true },
+ },
+ style: {
+ control: { type: "object" },
+ table: { disable: true },
+ },
+ onClick: {
+ control: "function",
+ table: { disable: true },
+ },
+ title: {
+ control: "text",
+ table: { disable: true },
+ },
+ isSearchable: {
+ control: "boolean",
+ table: { disable: true }
+ },
+ showBottom: {
+ control: "select",
+ options: ["DropUp", "DropDown"],
+ table: { disable: true },
+ name: "ActionButton",
+ mapping: {
+ DropUp: false,
+ DropDown: true,
+ },
+ },
+ optionsKey: {
+ control: "text",
+ table: { disable: true },
+ },
+ options: {
+ control: {
+ type: "array",
+ separator: ",",
+ },
+ table: { disable: true },
+ },
+ isDisabled: {
+ control: "select",
+ options: ["Default", "Disabled"],
+ name: "state",
+ mapping: {
+ Default: false,
+ Disabled: true,
+ },
+ table: { disable: true }
+ },
+ textStyles: { table: { disable: true } },
+ iconFill: { table: { disable: true } },
+ icon: { table: { disable: true } },
+ onOptionSelect: { table: { disable: true } },
+ type: { table: { disable: true } },
+ WithIcon: {
+ control: "boolean",table: { disable: true }
+ },
+ isSuffix: {
+ control: "select",
+ options: ["Prefix", "Suffix"],
+ name: "Icon",
+ mapping: {
+ Prefix: false,
+ Suffix: true,
+ },
+ if: { arg: "WithIcon", truthy: true },
+ table: { disable: true }
+ },
+ Width: {
+ control: "select",
+ options: ["Hug Content", "Justify"],
+ table: { disable: true }
+ },
+ },
+};
+
+export const Documentation = () => (
+
+);
+
+Documentation.storyName = "Docs";
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Checkbox.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Checkbox.stories.js
new file mode 100644
index 00000000..4bc2184c
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Checkbox.stories.js
@@ -0,0 +1,108 @@
+import React from "react";
+import CheckBox from "../CheckBox";
+import Iframe from "../Iframe";
+
+export default {
+ title: "Atoms/CheckBox",
+ component: CheckBox,
+ argTypes: {
+ onChange: { action: "onChange", table: { disable: true } },
+ value: { control: "text", table: { disable: true } },
+ checked: { control: "boolean", table: { disable: true } },
+ isIntermediate: { control: "boolean", table: { disable: true } },
+ styles: { control: "object", table: { disable: true } },
+ style: { control: "object", table: { disable: true } },
+ ref: { table: { disable: true } },
+ userType: { table: { disable: true } },
+ hideLabel: { table: { disable: true } },
+ disabled: {
+ control: "select",
+ options: ["Default","Disabled"],
+ name:"State",
+ mapping: {
+ Default: false,
+ Disabled: true,
+ },
+ },
+ isLabelFirst: { control: "select" ,name:"Label Alignment", mapping: {
+ Left: true,
+ Right: false,
+ }, options: ["Left","Right"],},
+ label: { control: "text",name:"Label"},
+ },
+};
+
+const commonStyles = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ color: "#363636",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ transform: "translate(-50%, -50%)",
+};
+
+const Template = (args) => {
+ const [isChecked, setIsChecked] = React.useState(args?.checked);
+
+ const handleCheckboxChange = (event) => {
+ setIsChecked(event.target.checked);
+ };
+
+ return (
+ {
+ args.onChange(e, "dropdown");
+ }}
+ />
+ );
+};
+
+const t = (key) => key;
+
+const commonArgs = {
+ t,
+ name: "genders",
+ defaultValue: "FEMALE",
+ optionsCustomStyle: {},
+ optionKey: "name",
+ showIcon: false,
+ isSearchable: true,
+ error: "",
+ inputRef: null,
+ label: "Select Option",
+ onChange: (e, name) => console.log("Selected value:", e, "Name:", name),
+ errorStyle: null,
+ disabled: "Default",
+ type: "dropdown",
+ additionalWrapperClass: "",
+ props: {
+ isLoading: false,
+ data: commonOptions,
+ },
+ description: "",
+};
+
+export const Documentation = () => (
+
+);
+
+Documentation.storyName = "Docs";
+Documentation.argTypes = {
+ disabled: { table: { disable: true } },
+ isSearchable: { table: { disable: true }},
+ showIcon:{table:{disable:true}}
+};
+
+export const Basic = Template.bind({});
+Basic.args = {
+ ...commonArgs,
+ type: "dropdown",
+};
+
+export const Categorical = Template.bind({});
+Categorical.args = {
+ ...commonArgs,
+ type: "dropdown",
+ name: "nestedoptions",
+ variant: "nesteddropdown",
+};
+
+export const NestedText = Template.bind({});
+NestedText.args = {
+ ...commonArgs,
+ type: "dropdown",
+ name: "nestedtextoptions",
+ variant: "nestedtextdropdown",
+};
+
+export const Profile = Template.bind({});
+Profile.args = {
+ ...commonArgs,
+ type: "dropdown",
+ name: "profiledropdown",
+ variant: "profiledropdown",
+};
+
+export const ProfileWithNestedText = Template.bind({});
+ProfileWithNestedText.args = {
+ ...commonArgs,
+ type: "dropdown",
+ name: "profiledropdown",
+ variant: "profilenestedtext",
+};
+
+export const TreeDropdown = Template.bind({});
+TreeDropdown.args = {
+ ...commonArgs,
+ type: "dropdown",
+ name: "treeoptions",
+ variant: "treedropdown",
+};
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/ErrorPanel.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/ErrorPanel.stories.js
new file mode 100644
index 00000000..95877fa1
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/ErrorPanel.stories.js
@@ -0,0 +1,107 @@
+import React from "react";
+import Panels from "../Panels";
+
+export default {
+ title: "Atoms/Panels/Error",
+ component: Panels,
+ argTypes: {
+ type: {
+ control: "select",
+ options: ["success", "error"],
+ table: { disable: true },
+ },
+ className: {
+ control: "text",
+ table: { disable: true },
+ },
+ message: {
+ control: "text",
+ table: { disable: true },
+ },
+ info: {
+ control: "text",
+ table: { disable: true },
+ },
+ response: {
+ control: "text",
+ table: { disable: true },
+ },
+ customIcon: {
+ control: "text",
+ table: { disable: true },
+ },
+ iconFill: {
+ control: "text",
+ table: { disable: true },
+ },
+ style: {
+ control: { type: "object" },
+ table: { disable: true },
+ },
+ multipleResponses: {
+ control: {
+ type: "array",
+ separator: ",",
+ },
+ table: { disable: true },
+ },
+ showAsSvg: {
+ control: "boolean",
+ name: "With Animation",
+ mapping: {
+ true: false,
+ false: true,
+ },
+ },
+ animationProps: {
+ control: { type: "object" },
+ table: { disable: true },
+ },
+ },
+};
+
+const Template = (args) => {
+ args.onChange(e, "dropdown");
+ }}
+ config={config}
+ />
+ );
+};
+
+const t = (key) => key;
+
+const commonArgs = {
+ clearLabel: "Clear All",
+ addSelectAllCheck: false,
+ addCategorySelectAllCheck: false,
+ selectAllLabel: "",
+ categorySelectAllLabel: "",
+ chipsKey: "",
+ t,
+ name: "genders",
+ defaultValue: "FEMALE",
+ optionsCustomStyle: {},
+ optionsKey: "name",
+ showIcon: false,
+ isSearchable: true,
+ error: "",
+ inputRef: null,
+ label: "Select Option",
+ onChange: (e, name) => console.log("Selected value:", e, "Name:", name),
+ errorStyle: null,
+ disabled: "Default",
+ type: "multiselectdropdown",
+ additionalWrapperClass: "",
+ props: {
+ isLoading: false,
+ data: commonOptions,
+ },
+ description: "",
+ isDropdownWithChip: true,
+};
+
+export const Documentation = () => (
+
+);
+
+Documentation.storyName = "Docs";
+Documentation.argTypes = {
+ disabled: { table: { disable: true } },
+ isSearchable: { table: { disable: true } },
+ showIcon: { table: { disable: true } },
+ addSelectAllCheck: { table: { disable: true } },
+ addCategorySelectAllCheck: { table: { disable: true } },
+ isDropdownWithChip: { table: { disable: true } },
+};
+
+export const Basic = Template.bind({});
+Basic.args = {
+ ...commonArgs,
+ type: "multiselectdropdown",
+};
+
+export const Categorical = Template.bind({});
+Categorical.args = {
+ ...commonArgs,
+ type: "multiselectdropdown",
+ name: "nestedmultiselectoptions",
+ options: nestedOptions,
+ isDropdownWithChip: true,
+ variant: "nestedmultiselect",
+};
+
+export const NestedText = Template.bind({});
+NestedText.args = {
+ ...commonArgs,
+ type: "multiselectdropdown",
+ name: "nestedtextltiselect",
+ options: OptionsWithNestedText,
+ isDropdownWithChip: true,
+ variant: "nestedtextmultiselect",
+};
+
+export const TreeMultiselect = Template.bind({});
+TreeMultiselect.args = {
+ ...commonArgs,
+ type: "multiselectdropdown",
+ name: "treeoptions",
+ options: treeDropdownOptions,
+ isDropdownWithChip: true,
+ variant: "treemultiselect",
+};
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/OTPInput.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/OTPInput.stories.js
new file mode 100644
index 00000000..2f4096d6
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/OTPInput.stories.js
@@ -0,0 +1,105 @@
+import React, { useState } from "react";
+import OTPInput from "../OTPInput";
+import Iframe from "../Iframe";
+
+export default {
+ title: "Atoms/OTP Input",
+ component: OTPInput,
+ argTypes: {
+ className: {
+ control: "text",
+ table: { disable: true },
+ },
+ style: {
+ control: "object",
+ table: { disable: true },
+ },
+ inline: {
+ control: "select",
+ name:"Label Alignment",
+ options: ["Inline", "Above"],
+ mapping: { Inline: true, Above: false },
+ },
+ label: {
+ control: "text", name:"Label"
+ },
+ Error: {
+ control: "boolean",
+ },
+ type: {
+ control: "select",
+ name:"Type",
+ options: ["Alphanumeric", "Numeric"],
+ mapping: { Alphanumeric: "alphanumeric", Numeric: "numeric" },
+ },
+ length: {
+ control: "number",
+ table: { disable: true },
+ },
+ masking: {
+ control: "boolean",name:"Masking"
+ },
+ },
+};
+
+const Template = (args) => {
+ const {Error,...rest} = args;
+ const [otp, setOtp] = useState("");
+
+ const handleOtpChange = (value) => {
+ console.log(value,"value")
+ setOtp(value);
+ if (value.length === args.length) {
+ if (!Error) {
+ console.log("OTP is correct");
+ return null;
+ } else {
+ console.log("Invalid OTP");
+ return "Invalid OTP";
+ }
+ }
+ return null;
+ };
+
+ return ;
+};
+
+const commonArgs = {
+ length: 4,
+ type: "Alphanumeric",
+ inline: "Above",
+ label: "Enter OTP",
+ style:{},
+ Error:false,
+ masking:false
+};
+
+export const Documentation = () => (
+
+);
+
+Documentation.storyName = "Docs";
+Documentation.argTypes = {
+ inline: { table: { disable: true } },
+ label: { table: { disable: true }},
+ Error: {table:{disable:true}},
+ type: { table: { disable: true } },
+ masking: { table: { disable: true }},
+};
+
+export const SixCharacters = Template.bind({});
+SixCharacters.args = {
+ ...commonArgs,
+ length: 6,
+};
+SixCharacters.storyName = "6 Characters";
+
+export const FourCharacters = Template.bind({});
+FourCharacters.args = {
+ ...commonArgs,
+};
+FourCharacters.storyName = "4 Characters";
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/PanelDocs.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/PanelDocs.stories.js
new file mode 100644
index 00000000..0b060c99
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/PanelDocs.stories.js
@@ -0,0 +1,55 @@
+import React from "react";
+import Panels from "../Panels";
+import Iframe from "../Iframe";
+
+export default {
+ title: "Atoms/Panels",
+ component: Panels,
+ argTypes: {
+ type: { control: "select", options: ["success", "error"], table: { disable: true } },
+ className: {
+ control: "text", table: { disable: true }
+ },
+ message: {
+ control: "text", table: { disable: true }
+ },
+ info: {
+ control: "text", table: { disable: true }
+ },
+ response: {
+ control: "text", table: { disable: true }
+ },
+ customIcon: {
+ control: "text", table: { disable: true }
+ },
+ iconFill: {
+ control: "text", table: { disable: true }
+ },
+ style: {
+ control: { type: "object" }, table: { disable: true }
+ },
+ multipleResponses: {
+ control: {
+ type: "array",
+ separator: ",",
+ },
+ table: { disable: true }
+ },
+ showAsSvg: {
+ control: "boolean", table: { disable: true }
+ },
+ animationProps: {
+ control: { type: "object" }, table: { disable: true }
+ },
+ },
+};
+
+export const Documentation = () => (
+
+);
+
+Documentation.storyName = "Docs";
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/PrimaryButton.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/PrimaryButton.stories.js
new file mode 100644
index 00000000..7c217d5b
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/PrimaryButton.stories.js
@@ -0,0 +1,153 @@
+import React from "react";
+import Button from "../Button";
+
+export default {
+ title: "Atoms/Button/Primary",
+ component: Button,
+ argTypes: {
+ label: {
+ control: "text",
+ name:"Label"
+ },
+ variation: {
+ control: "select",
+ options: ["primary", "secondary", "teritiary", "link"],
+ table: { disable: true },
+ },
+ size: { control: "select", options: ["large", "medium", "small"],name:"Size" },
+ className: {
+ control: "text",
+ table: { disable: true },
+ },
+ style: {
+ control: { type: "object" },
+ table: { disable: true },
+ },
+ onClick: {
+ control: "function",
+ table: { disable: true },
+ },
+ title: {
+ control: "text",
+ table: { disable: true },
+ },
+ isSearchable: {
+ control: "boolean",table: { disable: true },
+ },
+ showBottom: {
+ control: "select",
+ options: ["DropUp", "DropDown"],
+ name: "ActionButton",
+ mapping: {
+ DropUp: false,
+ DropDown: true,
+ },
+ table: { disable: true },
+ },
+ optionsKey: {
+ control: "text",
+ table: { disable: true },
+ },
+ options: {
+ control: {
+ type: "array",
+ separator: ",",
+ },
+ table: { disable: true },
+ },
+ isDisabled: {
+ control: "select",
+ options: ["Default", "Disabled"],
+ name: "State",
+ mapping: {
+ Default: false,
+ Disabled: true,
+ },
+ },
+ textStyles: { table: { disable: true } },
+ iconFill: { table: { disable: true } },
+ icon: { table: { disable: true } },
+ onOptionSelect: { table: { disable: true } },
+ type: { table: { disable: true } },
+ WithIcon: {
+ control: "boolean",
+ name:"With Icon"
+ },
+ isSuffix: {
+ control: "select",
+ options: ["Prefix", "Suffix"],
+ name: "Icon",
+ mapping: {
+ Prefix: false,
+ Suffix: true,
+ },
+ if: { arg: "WithIcon", truthy: true},
+ },
+ Width: {
+ control: "select",
+ options: ["Hug Content", "Justify"],
+ },
+ },
+};
+
+const commonStyles = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ color: "#363636",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ transform: "translate(-50%, -50%)",
+};
+
+const Template = (args) => {
+ const { WithIcon, isSuffix, Width, ...restArgs } = args;
+
+ const widthStyles =
+ Width === "Hug Content"
+ ? { width: "auto", whiteSpace: "nowrap" }
+ : { width: "100%" };
+
+ return (
+ handleSelectOption(option)}
+ selectedOption={selectedOption}
+ options={options}
+ />
+ );
+};
+
+const t = (key) => key;
+
+const commonArgs = {
+ t: t,
+ options: Options,
+ name: "toggleOptions",
+ optionsKey: "name",
+ style: {},
+ inputRef: null,
+ label: "",
+ value: "",
+ errorStyle: null,
+ disabled: false,
+ type: "toggle",
+ additionalWrapperClass: "",
+ innerStyles: {},
+ Toggle1Label: "",
+ Toggle2Label: "",
+ Toggle3Label: "",
+ onSelect: () => {},
+ numberOfToggleItems: 3,
+};
+
+export const Documentation = () => (
+
+);
+
+Documentation.storyName = "Docs";
+Documentation.argTypes = {
+ numberOfToggleItems: { table: { disable: true } },
+ Toggle1Label: { table: { disable: true }},
+ Toggle2Label: { table: { disable: true }},
+ Toggle3Label: {table: { disable: true } },
+};
+
+//Default Toggle
+export const Basic = Template.bind({});
+Basic.args = {
+ ...commonArgs,
+};
+
+export const Custom = Template.bind({});
+Custom.args = {
+ ...commonArgs,
+ style: {
+ border: "5px solid #c84c0e",
+ backgroundColor: "#fafafa",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ width: "fit-content",
+ },
+};
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Tooltip.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Tooltip.stories.js
new file mode 100644
index 00000000..52364fc5
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Tooltip.stories.js
@@ -0,0 +1,106 @@
+import React from "react";
+import Tooltip from "../Tooltip";
+import { Colors } from "../../constants/colors/colorconstants";
+import { CustomSVG } from "../CustomSVG";
+
+export default {
+ title: "Atoms/Tooltip",
+ component: Tooltip,
+ argTypes: {
+ content: { control: "text",table:{disable:true} },
+ description: { control: "text" ,name:"Description"},
+ placement: {
+ control: "select",
+ options: [
+ "bottom-start",
+ "bottom",
+ "bottom-end",
+ "top-start",
+ "top",
+ "top-end",
+ "left-start",
+ "left",
+ "left-end",
+ "right-start",
+ "right",
+ "right-end",
+ ],
+ name: "Position",
+ },
+ arrow: { control: "boolean" ,name:'Arrow'},
+ style: { control: "object" ,table:{disable:true}},
+ className: { control: "text",table:{disable:true} },
+ header: { control: "text" ,name:'Header'},
+ theme: {
+ control: "select",
+ options: [
+ "dark",
+ "light",
+ ],
+ table:{disable:true}
+ },
+ },
+};
+
+const commonStyles = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ color: "#363636",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ transform: "translate(-50%, -50%)",
+};
+
+const Color = Colors.lightTheme.primary[2];
+
+const Template = (args) => {
+ const { ...rest } = args;
+ return (
+
+ {
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt "
+ }
+
+
+);
+
+const commonArgs = {
+ content: htmlTooltip,
+ arrow: false,
+ placement: "bottom",
+ style: {},
+ header: "Tooltip Header",
+ description:"Tooltip Description"
+};
+
+export const DarkTheme = Template.bind({});
+DarkTheme.args = {
+ ...commonArgs,
+};
+
+export const LightTheme = Template.bind({});
+LightTheme.args = {
+ ...commonArgs,
+ theme:"light"
+};
+
+export const Custom = Template.bind({});
+Custom.args = {
+ ...commonArgs,
+ style: {
+ backgroundColor: Color,
+ border: "3px solid #C84C0E",
+ width: "300px",
+ textAlign: "center",
+ },
+};
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/TooltipDocs.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/TooltipDocs.stories.js
new file mode 100644
index 00000000..d38de368
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/TooltipDocs.stories.js
@@ -0,0 +1,47 @@
+import React from "react";
+import Tooltip from "../Tooltip";
+import Iframe from "../Iframe";
+
+export default {
+ title: "Atoms/Tooltip",
+ component: Tooltip,
+ argTypes: {
+ content: { control: "text" },
+ description: { control: "text" },
+ placement: {
+ control: "select",
+ options: [
+ "bottom-start",
+ "bottom",
+ "bottom-end",
+ "top-start",
+ "top",
+ "top-end",
+ "left-start",
+ "left",
+ "left-end",
+ "right-start",
+ "right",
+ "right-end",
+ ],
+ },
+ arrow: { control: "boolean" },
+ style: { control: "object" },
+ className: { control: "text" },
+ header: { control: "text" },
+ theme: {
+ control: "select",
+ options: ["dark", "light"],
+ },
+ },
+};
+
+export const Documentation = () => (
+
+);
+
+Documentation.storyName = "Docs";
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/UploaderDocs.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/UploaderDocs.stories.js
new file mode 100644
index 00000000..7cdfb2ce
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/UploaderDocs.stories.js
@@ -0,0 +1,100 @@
+import React from "react";
+import FileUpload from "../FileUpload";
+import Iframe from "../Iframe";
+
+export default {
+ title: "Atoms/FileUpload",
+ component: FileUpload,
+ argTypes: {
+ uploadedFiles: {
+ control: {
+ type: "object",
+ },
+ },
+ variant: {
+ control: {
+ type: "select",
+ options: ["uploadField", "uploadWidget", "uploadImage"],
+ },
+ },
+ showLabel: {
+ control: "boolean",
+ },
+ showHint: {
+ control: "boolean",
+ },
+ label: {
+ control: "text",
+ },
+ hintText: {
+ control: "text",
+ },
+ iserror: {
+ control: "text",
+ },
+ customClass: {
+ control: "text",
+ },
+ disabled: {
+ control: "boolean",
+ },
+ disableButton: {
+ control: "boolean",
+ },
+ buttonType: {
+ control: {
+ type: "select",
+ options: ["button", "submit", "reset"],
+ },
+ },
+ inputStyles: {
+ control: "object",
+ },
+ extraStyles: {
+ control: "object",
+ },
+ id: {
+ control: "text",
+ },
+ multiple: {
+ control: "boolean",
+ },
+ accept: {
+ control: "text",
+ },
+ showAsTags: {
+ control: "boolean",
+ },
+ showAsPreview: {
+ control: "boolean",
+ },
+ additionalElements: {
+ control: "array",
+ },
+ validations: {
+ control: "object",
+ },
+ showErrorCard: {
+ control: "boolean",
+ },
+ showReUploadButton: {
+ control: "boolean",
+ },
+ showDownloadButton: {
+ control: "boolean",
+ },
+ onUpload: {
+ control: "function",
+ },
+ },
+};
+
+export const Documentation = () => (
+
+);
+
+Documentation.storyName = "Docs";
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/UploaderField.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/UploaderField.stories.js
new file mode 100644
index 00000000..f2fcd9a3
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/UploaderField.stories.js
@@ -0,0 +1,172 @@
+import React from "react";
+import FileUpload from "../FileUpload";
+
+export default {
+ title: "Atoms/FileUpload/Uploader Field",
+ component: FileUpload,
+ argTypes: {
+ uploadedFiles: {
+ control: {
+ type: "object",
+ },
+ },
+ variant: {
+ control: {
+ type: "select",
+ options: ["uploadField", "uploadWidget", "uploadImage"],
+ },
+ },
+ showLabel: {
+ control: "boolean",
+ },
+ showHint: {
+ control: "boolean",
+ },
+ label: {
+ control: "text",
+ },
+ hintText: {
+ control: "text",
+ },
+ iserror: {
+ control: "text",
+ },
+ customClass: {
+ control: "text",
+ },
+ disabled: {
+ control: "boolean",
+ },
+ disableButton: {
+ control: "boolean",
+ },
+ buttonType: {
+ control: {
+ type: "select",
+ options: ["button", "submit", "reset"],
+ },
+ },
+ inputStyles: {
+ control: "object",
+ },
+ extraStyles: {
+ control: "object",
+ },
+ id: {
+ control: "text",
+ },
+ multiple: {
+ control: "boolean",
+ },
+ accept: {
+ control: "text",
+ },
+ showAsTags: {
+ control: "boolean",
+ },
+ showAsPreview: {
+ control: "boolean",
+ },
+ additionalElements: {
+ control: "array",
+ },
+ validations: {
+ control: "object",
+ },
+ showErrorCard: {
+ control: "boolean",
+ },
+ showReUploadButton: {
+ control: "boolean",
+ },
+ showDownloadButton: {
+ control: "boolean",
+ },
+ onUpload: {
+ control: "function",
+ },
+ },
+};
+
+const Template = (args) => {
+ setShowEditablePopup(false);
+ setEditRow(null);
+ }}
+ children={[
+
+ );
+};
+
+export default EditablePopup;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/FieldComposer.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/FieldComposer.js
new file mode 100644
index 00000000..76b06a98
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/FieldComposer.js
@@ -0,0 +1,405 @@
+import React, { Fragment } from "react";
+import {
+ CardText,
+ CheckBox,
+ ErrorMessage,
+ HeaderComponent,
+ InputTextAmount,
+ MobileNumber,
+ MultiSelectDropdown,
+ Paragraph,
+ TextArea,
+ TextInput
+} from "../atoms";
+import { ApiDropdown, CustomDropdown, LocationDropdownWrapper, MultiUploadWrapper } from "../molecules";
+import UploadFileComposer from "./UploadFileComposer";
+import { useTranslation } from "react-i18next";
+import { useState, useEffect } from "react";
+
+// const FieldComposer = (type, populators, isMandatory, disable = false, component, config, sectionFormCategory, formData, selectedFormCategory) => {
+const FieldComposer = ({
+ type,
+ populators,
+ isMandatory,
+ component,
+ config,
+ sectionFormCategory,
+ formData,
+ selectedFormCategory,
+ onChange,
+ ref,
+ value,
+ props,
+ errors,
+ onBlur,
+ controllerProps,
+ variant,
+ placeholder,
+ disable = false,
+ noneditable = false,
+ focused = false,
+ charCount
+}) => {
+ const { t } = useTranslation();
+ let disableFormValidation = false;
+ if (sectionFormCategory && selectedFormCategory) {
+ disableFormValidation = sectionFormCategory !== selectedFormCategory ? true : false;
+ }
+ const Component = typeof component === "string" ? Digit.ComponentRegistryService.getComponent(component) : component;
+ const customValidation = config?.populators?.validation?.customValidation;
+ const customRules = customValidation ? { validate: customValidation } : {};
+ const customProps = config?.customProps;
+ const [currentCharCount, setCurrentCharCount] = useState(0);
+
+ useEffect(() => {
+ setCurrentCharCount(value.length);
+ }, [value]);
+ const renderField = () => {
+ switch (type) {
+ case "date":
+ case "text":
+ case "number":
+ case "password":
+ case "time":
+ case "search":
+ case "prefix":
+ case "suffix":
+ case "geolocation":
+ return (
+
+ {currentCharCount}/{maxCharacters}
+
+ );
+ }
+ }
+
+ return (
+ <>
+ {!config.withoutLabel && (
+
+ {t(config.label)}
+ {config?.appendColon ? " : " : null}
+ {config.isMandatory ? " * " : null}
+ {config.withoutInfo ? null : }
+
+ )}
+ {
+ const onChange = contoprops?.onChange;
+ const ref = contoprops?.ref;
+ const value = contoprops?.value;
+ const onBlur = contoprops?.onBlur;
+ console.log(contoprops,"propssst")
+ console.log("FieldController - onChange:", onChange);
+ console.log("FieldController - value:", value);
+ console.log("populators name", populators?.name);
+ console.log("Controller Render - onChange:", onChange);
+ return {
+ console.log("FieldController - New Value:", val);
+ console.log(onChange,"onchange");
+ onChange?.(val); // Ensure it updates form state
+ }}
+ ref={ref}
+ value={value}
+ props={props}
+ errors={errors}
+ onBlur={onBlur}
+ controllerProps={controllerProps}
+ />
+ }}
+ key={populators?.name}
+ name={populators?.name}
+ rules={!disableFormValidation ? { required: isMandatory, ...populators?.validation, ...customRules } : {}}
+ />
+ );
+}
+
+export default FieldController;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/FieldV1.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/FieldV1.js
new file mode 100644
index 00000000..85f5c2b3
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/FieldV1.js
@@ -0,0 +1,610 @@
+import React, { Fragment } from "react";
+import {
+ CardText,
+ ErrorMessage,
+ HeaderComponent,
+ TextArea,
+ TextInput,
+ CheckBox,
+ SVG,
+ MultiSelectDropdown,
+ MobileNumber,
+ InputTextAmount,
+ StringManipulator,
+ LabelFieldPair,
+ Button
+} from "../atoms";
+import { useTranslation } from "react-i18next";
+import { useState, useEffect } from "react";
+import UploadFileComposer from "./UploadFileComposer";
+import { CustomDropdown } from "../molecules";
+import { Controller, useFieldArray } from "react-hook-form";
+import { LocationDropdownWrapper } from "../molecules";
+import { ApiDropdown } from "../molecules";
+import { WorkflowStatusFilter } from "../molecules";
+import { DateRangeNew } from "../molecules";
+import { FormComposer } from "./FormComposerV2";
+import isEqual from 'lodash/isEqual';
+
+const FieldV1 = ({
+ type = "",
+ value = "",
+ onChange = () => {},
+ error = "",
+ label = "",
+ disabled = false,
+ nonEditable = false,
+ placeholder = "",
+ inline = false,
+ required = false,
+ description = "",
+ charCount = false,
+ populators = {},
+ withoutLabel = false,
+ props = {},
+ ref,
+ onBlur,
+ config,
+ errors,
+ infoMessage,
+ component,
+ sectionFormCategory,
+ formData,
+ selectedFormCategory,
+ controllerProps,
+ control,
+ variant,
+}) => {
+ const { t } = useTranslation();
+ let disableFormValidation = false;
+ if (sectionFormCategory && selectedFormCategory) {
+ disableFormValidation =
+ sectionFormCategory !== selectedFormCategory ? true : false;
+ }
+ const Component =
+ typeof component === "string"
+ ? Digit.ComponentRegistryService.getComponent(component)
+ : component;
+ const customValidation = config?.populators?.validation?.customValidation;
+ const customRules = customValidation ? { validate: customValidation } : {};
+ const customProps = config?.customProps;
+ const fieldId=Digit?.Utils.getFieldIdName?.(label)||"NA";
+
+ const [currentCharCount, setCurrentCharCount] = useState(0);
+
+ useEffect(() => {
+ setCurrentCharCount(value?.length);
+ }, [value]);
+
+ const renderCharCount = () => {
+ if (charCount) {
+ const maxCharacters = populators?.validation?.maxlength || 0;
+ return (
+
+ {currentCharCount}/{maxCharacters}
+
+ );
+ }
+ };
+
+ // To render the description or the error message
+ const renderDescriptionOrError = () => {
+ if (error) {
+ return (
+
+ {StringManipulator(
+ "TOSENTENCECASE",
+ StringManipulator("TRUNCATESTRING", t(description), {
+ maxLength: 256,
+ })
+ )}
+
+ );
+ }
+ return null;
+ };
+
+ const renderField = () => {
+ switch (type) {
+ case "text":
+ case "date":
+ case "time":
+ case "geolocation":
+ case "password":
+ case "search":
+ case "number":
+ case "numeric":
+ return (
+ {
+ return (
+ {
+ return (
+ {
+ // return (
+ // (
+
+ {!withoutLabel && (
+
+
+ )}
+
+ );
+};
+
+export default FieldV1;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/Fields.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/Fields.js
new file mode 100644
index 00000000..24395576
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/Fields.js
@@ -0,0 +1,439 @@
+import React from "react";
+import { CheckBox, InputTextAmount, MobileNumber, MultiSelectDropdown, Paragraph, TextArea, TextInput } from "../atoms";
+import { ApiDropdown, CustomDropdown, LocationDropdownWrapper, MultiUploadWrapper } from "../molecules";
+import { useForm, Controller } from "react-hook-form";
+import UploadFileComposer from "./UploadFileComposer";
+// import { CustomDropdown } from "../atoms-groups";
+
+const Fields = (
+ t,
+ errors,
+ type,
+ populators,
+ isMandatory,
+ disable = false,
+ component,
+ config,
+ sectionFormCategory,
+ formData,
+ control,
+ selectedFormCategory,
+ setValue,
+ register,
+ setError,
+ clearErrors,
+ formState,
+ getValues,
+ handleSubmit,
+ reset,
+ watch,
+ trigger,
+ unregister
+) => {
+ let disableFormValidation = false;
+ // disable form validation if section category does not matches with the current category
+ // this will avoid validation for the other categories other than the current category.
+ // sectionFormCategory comes as part of section config and selectedFormCategory is a state managed by the FormComposer consumer.
+ if (sectionFormCategory && selectedFormCategory) {
+ disableFormValidation = sectionFormCategory !== selectedFormCategory ? true : false;
+ }
+ const Component = typeof component === "string" ? Digit.ComponentRegistryService.getComponent(component) : component;
+ const customValidation = config?.populators?.validation?.customValidation;
+ const customRules = customValidation ? { validate: customValidation } : {};
+ const customProps = config?.customProps;
+ switch (type) {
+ case "date":
+ case "text":
+ case "number":
+ case "password":
+ case "time":
+ return (
+ populators.component({ ...props, setValue }, populators.customProps)}
+ defaultValue={populators.defaultValue}
+ name={populators?.name}
+ control={control}
+ />
+ );
+ case "checkbox":
+ return (
+ {
+ return (
+ {
+ function getFileStoreData(filesData) {
+ const numberOfFiles = filesData.length;
+ let finalDocumentData = [];
+ if (numberOfFiles > 0) {
+ filesData.forEach((value) => {
+ finalDocumentData.push({
+ fileName: value?.[0],
+ fileStoreId: value?.[1]?.fileStoreId?.fileStoreId,
+ documentType: value?.[1]?.file?.type,
+ });
+ });
+ }
+ //here we need to update the form the same way as the state of the reducer in multiupload, since Upload component within the multiupload wrapper uses that same format of state so we need to set the form data as well in the same way. Previously we were altering it and updating the formData
+ onChange(numberOfFiles > 0 ? filesData : []);
+ }
+ return (
+ (
+ {
+ return (
+ {
+ return (
+
+ {t(section.head)}
+
+
+ {t(section.subHead)}
+
+
+ );
+ } else if (section.head) {
+ return (
+ <>
+
+ {t(section.head)}
+
+
+ );
+ } else {
+ return ;
+ }
+ };
+
+ const closeToast = () => {
+ setShowErrorToast(false);
+ setCustomToast(false);
+ props?.updateCustomToast&&props?.updateCustomToast(false);
+ };
+
+
+ const formFields = useCallback(
+ (section, index, array, sectionFormCategory) => (
+
+ {section && getCombinedComponent(section)}
+ {section.body.map((field, index) => {
+ if (field?.populators?.hideInForm) return null;
+ if (props.inline)
+ return (
+
+
+ );
+ return (
+
+
+ {fieldSelector(field.type, field.populators, field.isMandatory, field?.disable, field?.component, field, sectionFormCategory)}
+
+ {/* Commenting to initialize & check Field Controller and composer which render label and field Should remove later*/}
+ {/*{!field.withoutLabel && (
+
+ {t(field.label)}
+ {field?.appendColon ? " : " : null}
+ {field.isMandatory ? " * " : null}
+
+ )}
+
+
+ {/* Migrating error message to field container as here it renders outside the field */}
+ {/* {field?.populators?.name && errors && errors[field?.populators?.name] && Object.keys(errors[field?.populators?.name]).length ? (
+
+ );
+ })}
+ {!props.noBreakLine && (array.length - 1 === index ? null :
+ ),
+ [props.config, formData]
+ );
+
+ const getCardStyles = (shouldDisplay = true) => {
+ let styles = props.cardStyle || {};
+ if (props.noBoxShadow) styles = { ...styles, boxShadow: "none" };
+ if (!shouldDisplay) styles = { ...styles, display: "none" };
+ return styles;
+ };
+
+ const isDisabled = props.isDisabled || false;
+ const checkKeyDown = (e) => {
+ const keyCode = e.keyCode ? e.keyCode : e.key ? e.key : e.which;
+ if (keyCode === 13) {
+ // e.preventDefault();
+ }
+ };
+
+ const setActiveNavByDefault = (configNav) => {
+ let setActiveByDefaultRow = null;
+ configNav?.forEach((row) => {
+ if (row?.activeByDefault) {
+ setActiveByDefaultRow = row;
+ }
+ });
+
+ if (setActiveByDefaultRow) {
+ return setActiveByDefaultRow?.name;
+ }
+
+ return configNav?.[0]?.name;
+ };
+
+ const [activeLink, setActiveLink] = useState(props.horizontalNavConfig ? setActiveNavByDefault(props.horizontalNavConfig) : null);
+
+ useEffect(() => {
+ setActiveLink(setActiveNavByDefault(props.horizontalNavConfig));
+ }, [props.horizontalNavConfig]);
+
+ const renderFormFields = (props, section, index, array, sectionFormCategory) => (
+
+ {!props.childrenAtTheBottom && props.children}
+ {props.heading && {props.heading} }
+ {props.description && {props.description} }
+ {props.text && {props.text} }
+ {formFields(section, index, array, sectionFormCategory)}
+ {props.childrenAtTheBottom && props.children}
+ {props.submitInForm && (
+
+ );
+
+ return (
+
+ );
+};
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/InboxSearchComposer.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/InboxSearchComposer.js
new file mode 100644
index 00000000..cf712d7e
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/InboxSearchComposer.js
@@ -0,0 +1,455 @@
+import React, { useEffect, useReducer, useState,useMemo,useRef } from "react";
+import Toast from "../atoms/Toast";
+import { useHistory} from "react-router-dom";
+import reducer, { initialInboxState } from "./InboxSearchComposerReducer";
+import InboxSearchLinks from "../atoms/InboxSearchLinks";
+import { InboxContext } from "./InboxSearchComposerContext";
+import SearchComponent from "../atoms/SearchComponent";
+import PopUp from "../atoms/PopUp";
+import SearchAction from "../molecules/SearchAction";
+import FilterAction from "../molecules/FilterAction";
+import SortAction from "../molecules/SortAction";
+import MobileSearchComponent from "./MobileView/MobileSearchComponent";
+import MobileSearchResults from "./MobileView/MobileSearchResults";
+import MediaQuery from 'react-responsive';
+import _ from "lodash";
+import HeaderComponent from "../atoms/HeaderComponent";
+import { useTranslation } from "react-i18next";
+import { Button, Footer } from "../atoms";
+import ResultsDataTableWrapper from "./ResultsDataTableWrapper";
+
+
+const InboxSearchComposer = ({configs,additionalConfig,onFormValueChange=()=>{},showTab,tabData,onTabChange,customizers={}}) => {
+
+ const renderCount = useRef(1); // Initialize render count
+
+ useEffect(() => {
+ console.log(`Render Count:${renderCount.current}`);
+ renderCount.current += 1; // Increment render count after each render
+ });
+
+ const hasRun = useRef(false);
+ const history = useHistory();
+ const { t } = useTranslation();
+
+ const [enable, setEnable] = useState(false);
+ const [state, dispatch] = useReducer(reducer, initialInboxState(configs));
+ const [showToast, setShowToast] = useState(false);
+ //for mobile view
+ const [type, setType] = useState("");
+ const [popup, setPopup] = useState(false);
+
+ const [apiDetails, setApiDetails] = useState(configs?.apiDetails);
+
+ if (!hasRun.current) {
+ hasRun.current = true;
+ // let hasCustomizers = false;
+ // if(Object.keys(customizers).length>0){
+ // hasCustomizers = true;
+ // // dispatch({
+ // // type:"customizers",
+ // // state:customizers
+ // // })
+ // }
+ //if the current moduleName is there in UICustomizations already then don't do anything, otherwise add customizers to it
+ if(!Object.keys({...Digit?.Customizations?.commonUiConfig?.[configs.apiDetails.moduleName]}).length>0 && Object.keys(customizers).length>0){
+ Digit.Customizations.commonUiConfig = {...Digit.Customizations.commonUiConfig,[configs.apiDetails.moduleName]:{...customizers}}
+ }
+ }
+
+ useEffect(()=>{
+ setApiDetails(configs?.apiDetails)
+ },[configs])
+
+ const mobileSearchSession = Digit.Hooks.useSessionStorage("MOBILE_SEARCH_MODAL_FORM",
+ {}
+ );
+ const [sessionFormData, setSessionFormData, clearSessionFormData] = mobileSearchSession;
+
+ //for mobile view
+ useEffect(() => {
+ if (type) setPopup(true);
+ }, [type]);
+
+ useEffect(()=>{
+ clearSessionFormData();
+ },[]);
+
+ useEffect(() => {
+ //here if jsonpaths for search & table are same then searchform gets overridden
+
+ if (Object.keys(state.searchForm)?.length >= 0) {
+ const result = { ..._.get(apiDetails, apiDetails?.searchFormJsonPath, {}), ...state.searchForm }
+ Object.keys(result).forEach(key => {
+ if (!result[key]) delete result[key]
+ });
+ _.set(apiDetails, apiDetails?.searchFormJsonPath, result)
+ }
+ if (Object.keys(state.filterForm)?.length >= 0) {
+ const result = { ..._.get(apiDetails, apiDetails?.filterFormJsonPath, {}), ...state.filterForm }
+ Object.keys(result).forEach(key => {
+ if (!result[key] || result[key]?.length===0) delete result[key]
+ });
+ _.set(apiDetails, apiDetails?.filterFormJsonPath, result)
+ }
+
+ if(Object.keys(state.tableForm)?.length >= 0) {
+ _.set(apiDetails, apiDetails?.tableFormJsonPath, { ..._.get(apiDetails, apiDetails?.tableFormJsonPath, {}),...state.tableForm })
+ }
+ const searchFormParamCount = Object.keys(state.searchForm).reduce((count,key)=>state.searchForm[key]===""?count:count+1,0)
+ const filterFormParamCount = Object.keys(state.filterForm).reduce((count, key) => state.filterForm[key] === "" ? count : count + 1, 0)
+
+ if (Object.keys(state.tableForm)?.length > 0 && (searchFormParamCount >= apiDetails?.minParametersForSearchForm || filterFormParamCount >= apiDetails?.minParametersForFilterForm)){
+ setEnable(true)
+ }
+
+ if(configs?.type === 'inbox' || configs?.type === 'download') setEnable(true)
+
+ },[state])
+
+
+ useEffect(() => {
+ onFormValueChange(state)
+ }, [state])
+
+
+ let requestCriteria = {
+ url:configs?.apiDetails?.serviceName,
+ params:configs?.apiDetails?.requestParam,
+ body:configs?.apiDetails?.requestBody,
+ config: {
+ enabled: enable,
+ },
+ state
+ };
+
+ //clear the reducer state when user moves away from inbox screen(it already resets when component unmounts)(keeping this code here for reference)
+ // useEffect(() => {
+ // return () => {
+ // if (!window.location.href.includes("/inbox")) {
+
+ // dispatch({
+ // type: "clearSearchForm",
+ // state: configs?.sections?.search?.uiConfig?.defaultValues
+ // //need to pass form with empty strings
+ // })
+ // dispatch({
+ // type: "clearFilterForm",
+ // state: configs?.sections?.filter?.uiConfig?.defaultValues
+ // //need to pass form with empty strings
+ // })
+ // }
+ // };
+ // }, [location]);
+
+ const configModule = Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]
+ const updatedReqCriteria = configModule?.preProcess ? configModule?.preProcess(requestCriteria,configs.additionalDetails) : requestCriteria
+
+ if(configs?.customHookName){
+ var { isLoading, data, revalidate,isFetching,refetch,error } = eval(`Digit.Hooks.${configs.customHookName}(updatedReqCriteria)`);
+ }
+ else {
+ var { isLoading, data, revalidate,isFetching,error,refetch } = Digit.Hooks.useCustomAPIHook(updatedReqCriteria);
+
+ }
+
+ const closeToast = () => {
+ setTimeout(() => {
+ setShowToast(null);
+ }, 5000);
+ };
+
+ useEffect(() => {
+ if(error){
+ setShowToast({ label:error?.message, type:"error" });
+ closeToast()
+ }
+ }, [error])
+
+
+ useEffect(() => {
+ if(additionalConfig?.search?.callRefetch) {
+ refetch()
+ additionalConfig?.search?.setCallRefetch(false)
+ }
+ }, [additionalConfig?.search?.callRefetch])
+
+
+ useEffect(() => {
+ return () => {
+ revalidate();
+ setEnable(false);
+ };
+ })
+
+ //for mobile view
+ const handlePopupClose = () => {
+ setPopup(false);
+ setType("");
+ }
+
+ return (
+
+ setShowToast(null)}
+ >
+ )}
+ {configs?.footerProps?.showFooter &&
+ Digit.Utils.didEmployeeHasAtleastOneRole(
+ configs?.footerProps?.allowedRolesForFooter
+ ) && (
+
+ );
+}
+
+export default InboxSearchComposer;
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/InboxSearchComposerContext.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/InboxSearchComposerContext.js
new file mode 100644
index 00000000..28e27b4c
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/InboxSearchComposerContext.js
@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const InboxContext = createContext(null);
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/InboxSearchComposerReducer.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/InboxSearchComposerReducer.js
new file mode 100644
index 00000000..a37a2491
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/InboxSearchComposerReducer.js
@@ -0,0 +1,107 @@
+import _ from 'lodash';
+
+function removeObjectFromArray(array, key, value) {
+ // Find the index of the object with the specified key and value
+ const indexToRemove = array.findIndex((obj) => obj[key] === value);
+
+ // If the object is found, remove it from the array
+ if (indexToRemove !== -1) {
+ array.splice(indexToRemove, 1);
+ }
+
+ // Return the modified array
+ return array;
+}
+
+export const initialInboxState = (config) => {
+
+ if(config?.sections?.searchResult?.uiConfig?.customDefaultPagination) {
+ return {
+ searchForm: {},
+ filterForm: {},
+ tableForm: {
+ ...config?.sections?.searchResult?.uiConfig?.customDefaultPagination,
+ },
+ };
+ }
+
+ return {
+ searchForm: {},
+ filterForm: {},
+ tableForm: {
+ limit: 10,
+ offset: 0,
+ },
+ hasCustomizers:false,
+ customizers:{}
+ }
+};
+
+const reducer = (state, action) => {
+ switch (action.type) {
+ case 'searchForm':
+ const { state: updatedSearchStateSearchForm } = action;
+ return {
+ ...state,
+ searchForm: { ...state.searchForm, ...updatedSearchStateSearchForm },
+ };
+ case 'filterForm':
+ const { state: updatedSearchStateFilterForm } = action;
+ return {
+ ...state,
+ filterForm: { ...state.filterForm, ...updatedSearchStateFilterForm },
+ };
+ case 'tableForm':
+ const updatedTableState = action.state;
+ return {
+ ...state,
+ tableForm: { ...state.tableForm, ...updatedTableState },
+ };
+ case 'clearSearchForm':
+ return { ...state, searchForm: action.state };
+ case 'clearFilterForm':
+ return { ...state, filterForm: action.state };
+ case 'jsonPath':
+ const {
+ tag: { removableTagConf },
+ } = action;
+ const stateObj = _.cloneDeep(state);
+ switch (removableTagConf?.type) {
+ case 'multi':
+ _.set(
+ stateObj,
+ removableTagConf?.sessionJsonPath,
+ removeObjectFromArray(
+ _.get(state, removableTagConf?.sessionJsonPath),
+ removableTagConf?.deleteRef,
+ removableTagConf?.value?.[removableTagConf?.deleteRef]
+ )
+ );
+ return stateObj;
+
+ case 'single':
+ _.set(stateObj, removableTagConf?.sessionJsonPath, '');
+ return stateObj;
+
+ case 'dateRange':
+ _.set(stateObj, removableTagConf?.sessionJsonPath, '');
+ return stateObj;
+ case 'workflowStatusFilter':
+ //if we are here then we have dynamic ids to delete from state
+ _.set(stateObj,`${removableTagConf?.sessionJsonPath}.${removableTagConf?.dynamicId}`, false)
+ return stateObj
+ default:
+ break;
+ }
+ break;
+ case 'obj':
+ const {updatedState} = action
+ return updatedState
+ case 'customizers':
+ return {...state,hasCustomizers:true,customizers:action.state};
+ default:
+ return state;
+ }
+};
+
+export default reducer;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/MobileView/MobileSearchComponent.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/MobileView/MobileSearchComponent.js
new file mode 100644
index 00000000..f789239d
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/MobileView/MobileSearchComponent.js
@@ -0,0 +1,324 @@
+import React, { useContext, useEffect, useState } from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { InboxContext } from "../InboxSearchComposerContext";
+import { CustomSVG } from "../../atoms";
+import Footer from "../../atoms/Footer";
+import SubmitBar from "../../atoms/SubmitBar";
+import LinkLabel from "../../atoms/LinkLabel";
+import RenderFormFields from "../../molecules/RenderFormFields";
+import Toast from "../../atoms/Toast";
+import _ from "lodash";
+import Button from "../../atoms/Button";
+
+const MobileSearchComponent = ({
+ uiConfig,
+ modalType,
+ header = "",
+ screenType = "search",
+ fullConfig,
+ data,
+ onClose,
+ defaultValues,
+ browserSession,
+}) => {
+ const { t } = useTranslation();
+ const { state, dispatch } = useContext(InboxContext);
+ const [showToast, setShowToast] = useState(null);
+ let updatedFields = [];
+ const { apiDetails } = fullConfig;
+
+ if (fullConfig?.postProcessResult) {
+ //conditions can be added while calling postprocess function to pass different params
+ Digit?.Customizations?.[apiDetails?.masterName]?.[
+ apiDetails?.moduleName
+ ]?.postProcess(data, uiConfig);
+ }
+
+ //define session for modal form
+ //uiConfig.type === filter || sort
+ //we need to sync browsersession and mobileSearchSession
+ // const mobileSearchSession = Digit.Hooks.useSessionStorage(`MOBILE_SEARCH_MODAL_FORM_${uiConfig?.type}_${fullConfig?.label}`,
+ // {...uiConfig?.defaultValues}
+ // );
+
+ // const [sessionFormData, setSessionFormData, clearSessionFormData] = mobileSearchSession;
+ const [session, setSession, clearSession] = browserSession || [];
+
+ const defValuesFromSession =
+ uiConfig?.typeMobile === "filter"
+ ? session?.searchForm
+ : session?.filterForm;
+
+ const {
+ register,
+ handleSubmit,
+ setValue,
+ getValues,
+ reset,
+ watch,
+ control,
+ formState,
+ errors,
+ setError,
+ clearErrors,
+ } = useForm({
+ // defaultValues: {...uiConfig?.defaultValues,...sessionFormData},
+ defaultValues: { ...uiConfig?.defaultValues, ...defValuesFromSession },
+ // defaultValues:{...uiConfig?.defaultValues}
+ });
+ const formData = watch();
+
+ const checkKeyDown = (e) => {
+ const keyCode = e.keyCode ? e.keyCode : e.key ? e.key : e.which;
+ if (keyCode === 13) {
+ e.preventDefault();
+ }
+ };
+
+ useEffect(() => {
+ updatedFields = Object.values(formState?.dirtyFields);
+ }, [formState]);
+
+ // //on form value change, update session data with form data
+ // useEffect(()=>{
+ // if (!_.isEqual(sessionFormData, formData)) {
+ // // const difference = _.pickBy(sessionFormData, (v, k) => !_.isEqual(formData[k], v));
+ // setSessionFormData({ ...sessionFormData,...formData, });
+ // }
+ // },[formData]);
+
+ // useEffect(()=>{
+ // clearSessionFormData();
+ // },[]);
+
+ const onSubmit = (data) => {
+ onClose?.();
+ if (updatedFields.length >= uiConfig?.minReqFields) {
+ // here based on screenType call respective dispatch fn
+ dispatch({
+ type: modalType === "SEARCH" ? "searchForm" : "filterForm",
+ state: {
+ ...data,
+ },
+ });
+ } else {
+ setShowToast({
+ warning: true,
+ label: t("ES_COMMON_MIN_SEARCH_CRITERIA_MSG"),
+ });
+ setTimeout(closeToast, 3000);
+ }
+ };
+
+ const clearSearch = () => {
+ // clearSessionFormData();
+ reset(uiConfig?.defaultValues);
+ dispatch({
+ type: uiConfig?.type === "filter" ? "clearFilterForm" : "clearSearchForm",
+ state: { ...uiConfig?.defaultValues },
+ //need to pass form with empty strings
+ });
+ };
+
+ const closeToast = () => {
+ setShowToast(null);
+ };
+
+ const renderHeader = () => {
+ switch (uiConfig?.typeMobile) {
+ case "filter": {
+ return (
+
+
+ );
+};
+
+export default MobileSearchComponent;
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/MobileView/MobileSearchResults.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/MobileView/MobileSearchResults.js
new file mode 100644
index 00000000..3e2ee3d5
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/MobileView/MobileSearchResults.js
@@ -0,0 +1,193 @@
+import React, { useMemo, useContext, useEffect } from 'react'
+import { useForm } from "react-hook-form";
+import { useTranslation } from 'react-i18next';
+import { Details } from "../../molecules/DetailsCard";
+import { Link } from "react-router-dom";
+import NoResultsFound from "../../atoms/NoResultsFound";
+import { Loader } from "../../atoms";
+import _ from "lodash";
+import { InboxContext } from '../InboxSearchComposerContext';
+import Table from "../../atoms/Table";
+
+const MobileSearchResults = ({ config, data, isLoading, isFetching,fullConfig }) => {
+ const {apiDetails} = fullConfig
+ const { t } = useTranslation();
+ const resultsKey = config.resultsJsonPath
+ //let searchResult = data?.[resultsKey]?.length>0 ? data?.[resultsKey] : []
+ //searchResult = searchResult.reverse()
+ //const tenantId = Digit.ULBService.getCurrentTenantId();
+
+ let searchResult = _.get(data,resultsKey,[])
+ searchResult = searchResult?.length>0 ? searchResult : []
+ searchResult = searchResult.reverse();
+ const tenantId = Digit.ULBService.getCurrentTenantId();
+ const headerLocale = Digit.Utils.locale.getTransformedLocale(tenantId);
+ //reversing reason -> for some reason if we enable sorting on columns results from the api are reversed and shown, for now -> reversing the results(max size 50 so not a performance issue)
+
+ // if (fullConfig?.postProcessResult){
+ // var { isPostProcessFetching,
+ // isPostProcessLoading,
+ // combinedResponse } = Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.postProcess(searchResult)
+
+ // if(combinedResponse?.length > 0){
+ // searchResult = combinedResponse
+ // }
+ // }
+
+ const {state,dispatch} = useContext(InboxContext)
+
+ const {
+ register,
+ handleSubmit,
+ setValue,
+ getValues,
+ reset,
+ watch,
+ trigger,
+ control,
+ formState,
+ errors,
+ setError,
+ clearErrors,
+ unregister,
+} = useForm({
+ defaultValues: {
+ offset: 0,
+ limit: 10,
+ },
+});
+
+ useEffect(() => {
+ register("offset", 0);
+ register("limit", 10);
+ }, [register]);
+
+ function onPageSizeChange(e) {
+ setValue("limit", Number(e.target.value));
+ handleSubmit(onSubmit)();
+ }
+
+ function nextPage() {
+ setValue("offset", getValues("offset") + getValues("limit"));
+ handleSubmit(onSubmit)();
+ }
+
+ function previousPage() {
+ const offsetValue = getValues("offset") - getValues("limit")
+ setValue("offset", offsetValue>0 ? offsetValue : 0);
+ handleSubmit(onSubmit)();
+ }
+
+ const onSubmit = (data) => {
+ //here update the reducer state
+ //call a dispatch to update table's part of the state and update offset, limit
+ // this will in turn make the api call and give search results and table will be rendered acc to the new data
+ dispatch({
+ type:"tableForm",
+ state:{...data}
+ })
+
+ }
+
+ const columns = [
+ {
+ Header: "",
+ accessor: "_searchResults",
+ id : "_searchResults"
+ }
+ ]
+
+ const propsMobileInboxCards = useMemo(() => {
+ if (isLoading) {
+ return [];
+ }
+ let cardData = searchResult.map((details) => {
+ let mapping = {};
+ let additionalCustomization = {};
+ let cols = config?.columns;
+ for(let columnIndex = 0; columnIndex {
+ return {
+ _searchResults :
+
| {t(key)} | + }) + } + + const renderBody = (rows) => { + return rows?.map((row, index) => { + return|||||
|---|---|---|---|---|---|
| {row[0]} | + { row[1] === t("WORKS_TOTAL_AMT") ? {row[1]} : {row[1]} } |
+ {row[1] === t("WORKS_TOTAL_AMT")
+ ? {row[2]} |
+ : {row[2]} | }
+ {row[3] &&
+ history.push(
+ {
+ pathname: `/digit-ui/employee/contracts/create-contract?estimateNumber=${data?.state?.estimateNumber}&task=${data?.state?.estimateDetails[index]?.name}&subEstimate=${data?.state?.estimateDetails[index]?.estimateDetailNumber}`,
+ state:{index, data}
+ }
+ )}>
+
+ | }
+ {/* {showDelete() && removeRow(row)}> | */}
+
| + | + | + |
+ {data.date &&
+ );
+};
+
+export default TLCaption;
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/TLTradeAccessories.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/TLTradeAccessories.js
new file mode 100644
index 00000000..536a2ce3
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/components/TLTradeAccessories.js
@@ -0,0 +1,52 @@
+
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { CardSubHeader, StatusTable, Row, CardSectionHeader } from "@egovernments/digit-ui-react-components";
+
+function TLTradeAccessories({ units }) {
+ const { t } = useTranslation();
+ return (
+ {data.date}
} +{data.name}
+ {data.mobileNumber && ++
{t("ES_APPLICATION_DETAILS_APPLICATION_CHANNEL_" + data.source.toUpperCase())}
} + {data.comment &&{data?.wfComment?.map( e =>
+
: null}
+ {data?.thumbnailsToShow?.thumbs?.length > 0 ?
+
+ )}{t("WF_COMMON_COMMENTS")}
+{e}
+
+ {OpenImage(src, index,data?.thumbnailsToShow)}} />
+
: null}
+ {t("CS_COMMON_ATTACHMENTS")}
+
+ {`${t(unit?.title)} ${index + 1}`}
+
+
+
+ {unit?.values?.map((value, index) => {
+ if (value.map === true && value.value !== "N/A") {
+ return |
} />;
+ }
+ return (
+ |
+ );
+ })}
+
+
+
+ ))}
+
+ {`${t(unit?.title)} ${index + 1}`}
+
+
+
+ {unit?.values?.map((value, index) => {
+ if (value.map === true && value.value !== "N/A") {
+ return |
} />;
+ }
+ return (
+ |
+ );
+ })}
+
+
+
+ ))}
+ {props.label}
; + }; + + const Close = () => ( + + ); + + const CloseBtn = (props) => { + return ( +
+
+ );
+ };
+
+ const onPopupOpen = () => {
+ let breakupData = wsAdditionalDetails.additionalDetails.data || {};
+ const sessionBillData = sessionStorage.getItem("Digit.ADHOC_BILL_ADD_REBATE_DATA");
+ const sessionBillFormData = sessionBillData ? JSON.parse(sessionBillData) : {};
+ if (sessionBillFormData?.value?.totalAmount) breakupData = sessionBillFormData?.value;
+ setBreakUpData(breakupData);
+ showPopUp(true);
+ }
+
+ return (
+
+ {wsAdditionalDetails?.additionalDetails?.isViewBreakup ? { showPopUp(false); }} />}
+ hideSubmit={true}
+ popupStyles={{ overflowY: "auto" }} //maxHeight: "calc(100% - 90px)"
+ headerBarMainStyle={{ marginBottom: "0px" }}
+ popupModuleMianStyles={{ paddingTop: "0px" }}
+ >
+ {
+ {t("WS_APPLICATION_FEE_HEADER")}
+ {breakUpData?.billSlabData?.FEE?.map(data => ₹{Number(data?.amount) || 0}} textStyle={{ textAlign: "right" }} />)}
+
+₹{Number(breakUpData?.fee) || 0}} textStyle={{ textAlign: "right", fontWeight: "700", fontSize: "24px" }} />
+ {t("WS_SERVICE_FEE_HEADER")}
+ {breakUpData?.billSlabData?.CHARGES?.map(data => ₹{Number(data?.amount) || 0}} textStyle={{ textAlign: "right" }} />)}
+
+₹{Number(breakUpData?.charge) || 0}} textStyle={{ textAlign: "right", fontWeight: "700", fontSize: "24px" }} />
+ {breakUpData?.billSlabData?.TAX?.map(data => ₹{Number(data?.amount) || 0}} textStyle={{ textAlign: "right" }} />)}
+
+₹{Number(breakUpData?.totalAmount) || 0}} textStyle={{ textAlign: "right", fontWeight: "700", fontSize: "24px" }} />
+
}
+ }
+
+ onPopupOpen()} style={{ marginTop: "12px" }}>
+ {t("WS_PAYMENT_VIEW_BREAKUP")}
+
: null
+ }
+ {popup &&
+ +
+
+
+ {oldValueData?.connectionType ? (
+ |
+ ) : (
+ |
+ ) : (
+ |
+ ) : (
+
+ );
+ };
+
+ const renderWSConnectionDetails = () => {
+ return (
+ {"NA"}
+ )}
+
+ {oldValueData?.noOfWaterClosets ? (
+ {"NA"}
+ )}
+ {oldValueData?.noOfToilets ? (
+ {"NA"}
+ )}
+
+ {oldValueData?.connectionType && ( |
)}
+ {oldValueData?.noOfTaps && ( |
)}
+ {oldValueData?.waterSource && ( |
)}
+ {oldValueData?.pipeSize && ( |
)}
+ {oldValueData?.waterSource && ( |
)}
+
+ );
+ };
+
+ const renderSWPlumberDetails = () => {
+ return (
+
+ {oldValueData?.additionalDetails?.detailsProvidedBy !== wsAdditionalDetails?.additionalDetails?.plumberDetails[0]?.value &&
+ oldValueData?.additionalDetails?.detailsProvidedBy !== null ? (
+ |
+ ) : (
+ |
+ ) : (
+ |
+ ) : (
+ |
+ ) : (
+
+ );
+ };
+
+ const renderWSPlumberDetails = () => {
+ return (
+ {"NA"}
+ )}
+ {oldValueData?.plumberInfo ? (
+ {"NA"}
+ )}
+ {oldValueData?.plumberInfo ? (
+ {"NA"}
+ )}
+ {oldValueData?.plumberInfo ? (
+ {"NA"}
+ )}
+
+ {oldValueData?.additionalDetails?.detailsProvidedBy !== wsAdditionalDetails?.additionalDetails?.plumberDetails[0]?.value ? (
+ |
+ ) : (
+
+ );
+ };
+
+ const renderSWRoadCuttingDetails = () => {
+ {
+ oldValueData?.roadCuttingInfo?.map((info) => {
+ return (
+ {"NA"}
+ )}
+
+ |
+ |
+
+ );
+ });
+ }
+ };
+
+ const renderSWActivationDetails = () => {
+ return (
+
+ {oldValueData?.connectionExecutionDate ? (
+ |
+ ) : (
+
+ );
+ };
+
+ const renderWSActivationDetails = () => {
+ return (
+ {"NA"}
+ )}
+
+ {oldValueData?.meterId && ( |
)}
+ {oldValueData?.additionalDetails?.initialMeterReading && ( |
)}
+ {oldValueData?.meterInstallationDate && ( |
)}
+ {oldValueData?.connectionExecutionDate && ( |
)}
+
+ );
+ };
+
+ var { connectionDetails, plumberDetails, roadCuttingDetails, activationDetails } = wsAdditionalDetails?.additionalDetails || {connectionDetails:[], plumberDetails: []};
+
+ // binding old values with new values
+ if(isModify === "MODIFY"){
+
+ connectionDetails = connectionDetails?.map((value) => {
+ if(value.title == "WS_SERV_DETAIL_CONN_TYPE" && oldValueData?.connectionType) value["oldValue"] = [
+ { value:value?.value, className:"newValue", style:{ display:"inline"} },
+ {
+ value:`${t("WS_OLD_LABEL_NAME")} ${oldValueData?.connectionType}`,
+ className:"oldValue", style:{color:'gray', paddingLeft:"10px", display:"inline", fontSize:"13px"}
+ }];
+ if(value.title == "WS_SERV_DETAIL_NO_OF_TAPS" && oldValueData?.noOfTaps) value["oldValue"] = [
+ {value:value?.value,className:"newValue", style:{ display:"inline"}},
+ {value:`${t("WS_OLD_LABEL_NAME")} ${oldValueData?.noOfTaps}`, style:{color:'gray', paddingLeft:"10px", display:"inline", fontSize:"13px"},className:"oldValue"}
+ ];
+ if(value.title == "WS_SERV_DETAIL_WATER_SOURCE" && oldValueData?.waterSource) value["oldValue"] = [
+ {value:value?.value, className:"newValue", style:{ display:"inline"}},
+ {
+ value: `${t("WS_OLD_LABEL_NAME")} ${t(oldValueData?.waterSource?.toUpperCase()?.split(".")[0])}`,
+ style:{color:'gray', paddingLeft:"10px", display:"inline", fontSize:"13px"}, className:"oldValue"
+ }
+ ];
+ if(value.title == "WS_PIPE_SIZE_IN_INCHES_LABEL" && oldValueData?.pipeSize) value["oldValue"] = [
+ {value:value?.value, className:"newValue", style:{ display:"inline"}},
+ {
+ value: `${t("WS_OLD_LABEL_NAME")} ${oldValueData?.pipeSize}`,
+ style:{color:'gray', paddingLeft:"10px", display:"inline", fontSize:"13px"}, className:"oldValue"
+ }
+ ];
+ if(value.title == "WS_SERV_DETAIL_WATER_SUB_SOURCE" && oldValueData?.waterSource) value["oldValue"] = [
+ {value:value?.value, className:"newValue", style:{ display:"inline"}},
+ {
+ value: `${t("WS_OLD_LABEL_NAME")} ${t(oldValueData?.waterSource?.toUpperCase()?.split(".")[1])}`,
+ style:{color:'gray', paddingLeft:"10px", display:"inline", fontSize:"13px"}, className:"oldValue"
+ }
+ ];
+ if(value.title == "WS_NUMBER_WATER_CLOSETS_LABEL" && oldValueData?.noOfWaterClosets) value["oldValue"] = [
+ {value:value?.value, className:"newValue", style:{ display:"inline"}},
+ {
+ value: `${t("WS_OLD_LABEL_NAME")} ${oldValueData?.noOfWaterClosets}`,
+ style:{color:'gray', paddingLeft:"10px", display:"inline", fontSize:"13px"}, className:"oldValue"
+ }
+ ];
+ if(value.title == "WS_SERV_DETAIL_NO_OF_TOILETS" && oldValueData?.noOfWaterClosets) value["oldValue"] = [
+ {value:value?.value, className:"newValue", style:{ display:"inline"}},
+ {
+ value: `${t("WS_OLD_LABEL_NAME")} ${oldValueData?.noOfWaterClosets}`,
+ style:{color:'gray', paddingLeft:"10px", display:"inline", fontSize:"13px"}, className:"oldValue"
+ }
+ ];
+
+ return value;
+ })
+
+ plumberDetails = plumberDetails?.map((value) => {
+ if(value.title == "WS_ADDN_DETAILS_PLUMBER_PROVIDED_BY" && oldValueData?.additionalDetails?.detailsProvidedBy && oldValueData?.additionalDetails?.detailsProvidedBy !== value.value ) value["oldValue"] = [
+ {value:value?.value, className:"newValue", style:{ display:"inline"}},
+ {
+ value: `${t("WS_OLD_LABEL_NAME")} ${oldValueData?.additionalDetails?.detailsProvidedBy}`,
+ style:{color:'gray', paddingLeft:"10px", display:"inline", fontSize:"13px"}, className:"oldValue"
+ }
+ ];
+ if(value.title == "WS_ADDN_DETAILS_PLUMBER_LICENCE_NO_LABEL" && oldValueData?.plumberInfo[0]?.licenseNo ) value["oldValue"] = [
+ {value:value?.value, className:"newValue", style:{ display:"inline"}},
+ {
+ value: `${t("WS_OLD_LABEL_NAME")} ${oldValueData?.plumberInfo[0]?.licenseNo}`,
+ style:{color:'gray', paddingLeft:"10px", display:"inline", fontSize:"13px"}, className:"oldValue"
+ }
+ ];
+ if(value.title == "WS_ADDN_DETAILS_PLUMBER_NAME_LABEL" && oldValueData?.plumberInfo[0]?.name ) value["oldValue"] = [
+ {value:value?.value, className:"newValue", style:{ display:"inline"}},
+ {
+ value: `${t("WS_OLD_LABEL_NAME")} ${oldValueData?.plumberInfo[0]?.name}`,
+ style:{color:'gray', paddingLeft:"10px", display:"inline", fontSize:"13px"}, className:"oldValue"
+ }
+ ];
+ if(value.title == "WS_PLUMBER_MOBILE_NO_LABEL" && oldValueData?.plumberInfo[0]?.mobileNumber ) value["oldValue"] = [
+ {value:value?.value, className:"newValue", style:{ display:"inline"}},
+ {
+ value: `${t("WS_OLD_LABEL_NAME")} ${oldValueData?.plumberInfo[0]?.mobileNumber}`,
+ style:{color:'gray', paddingLeft:"10px", display:"inline", fontSize:"13px"}, className:"oldValue"
+ }
+ ];
+ return value;
+ })
+
+ roadCuttingDetails = roadCuttingDetails?.map((roadDetail) => {
+ const roadDetailValues = roadDetail?.values?.map((value) => {
+ if(value.title == "WS_ADDN_DETAIL_ROAD_TYPE" && oldValueData?.roadCuttingInfo[0]?.roadType) value["oldValue"] = [
+ {value:value?.value, className:"newValue", style:{ display:"inline"}},
+ {
+ value: `${t("WS_OLD_LABEL_NAME")} ${oldValueData?.roadCuttingInfo[0]?.roadType}`,
+ style:{color:'gray', paddingLeft:"10px", display:"inline", fontSize:"13px"}, className:"oldValue"
+ }
+ ];
+ if(value.title == "WS_ROAD_CUTTING_AREA_LABEL" && oldValueData?.roadCuttingInfo[0]?.roadCuttingArea) value["oldValue"] = [
+ {value:value?.value, className:"newValue", style:{ display:"inline"}},
+ {
+ value: `${t("WS_OLD_LABEL_NAME")} ${oldValueData?.roadCuttingInfo[0]?.roadCuttingArea}`,
+ style:{color:'gray', paddingLeft:"10px", display:"inline", fontSize:"13px"}, className:"oldValue"
+ }
+ ];
+ return value;
+ })
+ return ({...roadDetail,values:roadDetailValues});
+ })
+
+ activationDetails = activationDetails?.map((value) => {
+ if(value.title == "WS_SERV_DETAIL_CONN_EXECUTION_DATE" && oldValueData?.connectionExecutionDate) value["oldValue"] = [
+ {value:value?.value, className:"newValue", style:{ display:"inline"}},
+ {
+ value: `${t("WS_OLD_LABEL_NAME")} ${convertEpochToDate(oldValueData?.connectionExecutionDate)}`,
+ style:{color:'gray', paddingLeft:"10px", display:"inline", fontSize:"13px"}, className:"oldValue"
+ }
+ ];
+
+ if(value.title == "WS_SERV_DETAIL_METER_ID" && oldValueData?.meterId) value["oldValue"] = [
+ {value:value?.value, className:"newValue", style:{ display:"inline"}},
+ {
+ value: `${t("WS_OLD_LABEL_NAME")} ${oldValueData?.meterId}`,
+ style:{color:'gray', paddingLeft:"10px", display:"inline", fontSize:"13px"}, className:"oldValue"
+ }
+ ];
+
+ if(value.title == "WS_INITIAL_METER_READING_LABEL" && oldValueData?.initialMeterReading) value["oldValue"] = [
+ {value:value?.value, className:"newValue", style:{ display:"inline"}},
+ {
+ value: `${t("WS_OLD_LABEL_NAME")} ${oldValueData?.initialMeterReading}`,
+ style:{color:'gray', paddingLeft:"10px", display:"inline", fontSize:"13px"}, className:"oldValue"
+ }
+ ];
+
+ if(value.title == "WS_INSTALLATION_DATE_LABEL" && oldValueData?.meterInstallationDate) value["oldValue"] = [
+ {value:value?.value, className:"newValue", style:{ display:"inline"}},
+ {
+ value: `${t("WS_OLD_LABEL_NAME")} ${convertEpochToDate(oldValueData?.meterInstallationDate)}`,
+ style:{color:'gray', paddingLeft:"10px", display:"inline", fontSize:"13px"}, className:"oldValue"
+ }
+ ];
+ if(value.title == "WS_SERV_DETAIL_CONN_EXECUTION_DATE" && oldValueData?.connectionExecutionDate) value["oldValue"] = [
+ {value:value?.value, className:"newValue", style:{ display:"inline"}},
+ {
+ value: `${t("WS_OLD_LABEL_NAME")} ${convertEpochToDate(oldValueData?.connectionExecutionDate)}`,
+ style:{color:'gray', paddingLeft:"10px", display:"inline", fontSize:"13px"}, className:"oldValue"
+ }
+ ];
+ return value;
+ })
+ };
+
+ return (
+
+ {wsAdditionalDetails?.additionalDetails?.connectionDetails && (
+
+ {t("WS_COMMON_CONNECTION_DETAIL")}
+
+ )}
+ {wsAdditionalDetails?.additionalDetails?.plumberDetails && (
+
+ {t("WS_COMMON_PLUMBER_DETAILS")}
+
+ )}
+ {wsAdditionalDetails?.additionalDetails?.roadCuttingDetails && (
+
+ {t("WS_ROAD_CUTTING_DETAILS")}
+
+ )}
+ {wsAdditionalDetails?.additionalDetails?.activationDetails && (
+
+ {t("WS_ACTIVATION_DETAILS")}
+
+ )}
+
+
+
+
+ {connectionDetails?.map((value, index) => {
+ return (
+
+
+ |
+
+ );
+ })}
+
+
+
+
+ {plumberDetails?.map((value, index) => {
+ return |
;
+ })}
+
+
+
+
+ {roadCuttingDetails?.map((value) => {
+ return (
+
+ 1
+ ? {
+ border: "1px solid #D6D5D4",
+ background: "#FAFAFA",
+ borderRadius: "4px",
+ padding: "10px 10px 0px 10px",
+ margin: "5px 0px",
+ }
+ : {}
+ }
+ >
+ {value?.values?.map((roadValue) => (
+ |
+ ))}
+
+ );
+ })}
+
+
+
+ {activationDetails?.map((value, index) => {
+ return (
+ |
+ );
+ })}
+
+ {props.label}
; + }; + + const Close = () => ( + + ); + + const CloseBtn = (props) => { + return ( +
+
+ );
+ };
+
+ const closeToast = () => {
+ setShowToast(false);
+ };
+
+ const addAdhocRebatePenality = (e) => {
+ const adhocAmount = fields?.adhocPenalty ? Number(fields?.adhocPenalty) : 0;
+ const rebateAmount = fields?.adhocRebate ? Number(fields?.adhocRebate) : 0;
+ if (adhocAmount || rebateAmount) {
+
+ const totalAmount = wsAdditionalDetails?.additionalDetails?.data?.totalAmount;
+ const demandId = wsAdditionalDetails?.additionalDetails?.data?.billDetails?.[0]?.demandId;
+
+ if (rebateAmount > totalAmount) {
+ setShowToast({ isError: false, isWarning: true, key: "error", message: t("ERR_WS_REBATE_GREATER_THAN_AMOUNT") });
+ } else {
+ const applicationNo = wsAdditionalDetails?.additionalDetails?.appDetails?.applicationNo;
+ const tenantId = wsAdditionalDetails?.additionalDetails?.appDetails?.tenantId;
+ const appAdditionalDetails = { ...wsAdditionalDetails?.additionalDetails?.appDetails?.additionalDetails, ...fields }
+ wsAdditionalDetails.additionalDetails.appDetails.additionalDetails = appAdditionalDetails;
+
+ const data = {
+ CalculationCriteria:
+ wsAdditionalDetails?.additionalDetails?.appDetails?.service == "WATER"
+ ? [
+ {
+ applicationNo: applicationNo,
+ tenantId: tenantId,
+ waterConnection: wsAdditionalDetails.additionalDetails.appDetails,
+ },
+ ]
+ : [
+ {
+ applicationNo: applicationNo,
+ tenantId: tenantId,
+ sewerageConnection: wsAdditionalDetails.additionalDetails.appDetails,
+ },
+ ],
+ isconnectionCalculation: false,
+ };
+
+ let businessService = wsAdditionalDetails?.additionalDetails?.appDetails?.service == "WATER" ? "WS" : "SW";
+ Digit.WSService.wsCalculationEstimate(data, businessService)
+ .then((result, err) => {
+ if (result?.Calculation?.[0]?.taxHeadEstimates?.length > 0) {
+ result?.Calculation?.[0]?.taxHeadEstimates?.forEach(data => data.amount = data.estimateAmount);
+ }
+
+ result.Calculation[0].billSlabData = _.groupBy(result?.Calculation?.[0]?.taxHeadEstimates, 'category');
+ const values = [
+ { title: "WS_APPLICATION_FEE_HEADER", value: result.Calculation?.[0]?.fee },
+ { title: "WS_SERVICE_FEE_HEADER", value: result.Calculation?.[0]?.charge },
+ { title: "WS_TAX_HEADER", value: result.Calculation?.[0]?.taxAmount },
+ ];
+ setSessionBillFormData(cloneDeep(result.Calculation[0]));
+ setBillDetails(result?.Calculation?.[0]);
+ setValues(values);
+ fields.billDetails = result?.Calculation;
+ setSessionFormData(fields);
+ showPopUp(false);
+ })
+ .catch((e) => {
+ setShowToast({ isError: true, isWarning: false, key: "error", message: e?.response?.data?.Errors[0]?.message ? t(`${e?.response?.data?.Errors[0]?.code}`) : t("PT_COMMON_ADD_REBATE_PENALITY") });
+ });
+ }
+ } else {
+ setShowToast({ isError: false, isWarning: true, key: "warning", message: t("ERR_WS_ENTER_ATLEAST_ONE_FIELD") });
+ }
+ }
+
+ const selectedValuesData = (value, isDropDownValue = false, e) => {
+ let values = { ...fields };
+ if (isDropDownValue) {
+ values[`${value}_data`] = e;
+ values[value] = e.title;
+ if (e.title == "PT_OTHERS" && value == "adhocPenaltyReason") values[`adhocPenaltyComment`] = "";
+ if (e.title == "PT_OTHERS" && value == "adhocRebateReason") values[`adhocRebateComment`] = "";
+ } else {
+ values[value] = e.target.value;
+ }
+ setFields(values);
+ }
+
+ return (
+
+ {values &&
+
+
+ }
+ {
+ wsAdditionalDetails?.additionalDetails?.isAdhocRebate ? {
+ setFields(sessionFormData);
+ showPopUp(false);
+ }} />}
+ actionCancelLabel={t("PT_CANCEL")}
+ actionCancelOnSubmit={() => {
+ setFields(sessionFormData);
+ showPopUp(false);
+ }}
+ actionSaveLabel={t("PT_ADD")}
+ actionSaveOnSubmit={(e) => addAdhocRebatePenality(e)}
+ hideSubmit={false}
+ popupStyles={{ overflowY: "auto" }}
+ >
+ {
+
+
+ {values?.map((value, index) => {
+ return |
+ })}
+
+ +
+ |
+ |
+
+ {
+ showPopUp(true)
+ }}
+ >
+ {t("WS_PAYMENT_ADD_REBATE_PENALTY")}
+
: null
+ }
+ {popup &&
+
+
+ {t("PT_AD_PENALTY")}
+
+ {t("PT_TX_HEADS")}
+
+ {t("PT_HEAD_AMT")}
+
+
+ {t("PT_AD_REBATE")}
+ {t("PT_TX_HEADS")}
+ {t("PT_HEAD_AMT")}
+
+
+ } }
+ {showToast &&
+
+ selectedValuesData("adhocPenaltyReason", true, e)}
+ selected={fields?.adhocPenaltyReason_data || ""}
+ isPropertyAssess={true}
+ name={"adhocPenaltyReason_data"}
+ t={t}
+ />
+
+ {fields?.adhocPenaltyReason_data?.title === "PT_OTHERS" &&
+ {t("PT_REASON")}
+
}
+
+ selectedValuesData("adhocPenaltyComment", false, e)}
+ {...(validation = {
+ isRequired: true,
+ pattern: "^[a-zA-Z-.`' ]*$",
+ type: "text",
+ title: t("TL_NAME_ERROR_MESSAGE"),
+ })}
+ />
+
+
+ selectedValuesData("adhocPenalty", false, e)}
+ {...(validation = {
+ isRequired: true,
+ pattern: "^[1-9]+[0-9]*$",
+ title: t("ERR_DEFAULT_INPUT_FIELD_MSG"),
+ })}
+ />
+
+
+
+ selectedValuesData("adhocRebateReason", true, e)}
+ selected={fields?.adhocRebateReason_data || ""}
+ name={"adhocRebateReason_data"}
+ isPropertyAssess={true}
+ t={t}
+ />
+
+ {fields?.adhocRebateReason_data?.title === "PT_OTHERS" &&
+ {t("PT_REASON")}
+ selectedValuesData("adhocRebateComment", false, e)}
+ {...(validation = {
+ isRequired: true,
+ pattern: "^[a-zA-Z-.`' ]*$",
+ type: "text",
+ title: t("TL_NAME_ERROR_MESSAGE"),
+ })}
+ />
+
}
+
+ selectedValuesData("adhocRebate", false, e)}
+ {...(validation = {
+ isRequired: true,
+ pattern: "^[1-9]+[0-9]*$",
+ title: t("ERR_DEFAULT_INPUT_FIELD_MSG"),
+ })}
+ />
+
+
+
+ );
+};
+
+export default WeekDateRange;
diff --git a/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/AcceptDso.js b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/AcceptDso.js
new file mode 100644
index 00000000..e870f2e9
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/modules/templates/ApplicationDetails/config/AcceptDso.js
@@ -0,0 +1,45 @@
+import React from "react";
+import { Dropdown } from "@egovernments/digit-ui-react-components";
+
+export const configAcceptDso = ({ t, dsoData, dso, selectVehicleNo, vehicleNoList, vehicleNo, vehicle, action }) => {
+ return {
+ label: {
+ heading: `ES_FSM_ACTION_TITLE_${action}`,
+ submit: `CS_COMMON_${action}`,
+ cancel: "CS_COMMON_CANCEL",
+ },
+ form: [
+ {
+ body: [
+ {
+ label: t("ES_FSM_ACTION_VEHICLE_REGISTRATION_NO"),
+ isMandatory: true,
+ type: "dropdown",
+ populators: (
+
+
+ {props.title}
+
+
+
+
+ );
+};
+
+Accordion.propTypes = {
+ title: PropTypes.string.isRequired,
+ icon: PropTypes.string,
+ iconFill: PropTypes.string,
+ iconWidth: PropTypes.string,
+ iconHeight: PropTypes.string,
+ number: PropTypes.node,
+ isOpenInitially: PropTypes.bool,
+ hideCardBorder: PropTypes.bool,
+ hideDivider: PropTypes.bool,
+ hideCardBg: PropTypes.bool,
+ hideBorderRadius: PropTypes.bool,
+ onToggle: PropTypes.func,
+ customClassName: PropTypes.string,
+ customStyles: PropTypes.object,
+ isClosed: PropTypes.bool,
+};
+
+Accordion.defaultProps = {
+ icon: null,
+ number: null,
+ isOpenInitially: false,
+ customClassName: "",
+ customStyles: {},
+ hideCardBorder: false,
+ hideDivider: false,
+ hideCardBg: false,
+ hideBorderRadius: false,
+ isClosed: false,
+};
+
+const AccordionList = ({
+ children,
+ allowMultipleOpen = true,
+ addDivider,
+ className,
+ styles,
+}) => {
+ const [openIndex, setOpenIndex] = useState(allowMultipleOpen ? [] : -1);
+
+ const handleToggle = (index) => {
+ if (allowMultipleOpen) {
+ setOpenIndex((prevState) =>
+ prevState?.includes(index)
+ ? prevState?.filter((i) => i !== index)
+ : [...prevState, index]
+ );
+ } else {
+ setOpenIndex(index === openIndex ? -1 : index);
+ }
+ };
+
+ useEffect(() => {}, [openIndex]);
+
+ return (
+
+ {icon && (
+
+
+ {iconRender(
+ icon,
+ iconFill || iconColor,
+ iconWidth || iconSize,
+ iconHeight || iconSize,
+ `digit-accordion-icon`
+ )}
+
+ )}
+ {number && (
+
+ {number}
+ {"."}
+
+ )}
+ {StringManipulator("TOSENTENCECASE", title)}
+
+
+
+ {children}
+
+
+ {React.Children.map(children, (child, index) => (
+
+ {React.cloneElement(child, {
+ isClosed: allowMultipleOpen
+ ? openIndex.length > 0 && !openIndex.includes(index)
+ : openIndex !== index,
+ onToggle: () => handleToggle(index),
+ })}
+ {addDivider && index < React.Children.count(children) - 1 && (
+
+ ))}
+
+ );
+};
+
+AccordionList.propTypes = {
+ children: PropTypes.node.isRequired,
+ allowMultipleOpen: PropTypes.bool,
+ addDivider: PropTypes.bool,
+ customClassName: PropTypes.string,
+ customStyles: PropTypes.object,
+};
+
+AccordionList.defaultProps = {
+ allowMultipleOpen: true,
+ addDivider: false,
+ customClassName: "",
+ customStyles: {},
+};
+
+export { AccordionList, Accordion };
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/ActionLinks.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/ActionLinks.js
new file mode 100644
index 00000000..dcc282f7
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/ActionLinks.js
@@ -0,0 +1,19 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const ActionLinks = (props) => (
+
+ {props.children}
+
+);
+
+ActionLinks.propTypes = {
+ /** custom class of the svg icon */
+ className: PropTypes.string,
+ /** custom style of the svg icon */
+ style: PropTypes.object,
+ /** Click Event handler when icon is clicked */
+ children: PropTypes.node,
+};
+
+export default ActionLinks;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/AlertCard.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/AlertCard.js
new file mode 100644
index 00000000..6149323d
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/AlertCard.js
@@ -0,0 +1,73 @@
+import React from "react";
+import { SVG } from "./SVG";
+import StringManipulator from "./StringManipulator";
+import PropTypes from "prop-types";
+import { Colors} from "../constants/colors/colorconstants";
+
+const AlertCard = ({ label, text, variant, style, textStyle, additionalElements, inline, className, headerWrapperClassName,headerClassName}) => {
+
+ const warningIconColor = Colors.lightTheme.alert.warning;
+ const errorIconColor = Colors.lightTheme.alert.error;
+ const successIconColor = Colors.lightTheme.alert.success;
+ const infoIconColor = Colors.lightTheme.alert.info;
+
+
+ const getIconAndLabelByVariant = (variant) => {
+ switch (variant) {
+ case "warning":
+ return { icon:
+
+ );
+};
+
+AlertCard.propTypes = {
+ label: PropTypes.string.isRequired,
+ text: PropTypes.string,
+ variant: PropTypes.string,
+ style: PropTypes.object,
+ textStyle: PropTypes.object,
+ additionalElements: PropTypes.arrayOf(PropTypes.node),
+ inline: PropTypes.bool,
+};
+
+AlertCard.defaultProps = {
+ label: "",
+ text: "",
+ varinat: "",
+ style: {},
+ textStyle: {},
+ additionalElements: [],
+ inline: false,
+};
+
+export default AlertCard;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Amount.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Amount.js
new file mode 100644
index 00000000..ce55768d
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Amount.js
@@ -0,0 +1,22 @@
+import React from "react";
+import { formatter } from "../utils/formatter";
+import PropTypes from "prop-types";
+/* Amount component by default round offs and formats for amount */
+
+const Amount = ({ t, roundOff = true, ...props }) => {
+ const value = roundOff ? Math.round(props?.value) : props?.value;
+ return (
+
+ {icon}
+
+ {text && {displayedLabel}
+{StringManipulator("TOSENTENCECASE", text)}
} + {hasAdditionalElements && ( +
+ {additionalElements.map((element, index) => (
+
+ )}
+
+ {element}
+
+ ))}
+ + {value ? `${formatter(value, "number")}` : t("ES_COMMON_NA")} +
+ ); +}; + +Amount.propTypes = { + className: PropTypes.string, + style: PropTypes.object, + roundOff: PropTypes.bool, + value: PropTypes.number, +}; + +export default Amount; diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Animation.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Animation.js new file mode 100644 index 00000000..c66c1a59 --- /dev/null +++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Animation.js @@ -0,0 +1,20 @@ +import React from 'react'; +import Lottie from 'react-lottie'; + +const Animation = (props) => { + + const defaultOptions = { + loop: props?.loop, + autoplay: props?.autoplay, + animationData: props?.animationData, + renderer: 'svg', + }; + + return ( +
+
+ );
+};
+
+export default Animation;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/AppContainer.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/AppContainer.js
new file mode 100644
index 00000000..e94dd122
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/AppContainer.js
@@ -0,0 +1,20 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const AppContainer = (props) => {
+ return (
+
+ {props.children}
+
+
+ {!hideIcon &&
+ );
+};
+
+BackLink.propTypes = {
+ className: PropTypes.string,
+ style: PropTypes.object,
+ variant: PropTypes.string,
+ onClick: PropTypes.func,
+};
+
+export default BackLink;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Banner.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Banner.js
new file mode 100644
index 00000000..6f14db5a
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Banner.js
@@ -0,0 +1,108 @@
+import React from "react";
+import { SVG } from "./SVG";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { getUserType } from "../utils/digitUtils";
+
+const Successful = (props) => {
+ const { t } = useTranslation();
+ const user_type = getUserType();
+
+ return (
+ {icon}
}
+ {!hideLabel && (
+
+ {label || t("CS_COMMON_BACK")}
+
+ )}
+
+ {props.props.message}
+
+ );
+};
+
+const Error = (props) => {
+ const { t } = useTranslation();
+ const user_type = getUserType();
+
+ return (
+
+ {props.props.whichSvg === "tick" ? (
+
+
+
+
+
+ ) : (
+ props?.props?.svg
+ )}
+ {(props?.props?.complaintNumber || props.props.info) && (
+ +
+
+ {props?.props?.complaintNumber ? t("CS_PGR_COMPLAINT_NUMBER") : props.props.info} +
+ )} + {(props?.props?.complaintNumber || props?.props?.applicationNumber) && ( ++ {props?.props?.complaintNumber ? props?.props?.complaintNumber : props?.props?.applicationNumber} +
+ )} + {props?.props?.applicationNumberOne ? ( +{props.props.infoOne}
+ ) : null} + {props?.props?.applicationNumberOne ? ( +{props?.props?.applicationNumberOne}
+ ) : null} + {props?.props?.multipleResponseIDs && ( +
+ {props?.props?.multipleResponseIDs.map((responseIDs) => (
+
+ )}
+ {responseIDs}
+ ))} +
+ {props.props.message}
+
+ );
+};
+
+const Banner = (props) => {
+ return props.successful ? + {props?.props?.complaintNumber ? t("CS_PGR_COMPLAINT_NUMBER") : props.props.info} +
++ {props?.props?.complaintNumber ? props?.props?.complaintNumber : props?.props?.applicationNumber} +
+ {props?.props?.multipleResponseIDs && ( +
+ {props?.props?.multipleResponseIDs.map((responseIDs) => (
+
+ )}
+ {responseIDs}
+ ))} +
+ {props.children}
+
+ );
+};
+
+BodyContainer.propTypes = {
+ className: PropTypes.string,
+ style: PropTypes.object,
+ children: PropTypes.node,
+};
+
+export default BodyContainer;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/BreadCrumb.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/BreadCrumb.js
new file mode 100644
index 00000000..c80e25e4
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/BreadCrumb.js
@@ -0,0 +1,134 @@
+import React, { useEffect, useState, Fragment } from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+
+const BreadCrumb = (props) => {
+ const [expanded, setExpanded] = useState(false);
+ const [crumbsToDisplay, setCrumbsToDisplay] = useState([...props?.crumbs]);
+
+ useEffect(() => {
+ if (props?.maxItems && props?.crumbs.length > props?.maxItems && !expanded) {
+ const startCrumbs = props.crumbs.slice(0, props?.itemsBeforeCollapse || Math.ceil(props.maxItems / 2));
+ const endCrumbs = props.crumbs.slice(
+ -1 * (props?.itemsAfterCollapse || Math.floor(props.maxItems / 2))
+ );
+
+ let updatedCrumbs = startCrumbs.concat(
+ [{ show: true, content: props?.expandText || "..." }],
+ endCrumbs
+ );
+ setCrumbsToDisplay(updatedCrumbs);
+ } else {
+ setCrumbsToDisplay([...props.crumbs]);
+ }
+ }, [props.crumbs, props.maxItems, expanded, props.itemsBeforeCollapse, props.itemsAfterCollapse, props?.expandText]);
+
+ function handleRedirect(path) {
+ const host = window.location.origin; // Dynamically get the base URL
+ window.location.href = `${host}${path}`;
+ }
+
+ function isLast(index) {
+ // Filter crumbs to only include those that are displayed
+ let validCrumbs = crumbsToDisplay?.filter((crumb) => crumb?.show === true);
+
+ // Check if all crumbs have the same `internalLink` or `externalLink`
+ const allHaveSameInternalLink = validCrumbs.every((crumb) => crumb.internalLink === validCrumbs[0].internalLink);
+ const allHaveSameExternalLink = validCrumbs.every((crumb) => crumb.externalLink === validCrumbs[0].externalLink);
+
+ // If all visible crumbs have the same link, determine last crumb by index
+ if (allHaveSameInternalLink || allHaveSameExternalLink) {
+ return index === validCrumbs.length - 1;
+ }
+
+ // Check if the current crumb is the last one in the validCrumbs list
+ return validCrumbs?.findIndex((ob) => {
+ const linkToCheck = ob?.externalLink || ob?.internalLink; // Use externalLink if it exists, else internalLink
+ const currentLink = crumbsToDisplay?.[index]?.externalLink || crumbsToDisplay?.[index]?.internalLink;
+ return linkToCheck === currentLink;
+ }) === validCrumbs?.length - 1;
+ }
+
+ const handleCrumbClick = () => {
+ setExpanded(!expanded);
+ };
+
+ const validCrumbsMain = crumbsToDisplay?.filter((crumb) => crumb?.show === true);
+
+ return (
+ -
+ {validCrumbsMain?.map((crumb, ci) => {
+ if (!crumb?.show) return null;
+ if (crumb?.isBack)
+ return (
+
- + window.history.back()}>{crumb.content} + + ); + + return ( +
-
+ {isLast(ci) || (!crumb?.internalLink && !crumb?.externalLink) ? (
+
+ {crumb?.icon && crumb.icon}
+ {crumb.content}
+
+ ) : crumb?.externalLink ? (
+ handleRedirect(crumb?.externalLink)}
+ >
+ {crumb?.icon && crumb.icon}
+ {crumb.content}
+
+ ) : (
+
+ {crumb?.icon && crumb.icon}
+ {crumb.content}
+
+ )}
+ {!isLast(ci) && (
+ + {props?.customSeparator ? props?.customSeparator : "/"} ++ )} +
+
; +}; + +BreakLine.propTypes = { + className: PropTypes.string, + style: PropTypes.object, +}; + +export default BreakLine; diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Button.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Button.js new file mode 100644 index 00000000..6e5655f9 --- /dev/null +++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Button.js @@ -0,0 +1,216 @@ +import React, { useState, useRef, useEffect } from "react"; +import PropTypes from "prop-types"; +import StringManipulator from "./StringManipulator"; +import Menu from "./Menu"; +import { Colors } from "../constants/colors/colorconstants"; +import { iconRender } from "../utils/iconRender"; + +const Button = (props) => { + const [dropdownStatus, setDropdownStatus] = useState(false); + const actionRef = useRef(null); + + useEffect(() => { + const handleClickOutside = (event) => { + if (actionRef?.current && !actionRef?.current.contains(event.target)) { + setDropdownStatus(false); + } + }; + + if (dropdownStatus) { + document.addEventListener("mousedown", handleClickOutside); + } else { + document.removeEventListener("mousedown", handleClickOutside); + } + + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, [dropdownStatus]); + + const diabledIconColor = Colors.lightTheme.text.disabled; + const iconColor = Colors.lightTheme.primary[1]; + const primaryIconColor = Colors.lightTheme.paper.primary; + + //To render the icon + const IconRender = () => { + const iconFill = props.iconFill + ? props.iconFill + : props?.variation === "primary" + ? primaryIconColor + : props?.isDisabled + ? diabledIconColor + : iconColor; + const iconReq = + props?.type === "actionButton" && + props?.showBottom && + dropdownStatus && + !props.icon + ? "ArrowDropUp" + : props?.type === "actionButton" && + props?.showBottom && + !dropdownStatus && + !props?.icon + ? "ArrowDropDown" + : props?.type === "actionButton" && + !props?.showBottom && + dropdownStatus && + !props.icon + ? "ArrowDropDown" + : props?.type === "actionButton" && + !props?.showBottom && + !dropdownStatus && + !props?.icon + ? "ArrowDropUp" + : props?.icon; + let width, height; + + if (props.size === "large") { + width = props.variation === "link" ? "1.25rem" : "1.5rem"; + height = props.variation === "link" ? "1.25rem" : "1.5rem"; + } else if (props.size === "medium") { + width = "1.25rem"; + height = "1.25rem"; + } else if (props.size === "small") { + width = "0.875rem"; + height = "0.875rem"; + } else { + width = "1.5rem"; + height = "1.5rem"; + } + return iconRender( + iconReq, + iconFill, + width, + height, + `digit-button-customIcon ${props?.size ? props?.size : ""} ${ + props?.variation ? props?.variation : "" + }` + ); + }; + + const icon = IconRender(); + + const formattedLabel = props?.label + ? props?.variation === "link" + ? props?.label + : StringManipulator( + "CAPITALIZEFIRSTLETTER", + StringManipulator("TRUNCATESTRING", props?.label, { + maxLength: 64, + }) + ) + : ""; + + const handleActionButtonClick = (e) => { + e.stopPropagation(); + setDropdownStatus(!dropdownStatus); + }; + + const buttonElement = ( + + ); + + return props?.type === "actionButton" ? ( +
+ {buttonElement}
+ {dropdownStatus && (
+
+ ) : (
+ buttonElement
+ );
+};
+
+Button.propTypes = {
+ isDisabled: PropTypes.bool,
+ /**
+ * ButtonSelector content
+ */
+ label: PropTypes.string.isRequired,
+ /**
+ * button border theme
+ */
+ variation: PropTypes.string,
+ /**
+ * button icon if any
+ */
+ icon: PropTypes.string,
+ /**
+ * click handler
+ */
+ onClick: PropTypes.func.isRequired,
+ /**
+ * Custom classname
+ */
+ className: PropTypes.string,
+ /**
+ * Custom styles
+ */
+ style: PropTypes.object,
+ /**
+ * Custom label style or h2 style
+ */
+ textStyles: PropTypes.object,
+ /**
+ * button icon position
+ */
+ isSuffix: PropTypes.bool,
+ /**
+ * button size
+ */
+ size: PropTypes.string,
+};
+
+Button.defaultProps = {
+ label: "",
+ variation: "primary",
+ onClick: () => {},
+ size: "large",
+};
+
+export default Button;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/ButtonGroup.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/ButtonGroup.js
new file mode 100644
index 00000000..e798c41a
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/ButtonGroup.js
@@ -0,0 +1,76 @@
+import React, { useRef, useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import Button from "./Button";
+
+const ButtonGroup = ({ buttonsArray ,sortButtons,equalButtons}) => {
+ const [isMobileView, setIsMobileView] = React.useState(
+ window.innerWidth <= 480
+ );
+ const onResize = () => {
+ if (window.innerWidth <= 480) {
+ if (!isMobileView) {
+ setIsMobileView(true);
+ }
+ } else {
+ if (isMobileView) {
+ setIsMobileView(false);
+ }
+ }
+ };
+ useEffect(() => {
+ window.addEventListener("resize", () => {
+ onResize();
+ });
+ return () => {
+ window.addEventListener("resize", () => {
+ onResize();
+ });
+ };
+ });
+
+ const maxWidth = equalButtons ? Math.max(
+ ...buttonsArray.map((button) => button.props.label.length * 14.9)
+ ) : null;
+
+ const updatedButtonsArray = buttonsArray && buttonsArray.length > 1 && equalButtons ? buttonsArray.map((button) => {
+ const buttonProps = {
+ ...button.props,
+ style: { ...(button.props.style || {}), width: `${maxWidth}px` },
+ };
+ return ;
+ }) : buttonsArray;
+
+ const resultArray = isMobileView ? buttonsArray : updatedButtonsArray;
+
+ const sortedButtons = [...resultArray].sort((a, b) => {
+ const typeOrder = { primary: 3, secondary: 2, tertiary: 1 };
+ const getTypeOrder = (button) =>
+ typeOrder[(button.props.variation || "").toLowerCase()];
+ return getTypeOrder(a) - getTypeOrder(b);
+ });
+
+ const finalResultArray = sortButtons ?
+ (isMobileView
+ ? sortedButtons.reverse()
+ : sortedButtons) : resultArray;
+
+ return (
+
+
+
+ )}
+
+ {finalResultArray.map((button, index) => (
+
+ );
+};
+
+ButtonGroup.propTypes = {
+ buttonsArray: PropTypes.arrayOf(PropTypes.element).isRequired,
+ sortButtons:PropTypes.bool,
+ equalButtons:PropTypes.bool
+};
+
+ButtonGroup.defaultProps = {
+ equalButtons: true,
+}
+export default ButtonGroup;
+
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/ButtonSelector.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/ButtonSelector.js
new file mode 100644
index 00000000..ca33983c
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/ButtonSelector.js
@@ -0,0 +1,49 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const ButtonSelector = (props) => {
+ let theme = "digit-selector-button-primary";
+ switch (props.theme) {
+ case "border":
+ theme = "digit-selector-button-border";
+ break;
+ default:
+ theme = "digit-selector-button-primary";
+ break;
+ }
+ return (
+
+ );
+};
+
+ButtonSelector.propTypes = {
+ /**
+ * ButtonSelector content
+ */
+ label: PropTypes.string.isRequired,
+ /**
+ * button border theme
+ */
+ theme: PropTypes.string,
+ /**
+ * click handler
+ */
+ onSubmit: PropTypes.func,
+};
+
+ButtonSelector.defaultProps = {
+ label: "",
+ theme: "",
+ onSubmit: undefined,
+};
+
+export default ButtonSelector;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Card.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Card.js
new file mode 100644
index 00000000..de4301f1
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Card.js
@@ -0,0 +1,47 @@
+import React, { Children } from "react";
+import PropTypes from "prop-types";
+import { useLocation } from "react-router-dom";
+
+const Card = ({
+ type,
+ onClick,
+ style = {},
+ children,
+ className,
+ ReactRef,
+ variant,
+ ...props
+}) => {
+ // const { pathname } = useLocation();
+ // const classname = window?.Digit?.Hooks?.useRouteSubscription(pathname) || "";
+ const info = window?.Digit?.UserService?.getUser()?.info || null;
+ const userType = info?.type || null;
+
+ return (
+ {button}
+ ))}
+
+ {children}
+
+ );
+};
+
+Card.propTypes = {
+ type: PropTypes.string,
+ variant: PropTypes.string,
+ onClick: PropTypes.func,
+ style: PropTypes.object,
+ className: PropTypes.string,
+ children: PropTypes.node,
+};
+export default Card;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CardBasedOptions.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CardBasedOptions.js
new file mode 100644
index 00000000..06b2bece
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CardBasedOptions.js
@@ -0,0 +1,28 @@
+import React from "react";
+
+const Option = ({ name, Icon, onClick, className }) => {
+ return (
+
+
+ );
+};
+
+const CardBasedOptions = ({ header, sideOption, options, styles = {}, style = {} }) => {
+ return (
+ {Icon}
+ {name}
+
+
+ );
+};
+
+export default CardBasedOptions;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CardCaption.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CardCaption.js
new file mode 100644
index 00000000..c7a573e3
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CardCaption.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+const CardCaption = (props) => {
+ return (
+
+ );
+};
+
+export default CardCaption;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CardHeader.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CardHeader.js
new file mode 100644
index 00000000..3d47c22f
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CardHeader.js
@@ -0,0 +1,13 @@
+import React from "react";
+
+const CardHeader = (props) => {
+ const variant = props?.variant ? props?.variant : "";
+ const className = props?.className ? props?.className : "";
+ return (
+
+
+ {header}
+{sideOption.name}
+
+ {options.map((props, index) => (
+
+ ))}
+
+ + {props.children} +
+ ); +}; +CardLabel.propTypes = { + className: PropTypes.string, // An optional string for custom class names. + style: PropTypes.object, // An optional object for custom styles. + children: PropTypes.node.isRequired, // Required prop for the content of the error label. +}; + +export default CardLabel; diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CardLabelError.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CardLabelError.js new file mode 100644 index 00000000..d430959d --- /dev/null +++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CardLabelError.js @@ -0,0 +1,18 @@ +import React from "react"; +import PropTypes from "prop-types"; + +const CardLabelError = (props) => { + return ( ++ {props.children} +
+ ); +}; + +CardLabelError.propTypes = { + className: PropTypes.string, // An optional string for custom class names. + style: PropTypes.object, // An optional object for custom styles. + children: PropTypes.node.isRequired, // Required prop for the content of the error label. +}; + +export default CardLabelError; diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CardText.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CardText.js new file mode 100644 index 00000000..55fdf33e --- /dev/null +++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CardText.js @@ -0,0 +1,11 @@ +import React from "react"; + +const CardText = (props) => { + return ( ++ {props.children} +
+ ); +}; + +export default CardText; diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CheckBox.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CheckBox.js new file mode 100644 index 00000000..81459582 --- /dev/null +++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CheckBox.js @@ -0,0 +1,133 @@ +import React, { Fragment } from "react"; +import { SVG } from "./SVG"; +import StringManipulator from "./StringManipulator"; +import PropTypes from "prop-types"; +import { useTranslation } from "react-i18next"; +import { Colors} from "../constants/colors/colorconstants"; +import { getUserType } from "../utils/digitUtils"; + +const CheckBox = ({ + onChange, + label, + value, + disabled, + ref, + checked, + inputRef, + pageType, + style, + index, + isLabelFirst, + hideLabel, + isIntermediate, + ...props +}) => { + const { t } = useTranslation(); + const userType = pageType || getUserType(); + let styles = props?.styles; + + const sentenceCaseLabel = StringManipulator("TOSENTENCECASE", label); + + const diabledIconColor = Colors.lightTheme.text.disabled; + const iconColor = Colors.lightTheme.primary[1]; + + return ( +
+ {isLabelFirst && !hideLabel ? (
+
+ ) : null}
+
+ );
+};
+
+CheckBox.propTypes = {
+ /**
+ * CheckBox content
+ */
+ label: PropTypes.string.isRequired,
+ /**
+ * onChange func
+ */
+ onChange: PropTypes.func,
+ /**
+ * input ref
+ */
+ ref: PropTypes.func,
+ userType: PropTypes.string,
+ hideLabel:PropTypes.bool,
+ isIntermediate: PropTypes.bool,
+};
+
+CheckBox.defaultProps = {
+ label: "Default",
+ isLabelFirst: false,
+ onChange: () => console.log("CLICK"),
+ value: "",
+ checked: false,
+ ref: "ww",
+ // pageType: "EMPLOYEE",
+ index: 0,
+ isIntermediate: false,
+};
+
+export default CheckBox;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Chip.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Chip.js
new file mode 100644
index 00000000..8db000b7
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Chip.js
@@ -0,0 +1,107 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { SVG } from "./SVG";
+import ErrorMessage from "./ErrorMessage";
+import { Colors} from "../constants/colors/colorconstants";
+import { iconRender } from "../utils/iconRender";
+
+const Chip = ({
+ className,
+ text,
+ onTagClick,
+ onClick,
+ extraStyles,
+ disabled = false,
+ isErrorTag,
+ error,
+ hideClose,
+ onErrorClick,
+ iconReq
+}) => {
+ const tagStyles = extraStyles ? extraStyles?.tagStyles : {};
+ const textStyles = extraStyles ? extraStyles?.textStyles : {};
+ const closeIconStyles = extraStyles ? extraStyles?.closeIconStyles : {};
+ const IconColor = Colors.lightTheme.paper.primary;
+
+ const IconRender = (iconReq,isErrorTag) => {
+ const iconFill = isErrorTag ? "#B91900" : "#787878";
+ return iconRender(
+ iconReq,
+ iconFill,
+ "1.25rem",
+ "1.25rem",
+ ""
+ );
+ };
+
+ return (
+
+
+
+ {!isLabelFirst && !hideLabel ? (
+
+ ) : null}
+
+ {isIntermediate && !checked ? (
+
+ ) : (
+
+
+ );
+};
+
+Chip.propTypes = {
+ className: PropTypes.string,
+ text: PropTypes.string.isRequired,
+ onClick: PropTypes.func.isRequired,
+ extraStyles: PropTypes.shape({
+ tagStyles: PropTypes.object,
+ textStyles: PropTypes.object,
+ closeIconStyles: PropTypes.object,
+ }),
+ disabled: PropTypes.bool,
+ isErrorTag: PropTypes.bool,
+ error: PropTypes.string,
+ hideClose:PropTypes.bool
+};
+
+
+Chip.defaultProps = {
+ hideClose:true
+};
+
+
+export default Chip;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CitizenHomeCard.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CitizenHomeCard.js
new file mode 100644
index 00000000..f5816206
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CitizenHomeCard.js
@@ -0,0 +1,26 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const CitizenHomeCard = ({ header, links = [], state, Icon, Info, isInfo = false, styles }) => {
+ return (
+
+ {iconReq && IconRender(iconReq,isErrorTag)}
+
+ {text}
+
+ {
+ !hideClose &&
+
+ {error && (
+
+
+ )}
+
+
+ );
+};
+
+export default CitizenHomeCard;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CitizenInfoLabel.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CitizenInfoLabel.js
new file mode 100644
index 00000000..082e3347
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CitizenInfoLabel.js
@@ -0,0 +1,32 @@
+import React from "react";
+import { SVG } from "./SVG";
+import PropTypes from "prop-types";
+
+const CitizenInfoLabel = (props) => {
+ props = props?.props ? props?.props : props;
+ const showInfo = props?.showInfo ? props?.showInfo : true;
+
+ return (
+
+
+
+ {header}
+
+ {links.map((e, i) => (
+
+
+
+ {e.i18nKey}
+
+
+ ))}
+ {isInfo ?
+
+ {showInfo && (
+
+ );
+};
+CitizenInfoLabel.propTypes = {
+ props: PropTypes.object, // An optional object of props.
+ showInfo: PropTypes.bool, // An optional boolean to control the visibility of the info banner.
+ className: PropTypes.string, // An optional string for custom class names.
+ style: PropTypes.object, // An optional object for custom styles.
+ fill: PropTypes.string, // An optional string for the icon fill color.
+ textStyle: PropTypes.object, // An optional object for custom text styles.
+ info: PropTypes.string, // An optional string for the info banner text.
+ text: PropTypes.string.isRequired, // A required string for the main text content.
+};
+
+export default CitizenInfoLabel;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CollapseAndExpandGroups.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CollapseAndExpandGroups.js
new file mode 100644
index 00000000..840465c9
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/CollapseAndExpandGroups.js
@@ -0,0 +1,44 @@
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { SVG } from "./SVG";
+import PropTypes from "prop-types";
+
+const CollapseAndExpandGroups = ({ children, groupElements = false, groupHeader = "", headerLabel = "", headerValue = "", customClass = "" }) => {
+ const { t } = useTranslation();
+ const [collapse, setCollapse] = useState(true);
+ return (
+
+
+ )}
+ {props?.info}
+{props?.text}
+
+ {groupHeader && {t(groupHeader)} }
+ {groupElements && (
+
+ );
+};
+
+CollapseAndExpandGroups.propTypes = {
+ children: PropTypes.node,
+ style: PropTypes.object,
+ customClass: PropTypes.string,
+ groupElements: PropTypes.bool,
+ groupHeader: PropTypes.string,
+ headerLabel: PropTypes.string,
+ headerValue: PropTypes.string,
+};
+export default CollapseAndExpandGroups;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/ConnectingCheckPoints.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/ConnectingCheckPoints.js
new file mode 100644
index 00000000..f37605fd
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/ConnectingCheckPoints.js
@@ -0,0 +1,59 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+export const CheckPoint = (props) => {
+ return (
+
+ {headerLabel}
+ {headerValue}
+
+ )}
+ setCollapse((prev) => !prev)} className="digit-icon-toggle ">
+ {!collapse && (
+
+
+ {children}
+
+
+
+ {props.label}
+ {props.info ?
+
+ );
+};
+
+export const ConnectingCheckPoints = (props) => {
+ if (props.children && props.children.length >= 1) {
+ return (
+ {props.info}
: null} + {props.customChild ? props.customChild : null} +{child}
+ ) : (
+
+ {child}
+
+
+ );
+ })}
+
+
+
+
+
+ );
+};
+
+DatePicker.propTypes = {
+ disabled: PropTypes.bool,
+ date: PropTypes.any,
+ min: PropTypes.any,
+ max: PropTypes.any,
+ defaultValue: PropTypes.any,
+ onChange: PropTypes.func,
+};
+
+export default DatePicker;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/DisplayPhotos.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/DisplayPhotos.js
new file mode 100644
index 00000000..8a306edd
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/DisplayPhotos.js
@@ -0,0 +1,45 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { SVG } from "./SVG";
+import getFileTypeFromFileStoreURL from "../utils/getFileTypeFromFileStoreURL";
+
+const ImageOrPDFIcon = ({ source, index, last = false, onClick }) => {
+ return getFileTypeFromFileStoreURL(source) === "pdf" ? (
+
+
+
+ ) : (
+
+
+
+
+ {props.srcs.map((source, index) => {
+ return
+ );
+};
+
+DisplayPhotos.propTypes = {
+ /**
+ * images
+ */
+ srcs: PropTypes.array,
+ /**
+ * optional click handler
+ */
+ onClick: PropTypes.func,
+};
+
+DisplayPhotos.defaultProps = {
+ srcs: [],
+};
+
+export default DisplayPhotos;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Divider.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Divider.js
new file mode 100644
index 00000000..98c4c437
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Divider.js
@@ -0,0 +1,13 @@
+import React from "react";
+import PropTypes from 'prop-types';
+
+const Divider = ({ className = "", style = {}, variant}) => {
+ return ; +}; + +Divider.propTypes = { + className: PropTypes.string, + style: PropTypes.object, +}; + +export default Divider; diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Dropdown.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Dropdown.js new file mode 100644 index 00000000..1412d04c --- /dev/null +++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Dropdown.js @@ -0,0 +1,690 @@ +import PropTypes from "prop-types"; +import React, { useEffect, useRef, useState } from "react"; +import { SVG } from "./SVG"; +import TreeSelect from "./TreeSelect"; +import { CustomSVG } from "./CustomSVG"; +import Menu from "./Menu"; +import { Colors } from "../constants/colors/colorconstants"; +import { iconRender } from "../utils/iconRender"; +import { getUserType } from "../utils/digitUtils"; +import StringManipulator from "./StringManipulator"; + +const TextField = (props) => { + const [value, setValue] = useState( + props.selectedVal ? props.selectedVal : "" + ); + + useEffect(() => { + if (!props.keepNull) + if (props.selectedVal) setValue(props.selectedVal); + else { + setValue(""); + props.setFilter(""); + } + else setValue(""); + }, [props.selectedVal, props.forceSet]); + + function inputChange(e) { + if (props.freeze) return; + + setValue(e.target.value); + // the dropdown searchablility is made configurable through isSearchable prop + if (props.isSearchable) { + props.setFilter(e.target.value); + } + } + + function broadcastToOpen() { + if (!props.disable) { + props.dropdownDisplay(true); + } + } + + function broadcastToClose() { + props.dropdownDisplay(false); + } + + const replaceDotWithColon = (inputString) => { + if ( + props?.variant === "nesteddropdown" || + (props?.variant === "treedropdown" && inputString) + ) { + const updatedInputString = inputString.replace(/\./g, ": "); + return updatedInputString; + } + return inputString; + }; + + /* Custom function to scroll and select in the dropdowns while using key up and down */ + const keyChange = (e) => { + if (e.key == "ArrowDown") { + props.setOptionIndex((state) => + state + 1 == props.addProps.length ? 0 : state + 1 + ); + if (props.addProps.currentIndex + 1 == props.addProps.length) { + e?.target?.parentElement?.parentElement?.children + ?.namedItem("jk-dropdown-unique") + ?.scrollTo?.(0, 0); + } else { + props?.addProps?.currentIndex > 2 && + e?.target?.parentElement?.parentElement?.children + ?.namedItem("jk-dropdown-unique") + ?.scrollBy?.(0, 45); + } + e.preventDefault(); + } else if (e.key == "ArrowUp") { + props.setOptionIndex((state) => + state !== 0 ? state - 1 : props.addProps.length - 1 + ); + if (props.addProps.currentIndex == 0) { + e?.target?.parentElement?.parentElement?.children + ?.namedItem("jk-dropdown-unique") + ?.scrollTo?.(100000, 100000); + } else { + props?.addProps?.currentIndex > 2 && + e?.target?.parentElement?.parentElement?.children + ?.namedItem("jk-dropdown-unique") + ?.scrollBy?.(0, -45); + } + e.preventDefault(); + } + else if (e.key === "Enter") { + if (props.addProps.length === 1) { + props.addProps.selectOption(0); + } + else { + props.addProps.selectOption(props.addProps.currentIndex); + } + e.preventDefault(); + } + }; + + return ( + { + broadcastToClose(); + props?.onBlur?.(e); + if (props.selectedVal !== props.filterVal) { + setTimeout(() => { + props.setforceSet((val) => val + 1); + }, 1000); + } + }} + onKeyDown={keyChange} + readOnly={props.disable} + autoFocus={props.autoFocus} + placeholder={props.placeholder} + autoComplete={"off"} + style={props.style} + title={props.showToolTip ? replaceDotWithColon(value) : undefined} + /> + ); +}; + +const translateDummy = (text) => { + return text; +}; + +const Dropdown = (props) => { + const user_type = getUserType(); + const [dropdownStatus, setDropdownStatus] = useState(false); + const [menuStatus, setMenuStatus] = useState(false); + const [selectedOption, setSelectedOption] = useState( + props.selected ? props.selected : null + ); + const [filterVal, setFilterVal] = useState(""); + const [isActive, setIsActive] = useState(-1); + const [forceSet, setforceSet] = useState(0); + const [optionIndex, setOptionIndex] = useState(-1); + const optionRef = useRef(null); + const dropdownComponentRef = useRef(null); + const menuRef = useRef(null); + const selectorRef = useRef(null); + const hasCustomSelector = props.customSelector ? true : false; + const t = props.t || translateDummy; + + + const scrollIntoViewIfNeeded = () => { + if (dropdownComponentRef.current) { + const rect = dropdownComponentRef.current.getBoundingClientRect(); + const viewportWidth = window.innerWidth; + const viewportHeight = window.innerHeight; + + // Check if the component is outside the viewport + const isOutsideViewport = + rect.top < 0 || rect.left < 0 || rect.bottom > viewportHeight || rect.right > viewportWidth; + + if (isOutsideViewport) { + // Scroll to make the component visible + dropdownComponentRef.current.scrollIntoView({ + behavior: "smooth", // Optional: smooth scrolling + block: "center", // Scroll to the center vertically + inline: "center", // Scroll to the center horizontally + }); + } + } + }; + + useEffect(() => { + scrollIntoViewIfNeeded(); + }, []); // Runs on mount + + + useEffect(() => { + setSelectedOption(props.selected); + }, [props.selected]); + + function dropdownSwitch() { + if (!props.disabled) { + var current = dropdownStatus; + if (!current) { + document.addEventListener("mousedown", handleClick, false); + } + setDropdownStatus(!current); + props?.onBlur?.(); + } + } + + function menuSwitch(){ + if(!props.disabled){ + var current = menuStatus; + if (!current) { + document.addEventListener("mousedown", handleClickOutside, false); + } + setMenuStatus(!current); + props?.onBlur?.(); + } + } + + function handleClickOutside(e) { + if (!menuRef.current || !menuRef.current.contains(e.target)) { + if(selectorRef?.current && selectorRef?.current.contains(e.target)){ + return ; + } + else{ + document.removeEventListener("mousedown", handleClickOutside, false); + setMenuStatus(false); + } + } + } + + function handleClick(e) { + if (!optionRef.current || !optionRef.current.contains(e.target)) { + document.removeEventListener("mousedown", handleClick, false); + setDropdownStatus(false); + } + } + + function dropdownOn(val) { + const waitForOptions = () => setTimeout(() => setDropdownStatus(val), 500); + const timerId = waitForOptions(); + return () => { + clearTimeout(timerId); + }; + } + + function onSelect(val) { + if (val !== selectedOption || props.allowMultiselect) { + props.select(val); + setSelectedOption(val); + setDropdownStatus(false); + } else { + setSelectedOption(val); + setforceSet(forceSet + 1); + setDropdownStatus(false); + } + } + + function setFilter(val) { + setFilterVal(val); + } + + let filteredOption = + (props.option && + props.option?.filter( + (option) => + t(option[props?.optionKey]) + ?.toUpperCase() + ?.indexOf(filterVal?.toUpperCase()) > -1 + )) || + []; + function selectOption(ind) { + const optionsToSelect = + props.variant === "nesteddropdown" || props.variant === "treedropdown" + ? flattenedOptions + : filteredOption; + onSelect(optionsToSelect[ind]); + } + + if (props.isBPAREG && selectedOption) { + let isSelectedSameAsOptions = + props.option?.filter((ob) => ob?.code === selectedOption?.code)?.length > + 0; + if (!isSelectedSameAsOptions) setSelectedOption(null); + } + + const inputBorderColor = Colors.lightTheme.generic.inputBorder; + const dividerColor = Colors.lightTheme.generic.divider; + const primaryColor = Colors.lightTheme.paper.primary; + + const IconRender = (iconReq, isActive) => { + const iconFill = isActive ? primaryColor : inputBorderColor; + return iconRender( + iconReq, + iconFill, + "1.25rem", + "1.25rem", + "" + ); + }; + + const flattenOptions = (options) => { + let flattened = []; + + const flattenNestedOptions = (nestedOptions) => { + nestedOptions.forEach((nestedOption) => { + flattened.push(nestedOption); + if (nestedOption.options) { + flattenNestedOptions(nestedOption.options); + } + }); + }; + + const parentOptionsWithChildren = options.filter( + (option) => option.options && option.options.length > 0 + ); + + parentOptionsWithChildren.forEach((option) => { + if (option.options) { + flattened.push(option); + flattenNestedOptions(option.options); + } else { + flattened.push(option); + } + }); + + return flattened; + }; + + const flattenedOptions = flattenOptions(filteredOption); + + const renderOption = (option, index) => { + const handleMouseDown = (e) => { + if (e.button === 0) setIsActive(index); + }; + const handleMouseUp = () => { + setIsActive(-1); + }; + + return ( +
onSelect(option)}
+ onMouseDown={handleMouseDown}
+ onMouseUp={handleMouseUp}
+ >
+ {props?.variant === "profiledropdown" ||
+ props?.variant === "profilenestedtext" ? (
+
+ );
+ };
+
+ const optionsToRender =
+ props.variant === "nesteddropdown" || props.variant === "treedropdown"
+ ? flattenedOptions
+ : filteredOption;
+
+ const parentOptionsWithChildren = filteredOption.filter(
+ (option) => option.options && option.options.length > 0
+ );
+
+ const renderOptions = () => {
+ return optionsToRender.map((option, index) => {
+ if (option.options) {
+ return (
+
+ {!option?.profileIcon && (
+
+ ) : null}
+
+
+
+ {props?.showIcon &&
+ option?.icon &&
+ IconRender(option?.icon, index === isActive)}
+ {props.isPropertyAssess ? (
+
+ {(props.variant === "nestedtextdropdown" ||
+ props.variant === "profilenestedtext") &&
+ option.description && (
+
+ {props.t
+ ? props.t(option[props?.optionKey])
+ : option[props?.optionKey]}
+
+ ) : (
+
+ {StringManipulator("TOSENTENCECASE", props.t
+ ? props.t(option[props?.optionKey])
+ : option[props?.optionKey])}
+
+ )}
+ {StringManipulator("TOSENTENCECASE", option.description)}
+ )}
+
+
+ );
+ } else {
+ return renderOption(option, index);
+ }
+ });
+ };
+ return (
+
+ {props.variant === "treedropdown" &&
+ option.options.length > 0 && (
+
+
+ {(hasCustomSelector || props?.profilePic) && (
+
+ );
+};
+
+Dropdown.propTypes = {
+ customSelector: PropTypes.any,
+ showArrow: PropTypes.bool,
+ selected: PropTypes.any,
+ style: PropTypes.object,
+ option: PropTypes.array,
+ optionKey: PropTypes.any,
+ select: PropTypes.any,
+ t: PropTypes.func,
+};
+
+Dropdown.defaultProps = {
+ customSelector: null,
+ showArrow: true,
+ isSearchable: true,
+};
+
+export default Dropdown;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/ErrorBoundary.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/ErrorBoundary.js
new file mode 100644
index 00000000..075b977b
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/ErrorBoundary.js
@@ -0,0 +1,36 @@
+import Toast from "./Toast";
+import React, { Component } from 'react';
+
+class ErrorBoundary extends Component {
+ state = {
+ hasError: false,
+ error: null,
+ errorInfo: null
+ };
+
+ componentDidCatch(error, errorInfo) {
+ // Log the error to an error reporting service
+ console.error('Error caught by ErrorBoundary:', error, errorInfo);
+ this.setState({
+ hasError: true,
+ error: error,
+ errorInfo: errorInfo
+ });
+ }
+
+ render() {
+ if (this?.state?.hasError) {
+ // Render fallback UI
+ return (
+
+ {props?.profilePic && (
+
+ {typeof props?.profilePic === "string"
+ ? props?.profilePic?.[0]?.toUpperCase()
+ : props?.profilePic}
+
+ )}
+ {!props?.profilePic && props?.customSelector}
+ {props?.showArrow && (
+
+
+ )}
+
+ {!hasCustomSelector && !props?.profilePic && (
+
+
+ )}
+ {(hasCustomSelector || props?.profilePic) && menuStatus && (
+
+
+
+ )}
+ {!hasCustomSelector && !props?.profilePIc && dropdownStatus ? (
+ props.optionKey ? (
+
+ {props.variant === "treedropdown" ? (
+
+ ) : (
+ {}}
+ >
+ { {t("NO_RESULTS_FOUND")}}
+
+ )}
+
+ {props.option
+ ?.filter(
+ (option) =>
+ option?.toUpperCase().indexOf(filterVal?.toUpperCase()) > -1
+ )
+ .map((option, index) => {
+ return (
+
+ )
+ ) : null}
+ onSelect(option)} + > + {option} +
+ ); + })} +
+ {this?.state?.error?.toString() &&
+ );
+ }
+ // Render children normally
+ return this?.props?.children;
+ }
+}
+
+export default ErrorBoundary;
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/ErrorMessage.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/ErrorMessage.js
new file mode 100644
index 00000000..77d388fc
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/ErrorMessage.js
@@ -0,0 +1,55 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { SVG } from "./SVG";
+import StringManipulator from "./StringManipulator";
+import { Colors} from "../constants/colors/colorconstants";
+
+const ErrorMessage = ({
+ wrapperClassName = "",
+ wrapperStyles = {},
+ showIcon,
+ iconStyles = {},
+ message,
+ className = "",
+ style = {},
+ truncateMessage,
+ maxLength,
+}) => {
+
+ const IconColor = Colors.lightTheme.alert.error;
+
+ return (
+
+ {showIcon && (
+
+ );
+};
+
+ErrorMessage.propTypes = {
+ className: PropTypes.string,
+ style: PropTypes.object,
+ message: PropTypes.string,
+ showIcon: PropTypes.bool,
+ truncateMessage: PropTypes.bool,
+};
+
+export default ErrorMessage;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/FileUpload.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/FileUpload.js
new file mode 100644
index 00000000..e6bc285d
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/FileUpload.js
@@ -0,0 +1,553 @@
+import React, { useEffect, useRef, useState, Fragment } from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import ErrorMessage from "./ErrorMessage";
+import StringManipulator from "./StringManipulator";
+import Chip from "./Chip";
+import { SVG } from "./SVG";
+import UploadWidget from "./UploadWidget";
+import UploadImage from "./UploadImage";
+import Button from "./Button";
+import { Colors} from "../constants/colors/colorconstants";
+import { CustomSVG } from "./CustomSVG";
+import { getUserType } from "../utils/digitUtils";
+
+const getRandomId = () => {
+ return Math.floor((Math.random() || 1) * 139);
+};
+
+const FileUpload = (props) => {
+ const { t } = useTranslation();
+ const inpRef = useRef();
+ const user_type = getUserType();
+ const [buttonLabel, setButtonLabel] = useState("Upload");
+ const [inputLabel, setInputLabel] = useState("");
+ const [uploadedFilesCount, setUploadedFilesCount] = useState(0);
+ const [uploadedFiles, setUploadedFiles] = useState([]);
+ const [previews, setPreviews] = useState([]);
+ const [errors, setErrors] = useState([]);
+
+ const handleFileUpload = async (e) => {
+ const files = props.variant === "uploadField" ? e.target.files : e;
+ const newErrors = [];
+ if (files.length > 0) {
+ const acceptedFiles = [];
+ for (let i = 0; i < files.length; i++) {
+ const file = files[i];
+ const { isValid, error } = validateFile(file, props);
+ if (isValid) {
+ acceptedFiles.push(file);
+ } else {
+ newErrors.push({ file, error });
+ }
+ }
+ let newFiles;
+ if (props.variant === "uploadImage" || props.variant === "uploadWidget") {
+ newFiles = files;
+ } else {
+ newFiles = props?.multiple ? [...uploadedFiles, ...files] : [files[0]];
+ }
+ setUploadedFiles(newFiles);
+ setUploadedFilesCount(newFiles.length);
+ setErrors([...errors, ...newErrors]);
+ }
+
+ if (props?.onUpload) {
+ const uploadResult = await props?.onUpload(uploadedFiles);
+ if (uploadResult && uploadResult.length !== 0) {
+ for (const { file, error } of uploadResult) {
+ const fileIndex = newErrors.findIndex((item) => item.file === file);
+ if (fileIndex !== -1) {
+ newErrors[fileIndex].error = error;
+ } else {
+ newErrors.push({ file, error });
+ }
+ }
+ }
+ }
+ };
+
+ const validateFile = (file, props) => {
+ let isValid = true;
+ let error = "";
+ const maxFileSize = props.validations?.maxSizeAllowedInMB;
+ const minFileSize = props.validations?.minSizeRequiredInMB;
+ const acceptedImageTypes = [
+ "image/png",
+ ".png",
+ ".jpeg",
+ ".jpg",
+ "image/jpeg",
+ "image/jpg",
+ ];
+
+ if (maxFileSize && Math.round(file?.size / 1024 / 1024) > maxFileSize) {
+ isValid = false;
+ error = "File size exceeds the maximum allowed size";
+ } else if (
+ minFileSize &&
+ Math.round(file?.size / 1024 / 1024) < minFileSize
+ ) {
+ isValid = false;
+ error = "File size is below the minimum required size";
+ }
+
+ if (
+ props.variant === "uploadImage" &&
+ !acceptedImageTypes.includes(file.type)
+ ) {
+ isValid = false;
+ error = "File type is not accepted";
+ }
+
+ return { isValid, error };
+ };
+
+ const handleButtonClick = () => {
+ inpRef.current.click();
+ };
+
+ const handleFileRemove = (fileToRemove) => {
+ if (!Array.isArray(uploadedFiles)) {
+ setUploadedFiles([]);
+ setUploadedFilesCount(0);
+ setErrors([]);
+ } else {
+ const updatedFiles = uploadedFiles.filter(
+ (file) => file !== fileToRemove
+ );
+ const updatedErrors = errors.filter(
+ (error) => error.file !== fileToRemove
+ );
+ setUploadedFiles(updatedFiles);
+ setUploadedFilesCount(updatedFiles.length);
+ setErrors(updatedErrors);
+ }
+ props?.removeTargetedFile && props?.removeTargetedFile(fileToRemove);
+ };
+
+ const handleFileDownload = (file) => {
+ if (file && file?.url) {
+ window.location.href = file?.url;
+ }
+ };
+
+ const generatePreview = (file) => {
+ return new Promise((resolve) => {
+ const reader = new FileReader();
+ reader.onload = (e) => {
+ const result = e.target.result;
+ resolve(result);
+ };
+ reader.readAsDataURL(file);
+ });
+ };
+
+ useEffect(() => {
+ const uploadFiles = async () => {
+ if (props?.onUpload) {
+ const uploadResult = await props?.onUpload(uploadedFiles);
+ if (uploadResult && uploadResult.length !== 0) {
+ setErrors((prevErrors) => {
+ const newErrors = [];
+ uploadResult.forEach(({ file, error }) => {
+ const existingErrorIndex = prevErrors.findIndex((item) => item.file === file);
+ if (existingErrorIndex !== -1) {
+ prevErrors[existingErrorIndex].error = error;
+ } else {
+ newErrors.push({ file, error });
+ }
+ });
+ return [...prevErrors, ...newErrors];
+ });
+ }
+ }
+ };
+ if (uploadedFiles.length > 0) {
+ uploadFiles();
+ }
+ }, [uploadedFiles,props?.onUpload]);
+
+ useEffect(() => {
+ setButtonLabel(
+ !props.multiple && uploadedFilesCount > 0 ? "Re-Upload" : "Upload"
+ );
+ }, [uploadedFilesCount, props.multiple]);
+
+ useEffect(() => {
+ setInputLabel(
+ uploadedFilesCount !== 0 ? `${uploadedFilesCount} Uploaded` : ""
+ );
+ }, [uploadedFilesCount]);
+
+ useEffect(() => {
+ const generatePreviews = async () => {
+ const previewsArray = [];
+ for (const file of uploadedFiles) {
+ if (file instanceof Blob) {
+ const preview = await generatePreview(file);
+ if (preview) {
+ const fileErrors = errors.filter((error) => error.file === file);
+ previewsArray.push({
+ file,
+ preview,
+ error: fileErrors.length > 0 ? fileErrors[0].error : null,
+ });
+ } else {
+ console.error("Failed to generate preview for:", file);
+ }
+ } else {
+ const blob = new Blob([file], { type: file?.type });
+ const preview = await generatePreview(blob);
+ if (preview) {
+ const fileErrors = errors.filter((error) => error.file === file);
+ previewsArray.push({
+ file,
+ preview,
+ error: fileErrors.length > 0 ? fileErrors[0].error : null,
+ });
+ } else {
+ console.error("Failed to generate preview for:", file);
+ }
+ console.error("Invalid file object:", file);
+ }
+ }
+ setPreviews(previewsArray);
+ };
+
+ generatePreviews();
+
+ return () => {
+ setPreviews([]);
+ };
+ }, [uploadedFiles]);
+
+ const showHint = props?.showHint || false;
+
+ const showLabel = props?.showLabel || false;
+
+ const { fileUrl, fileName = "Unknown File" } = Digit.Hooks.useQueryParams();
+
+ const changeToBlobAndCreateUrl = (file) => {
+ if (!file) return null;
+ const blob = new Blob([file], { type: file?.type });
+ return URL.createObjectURL(blob);
+ };
+
+ const documents = fileUrl
+ ? [{ uri: fileUrl, fileName }]
+ : uploadedFiles.map((file) => ({
+ uri: changeToBlobAndCreateUrl(file),
+ fileName: file?.name || fileName,
+ }));
+
+ const handleFileClick = (index, file) => {
+ const url = changeToBlobAndCreateUrl(file);
+ window.open(url, "_blank");
+ };
+
+ const primaryColor = Colors.lightTheme.paper.primary;
+ const errorColor = Colors.lightTheme.alert.error;
+
+ const getFileUploadIcon = (fileType, isError) => {
+ switch (fileType) {
+ case "application/pdf":
+ return (
+
+
+ )}
+
+ {truncateMessage
+ ? StringManipulator(
+ "TOSENTENCECASE",
+ StringManipulator("TRUNCATESTRING", message, {
+ maxLength: maxLength || 256,
+ })
+ )
+ : StringManipulator("TOSENTENCECASE", message)}
+
+
+
+ {props?.showAsTags && (
+
+
+
+
+
+
+ {uploadedFiles?.map((file, index) => {
+ const fileErrors = errors.filter(
+ (error) => error.file === file
+ );
+ const isError = fileErrors.length > 0;
+ return (
+ {
+ e.stopPropagation();
+ handleFileRemove(file);
+ }}
+ isErrorTag={isError}
+ error={fileErrors[0]?.error}
+ onTagClick={() => handleFileClick(index, file)}
+ onErrorClick={(e) => e.stopPropagation()}
+ />
+ );
+ })}
+
+ )}
+ {props?.showAsPreview && (
+
+ {uploadedFiles.map((file, index) => {
+ const fileErrors = errors.filter(
+ (error) => error.file === file
+ );
+ const isError = fileErrors.length > 0;
+
+ return (
+
+
+ );
+ })}
+
+ )}
+ 1 ? " multiple" : "single"
+ } ${file?.type.startsWith("image/") ? "imageFile" : ""} ${isError ? "error" : ""}`}
+ >
+
+ {
+ handleFileClick(index, file);
+ }}
+ >
+ {file?.type.startsWith("image/") ? (
+ 
+ ) : (
+ getFileUploadIcon(file?.type, isError)
+ )}
+
+ {
+ handleFileClick(index, file);
+ }}
+ >
+
+ {file?.name && !isError ? file?.name : ""}
+
+ {
+ handleFileRemove(file);
+ }}
+ className={`digit-uploader-close-icon ${
+ isError ? "error" : ""
+ }`}
+ >
+
+ {showLabel &&
+ {t(props?.label)}
} + {renderVariant()} + {props?.iserror && ( ++ {StringManipulator( + "toSentenceCase", + StringManipulator("truncateString", t(props?.hintText), { + maxLength: 256, + }) + )} +
+ )} +
+ {hasActionFields && (
+
+ );
+};
+
+Footer.propTypes = {
+ /** custom class of the svg icon */
+ className: PropTypes.string,
+ /** custom style of the svg icon */
+ style: PropTypes.object,
+};
+
+export default Footer;
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Hamburger.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Hamburger.js
new file mode 100644
index 00000000..910cd06d
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Hamburger.js
@@ -0,0 +1,357 @@
+import React, { useState,Fragment ,useRef,useEffect} from "react";
+import { useTranslation } from "react-i18next";
+import PropTypes from "prop-types";
+import { SVG } from "./SVG";
+import { CustomSVG } from "./CustomSVG";
+import Button from "./Button";
+import TextInput from "./TextInput";
+import { Colors } from "../constants/colors/colorconstants";
+import { iconRender } from "../utils/iconRender";
+import { Spacers } from "../constants/spacers/spacers";
+
+const Hamburger = ({
+ items,
+ profileName,
+ profileNumber,
+ theme,
+ className,
+ styles,
+ hideUserManuals,
+ userManualLabel,
+ profile,
+ usermanuals,
+ onSelect,
+ onLogout,
+ reopenOnLogout,
+ closeOnClickOutside,
+ onOutsideClick
+}) => {
+ const { t } = useTranslation();
+ const [searchTerms, setSearchTerms] = useState({});
+ const [selectedItem, setSelectedItem] = useState({});
+ const [expandedItems, setExpandedItems] = useState({});
+ const [openUserManuals, setOpenUserManuals] = useState(false);
+ const [showHamburger,setShowHamburger] = useState(true);
+ const sidebarRef = useRef(null);
+
+ const iconSize = Spacers.spacer6;
+
+ useEffect(() => {
+ if (!closeOnClickOutside && !onOutsideClick) return;
+
+ const handleClickOutside = (event) => {
+ if (sidebarRef.current && !sidebarRef.current.contains(event.target)) {
+ if (onOutsideClick) {
+ onOutsideClick(event);
+ }
+ if (closeOnClickOutside) {
+ setShowHamburger(false);
+ }
+ }
+ };
+
+ document.addEventListener("mousedown", handleClickOutside);
+
+ return () => {
+ document.removeEventListener("mousedown", handleClickOutside);
+ };
+ }, [closeOnClickOutside, onOutsideClick]);
+
+
+ const handleItemClick = (item, index, parentIndex) => {
+ setSelectedItem({ item: item, index: index, parentIndex: parentIndex });
+ onSelect && onSelect({ item: item, index: index, parentIndex: parentIndex });
+ };
+
+ const handleSearchChange = (index, value) => {
+ setSearchTerms((prev) => ({
+ ...prev,
+ [index]: value,
+ }));
+ };
+
+ const onLogoutClick = () => {
+ setShowHamburger(false);
+ onLogout && onLogout();
+ onLogout && reopenOnLogout && setShowHamburger(true);
+ }
+
+ const filterItems = (items, searchTerm) => {
+ return items?.filter((item) => {
+ if (item?.label?.toLowerCase().includes(searchTerm.toLowerCase())) {
+ return true;
+ }
+ if (item?.children) {
+ item.children = filterItems(item?.children, searchTerm);
+ return item?.children.length > 0;
+ }
+ return false;
+ });
+ };
+
+ const darkThemeIconColor = Colors.lightTheme.paper.primary;
+ const lightThemeIconColor = Colors.lightTheme.primary[2];
+
+ const renderSearch = (index) => (
+
+ {finalActionFields.map((field, index) => (
+
+ )}
+ {props?.children}
+
+ {field}
+
+ ))}
+
+ handleSearchChange(index, e.target.value)}
+ placeholder="Search"
+ autoFocus={true}
+ iconFill={theme === "dark" ? darkThemeIconColor : lightThemeIconColor}
+ >
+
+ );
+
+ const handleArrowClick = (item, index, parentIndex) => {
+ if (item?.children) {
+ setExpandedItems((prev) => ({
+ ...prev,
+ [index]: !prev[index],
+ }));
+ }
+ else {
+ handleItemClick(item, index, parentIndex);
+ }
+ };
+
+ const userManualsToShow =
+ usermanuals && usermanuals.length > 0
+ ? usermanuals
+ : [
+ {
+ label: "Help",
+ icon: "Home",
+ },
+ {
+ label: "Settings",
+ icon: "Settings",
+ },
+ ];
+
+ const Icon = (icon,className) =>{
+ return (
+ iconRender(
+ icon,
+ theme === "light" ? lightThemeIconColor : darkThemeIconColor,
+ iconSize,
+ iconSize,
+ className
+ )
+ )
+ }
+ const renderItems = (items, parentIndex = -1) => items?.map((item, index) => {
+ const currentIndex = parentIndex >= 0 ? `${parentIndex}-${index}` : index;
+ const isExpanded = expandedItems[currentIndex];
+ const isTopLevel = parentIndex === -1;
+ return (
+ <>
+
+
+ {item?.children && isExpanded && (
+ handleArrowClick(item, currentIndex, parentIndex)}
+ tabIndex={0}
+ >
+ {item?.icon && Icon(item?.icon,"digit-msb-icon")}
+ {{item?.label}}
+ {item?.children && (
+
+ {isExpanded ? (
+
+
+ {item?.isSearchable && renderSearch(currentIndex)}
+ {filterItems(item?.children, searchTerms[currentIndex] || "")
+ .length > 0 ? (
+ renderChildItems(
+ filterItems(item?.children, searchTerms[currentIndex] || ""),
+ currentIndex,
+ false
+ )
+ ) : (
+
+ )}
+
+ );
+ });
+
+ const renderChildItems = (items, parentIndex = -1, isUserManual) =>
+ items?.map((item, index) => {
+ const currentIndex = parentIndex >= 0 ? `${parentIndex}-${index}` : index;
+ const isExpanded = expandedItems[currentIndex];
+ const icon = item?.icon ? Icon(item?.icon,"digit-icon-msb") : null;
+ return (
+ <>
+ {t("No Results Found")}
+ )}
+
+
+ handleItemClick(item, currentIndex, parentIndex)}
+ tabIndex={0}
+ >
+ {icon}
+ {/* {item.icon && Icon(item.icon, "digit-icon-msb")} */}
+ {
+
+ {item?.label}
+
+ }
+ {item?.children && (
+ {
+ e.stopPropagation();
+ handleArrowClick(item, currentIndex, parentIndex);
+ }}
+ >
+ {isExpanded ? (
+
+
+ {item?.children && isExpanded && (
+
+
+ );
+ });
+
+ const filteredItems = filterItems(items, searchTerms["root"] || "");
+
+ return showHamburger ? (
+
+ {renderChildItems(item?.children, currentIndex)}
+
+ )}
+
+
+ ) : null;
+};
+
+Hamburger.propTypes = {
+ items: PropTypes.arrayOf(
+ PropTypes.shape({
+ path: PropTypes.string,
+ icon: PropTypes.node.isRequired,
+ label: PropTypes.string.isRequired,
+ })
+ ).isRequired,
+ profileName: PropTypes.string,
+ profileNumber: PropTypes.string,
+ isSearchable:PropTypes.bool,
+ userManualLabel:PropTypes.string,
+ reopenOnLogout:PropTypes.bool
+};
+
+export default Hamburger;
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/HamburgerButton.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/HamburgerButton.js
new file mode 100644
index 00000000..75ad91b9
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/HamburgerButton.js
@@ -0,0 +1,10 @@
+import React from "react";
+import { CustomSVG } from "./CustomSVG";
+
+const HamburgerButton = ({ handleClick, color ,className}) => (
+
+ {!profile && 
+ )}
+
+
+
+ {profileName}
+
+ {profileNumber}
+
+ {renderItems(filteredItems)}
+ {!hideUserManuals && (
+
+
+ )}
+ {
+ openUserManuals && (
+ renderChildItems(userManualsToShow,-1,true)
+ )
+ }
+ setOpenUserManuals(!openUserManuals)}
+ >
+
+ {
+
+
+
+
+
+
+);
+
+export default HamburgerButton;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Header.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Header.js
new file mode 100644
index 00000000..8c905f31
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Header.js
@@ -0,0 +1,160 @@
+import React, { useEffect, useState, Fragment } from "react";
+import PropTypes from "prop-types";
+import Hamburger from "./Hamburger";
+import { IMAGES} from "../constants/images/images";
+import { Colors} from "../constants/colors/colorconstants";
+
+const Header = ({
+ img,
+ className,
+ style,
+ theme,
+ setImageToLeft,
+ onImageClick,
+ onLogoClick,
+ onHamburgerClick,
+ props,
+ logo,
+ ulb,
+ actionFields,
+}) => {
+ const [isMobileView, setIsMobileView] = useState(window.innerWidth <= 768);
+ const onResize = () => {
+ if (window.innerWidth <= 768) {
+ if (!isMobileView) {
+ setIsMobileView(true);
+ }
+ } else {
+ if (isMobileView) {
+ setIsMobileView(false);
+ }
+ }
+ };
+ useEffect(() => {
+ window.addEventListener("resize", () => {
+ onResize();
+ });
+ return () => {
+ window.addEventListener("resize", () => {
+ onResize();
+ });
+ };
+ });
+
+ const getImageUrl = (imageKey) => {
+ return IMAGES[imageKey] ;
+ };
+
+ const digitImg = img || (theme === "dark" ? getImageUrl('DIGIT_DARK') : getImageUrl('DIGIT_LIGHT'));
+ const darkThemeColor = Colors.lightTheme.paper.primary;
+ const lightThemeColor = Colors.lightTheme.text.primary;
+
+ if (isMobileView) {
+ return (
+
+
+ );
+ }
+
+ return (
+
+ 
onImageClick()}
+ width={"80px"}
+ height={"19px"}
+ />
+
+
+
+ {ulb}
+
+
+ {!setImageToLeft && (
+
+ );
+};
+Header.propTypes = {
+ img: PropTypes.string,
+ className: PropTypes.string,
+ style: PropTypes.object,
+ theme: PropTypes.string,
+ setImageToLeft: PropTypes.bool,
+ onImageClick: PropTypes.func,
+ onLogoClick: PropTypes.func,
+ onHamburgerClick: PropTypes.func,
+ props: PropTypes.object,
+ logo: PropTypes.string,
+};
+Header.defaultProps = {
+ img: undefined,
+};
+export default Header;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/HeaderBar.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/HeaderBar.js
new file mode 100644
index 00000000..ae8effe4
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/HeaderBar.js
@@ -0,0 +1,26 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const HeaderBar = (props) => {
+ return (
+
+ {logo && (
+
+ )}
+ {setImageToLeft && (
+
+ 
onLogoClick()}
+ width={props?.logoWidth || "32px"}
+ height={props?.logoHeight || "32px"}
+ />
+
+ )}
+ {ulb}
+
+ onImageClick()}
+ width={"80px"}
+ height={"19px"}
+ />
+
+ )}
+
+ {actionFields && (
+ <>
+ {actionFields.map((field, index) => (
+ onImageClick()}
+ width={"80px"}
+ height={"19px"}
+ />
+ )
+ }
+
+
+ {field}
+
+ ))}
+
+ )}
+ {
+ (!setImageToLeft) && (
+
+ {props.start ?
+ );
+};
+
+HeaderBar.propTypes = {
+ start: PropTypes.any,
+ main: PropTypes.any,
+ end: PropTypes.any,
+};
+
+HeaderBar.defaultProps = {
+ start: "",
+ main: "",
+ end: "",
+};
+
+export default HeaderBar;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/HeaderComponent.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/HeaderComponent.js
new file mode 100644
index 00000000..2b040f15
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/HeaderComponent.js
@@ -0,0 +1,18 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const HeaderComponent = (props) => {
+ return (
+ {props.start}
: null}
+ {props.main ? {props.main}
: null}
+ {props.end ? {props.end}
: null}
+
+ ![Powered by DIGIT]({window?.globalConfigs?.getConfig?.("DIGIT_FOOTER")})
{
+ window.open(window?.globalConfigs?.getConfig?.("DIGIT_HOME_URL"), "_blank").focus();
+ }}
+ />
+
+ );
+}
+
+export default HomeFooter;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/HorizontalNav.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/HorizontalNav.js
new file mode 100644
index 00000000..430369ae
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/HorizontalNav.js
@@ -0,0 +1,39 @@
+import React, {useState} from 'react'
+import { useTranslation } from 'react-i18next'
+
+const HorizontalNav = ({ configNavItems, activeLink, setActiveLink, showNav = false, children, customStyle = {}, customClassName = "", inFormComposer = true, navClassName = "", navStyles = {} }) => {
+ const { t } = useTranslation()
+
+ const setActive = (item) => {
+ setActiveLink(item.name)
+ }
+
+ const MenuItem = ({ item }) => {
+ let itemComponent = item.code;
+
+ const Item = () => (
+
+ {t(itemComponent)}
+
+ );
+
+ return (
+
+ {showNav &&
+ )
+}
+
+export default HorizontalNav
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Iframe.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Iframe.js
new file mode 100644
index 00000000..0772beb1
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Iframe.js
@@ -0,0 +1,16 @@
+import React from "react";
+
+const Iframe = (props) => {
+ return (
+
+ );
+};
+
+export default Iframe;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/InboxSearchLinks.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/InboxSearchLinks.js
new file mode 100644
index 00000000..43ae10d8
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/InboxSearchLinks.js
@@ -0,0 +1,66 @@
+import React, { useState, useEffect,useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import { iconRender } from "../utils/iconRender";
+
+const InboxSearchLinks = ({
+ headerText,
+ links,
+ businessService,
+ customClass = "",
+ logoIcon,
+}) => {
+ const { t } = useTranslation();
+ const userRoles = useMemo(() => Digit.UserService.getUser().info.roles, []);
+ const memoizedLinks = useMemo(() => links, [links]);
+ const [linksToShow, setLinksToShow] = useState([]);
+
+ useEffect(() => {
+ let filteredLinks = memoizedLinks.filter(
+ ({ roles }) =>
+ roles.some((role) =>
+ userRoles.map(({ code }) => code).includes(role)
+ ) || !roles?.length
+ );
+
+ if (JSON.stringify(filteredLinks) !== JSON.stringify(linksToShow)) {
+ setLinksToShow(filteredLinks);
+ }
+ }, [memoizedLinks, userRoles]);
+
+ const renderHeader = () => (
+
+ {configNavItems?.map((item, index) => (
+
+ }
+ {children}
+ setActive(item)}>
+
+
+ ))}
+
+
+ {logoIcon?.component &&
+ iconRender(
+ logoIcon?.component,
+ "#C84C0E",
+ "2rem",
+ "2rem",
+ logoIcon?.customClass
+ )}
+
+ {t(headerText)}
+
+ );
+ return (
+
+ {renderHeader()}
+
+ );
+};
+
+export default InboxSearchLinks;
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/InfoButton.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/InfoButton.js
new file mode 100644
index 00000000..4b518a2b
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/InfoButton.js
@@ -0,0 +1,117 @@
+import React from "react";
+import PropTypes from "prop-types";
+import StringManipulator from "./StringManipulator";
+import { Colors} from "../constants/colors/colorconstants";
+import { iconRender } from "../utils/iconRender";
+
+const InfoButton = (props) => {
+
+ const primaryIconColor = Colors.lightTheme.paper.primary;
+
+ //To render the icon
+ const IconRender = () => {
+ const iconFill = primaryIconColor
+ const iconReq = props?.icon;
+ let width = "1.5rem";
+ let height = "1.5rem";
+
+ if (props.size === "medium") {
+ width = "1.25rem";
+ height = "1.25rem";
+ } else if (props.size === "small") {
+ width = "0.875rem";
+ height = "0.875rem";
+ }
+ return iconRender(
+ iconReq,
+ iconFill,
+ width,
+ height,
+ `digit-button-customIcon ${props?.size ? props?.size : ""} ${props?.variation ? props?.variation : ""} `
+ );
+ };
+
+ const icon = IconRender();
+
+ const formattedLabel =
+ props?.variation === "link"
+ ? props?.label
+ : StringManipulator(
+ "CAPITALIZEFIRSTLETTER",
+ StringManipulator("TRUNCATESTRING", props?.label, {
+ maxLength: 64,
+ })
+ );
+
+ return (
+
+ );
+};
+
+InfoButton.propTypes = {
+ isDisabled: PropTypes.bool,
+ /**
+ * ButtonSelector content
+ */
+ label: PropTypes.string.isRequired,
+ /**
+ * button icon if any
+ */
+ icon: PropTypes.string,
+ /**
+ * click handler
+ */
+ onClick: PropTypes.func.isRequired,
+ /**
+ * Custom classname
+ */
+ className: PropTypes.string,
+ /**
+ * Custom styles
+ */
+ style: PropTypes.object,
+ /**
+ * Custom label style or h2 style
+ */
+ textStyles: PropTypes.object,
+ /**
+ * button icon position
+ */
+ isSuffix: PropTypes.bool,
+ /**
+ * button size
+ */
+ size: PropTypes.string,
+
+ infobuttontype: PropTypes.string,
+};
+
+InfoButton.defaultProps = {
+ label: "",
+ onClick: () => {},
+ infobuttontype:"info"
+};
+
+export default InfoButton;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/InputTextAmount.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/InputTextAmount.js
new file mode 100644
index 00000000..d4519074
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/InputTextAmount.js
@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { getIntlConfig } from "../utils/amountFormatter";
+import { InputAmountWrapper } from "../utils/inputAmountWrapper";
+
+const InputTextAmount = ({ value, prefix = "₹ ", intlConfig = getIntlConfig(prefix), onChange, inputRef, variant, ...otherProps }) => {
+ return (
+
+ {linksToShow.map(({ url, text, hyperlink = false }, index) => {
+ return (
+
+ { hyperlink ? (
+ {t(text)}
+ ) : (
+ {t(text)}
+ )}
+
+ );
+ })}
+
+
+
+ );
+};
+
+KeyNote.propTypes = {
+ keyValue: PropTypes.string,
+ note: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ noteStyle: PropTypes.any,
+};
+
+KeyNote.defaultProps = {
+ keyValue: "",
+ note: "",
+ noteStyle: {},
+};
+
+export default KeyNote;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/LabelFieldPair.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/LabelFieldPair.js
new file mode 100644
index 00000000..5e4cb613
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/LabelFieldPair.js
@@ -0,0 +1,20 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const LabelFieldPair = (props) => {
+ return (
+ {keyValue}
+
+
+ {note}
+{caption}
+ {children} +
+ {props.children}
+
+ );
+};
+
+LabelFieldPair.propTypes = {
+ className: PropTypes.string, // An optional string for custom class names.
+ style: PropTypes.object, // An optional object for custom styles.
+ children: PropTypes.node.isRequired, // Required prop for the content of the label-field pair.
+ vertical:PropTypes.bool,
+ removeMargin:PropTypes.bool
+};
+
+export default LabelFieldPair;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/LinkLabel.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/LinkLabel.js
new file mode 100644
index 00000000..f008e2c7
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/LinkLabel.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+const LinkLabel = (props) => {
+ return (
+
+ );
+};
+
+export default LinkLabel;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Loader.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Loader.js
new file mode 100644
index 00000000..cb3ec836
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Loader.js
@@ -0,0 +1,62 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Animation from "./Animation";
+import { useTranslation } from "react-i18next";
+import theLoaderPrimary2 from "../constants/animations/theLoaderPrimary2.json";
+import theLoaderWhite from "../constants/animations/theLoaderWhite.json";
+
+const Loader = ({
+ variant,
+ className,
+ style,
+ loaderText,
+ animationStyles,
+}) => {
+ const { t } = useTranslation();
+
+ const renderLoader = () => {
+ const commonProps = {
+ loop: animationStyles?.noLoop !== true,
+ autoplay: animationStyles?.noAutoplay !== true,
+ width: animationStyles?.width || "6.25rem",
+ height: animationStyles?.height || "6.25rem",
+ animationData:
+ animationStyles?.animationData !== undefined && animationStyles?.animationData !== null
+ ? animationStyles.animationData
+ : variant === "OverlayLoader"
+ ? theLoaderWhite
+ : theLoaderPrimary2,
+ };
+
+ return
+ {renderLoader()}
+ {loaderText && (
+
+ );
+};
+
+Loader.propTypes = {
+ /** custom class */
+ className: PropTypes.string,
+ /** variant */
+ variant: PropTypes.string,
+ /** custom loader text */
+ loaderText: PropTypes.string,
+ /** custom styles */
+ style: PropTypes.object,
+ /** custom styles for animation */
+ animationStyles: PropTypes.object,
+};
+
+export default Loader;
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Menu.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Menu.js
new file mode 100644
index 00000000..eb8cc37f
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Menu.js
@@ -0,0 +1,104 @@
+import React, { useState} from "react";
+import PropTypes from "prop-types";
+import TextInput from "./TextInput";
+import { useTranslation } from "react-i18next";
+import { Colors} from "../constants/colors/colorconstants";
+import { iconRender } from "../utils/iconRender";
+
+const Menu = (props) => {
+ const [searchTerm, setSearchTerm] = useState("");
+ const [optionIndex, setOptionIndex] = useState(-1);
+ const [isActive, setIsActive] = useState(-1);
+ const { t } = useTranslation();
+
+ const handleSearch = (e) => {
+ setSearchTerm(e.target.value);
+ };
+
+ const searchFilteredOptions = props?.options.filter((option) =>
+ option[props?.optionsKey]?.toLowerCase().includes(searchTerm.toLowerCase())
+ );
+
+ const onSelect = (val) => {
+ props.onSelect(val);
+ props.setDropdownStatus(false);
+ };
+
+ const handleMouseDown = (index) => {
+ setOptionIndex(index);
+ };
+
+
+ const secondaryIconColor = Colors.lightTheme.generic.inputBorder;
+ const primaryIconColor = Colors.lightTheme.paper.primary;
+
+ const IconRender = (iconReq, isActive) => {
+ const iconFill = isActive ? primaryIconColor : secondaryIconColor;
+ return iconRender(
+ iconReq,
+ iconFill,
+ "1.25rem",
+ "1.25rem",
+ ""
+ );
+ };
+
+
+ return (
+
+ {`${t(loaderText)}...`}
+
+ )}
+
+ {props?.isSearchable && (
+
+ );
+};
+
+Menu.propTypes = {
+ options: PropTypes.array,
+ showBottom: PropTypes.bool,
+ isSearchable: PropTypes.bool,
+ style: PropTypes.object,
+ optionsKey: PropTypes.string.isRequired,
+ onSelect: PropTypes.func.isRequired
+};
+
+Menu.defaultProps = {
+ options: [],
+ onSelect: () => {},
+};
+
+export default Menu;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/MobileNumber.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/MobileNumber.js
new file mode 100644
index 00000000..6c26cfeb
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/MobileNumber.js
@@ -0,0 +1,84 @@
+import React from "react";
+import PropTypes from "prop-types";
+import TextInput from "./TextInput";
+import { getUserType } from "../utils/digitUtils";
+
+const MobileNumber = (props) => {
+ const user_type = getUserType();
+
+ const onChange = (e) => {
+ let val = e.target.value;
+ if (isNaN(val) || [" ", "e", "E"].some((e) => val.includes(e)) || val.length > (props.maxLength || 10)) {
+ val = val.slice(0, -1);
+ }
+ props?.onChange?.(val);
+ };
+
+ return (
+
+
+ )}
+
+ {searchFilteredOptions.length !== 0 ? (
+ searchFilteredOptions.map((option, index) => (
+
+ {e.stopPropagation(); onSelect(option);}}
+ onMouseDown={() => handleMouseDown(index)}
+ >
+ {IconRender(option?.icon, index === optionIndex)}
+ {t(option[props?.optionsKey])}
+
+ ))
+ ) : (
+ {t("No Results Found")}
+ )}
+
+
+
+
+ selectedOption.code === option.code
+ )
+ ? "checked"
+ : ""
+ } ${
+ index === optionIndex &&
+ !alreadyQueuedSelectedState.find(
+ (selectedOption) => selectedOption.code === option.code
+ )
+ ? "keyChange"
+ : ""
+ } ${isFrozen ? "frozen" : ""}`}
+ onMouseDown={() => setIsActive(true)}
+ onMouseUp={() => setIsActive(false)}
+ onMouseLeave={() => setIsActive(false)}
+ >
+ selectedOption.code === option.code
+ )
+ ? true
+ : false
+ }
+ onChange={(e) => {
+ if (!isFrozen) {
+ isPropsNeeded
+ ? onSelectToAddToQueue(e, option, props)
+ : onSelectToAddToQueue(e, option);
+ }
+ }}
+ className={`digit-multi-select-dropdown-menuitem ${
+ variant ? variant : ""
+ } ${isFrozen ? "disabled" : ""}`}
+ disabled={isFrozen}
+ style={{
+ cursor: isFrozen ? "not-allowed" : "pointer",
+ }}
+ />
+
+ );
+ };
+
+ const selectAllOption = addSelectAllCheck && (
+
+
+
+
+
+ {config?.showIcon &&
+ option?.icon &&
+ IconRender(
+ option?.icon,
+ isActive,
+ alreadyQueuedSelectedState.find(
+ (selectedOption) => selectedOption.code === option.code
+ )
+ ? true
+ : false
+ )}
+
+ {variant === "nestedtextmultiselect" && option.description && (
+ + {t( + option[optionsKey] && + typeof option[optionsKey] == "string" && + option[optionsKey] + )} +
+{option.description}
+ )}
+
+
+
+ );
+
+ const Menu = () => {
+ const optionsToRender =
+ variant === "nestedmultiselect" ? flattenedOptions : filteredOptions;
+
+ if (!optionsToRender || optionsToRender?.length === 0) {
+ return (
+
+
+ + {selectAllLabel ? selectAllLabel : t("SELECT_ALL")} +
+ {}}
+ >
+ { {t("NO_RESULTS_FOUND")}}
+
+ );
+ }
+
+ return (
+
+ {selectAllOption}
+ {optionsToRender?.map((option, index) => {
+ if (option.options) {
+ return (
+
+ );
+ };
+
+ return (
+
+
+ );
+ } else {
+ return ;
+ }
+ })}
+
+ {t(option[optionsKey])}
+
+ {addCategorySelectAllCheck && (
+ handleCategorySelection(option)}
+ >
+
+ )}
+
+ {categorySelectAllLabel
+ ? categorySelectAllLabel
+ : t("SELECT_ALL")}
+
+
+
+
+
+
+ );
+};
+
+MultiSelectDropdown.propTypes = {
+ options: PropTypes.array.isRequired,
+ optionsKey: PropTypes.string.isRequired,
+ selected: PropTypes.array,
+ onSelect: PropTypes.func.isRequired,
+ defaultLabel: PropTypes.string,
+ defaultUnit: PropTypes.string,
+ props: PropTypes.object,
+ isPropsNeeded: PropTypes.bool,
+ ServerStyle: PropTypes.object,
+ config: PropTypes.object,
+};
+
+export default MultiSelectDropdown;
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/NestedTable.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/NestedTable.js
new file mode 100644
index 00000000..b12af2b6
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/NestedTable.js
@@ -0,0 +1,106 @@
+import React from "react";
+import TableMain from "./TableMain";
+import TableHeader from "./TableHeader";
+import TableBody from "./TableBody";
+import TableCell from "./TableCell";
+import TableRow from "./TableRow";
+import Card from "./Card";
+import { SVG } from "./SVG";
+import PropTypes from 'prop-types';
+
+const NestedTable = ({ nestedData, toggleRowExpansion, rowIndex }) => {
+ const lastNestedData = nestedData[nestedData.length - 1];
+
+ if (!lastNestedData || !lastNestedData.nestedData) {
+ return
+
+ {config?.isDropdownWithChip ? (
+
+ setActive(true)}
+ value={searchQuery}
+ onChange={onSearch}
+ />
+
+ {active ? (
+ 0
+ ? `${variant === "treemultiselect"
+ ? countFinalChildOptions(alreadyQueuedSelectedState)
+ : alreadyQueuedSelectedState.length}
+ ${defaultUnit} Selected`
+ : defaultLabel
+ }
+ >
+ {variant === "treemultiselect" ? (
+ setActive(true)} fill={disabled ? dividerColor : inputBorderColor} />
+
+ + {alreadyQueuedSelectedState.length > 0 + ? `${countFinalChildOptions( + alreadyQueuedSelectedState + )} ${defaultUnit} Selected` + : defaultLabel} +
+ ) : ( ++ {alreadyQueuedSelectedState.length > 0 + ? `${alreadyQueuedSelectedState.length} ${defaultUnit} Selected` + : defaultLabel} +
+ )} +
+ {variant === "treemultiselect" ? (
+
+ ) : null}
+
+ {alreadyQueuedSelectedState.length > 0 &&
+ alreadyQueuedSelectedState
+ ?.filter((value) => !value.propsData[1]?.options)
+ ?.slice(0, config?.numberOfChips || alreadyQueuedSelectedState.length )
+ ?.map((value, index) => {
+ const translatedText = t(
+ chipsKey ? value[chipsKey] : value.code
+ );
+ const replacedText = replaceDotWithColon(translatedText);
+ const isClose = frozenData.some(
+ (frozenOption) => frozenOption.code === value.code
+ );
+ return (
+ 64
+ ? `${replacedText.slice(0, 64)}...`
+ : replacedText
+ }
+ onClick={
+ variant === "treemultiselect"
+ ? () => onSelectToAddToQueue([value])
+ : isPropsNeeded
+ ? (e) => onSelectToAddToQueue(e, value, props)
+ : (e) => {
+ onSelectToAddToQueue(e, value);
+ }
+ }
+ hideClose={isClose}
+ className="multiselectdropdown-tag"
+ />
+ );
+ })}
+ {alreadyQueuedSelectedState.length > (config?.numberOfChips || alreadyQueuedSelectedState.length) && (
+
+ ) : null}
+ No nested data available
; + } + + const { headerData, rows, tableDetails } = lastNestedData.nestedData; + + if (!rows || rows.length === 0 || !headerData || headerData.length === 0) { + returnNo nested data available
; + } + + const renderNestedTable = () => { + return ( +
+
+
+
+ {headerData?.map((header, index) => (
+
+ {header?.label}
+
+ ))}
+
+
+
+ {rows?.map((nestedRow, index) => (
+
+ {nestedRow?.map((cell, cellIndex) => (
+ 0
+ ? headerData[cellIndex]?.accessor
+ : null
+ }
+ />
+ ))}
+
+ ))}
+
+
+
+ );
+ };
+
+ return tableDetails?.tableTitle ||
+ tableDetails?.tableDescription ||
+ tableDetails?.addClose ? (
+
+
+ )}
+ {renderNestedTable()}
+
+ {tableDetails?.tableTitle && (
+ toggleRowExpansion(rowIndex)}
+ />
+ )}
+
+ {tableDetails?.tableDescription && (
+ {tableDetails?.tableTitle}
+ )}
+ {tableDetails?.addClose && (
+
+ {tableDetails?.tableDescription}
+
+ )}
+
+
+ );
+};
+NoResultsFound.propTypes = {
+ style: PropTypes.object,
+ className: PropTypes.string,
+ height: PropTypes.number, // Prop for the height of the NoResultsFoundIcon
+ width: PropTypes.number, // Prop for the width of the NoResultsFoundIcon
+};
+
+// Default props for height and width
+NoResultsFound.defaultProps = {
+ height: 262,
+ width: 336,
+};
+export default NoResultsFound;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Numeric.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Numeric.js
new file mode 100644
index 00000000..df13d28d
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Numeric.js
@@ -0,0 +1,54 @@
+import React, { useState } from "react";
+
+const Numeric = (props, customProps) => {
+
+ const [count, setCount] = useState(props?.defaultValues || 0);
+
+ const incrementCount = () => {
+ if (count >= 0) {
+ setCount(count + 1);
+ props.onSelect(count);
+ } else {
+ setCount(0);
+ props.onSelect(0);
+ }
+ };
+
+ const decrementCount = () => {
+ if (count > 0) {
+ setCount(count - 1);
+ props.onSelect(count);
+ } else {
+ setCount(0);
+ props.onSelect(0);
+ }
+ };
+
+ const inputClassName = `Numeric ${props.disable ? "disabled" : ""
+ } ${props?.focused ? "focused" : ""} ${props.noneditable ? "noneditable" : ""} ${props?.errors?.errorMessage ? "error" : ""}`
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default OTPInput;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/PageBasedInput.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/PageBasedInput.js
new file mode 100644
index 00000000..3804efdf
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/PageBasedInput.js
@@ -0,0 +1,19 @@
+import React from "react";
+import Card from "./Card";
+import Button from "./Button";
+
+const PageBasedInput = ({ children, texts, onSubmit }) => {
+ return (
+ {label}
+
+
+
+ {otp.map((data, index) => (
+ (inputRefs.current[index] = el)}
+ onChange={(e) => handleInputChange(e, index)}
+ onKeyDown={(e) => handleKeyDown(e, index)}
+ onBlur={() => handleBlur(index)}
+ onPaste={handlePaste}
+ placeholder={placeholder && placeholder[index]}
+ className={`otp-input ${error ? "error" : ""}`}
+ />
+ ))}
+
+ {error && error.length > 0 && (
+
+
+ {children}
+
+
+
+ );
+};
+
+export default PageBasedInput;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Panels.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Panels.js
new file mode 100644
index 00000000..4fbd63f8
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Panels.js
@@ -0,0 +1,161 @@
+import React, { useState, useEffect } from "react";
+import { SVG } from "./SVG";
+import PropTypes from "prop-types";
+import Animation from "./Animation";
+import successAnimation from "../constants/animations/success.json";
+import errorAnimation from "../constants/animations/error.json";
+import { Colors} from "../constants/colors/colorconstants";
+import { iconRender } from "../utils/iconRender";
+
+const Panels = (props) => {
+
+ const primaryColor = Colors.lightTheme.paper.primary;
+
+ const useDeviceType = () => {
+ const [deviceType, setDeviceType] = useState("desktop");
+
+ useEffect(() => {
+ const updateDeviceType = () => {
+ const width = window.innerWidth;
+ if (width <= 480) {
+ setDeviceType("mobile");
+ } else if (width > 481 && width <= 768) {
+ setDeviceType("tablet");
+ } else {
+ setDeviceType("desktop");
+ }
+ };
+
+ updateDeviceType();
+ window.addEventListener("resize", updateDeviceType);
+ return () => window.removeEventListener("resize", updateDeviceType);
+ }, []);
+
+ return deviceType;
+ };
+
+ const deviceType = useDeviceType();
+
+ const getAnimationDimensions = () => {
+ if (props?.animationProps?.width && props?.animationProps?.height) {
+ return {
+ width: props.animationProps.width,
+ height: props.animationProps.height,
+ };
+ }
+ if(props?.type === "success" && !props?.showAsSvg){
+ switch (deviceType) {
+ case "mobile":
+ return { width: 80, height: 80 };
+ case "tablet":
+ return { width: 100, height: 100 };
+ case "desktop":
+ default:
+ return { width: 120, height: 120 };
+ }
+ }
+ switch (deviceType) {
+ case "mobile":
+ return { width: 56, height: 56 };
+ case "tablet":
+ return { width: 64, height: 64 };
+ case "desktop":
+ default:
+ return { width: 74, height: 74 };
+ }
+ };
+
+ const { width, height } = getAnimationDimensions();
+
+ const IconRender = (iconReq, iconFill) => {
+ const fill = iconFill || primaryColor;
+ return iconRender(
+ iconReq,
+ fill,
+ width,
+ height,
+ "digit-panel-customIcon"
+ );
+ };
+
+ const icon = IconRender(props?.customIcon, props?.iconFill);
+
+
+ return (
+
+
+
+
+
+ );
+};
+
+Panels.propTypes = {
+ className: PropTypes.string,
+ message: PropTypes.string,
+ type: PropTypes.string,
+ info: PropTypes.string,
+ response: PropTypes.string,
+ customIcon: PropTypes.string,
+ iconFill: PropTypes.string,
+ style: PropTypes.object,
+ multipleResponses: PropTypes.array,
+ showAsSvg:PropTypes.bool
+};
+
+Panels.defaultProps = {
+ type: "success",
+};
+
+export default Panels;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Paragraph.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Paragraph.js
new file mode 100644
index 00000000..0973f4cc
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Paragraph.js
@@ -0,0 +1,11 @@
+import React from "react";
+
+const Paragraph = (props) => {
+ const {value, customClassName, customStyle, inputRef} = props;
+
+ return (
+
+ {props?.type === "success" ? (
+ props?.customIcon ? (
+ icon
+ ) : props?.showAsSvg ? (
+
+ {props?.message}
+
+
+ {props?.info}
+ {props?.response}
+ {props?.multipleResponses && (
+
+ {props?.multipleResponses.map((response) => (
+
+ )}
+ {response}
+ ))}
+ {value}
+ ) +} + +export default Paragraph; \ No newline at end of file diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/PlusMinusInput.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/PlusMinusInput.js new file mode 100644 index 00000000..89d7b574 --- /dev/null +++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/PlusMinusInput.js @@ -0,0 +1,47 @@ +import React, { useState } from "react"; + +const PlusMinusInput = (props, customProps) => { + let count = props?.defaultValues || 1; + + function incrementCount() { + if (count >= 1) { + count = count + 1; + props.onSelect(count); + } else { + count = 1; + props.onSelect(count); + } + } + function decrementCount() { + if (count > 1) { + count = count - 1; + props.onSelect(count); + } else { + count = 1; + props.onSelect(count); + } + } + + return ( +
+
+
+
+
+ handleOverlayClick()}
+ ref={overlayRef}
+ onKeyDown={handleKeyDown}
+ tabIndex={0}
+ >
+
+ );
+};
+
+PopUp.propTypes = {
+ className: PropTypes.string,
+ style: PropTypes.object,
+ children: PropTypes.node,
+ headerclassName: PropTypes.string,
+ footerclassName: PropTypes.string,
+ headerChildren: PropTypes.node,
+ footerChildren: PropTypes.node,
+ onClose: PropTypes.func,
+ type: PropTypes.string,
+ onOverlayClick: PropTypes.func,
+};
+
+export default PopUp;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/PrivateRoute.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/PrivateRoute.js
new file mode 100644
index 00000000..20c8fdc5
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/PrivateRoute.js
@@ -0,0 +1,34 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Route, Redirect } from "react-router-dom";
+
+export const PrivateRoute = ({ component: Component, roles, ...rest }) => {
+ return (
+ e.stopPropagation()}
+ >
+ {props?.type === "alert" ? (
+
+
+ {!props?.customIcon && props?.showAlertAsSvg && (
+
+ ) : (
+ <>
+
+ {props?.alertHeading || "Alert!"}
+
+
+ {props?.alertMessage || "AlertMessage"}
+
+
+
+
+ )}
+
+
+
+ {props?.showIcon && !props?.customIcon && (
+
+ handleClose()}
+ >
+
+ {props?.heading && (
+
+
+ {StringManipulator(
+ "TOSENTENCECASE",
+ StringManipulator("TRUNCATESTRING", props?.heading, {
+ maxLength: props?.headerMaxLength || 256,
+ })
+ )}
+
+ )}
+ {props?.subheading && (
+
+ {StringManipulator(
+ "TOSENTENCECASE",
+ StringManipulator(
+ "TRUNCATESTRING",
+ props?.subheading,
+ {
+ maxLength: props?.subHeaderMaxLength || 256,
+ }
+ )
+ )}
+
+ )}
+
+ {props?.description && (
+
+ {hasFooterChildren && (
+ {props?.description}
+ )}
+ {props?.children}
+
+
+ )}
+
+ {finalFooterArray}
+
+
+ {props?.options?.map((option, ind) => {
+ if (props?.optionsKey && !props?.isDependent) {
+ return (
+
+ );
+};
+
+RadioButtons.propTypes = {
+ selectedOption: PropTypes.any,
+ onSelect: PropTypes.func,
+ options: PropTypes.any,
+ optionsKey: PropTypes.string,
+ innerStyles: PropTypes.any,
+ style: PropTypes.any,
+};
+
+RadioButtons.defaultProps = {};
+
+export default RadioButtons;
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Rating.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Rating.js
new file mode 100644
index 00000000..2a490f86
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Rating.js
@@ -0,0 +1,79 @@
+import React, { useRef } from "react";
+import PropTypes from "prop-types";
+import { SVG } from "./SVG";
+
+const Rating = (props) => {
+ var stars = [];
+ const star = useRef(null);
+
+ for (var i = 1; i <= props.maxRating; i++) {
+ if (i - props.currentRating <= 0) {
+ const index = i;
+ // stars.push(
+
+ selectOption(option)}
+ disabled={props?.disabled}
+ name={props?.name}
+ id={props?.id}
+ ref={props?.inputRef}
+ />
+
+
+
+
+ );
+ } else if (props?.optionsKey && props?.isDependent) {
+ return (
+
+
+ selectOption(option)}
+ disabled={props?.disabled}
+ name={props?.name}
+ id={props?.id}
+ ref={props?.inputRef}
+ />
+
+
+
+
+ );
+ } else {
+ return (
+
+
+ selectOption(option)}
+ disabled={props?.disabled}
+ name={props?.name}
+ ref={props?.inputRef}
+ />
+
+
+
+
+
+ );
+ }
+ })}
+
+ {props.text ? props.text : ""} {stars}
+
+ );
+};
+
+Rating.propTypes = {
+ maxRating: PropTypes.number,
+ currentRating: PropTypes.number,
+ onFeedback: PropTypes.func,
+ id: PropTypes.string,
+ withText: PropTypes.bool,
+ styles: PropTypes.object,
+ className: PropTypes.string,
+ text: PropTypes.string,
+ starStyles: PropTypes.object,
+};
+
+Rating.defaultProps = {
+ maxRating: 5,
+ currentRating: 0,
+ onFeedback: () => {},
+ id: "0",
+ withText: false,
+ styles: {},
+ className: "",
+ text: "",
+ starStyles: {},
+};
+
+export default Rating;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/RoundedLabel.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/RoundedLabel.js
new file mode 100644
index 00000000..aa2fa5e0
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/RoundedLabel.js
@@ -0,0 +1,5 @@
+import React from "react";
+
+const RoundedLabel = ({ count }) => (count ? {count}
:
+
+ )
+ }
+ default : {
+ return {t(header)}
+
+ {header && renderHeader()}
+
+ {showToast && (
+
+ )}
+ handleOptionClick(option)}
+ >
+ {option.prefixIcon && (
+
+ {IconRender(option?.prefixIcon, isSelected)}
+
+ )}
+ {option.name}
+ {option.suffixIcon && (
+
+ {IconRender(option?.suffixIcon, isSelected)}
+
+ )}
+
+ );
+ };
+
+ return (
+
+
+ );
+};
+
+SelectionTag.propTypes = {
+ width: PropTypes.number,
+ errorMessage: PropTypes.string,
+ options: PropTypes.arrayOf(
+ PropTypes.shape({
+ name: PropTypes.string.isRequired,
+ code: PropTypes.string.isRequired,
+ prefixIcon: PropTypes.node,
+ suffixIcon: PropTypes.node,
+ })
+ ).isRequired,
+ onSelectionChanged: PropTypes.func.isRequired,
+ allowMultipleSelection: PropTypes.bool,
+};
+
+export default SelectionTag;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/SideNav.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/SideNav.js
new file mode 100644
index 00000000..9d2e4220
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/SideNav.js
@@ -0,0 +1,334 @@
+import React, { useState, useEffect,Fragment } from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { SVG, TextInput } from "../atoms";
+import { IMAGES } from "../constants/images/images";
+import { Colors } from "../constants/colors/colorconstants";
+import { iconRender } from "../utils/iconRender";
+import { Spacers } from "../constants/spacers/spacers";
+
+const SideNav = ({
+ items,
+ theme,
+ variant,
+ transitionDuration,
+ className,
+ styles,
+ hideAccessbilityTools,
+ expandedWidth,
+ collapsedWidth,
+ onSelect,
+ onBottomItemClick,
+ enableSearch
+}) => {
+ const { t } = useTranslation();
+ const [hovered, setHovered] = useState(false);
+ const [search, setSearch] = useState("");
+ const [selectedItem, setSelectedItem] = useState({});
+ const [expandedItems, setExpandedItems] = useState({});
+
+ const darkThemeColor = Colors.lightTheme.paper.primary;
+ const lightThemeColor = Colors.lightTheme.primary[2];
+
+ const primaryColor = theme === "dark" ? darkThemeColor : lightThemeColor;
+ const iconSize = Spacers.spacer6;
+ const bottomIconSize = Spacers.spacer4;
+
+ const handleArrowClick = (item, index, parentIndex) => {
+ if (item.children) {
+ setExpandedItems((prev) => ({
+ ...prev,
+ [index]: !prev[index],
+ }));
+ }
+ };
+
+ const handleItemClick = (item, index, parentIndex) => {
+ setSelectedItem({ item: item, index: index, parentIndex: parentIndex });
+ onSelect && onSelect({ item: item, index: index, parentIndex: parentIndex });
+ };
+
+ const isParentOfSelectedItem = (index) => {
+ const { parentIndex } = selectedItem;
+ return parentIndex && parentIndex.toString().startsWith(index);
+ };
+
+ const IconRender = (
+ isSelected,
+ isParentOfSelectedItem,
+ iconReq,
+ iconFill,
+ width = iconSize,
+ height = iconSize
+ ) => {
+ return iconRender(
+ iconReq,
+ iconFill ||
+ (theme === "dark" ||
+ (theme === "light" && variant === "primary" && isSelected && hovered) ||
+ (theme === "light" &&
+ variant === "primary" &&
+ (isSelected || isParentOfSelectedItem) &&
+ !hovered)
+ ? darkThemeColor
+ : lightThemeColor),
+ width,
+ height,
+ `digit-sidebar-item-icon`
+ );
+ };
+
+ const filterItems = (items, query) => {
+ if (!query) {
+ return items;
+ }
+
+ return items
+ .map((item) => {
+ if (item.label.toLowerCase().includes(query.toLowerCase())) {
+ return item;
+ }
+
+ if (item.children) {
+ const filteredChildren = filterItems(item.children, query);
+ if (filteredChildren.length > 0) {
+ return { ...item, children: filteredChildren };
+ }
+ }
+
+ return null;
+ })
+ .filter((item) => item !== null);
+ };
+
+ const renderSearch = () => {
+ return (
+ <>
+ {hovered ? (
+
+ {options?.map(renderOption)}
+
+ {errorMessage && (
+
+ setSearch(e.target.value)}
+ placeholder={t("Search")}
+ autoFocus={true}
+ iconFill={primaryColor}
+ >
+
+ ) : (
+
+
+ )}
+
+ );
+ };
+
+ const renderItems = (items, parentIndex = -1) =>
+ items?.map((item, index) => {
+ const currentIndex = parentIndex >= 0 ? `${parentIndex}-${index}` : index;
+ const isExpanded = expandedItems[currentIndex];
+ const isSelected = selectedItem.item === item;
+ const isTopLevel = parentIndex === -1;
+
+ return (
+
+
+ );
+ });
+
+ const filteredItems = filterItems(items, search);
+
+ const getImageUrl = (imageKey) => {
+ return IMAGES[imageKey];
+ };
+
+ const digitFooterImg =
+ theme === "dark"
+ ? getImageUrl("DIGIT_FOOTER_DARK")
+ : getImageUrl("DIGIT_FOOTER_LIGHT");
+
+ return (
+ handleItemClick(item, currentIndex, parentIndex)}
+ tabIndex={0}
+ >
+ {(isTopLevel || hovered) && (
+
+ {(isSelected || isParentOfSelectedItem(currentIndex)) &&
+ item?.selectedIcon
+ ? IconRender(
+ isSelected,
+ isParentOfSelectedItem(currentIndex),
+ item?.selectedIcon?.icon,
+ item?.selectedIcon?.iconFill,
+ item?.selectedIcon?.width,
+ item?.selectedIcon?.height
+ )
+ : IconRender(
+ isSelected,
+ isParentOfSelectedItem(currentIndex),
+ item?.icon?.icon,
+ item?.icon?.iconFill,
+ item?.icon?.width,
+ item?.icon?.height
+ )}
+
+ )}
+ {hovered && {item.label}}
+ {item.children && hovered && (
+ {
+ e.stopPropagation();
+ handleArrowClick(item, currentIndex, parentIndex);
+ }}
+ >
+ {isExpanded ? (
+
+ {item.children && isExpanded && hovered && (
+
+ {renderItems(item.children, currentIndex)}
+
+ )}
+ setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ >
+ {enableSearch && renderSearch()}
+
+ );
+};
+
+SideNav.propTypes = {
+ items: PropTypes.arrayOf(
+ PropTypes.shape({
+ path: PropTypes.string,
+ icon: PropTypes.object,
+ label: PropTypes.string.isRequired,
+ children: PropTypes.array,
+ })
+ ).isRequired,
+ theme: PropTypes.oneOf(["dark", "light"]),
+ variant: PropTypes.oneOf(["primary", "secondary"]),
+ collapsedWidth: PropTypes.string,
+ expandedWidth: PropTypes.string,
+ transitionDuration: PropTypes.number,
+ styles: PropTypes.object,
+ hideAccessbilityTools: PropTypes.bool,
+ enableSearch: PropTypes.bool,
+};
+
+SideNav.defaultProps = {
+ theme: "dark",
+ variant: "primary",
+ transitionDuration: 0.3,
+ styles: {},
+ enableSearch: true
+};
+
+export default SideNav;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/SidePanel.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/SidePanel.js
new file mode 100644
index 00000000..0f4f34b2
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/SidePanel.js
@@ -0,0 +1,224 @@
+import React, { useEffect, useState, useRef,Fragment } from "react";
+import PropTypes from "prop-types";
+import { SVG } from "./SVG";
+import { Colors } from "../constants/colors/colorconstants";
+import { Spacers } from "../constants/spacers/spacers";
+
+const SidePanel = ({
+ className = "",
+ styles = {},
+ type = "static",
+ position = "right",
+ children,
+ header,
+ footer,
+ bgActive = false,
+ isOverlay = false,
+ isDraggable = false,
+ hideArrow,
+ hideScrollIcon,
+ sections = [],
+ defaultOpenWidth,
+ defaultClosedWidth,
+ addClose,
+ closedContents,
+ closedSections,
+ closedHeader,
+ closedFooter,
+ transitionDuration,
+ onClose = null
+}) => {
+ const [isOpen, setIsOpen] = useState(true);
+ const sliderRef = useRef(null);
+ const [sliderWidth, setSliderWidth] = useState(defaultOpenWidth || 300);
+ const isDragging = useRef(false);
+
+ const iconColor = Colors.lightTheme.text.primary;
+ const iconSize = Spacers.spacer8;
+
+ const toggleSlider = () => {
+ if (type === "static") return;
+ if (isOpen) {
+ setIsOpen(false);
+ setSliderWidth(defaultClosedWidth || 64);
+ return;
+ }
+ setIsOpen((prevState) => !prevState);
+ if (!isOpen) {
+ setSliderWidth(defaultOpenWidth);
+ }
+ };
+
+ const handleClose = () => {
+ onClose ? onClose() : setIsOpen(false);
+ };
+
+ const handleMouseDown = (e) => {
+ if (isDraggable && type === "dynamic" && isOpen) {
+ isDragging.current = true;
+ document.addEventListener("mousemove", handleMouseMove);
+ document.addEventListener("mouseup", handleMouseUp);
+ }
+ };
+
+ const handleMouseMove = (e) => {
+ if (isDragging.current && sliderRef.current && isOpen) {
+ const newWidth =
+ position === "right" ? window.innerWidth - e.clientX : e.clientX;
+ setSliderWidth(
+ newWidth > (defaultClosedWidth || 64)
+ ? newWidth
+ : defaultClosedWidth || 64
+ );
+ }
+ };
+
+ const handleMouseUp = () => {
+ isDragging.current = false;
+ document.removeEventListener("mousemove", handleMouseMove);
+ document.removeEventListener("mouseup", handleMouseUp);
+ };
+
+ useEffect(() => {
+ return () => {
+ document.removeEventListener("mousemove", handleMouseMove);
+ document.removeEventListener("mouseup", handleMouseUp);
+ };
+ }, []);
+
+ useEffect(() => {}, [isOpen]);
+
+ return (
+ <>
+ {!bgActive && }
+
+ {filteredItems.length > 0 ? (
+ renderItems(filteredItems)
+ ) : (
+ hovered &&
+ {hovered && !hideAccessbilityTools && (
+ {t("No Results Found")}
+ )}
+
+ 
{
+ window
+ .open(
+ window?.globalConfigs?.getConfig?.("DIGIT_HOME_URL"),
+ "_blank"
+ )
+ .focus();
+ }}
+ />
+
+ )}
+
+
+
+ onBottomItemClick && onBottomItemClick("Help")}>
+
+ onBottomItemClick && onBottomItemClick("Settings")}>
+
+ onBottomItemClick && onBottomItemClick("Logout")}>
+
+ +
+ {type === "dynamic" && (
+
+
+ );
+};
+
+SidePanel.propTypes = {
+ className: PropTypes.string,
+ styles: PropTypes.object,
+ type: PropTypes.oneOf(["static", "dynamic"]),
+ position: PropTypes.oneOf(["left", "right"]),
+ children: PropTypes.node,
+ header: PropTypes.node,
+ footer: PropTypes.node,
+ addClose: PropTypes.bool,
+ closedContents: PropTypes.node,
+ closedSections: PropTypes.arrayOf(PropTypes.node),
+ closedHeader: PropTypes.node,
+ closedFooter: PropTypes.node,
+ transitionDuration: PropTypes.number,
+ bgActive: PropTypes.bool,
+ isOverlay: PropTypes.bool,
+ isDraggable: PropTypes.bool,
+ sections: PropTypes.arrayOf(PropTypes.node),
+ hideArrow: PropTypes.bool,
+ hideScrollIcon: PropTypes.bool,
+ defaultOpenWidth: PropTypes.number,
+ defaultClosedWidth: PropTypes.number,
+};
+
+export default SidePanel;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Stepper.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Stepper.js
new file mode 100644
index 00000000..c75bde5d
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Stepper.js
@@ -0,0 +1,139 @@
+import React,{useState,useEffect,useRef} from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import { SVG } from "./SVG";
+import StringManipulator from "./StringManipulator";
+import { Colors} from "../constants/colors/colorconstants";
+import Divider from "./Divider";
+
+const Stepper = ({
+ currentStep = 1,
+ onStepClick,
+ totalSteps,
+ customSteps,
+ direction,
+ style,
+ props,
+ className,
+ activeSteps,
+ hideDivider
+}) => {
+ const { t } = useTranslation();
+ const stepRefs = useRef([]);
+
+ const [isMobileView, setIsMobileView] = useState(
+ (window.innerWidth / window.innerHeight <= 9/16)
+ );
+ const onResize = () => {
+ if (window.innerWidth / window.innerHeight <= 9/16) {
+ if (!isMobileView) {
+ setIsMobileView(true);
+ }
+ } else {
+ if (isMobileView) {
+ setIsMobileView(false);
+ }
+ }
+ };
+ useEffect(() => {
+ window.addEventListener("resize", () => {
+ onResize();
+ });
+ return () => {
+ window.addEventListener("resize", () => {
+ onResize();
+ });
+ };
+ });
+
+ useEffect(() => {
+ // Scroll the current step into view when currentStep changes
+ if (stepRefs.current[currentStep]) {
+ stepRefs.current[currentStep].scrollIntoView({
+ behavior: "smooth",
+ block: "center",
+ inline: "center",
+ });
+ }
+ }, [currentStep]);
+
+ useEffect(() => {
+ // This useEffect will trigger a re-render when number of activeSteps changes
+ }, [activeSteps]);
+
+ const Color = Colors.lightTheme.paper.primary;
+
+ const getAction = (totalSteps, customSteps) => {
+ if (customSteps && Object.keys(customSteps).length !== 0) {
+ return Object.values(customSteps);
+ }
+ return Array.from(
+ { length: totalSteps },
+ (_, index) => `Step ${index + 1}`
+ );
+ };
+ const actions = getAction(totalSteps, customSteps);
+
+ return (
+
+ {!hideScrollIcon && }
+ {!hideArrow && (
+
+ )}
+
+
+ )}
+
+ {header && isOpen && (
+
+
+ {addClose && isOpen && (
+
+ )}
+ {
+ closedHeader && !isOpen && (
+
+
+ )}
+ {header}
+
+ {closedHeader}
+
+ )
+ }
+ 0 ? "with-sections" : ""
+ }`}
+ >
+ {isOpen
+ ? sections && sections?.length > 0
+ ? sections?.map((section, index) => (
+
+
+ {footer && isOpen &&
+
+ ))
+ : children
+ : sections && sections?.length > 0
+ ? closedSections?.map((section, index) => (
+
+ {section}
+
+ {index < sections.length - 1 && (
+
+ )}
+
+
+ ))
+ : closedContents}
+
+ {section}
+
+ {index < sections.length - 1 && (
+
+ )}
+ {footer}
}
+ {closedFooter && !isOpen && {closedFooter}
}
+
+ {actions.map((action, index, arr) => (
+
+ );
+};
+export default Stepper;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/StringManipulator.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/StringManipulator.js
new file mode 100644
index 00000000..d370954c
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/StringManipulator.js
@@ -0,0 +1,61 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const StringManipulator = (functionName, key, props) => {
+
+
+
+ const isStringManipulated=window?.globalConfigs?.getConfig("IS_STRING_MANIPULATED")|| false;
+ if(!isStringManipulated){
+ return key;
+ }
+ const manipulateString = () => {
+ if (!key) return null;
+
+ switch (functionName) {
+ case "TOSENTENCECASE":
+ return toSentenceCase(key);
+ case "CAPITALIZEFIRSTLETTER":
+ return capitalizeFirstLetter(key);
+ case "TOTITLECASE":
+ return toTitleCase(key);
+ case "TRUNCATESTRING":
+ return truncateString(key, props?.maxLength);
+ default:
+ return key;
+ }
+ };
+
+ const toSentenceCase = (str) => {
+ return str.toLowerCase().replace(/(^\s*\w|[.!?]\s*\w)/g, (match) => {
+ return match.toUpperCase();
+ });
+ };
+
+ const capitalizeFirstLetter = (str) => {
+ return str.replace(/\b\w/g, char => char.toUpperCase());
+ };
+
+ const toTitleCase = (str) => {
+ return str.toLowerCase().replace(/\b\w|\b[^a-zA-Z0-9\s]*\w/g, (c) => {
+ return c.toUpperCase();
+ });
+ };
+
+ const truncateString = (str, maxLength) => {
+ if (str.length > maxLength) {
+ return str.slice(0, maxLength) + "...";
+ }
+ return str;
+ };
+
+ return manipulateString();
+};
+
+StringManipulator.propTypes = {
+ functionName: PropTypes.string,
+ key: PropTypes.string,
+ props: PropTypes.object,
+};
+
+export default StringManipulator;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/SubmitBar.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/SubmitBar.js
new file mode 100644
index 00000000..475d3236
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/SubmitBar.js
@@ -0,0 +1,41 @@
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+
+const SubmitBar = forwardRef((props, ref) => {
+ return (
+
+ );
+});
+
+SubmitBar.propTypes = {
+ /**
+ * Is it a normal button or submit button?
+ */
+ submit: PropTypes.any,
+ /**
+ * style for the button
+ */
+ style: PropTypes.object,
+ /**
+ * SubmitButton contents
+ */
+ label: PropTypes.string,
+ /**
+ * Optional click handler
+ */
+ onSubmit: PropTypes.func,
+};
+
+SubmitBar.defaultProps = {};
+
+export default SubmitBar;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/SummaryCardFieldPair.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/SummaryCardFieldPair.js
new file mode 100644
index 00000000..c6d6af09
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/SummaryCardFieldPair.js
@@ -0,0 +1,127 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Button from "./Button";
+import { CustomSVG } from "./CustomSVG";
+import { useTranslation } from "react-i18next";
+
+const SummaryCardFieldPair = ({
+ label,
+ value,
+ inline,
+ className,
+ style,
+ type,
+ renderCustomContent,
+}) => {
+ const { t } = useTranslation();
+ const renderFileIcon = (fileType, onClick) => {
+ const handleClick =
+ onClick && typeof onClick === "function" ? onClick : undefined;
+
+ switch (fileType) {
+ case "pdf":
+ return (
+ (stepRefs.current[index] = el)}
+ className={`digit-stepper-checkpoint ${direction ? direction : ""}`}
+ style={{ cursor: "pointer" }}
+ key={index}
+ onClick={() => {
+ currentStep = index;
+ onStepClick(index);
+ }}
+ >
+
+ ))}
+
+
+ {((index < currentStep - 1) || (index < activeSteps) ) ? (
+
+ {index < arr.length - 1 && (
+
+ )}
+ {index < arr.length - 1 && direction === "vertical" && !hideDivider && (
+ {t(value)}
;
+ case "image":
+ return (
+ {t(value)}
;
+ }
+ };
+
+ return (
+
+
+ );
+};
+
+SummaryCardFieldPair.propTypes = {
+ label: PropTypes.string,
+ value: PropTypes.string,
+ type: PropTypes.oneOf(["text", "image", "document", "action", "custom"]),
+ inline: PropTypes.bool,
+ className: PropTypes.string,
+ style: PropTypes.object,
+ renderCustomContent: PropTypes.func,
+};
+
+export default SummaryCardFieldPair;
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Switch.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Switch.js
new file mode 100644
index 00000000..27f0b321
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Switch.js
@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+
+const Switch = ({
+ isLabelFirst = false,
+ label = "",
+ shapeOnOff = false,
+ isCheckedInitially = false,
+ onToggle = () => {},
+ className,
+ style,
+ disable = false,
+ switchStyle
+}) => {
+ const [isChecked, setIsChecked] = useState(isCheckedInitially);
+ useEffect(() => {
+ setIsChecked(isCheckedInitially);
+ }, [isCheckedInitially]);
+
+ const handleToggle = () => {
+ if (!disable) {
+ setIsChecked(!isChecked);
+ onToggle(!isChecked);
+ }
+ };
+
+ return (
+ {label}
+ {renderValue()}
+
+ {isLabelFirst && (
+ {label}
+ )}
+
+ );
+};
+
+export default Switch;
+
+Switch.propTypes = {
+ isLabelFirst: PropTypes.bool,
+ label: PropTypes.string,
+ shapeOnOff: PropTypes.bool,
+ isCheckedInitially: PropTypes.bool,
+ onToggle: PropTypes.func,
+ className: PropTypes.string,
+ style: PropTypes.object,
+ switchStyle: PropTypes.object,
+ disable: PropTypes.bool,
+};
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Tab.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Tab.js
new file mode 100644
index 00000000..07612f3f
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Tab.js
@@ -0,0 +1,130 @@
+import React, { useState, useEffect, useRef } from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import StringManipulator from "./StringManipulator";
+import { iconRender } from "../utils/iconRender";
+import { Colors } from "../constants/colors/colorconstants";
+import { Spacers } from "../constants/spacers/spacers";
+
+const Tab = ({
+ configNavItems,
+ configItemKey,
+ activeLink,
+ setActiveLink,
+ showNav = false,
+ children,
+ style = {},
+ className = "",
+ navClassName = "",
+ navStyles = {},
+ itemStyle = {},
+ onTabClick,
+ configDisplayKey
+}) => {
+ const { t } = useTranslation();
+ const primaryColor = Colors.lightTheme.primary[1];
+ const secondaryColor = Colors.lightTheme.text.secondary;
+ const iconSize = Spacers.spacer6;
+
+ const itemRefs = useRef([]);
+ const [maxWidth, setMaxWidth] = useState(0);
+
+ const setActive = (item) => {
+ setActiveLink(item?.[configItemKey]);
+ onTabClick && onTabClick(item);
+ };
+
+ const calculateMaxWidth = () => {
+ // Calculate the maximum width of all tab items
+ const widths = itemRefs.current.map(
+ (ref) => ref?.getBoundingClientRect().width || 0
+ );
+ const maxItemWidth = Math.max(...widths);
+ setMaxWidth(maxItemWidth);
+ };
+
+ useEffect(() => {
+ calculateMaxWidth();
+ }, [configNavItems, activeLink]);
+
+ return (
+ {
+ if (e.key === 'Enter' || e.key === ' ') {
+ handleToggle();
+ }
+ }}
+ >
+ {shapeOnOff && isChecked && (
+
+ )}
+
+ {shapeOnOff && !isChecked && (
+
+ )}
+
+ {!isLabelFirst && (
+ {label}
+ )}
+
+ {showNav && (
+
+ );
+};
+
+Tab.propTypes = {
+ items: PropTypes.arrayOf(
+ PropTypes.shape({
+ name: PropTypes.string,
+ code: PropTypes.string,
+ icon: PropTypes.string,
+ })
+ ).isRequired,
+ configItemKey: PropTypes.string,
+ style: PropTypes.object,
+ navStyles: PropTypes.object,
+ itemStyle: PropTypes.object,
+ showNav: PropTypes.bool,
+ className: PropTypes.string,
+ navClassName: PropTypes.string,
+ activeLink: PropTypes.string,
+};
+
+Tab.defaultProps = {
+ showNav: false,
+ style: {},
+ className: "",
+ navClassName: "",
+ navStyles: {},
+ itemStyle: {},
+};
+
+export default Tab;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Table.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Table.js
new file mode 100644
index 00000000..695c7049
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Table.js
@@ -0,0 +1,273 @@
+import { useGlobalFilter, usePagination, useRowSelect, useSortBy, useTable } from "react-table";
+import React, { useEffect, useState, useRef, forwardRef } from "react";
+import { CustomSVG } from "./CustomSVG";
+import CheckBox from "./CheckBox";
+import Footer from "./Footer";
+import Toast from "./Toast";
+import Button from "./Button";
+
+const noop = () => {};
+
+const IndeterminateCheckbox = forwardRef(({ indeterminate, ...rest }, ref) => {
+ const defaultRef = useRef();
+ const resolvedRef = ref || defaultRef;
+
+ useEffect(() => {
+ resolvedRef.current.indeterminate = indeterminate;
+ }, [resolvedRef, indeterminate]);
+
+ return (
+
+ {configNavItems?.map((item, index) => (
+
+ )}
+ {children}
+ setActive(item)}
+ >
+ (itemRefs.current[index] = el)}
+ className="digit-tab-item"
+ style={
+ maxWidth
+ ? {
+ minWidth: `${maxWidth}px`,
+ ...itemStyle,
+ }
+ : { ...itemStyle }
+ }
+ >
+ {item?.icon && (
+
+ ))}
+
+ {iconRender(
+ item?.icon,
+ activeLink === item?.[configItemKey]
+ ? primaryColor
+ : secondaryColor,
+ iconSize,
+ iconSize,
+ ``
+ )}
+
+ )}
+
+ {StringManipulator(
+ "CAPITALIZEFIRSTLETTER",
+ configDisplayKey ? t(item?.[configDisplayKey]) : t(item?.[configItemKey])
+ )}
+
+
+
+
+ ),
+ Cell: ({ row }) => (
+
+
+ ),
+ },
+ ...columns,
+ ]);
+ }
+ }
+ );
+ let isTotalColSpanRendered = false;
+ const [toast, setToast] = useState({ show: false, label: "", error: false });
+
+ useEffect(() => {
+ onSort(sortBy);
+ }, [onSort, sortBy]);
+
+ useEffect(() => setGlobalFilter(onSearch), [onSearch, setGlobalFilter, data]);
+
+ const handleSelection = async () => {
+ const selectedRows = rows?.filter((ele) => Object.keys(selectedRowIds)?.includes(ele?.id));
+ const response = await tableSelectionHandler(selectedRows, t);
+ setToast({ show: true, label: t(response?.label), error: !response?.isSuccess });
+ };
+
+ const handleToastClose = () => {
+ setToast({ show: false, label: "", error: false });
+ };
+
+ useEffect(() => {
+ if (toast?.show) {
+ setTimeout(() => {
+ handleToastClose();
+ }, 3000);
+ }
+ }, [toast?.show]);
+
+ //note -> adding data prop in dependency array to trigger filter whenever state of the table changes
+ //use case -> without this if we enter string to search and then click on it's attendence checkbox or skill selector for that matter then the global filtering resets and whole table is shown
+ return (
+ | + {showAutoSerialNo && typeof showAutoSerialNo == "string" ? t(showAutoSerialNo) : t("TB_SNO")} + | + )} + {headerGroup.headers.map((column) => ( +
+ {column.render("Header")}
+ {column.isSorted ? column.isSortedDesc ? |
+ ))}
+
|---|---|
| {i + 1} | } + {row.cells.map((cell) => { + return ( +
+ {cell.attachment_link ? (
+
+ {cell.render("Cell")}
+
+ ) : (
+ |
+ );
+ })}
+
+ {`${t("CS_COMMON_ROWS_PER_PAGE")} :`}
+
+
+
+ {pageIndex * pageSize + 1}
+ {"-"}
+ {manualPagination
+ ? (currentPage + 1) * pageSizeLimit > totalRecords
+ ? totalRecords
+ : (currentPage + 1) * pageSizeLimit
+ : pageIndex * pageSize + page?.length}{" "}
+ {/* {(pageIndex + 1) * pageSizeLimit > rows.length ? rows.length : (pageIndex + 1) * pageSizeLimit}{" "} */}
+ {totalRecords ? `of ${manualPagination ? totalRecords : rows.length}` : ""}
+ {" "}
+
+ {/* to go to first and last page we need to do a manual pagination , it can be updated later*/}
+ {!manualPagination && pageIndex != 0 && gotoPage(0)} className={"cp"} />}
+ {canPreviousPage && manualPagination && onFirstPage && manualPagination && onFirstPage()} className={"cp"} />}
+ {canPreviousPage && (manualPagination ? onPrevPage() : previousPage())} className={"cp"} />}
+ {canNextPage && (manualPagination ? onNextPage() : nextPage())} className={"cp"} />}
+ {!manualPagination && pageIndex != pageCount - 1 && gotoPage(pageCount - 1)} className={"cp"} />}
+ {rows.length == pageSizeLimit && canNextPage && manualPagination && onLastPage && (
+ manualPagination && onLastPage()} className={"cp"} />
+ )}
+ {/* to go to first and last page we need to do a manual pagination , it can be updated later*/}
+
+ )}
+ {Object.keys(selectedRowIds)?.length > 0 && (
+
+ )}
+ {toast?.show &&
+ {StringManipulator(
+ "TOSENTENCECASE",
+ StringManipulator(
+ "TRUNCATESTRING",
+ accessor
+ ? getValueFromAccessor(cellData, accessor)
+ : cellData?.label,
+ {
+ maxLength: cellData?.maxLength || defaultmaxChars,
+ }
+ )
+ )}
+
+ );
+ }
+ return cellData;
+ }
+ case "tag":
+ return (
+
+ {showIcon && iconToShow}
+
+ {label}
+
+
+ );
+};
+
+Tag.propTypes = {
+ className: PropTypes.string,
+ iconClassName:PropTypes.string,
+ iconColor:PropTypes.string,
+ label: PropTypes.string.isRequired,
+ style: PropTypes.object,
+ stroke: PropTypes.bool,
+ type: PropTypes.string,
+};
+
+Tag.defaultProps = {
+ className: "",
+ style: {},
+ type: "monochrome",
+ stroke: false,
+ showIcon: true,
+ labelStyle: {},
+ alignment: "center",
+ iconColor:"",
+ iconClassName:""
+};
+
+export default Tag;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Telephone.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Telephone.js
new file mode 100644
index 00000000..68935072
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Telephone.js
@@ -0,0 +1,26 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { SVG } from "./SVG";
+
+const TelePhone = (props) => (
+
+
+
+
+ {(caption || header || subHeader) && (
+
+ );
+};
+
+TextBlock.propTypes = {
+ wrapperClassName: PropTypes.string,
+ headerContentClassName: PropTypes.string,
+ caption: PropTypes.string,
+ captionClassName: PropTypes.string,
+ header: PropTypes.string,
+ headerClassName: PropTypes.string,
+ subHeader: PropTypes.string,
+ subHeaderClassName: PropTypes.string,
+ body: PropTypes.string,
+ bodyClassName: PropTypes.string,
+};
+
+TextBlock.defaultProps = {
+ wrapperClassName: "",
+ headerContentClassName: "",
+ caption: "",
+ captionClassName: "",
+ header: "",
+ headerClassName: "",
+ subHeader: "",
+ subHeaderClassName: "",
+ body: "",
+ bodyClassName: "",
+};
+
+export default TextBlock;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TextInput.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TextInput.js
new file mode 100644
index 00000000..27f6d5d6
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TextInput.js
@@ -0,0 +1,491 @@
+import React, { forwardRef, useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { SVG } from "./SVG";
+import StringManipulator from "./StringManipulator";
+import { Colors} from "../constants/colors/colorconstants";
+import { getUserType } from "../utils/digitUtils";
+
+
+const TextInput = (props) => {
+ const user_type = getUserType();
+ const [date, setDate] = useState(props?.type === "date" && props?.value);
+ const [visibility, setVisibility] = useState(false);
+ const [inputType, setInputType] = useState(props?.type || "text");
+ const data = props?.watch
+ ? {
+ fromDate: props?.watch("fromDate"),
+ toDate: props?.watch("toDate"),
+ }
+ : {};
+
+ const handleDate = (event) => {
+ const { value } = event?.target;
+ setDate(value);
+ props?.onChange(value);
+ };
+ const incrementCount = () => {
+ const newValue = Number(props.value) + (Number(props?.step) ? Number(props?.step) : 1);
+ props.onChange(newValue);
+ };
+
+ const decrementCount = () => {
+ const newValue = Number(props.value) - (Number(props?.step) ? Number(props?.step) : 1);
+ const finalValue = props?.allowNegativeValues ? newValue : Math.max(newValue, 0);
+ props.onChange(finalValue);
+ };
+
+ const renderPrefix = () => {
+ const prefixValue = props?.populators?.prefix || "";
+ if (props?.type === "numeric") {
+ return (
+
+ );
+ }
+ if (prefixValue) {
+ return (
+
+ );
+ }
+ return null;
+ };
+
+ const renderSuffix = () => {
+ const suffixValue = props?.populators?.suffix || "";
+ if (props?.type === "numeric") {
+ return (
+
+ );
+ }
+ if (
+ props?.type === "text" &&
+ !props?.populators?.customIcon &&
+ suffixValue
+ ) {
+ return (
+
+ );
+ }
+ return null;
+ };
+
+ const handleVisibility = () => {
+ setVisibility(!visibility);
+ const newType = !visibility ? "text" : "password";
+ setInputType(newType);
+ props.onChange(props?.value);
+ };
+
+ const handleLocationClick = () => {
+ if (navigator.geolocation) {
+ navigator.geolocation.getCurrentPosition(
+ (position) => {
+ const { latitude, longitude } = position.coords;
+ props.onChange(`${latitude}, ${longitude}`);
+ },
+ (error) => {
+ console.error("Error getting location:", error);
+ }
+ );
+ } else {
+ console.error("Geolocation is not supported");
+ }
+ };
+
+ const disabledColor = Colors.lightTheme.generic.divider;
+ const iconColor = Colors.lightTheme.generic.inputBorder;
+
+ const renderIcon = () => {
+ const reqIcon = props?.type;
+ const iconFill = props?.iconFill ? props?.iconFill : props?.disabled
+ ? disabledColor
+ : props?.nonEditable
+ ? "#b1b4b6"
+ : iconColor;
+ if (reqIcon) {
+ if (reqIcon === "geolocation") {
+ return (
+
+ {caption && (
+
+ )}
+ {body && (
+
+ {caption}
+
+ )}
+ {header && (
+
+ {header}
+
+ )}
+ {subHeader && (
+
+ {subHeader}
+
+ )}
+ {body}
+ )}
+
+ {props.required ? (
+
+
+ {renderPrefix()}
+ {
+ if (props?.type === "number" && props?.maxlength) {
+ if (event.target.value.length > props?.maxlength) {
+ event.target.value = event.target.value.slice(0, -1);
+ }
+ }
+ if (props?.type === "numeric") {
+ event.target.value = event.target.value.replace(
+ /[^0-9]/g,
+ ""
+ );
+ }
+ if (props?.onChange) {
+ props?.onChange(event);
+ }
+ if (props.type === "date") {
+ handleDate(event);
+ }
+ }}
+ ref={props.inputRef}
+ value={props?.value}
+ style={{ ...props.style }}
+ defaultValue={props.defaultValue}
+ minLength={props.minlength}
+ maxLength={props.maxlength}
+ max={props.max}
+ pattern={
+ props?.validation && props.ValidationRequired
+ ? props?.validation?.pattern
+ : props.pattern
+ }
+ min={props.min}
+ readOnly={props.nonEditable}
+ title={
+ props?.validation && props.ValidationRequired
+ ? props?.validation?.title
+ : props.title
+ }
+ step={props.step}
+ autoFocus={props.autoFocus}
+ onBlur={props.onBlur}
+ autoComplete="off"
+ disabled={props.disabled}
+ onFocus={props?.onFocus}
+ nonEditable={props.nonEditable}
+ config={props.config}
+ populators={props.populators}
+ onClick={(event) => {
+ if (props.type === "date" || (props.type === "time")) {
+ try {
+ event.target.showPicker();
+ } catch (error) {
+ console.error("Error opening picker:", error);
+ }
+ }
+ }}
+ />
+ {renderSuffix()}
+ {props.signature && props.signatureImg}
+ {icon && (
+
+ {icon}
+
+ )}
+
+ ) : (
+
+ {renderPrefix()}
+ {
+ if (props?.type === "number" && props?.maxlength) {
+ if (event.target.value.length > props?.maxlength) {
+ event.target.value = event.target.value.slice(0, -1);
+ }
+ }
+ if (props?.type === "numeric") {
+ event.target.value = event.target.value.replace(
+ /[^0-9]/g,
+ ""
+ );
+ }
+ if (props?.onChange) {
+ props?.onChange(event);
+ }
+ if (props.type === "date") {
+ handleDate(event);
+ }
+ }}
+ ref={props.inputRef}
+ value={props?.value}
+ style={{ ...props.style }}
+ defaultValue={props.defaultValue}
+ minLength={props.minlength}
+ maxLength={props.maxlength}
+ max={props.max}
+ required={
+ props?.validation && props.ValidationRequired
+ ? props?.validation?.isRequired
+ : props.isRequired ||
+ (props.type === "date" &&
+ (props.name === "fromDate" ? data.toDate : data.fromDate))
+ }
+ pattern={
+ props?.validation && props.ValidationRequired
+ ? props?.validation?.pattern
+ : props.pattern
+ }
+ min={props.min}
+ readOnly={props.nonEditable}
+ title={
+ props?.validation && props.ValidationRequired
+ ? props?.validation?.title
+ : props.title
+ }
+ step={props.step}
+ autoFocus={props.autoFocus}
+ onBlur={props.onBlur}
+ onKeyPress={props.onKeyPress}
+ autoComplete="off"
+ disabled={props.disabled}
+ onFocus={props?.onFocus}
+ nonEditable={props.nonEditable}
+ config={props.config}
+ populators={props.populators}
+ onClick={(event) => {
+ if (props.type === "date" || (props.type === "time")) {
+ try {
+ event.target.showPicker();
+ } catch (error) {
+ console.error("Error opening picker:", error);
+ }
+ }
+ }}
+ />
+ {renderSuffix()}
+ {props.signature && props.signatureImg}
+ {icon && (
+
+ {icon}
+
+ )}
+
+ )}
+
+
+ );
+};
+
+export default Timeline;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Toast.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Toast.js
new file mode 100644
index 00000000..9242b8ad
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Toast.js
@@ -0,0 +1,160 @@
+import React, { useState, useEffect,Fragment } from "react";
+import PropTypes from "prop-types";
+import { SVG } from "./SVG";
+import Button from "./Button";
+import StringManipulator from "./StringManipulator";
+import { Colors} from "../constants/colors/colorconstants";
+
+const Toast = (props) => {
+
+ const [isVisible, setIsVisible] = useState(true);
+ const [isAnimating, setIsAnimating] = useState(false);
+
+ useEffect(() => {
+ const timeout = setTimeout(
+ () => {
+ setIsVisible(false);
+ if (props.onClose) {
+ props.onClose();
+ }
+ },
+ props?.transitionTime ? props.transitionTime : 5000
+ );
+ const animateTimeout = setTimeout(() => {
+ setIsAnimating(true);
+ }, 100);
+
+ return () => {
+ clearTimeout(timeout);
+ clearTimeout(animateTimeout);
+ };
+ }, [props.transitionTime, props.onClose]);
+
+ const handleClose = () => {
+ setIsVisible(false);
+ };
+
+ let variant;
+ switch (props?.type) {
+ case "success":
+ variant = "digit-success";
+ break;
+ case "error":
+ variant = "digit-error";
+ break;
+ case "warning":
+ variant = "digit-warning";
+ break;
+ case "info":
+ variant = "digit-info";
+ break;
+ default:
+ variant = props?.variant || "";
+ break;
+ }
+
+ const isWarningButtons = props?.isWarningButtons
+ ? "digit-warning-buttons"
+ : "";
+
+ const sentenceCaseLabel = StringManipulator("TOSENTENCECASE", props.label);
+ const color = Colors.lightTheme.paper.primary;
+
+ if (!isVisible) {
+ return null;
+ }
+
+ if (props?.type === "warning") {
+ return (
+
+ {variant === "completed" && !isError && (
+
+ {showConnector && !isLastStep && (
+
+ )}
+
+
+ )}
+ {isError && (
+
+
+ )}
+
+
+
+
+ {hasAdditionalElements && (
+
+ {label
+ ? StringManipulator("CAPITALIZEFIRSTLETTER", label)
+ : defaultLabel}
+
+ {subElements && subElements.length > 0 && (
+
+ {subElements.map((element, index) => (
+
+ )}
+ {showDefaultValueForDate && (
+
+ {element}
+
+ ))}
+ {isError ? "Incomplete": "date"}
+ )}
+
+
+ {additionalElements.map((element, index) => (
+
+ )}
+ {hasAdditionalElements && additionalElements.length > initialVisibleAdditionalElementsCount && (
+ = initialVisibleAdditionalElementsCount && !showDetails
+ ? "hidden"
+ : ""
+ }`}
+ key={index}
+ style={individualElementStyles}
+ >
+ {element}
+
+ ))}
+
+
+
+ )}
+
+
+ );
+ }
+
+ const icon =
+ props?.type === "error" ? (
+
+ {!props?.isWarningButtons ? (
+ <>
+
+
+ {sentenceCaseLabel}
+
+
+
+ )}
+ {props?.isWarningButtons ? (
+
+ {sentenceCaseLabel}
+
+ {props.isDleteBtn ? (
+
+
+
+
+ ) : null}
+
+ {icon}
+
+ );
+};
+
+Toast.propTypes = {
+ label: PropTypes.string,
+ onClose: PropTypes.func,
+ isDleteBtn: PropTypes.bool,
+ transitionTime: PropTypes.number,
+ type: PropTypes.string,
+};
+
+Toast.defaultProps = {
+ label: "",
+ onClose: undefined,
+ isDleteBtn: false,
+};
+
+export default Toast;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Toggle.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Toggle.js
new file mode 100644
index 00000000..3513bdc5
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Toggle.js
@@ -0,0 +1,88 @@
+import React, { useState, useEffect } from "react";
+import PropTypes from "prop-types";
+import { useTranslation } from "react-i18next";
+import StringManipulator from "./StringManipulator";
+
+const Toggle = (props) => {
+ const { t } = useTranslation();
+
+ var selected = props.selectedOption
+ ? props.selectedOption
+ : props.options.length > 0
+ ? props.options[0].code
+ : null;
+
+ // Calculate the maximum label length among all options
+ const maxLabelLength = Math.max(
+ ...props.options.map((option) => t(option[props.optionsKey]).length)
+ );
+ // Set a fixed maximum width of 200px or the calculated maxLabelLength, whichever is smaller
+ const maxWidth = Math.min(200, maxLabelLength * 14.9);
+ // minWidth should be 40px
+ const finalWidth = maxWidth < 40 ? "40" : maxWidth;
+
+ function toggleOption(option) {
+ props?.onSelect(option);
+ }
+ return (
+
+ {sentenceCaseLabel}
+
+
+ {props?.options?.map((option, ind) => (
+
+ );
+};
+
+Toggle.propTypes = {
+ selectedOption: PropTypes.any,
+ onSelect: PropTypes.func,
+ options: PropTypes.any,
+ optionsKey: PropTypes.string,
+ additionalWrapperClass: PropTypes.string,
+ disabled: PropTypes.bool,
+ inputRef: PropTypes.object,
+};
+
+Toggle.defaultProps = {};
+
+export default Toggle;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/ToggleSwitch.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/ToggleSwitch.js
new file mode 100644
index 00000000..2e1f08fa
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/ToggleSwitch.js
@@ -0,0 +1,40 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const ToggleSwitch = ({ value, onChange, label, name, ref, style,disabled, ...props }) => {
+
+ return (
+
+
+
+ ))}
+
+
+
+
+ );
+
+};
+
+ToggleSwitch.propTypes = {
+ value: PropTypes.bool,
+ name: PropTypes.string,
+ onChange: PropTypes.func,
+ ref: PropTypes.func,
+};
+
+ToggleSwitch.defaultProps = {};
+
+export default ToggleSwitch;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Tooltip.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Tooltip.js
new file mode 100644
index 00000000..25adac2f
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/Tooltip.js
@@ -0,0 +1,50 @@
+import React from "react";
+import PropTypes from "prop-types";
+
+const Tooltip = ({ tooltipRef, content, placement, arrow, style, className,header ,description,theme}) => {
+ return (
+
+ {header &&
+ );
+};
+
+Tooltip.propTypes = {
+ header:PropTypes.string,
+ content: PropTypes.node.isRequired,
+ description:PropTypes.string,
+ placement: PropTypes.oneOf([
+ "bottom",
+ "bottom-end",
+ "bottom-start",
+ "left",
+ "right",
+ "top",
+ "top-end",
+ "top-start",
+ "left-end",
+ "left-start",
+ "right-end",
+ "right-start",
+ ]),
+ arrow: PropTypes.bool,
+ theme: PropTypes.string,
+ style: PropTypes.object,
+ className: PropTypes.string,
+};
+
+Tooltip.defaultProps = {
+ arrow: true,
+ placement: "bottom",
+ theme:"dark"
+};
+
+export default Tooltip;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TreeSelect.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TreeSelect.js
new file mode 100644
index 00000000..7e177bbc
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/TreeSelect.js
@@ -0,0 +1,211 @@
+import React, { useState, useEffect } from "react";
+import { SVG } from "./SVG";
+import { useTranslation } from "react-i18next";
+import { Colors} from "../constants/colors/colorconstants";
+
+const TreeSelectOption = ({ option, onSelect, isSelected, renderOptions, level = 0,optionsKey }) => {
+ const [isExpanded, setExpanded] = useState(false);
+ const { t } = useTranslation();
+ const handleToggleDropdown = () => {
+ if (option.options) {
+ setExpanded(!isExpanded);
+ }
+ };
+ const handleSelect = () => {
+ if (!option.options) {
+ onSelect(option);
+ }
+ };
+
+ const primaryFill = Colors.lightTheme.text.primary;
+
+ return (
+ {header}
}
+ {content && {content}
}
+ {description && {description}
}
+
+
+ );
+};
+const TreeMultiSelect = ({ option, onSelect, isSelected, renderOptions, level = 0, isParentSelected, setParentSelected, optionsKey}) => {
+ const [isExpanded, setExpanded] = useState(false);
+ const { t } = useTranslation();
+ const handleToggleDropdown = () => {
+ if (option.options) {
+ setExpanded(!isExpanded);
+ }
+ };
+
+ useEffect(() => {
+ // Update the parent's selection status when the component is mounted
+ setParentSelected(isSelected(option));
+ }, [isSelected, option, setParentSelected]);
+
+ const handleSelect = () => {
+ if (option.options) {
+ const selectedOptions = getFlattenedOptions(option.options);
+ if (isSelected(option)) {
+ onSelect([option, ...selectedOptions]);
+ } else {
+ // Checking if any child is already selected
+ const anyChildSelected = selectedOptions.some((child) => isSelected(child));
+ // If any child is already selected, selecting only the unselected children
+ if (anyChildSelected) {
+ const unselectedChildren = selectedOptions.filter((child) => !isSelected(child));
+ onSelect([option, ...unselectedChildren]);
+ } else {
+ onSelect([option, ...selectedOptions]);
+ }
+ }
+ } else {
+ onSelect([option]);
+ }
+ };
+
+ const getFlattenedOptions = (options) => {
+ let flattened = [];
+ options.forEach((option) => {
+ if (option.options) {
+ flattened.push(option);
+ flattened = flattened.concat(getFlattenedOptions(option.options));
+ } else {
+ flattened.push(option);
+ }
+ });
+ return flattened;
+ };
+
+ const allChildrenSelected = option.options && option.options.every((child) => isSelected(child));
+
+ const isIntermediate = () => {
+ if (option.options) {
+ const selectedOptions = getFlattenedOptions(option.options);
+ const someChildrenSelected = selectedOptions.some((child) => isSelected(child));
+ return someChildrenSelected && !allChildrenSelected;
+ }
+ return false;
+ };
+
+ useEffect(() => {
+ if (allChildrenSelected && !isSelected(option)) {
+ // If all children are selected and the current option is not selected, select the option.
+ onSelect([option]);
+ } else if (isIntermediate(option) && isSelected(option)) {
+ // If the option is in an intermediate state and is currently selected, deselect the option.
+ onSelect([option]);
+ }
+ }, [allChildrenSelected, isSelected, isIntermediate, option, onSelect]);
+
+ const primaryFill = Colors.lightTheme.text.primary;
+ const primarySelectedColor = Colors.lightTheme.paper.primary;
+ const SelectedColor = Colors.lightTheme.primary[1];
+
+ return (
+
+ {option.options && (
+
+ {isExpanded &&
+ option.options &&
+ option.options.length > 0 &&
+ renderOptions({ options: option.options, onSelect, isSelected, level: level + 1 })}
+
+ {isExpanded ? (
+
+ )}
+ {t(option[optionsKey])}
+
+
+ );
+};
+const TreeSelect = ({ options, onSelect, selectedOption, variant,optionsKey }) => {
+ const renderOptions = ({ options, onSelect, isSelected, level, isParentSelected, setParentSelected }) => {
+ return options.map((option) => (
+
+ {option.options && (
+
+ {isExpanded && option.options && option.options.length > 0 && (
+
+ {isExpanded ? (
+
+ )}
+
+
+
+ {
+ e.stopPropagation();
+ handleSelect();
+ }}
+ style={{ marginRight: `${level == 0 ? 8 : 0}px` }}
+ >
+ {isIntermediate() ? (
+
+ ) : (
+
+ {t(option[optionsKey])}
+
+ {renderOptions({
+ options: option.options,
+ onSelect,
+ isSelected,
+ level: level + 1,
+ isParentSelected: isSelected(option),
+ setParentSelected,
+ })}
+
+ )}
+
+ {variant === "treemultiselect" ? (
+
+ )}
+
+ ));
+ };
+ const isSelected = (option) => {
+ if (variant === "treemultiselect") return selectedOption && selectedOption.some((selected) => selected.code === option.code);
+ else return selectedOption && selectedOption.code === option.code;
+ };
+ return {renderOptions({ options, onSelect, isSelected, level: 0, isParentSelected: false, setParentSelected: () => {} })}
;
+};
+export default TreeSelect;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/UploadFile.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/UploadFile.js
new file mode 100644
index 00000000..1ab169e6
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/UploadFile.js
@@ -0,0 +1,126 @@
+import React, { useEffect, useRef, useState, Fragment } from "react";
+import PropTypes from "prop-types";
+import ButtonSelector from "./ButtonSelector";
+import { useTranslation } from "react-i18next";
+import Chip from "./Chip";
+import ErrorMessage from "./ErrorMessage";
+import { getUserType } from "../utils/digitUtils";
+
+const getRandomId = () => {
+ return Math.floor((Math.random() || 1) * 139);
+};
+
+const UploadFile = (props) => {
+ const { t } = useTranslation();
+ const inpRef = useRef();
+ const [hasFile, setHasFile] = useState(false);
+ const [prevSate, setprevSate] = useState(null);
+ const user_type = getUserType();
+ const handleChange = () => {
+ if (inpRef.current.files[0]) {
+ setHasFile(true);
+ setprevSate(inpRef.current.files[0]);
+ } else setHasFile(false);
+ };
+
+ const handleDelete = () => {
+ inpRef.current.value = "";
+ props.onDelete();
+ };
+
+ const handleEmpty = () => {
+ if (inpRef.current.files.length <= 0 && prevSate !== null) {
+ inpRef.current.value = "";
+ props.onDelete();
+ }
+ };
+
+ if (props.uploadMessage && inpRef.current.value) {
+ handleDelete();
+ setHasFile(false);
+ }
+
+ useEffect(() => handleEmpty(), [inpRef?.current?.files]);
+
+ useEffect(() => handleChange(), [props.message]);
+
+ const showHint = props?.showHint || false;
+
+ return (
+ {t(props?.hintText)}
} +
+
+ {props.iserror &&
+
+ props.onUpload(e)}
+ onClick={(event) => {
+ if (!props?.enableButton) {
+ event.preventDefault();
+ } else {
+ const { target = {} } = event || {};
+ target.value = "";
+ }
+ }}
+ />
+
+ 64 ? `${file[0].slice(0, 64)} ...` : file[0]}
+ onClick={(e) => props?.removeTargetedFile(fileDetailsData, e)}
+ />
+
+ );
+ })}
+ {props?.uploadedFiles.length === 0 && {props.message}
} +{t(props?.hintText)}
} +
+ {
+
+ )}
+ {"Click to add photo"}
+
+ {previews.map((preview, index) => {
+ return (
+
+
+ );
+ })}
+
+ {openUploadSlide && (
+ <>
+ 1 ? " multiple" : "single"
+ } ${"imageFile"} ${preview?.error ? "error" : ""}`}
+ >
+
+ {
+ handleFileClick(index, preview?.file);
+ }}
+ >
+ {preview?.file?.type.startsWith("image/") ? (
+
+ ) : (
+ getFileUploadIcon(preview?.file?.type, true)
+ )}
+
+ {
+ e.stopPropagation();
+ handleFileDeletion(fileData[index]);
+ }}
+ className={`digit-uploader-close-icon ${
+ preview?.error ? "error" : ""
+ }`}
+ >
+ {
+ e.stopPropagation();
+ closeDrawer();
+ }
+ : null
+ }
+ >
+
+ {!isMobileView && (
+
+
+ )}
+ {isWebcamOpen && (
+ <>
+
+
+ {"Choose an option to upload"}
+
+ )}
+ {!isMobileView && (
+
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ )}
+
+ {"Capture"}
+
+
+
+
+ {isMobileView ? (
+ <>
+
+
+
+ ) : (
+ <>
+
+
+
+ )}
+
+
+ {
+
+ );
+
+ const handleFileDelete = (fileToRemove) => {
+ const updatedFiles = files.filter((file) => file !== fileToRemove);
+ setFiles(updatedFiles);
+ onFileDelete(fileToRemove);
+ };
+
+ const handleFileDownload = async (file) => {
+ try {
+ const downloadLink = document.createElement("a");
+ downloadLink.href = window.URL.createObjectURL(file);
+ downloadLink.download = file.name;
+ document.body.appendChild(downloadLink);
+ downloadLink.click();
+ document.body.removeChild(downloadLink);
+ } catch (error) {
+ console.error("Error downloading file:", error);
+ }
+ };
+
+ const handleReUpload = (fileToReupload) => {
+ const filesAfterRemoval = files.filter((file) => file !== fileToReupload);
+ const fileInput = document.createElement("input");
+ fileInput.type = "file";
+ fileInput.accept = fileTypes;
+ fileInput.multiple = multiple;
+ fileInput.style.display = "none";
+ fileInput.addEventListener("change", (event) => {
+ setFiles(filesAfterRemoval);
+ });
+ fileInput.addEventListener("change", (event) => {
+ const newFiles = event?.target?.files;
+ setFiles([...filesAfterRemoval, newFiles[0]]);
+ });
+ document.body.appendChild(fileInput);
+ fileInput.click();
+ };
+
+ const handleChange = async (newFiles) => {
+ const newlyUploadedFiles = multiple ? [...files, ...newFiles] : [newFiles];
+ setFiles(newlyUploadedFiles);
+ };
+
+ useEffect(() => {
+ onSubmit(files);
+ }, [files,onSubmit]);
+
+ const renderFileIcon = (fileType, fileErrors) => {
+ switch (fileType) {
+ case "application/pdf":
+ return + {t("Drag and drop your file or ")} +
{t("Browse in my files")}
+
+
+
+ );
+ });
+ }, [fileData, errors]);
+
+ return (
+ {
+ handleFileClick(index, file);
+ }}
+ >
+ {renderFileIcon(file?.type, fileErrors)}
+
+ {fileErrors && showErrorCard && (
+
+ {file?.name}
+ {fileErrors && !showErrorCard && (
+
+
+ {showReUploadButton && (
+
+ handleFileDelete(file)}
+ >
+
+
+}
+
+export default WhatsNewCard
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/doctories/Intro.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/doctories/Intro.stories.js
new file mode 100644
index 00000000..0f73fc0c
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/doctories/Intro.stories.js
@@ -0,0 +1,15 @@
+import React from "react";
+import Iframe from "../Iframe";
+
+export default {
+ title: "Intro",
+ component: "Iframe",
+};
+
+export const Intro = () => (
+
+);
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/Animations.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/Animations.stories.js
new file mode 100644
index 00000000..cd5ae01f
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/Animations.stories.js
@@ -0,0 +1,97 @@
+import React from "react";
+import { Animation } from "../../atoms";
+import successAnimation from "../../constants/animations/success.json";
+import errorAnimation from "../../constants/animations/error.json";
+import warning2Animation from "../../constants/animations/warningOutline2.json";
+import warningAnimation from "../../constants/animations/warningOutline.json";
+import theLoaderPrimary from '../../constants/animations/theLoaderPrimary.json';
+import theLoaderPrimary2 from '../../constants/animations/theLoaderPrimary2.json';
+import theLoaderWhite from '../../constants/animations/theLoaderWhite.json';
+
+export default {
+ title: "Foundations/Animations",
+ component: Animation,
+ argTypes: {
+ loop: {
+ control: "boolean",
+ },
+ autoplay: {
+ control: "boolean",
+ },
+ animationData: {
+ control: { type: "object" },
+ },
+ width: {
+ control: "number",
+ },
+ height: {
+ control: "number",
+ },
+ },
+};
+
+const Template = (args) => (
+ {t(header)}
+{eventNotificationText}
+ {actions?.map(i => {`${t(`CS_COMMON_${getTransformedLocale(i?.code)}`)}`})} +{timePastAfterEventCreation + ` ${t(timeApproxiamationInUnits)}`}
+
+ {" "}
+
+);
+
+const commonArgs = {
+ animationData: {},
+ loop: false,
+ autoplay: true,
+ width: 74,
+ height: 74,
+};
+
+export const Success = Template.bind({});
+Success.args = {
+ ...commonArgs,
+ animationData: successAnimation,
+};
+
+export const Error = Template.bind({});
+Error.args = {
+ ...commonArgs,
+ animationData: errorAnimation,
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+ ...commonArgs,
+ animationData: warningAnimation,
+};
+
+export const Warning2 = Template.bind({});
+Warning2.args = {
+ ...commonArgs,
+ animationData: warning2Animation,
+};
+
+export const LoaderPrimary = Template.bind({});
+LoaderPrimary.args = {
+ ...commonArgs,
+ animationData: theLoaderPrimary,
+};
+
+export const LoaderPrimary2 = Template.bind({});
+LoaderPrimary2.args = {
+ ...commonArgs,
+ animationData: theLoaderPrimary2,
+};
+
+export const LoaderWhite = Template.bind({});
+LoaderWhite.args = {
+ ...commonArgs,
+ animationData: theLoaderWhite,
+};
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/BodyTypography.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/BodyTypography.stories.js
new file mode 100644
index 00000000..c170d6dc
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/BodyTypography.stories.js
@@ -0,0 +1,115 @@
+import React from "react";
+import Divider from "../Divider";
+
+export default {
+ title: "Foundations/Typography/Body",
+ argTypes: {
+ },
+};
+
+const style = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ color: "#363636",
+ display: "flex",
+ justifyContent: "center",
+ transform: "translate(-50%, -50%)",
+ lineHeight: "normal",
+};
+
+export const BodyL = () => (
+
+
+);
+
+export const BodyS = () => (
+
+ Body L / 20pts
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ tempor incididunt ut labore
+
+
+
+);
+
+export const BodyXS = () => (
+
+ Body S / 16pts
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ tempor incididunt ut labore
+
+
+
+);
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/ButtonTypography.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/ButtonTypography.stories.js
new file mode 100644
index 00000000..16ac1846
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/ButtonTypography.stories.js
@@ -0,0 +1,88 @@
+import React from "react";
+import Divider from "../Divider";
+
+export default {
+ title: "Foundations/Typography/Button",
+ argTypes: {
+ },
+};
+
+const style = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ color: "#363636",
+ display: "flex",
+ justifyContent: "center",
+ transform: "translate(-50%, -50%)",
+ lineHeight:"normal"
+};
+
+export const ButtonL = () => (
+
+ Body XS / 14pts
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+ tempor incididunt ut labore
+
+
+
+);
+
+export const ButtonM = () => (
+
+ button large / 20pts
+
+
+ ButtonL
+
+
+
+);
+
+export const ButtonS = () => (
+
+ button medium / 16pts
+
+
+ ButtonM
+
+
+
+);
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/CaptionTypography.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/CaptionTypography.stories.js
new file mode 100644
index 00000000..57002864
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/CaptionTypography.stories.js
@@ -0,0 +1,88 @@
+import React from "react";
+import Divider from "../Divider";
+
+export default {
+ title: "Foundations/Typography/Caption",
+ argTypes: {
+ },
+};
+
+const style = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ color: "#363636",
+ display: "flex",
+ justifyContent: "center",
+ transform: "translate(-50%, -50%)",
+ lineHeight:"normal"
+};
+
+export const CaptionL = () => (
+
+ button small / 14pts
+
+
+ ButtonS
+
+
+
+);
+
+export const CaptionM = () => (
+
+ Caption L / 28pts
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing
+
+
+
+);
+
+export const CaptionS = () => (
+
+ Caption M / 24pts
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing
+
+
+
+);
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/HeadingTypography.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/HeadingTypography.stories.js
new file mode 100644
index 00000000..1c9fa359
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/HeadingTypography.stories.js
@@ -0,0 +1,134 @@
+import React from "react";
+import Divider from "../Divider";
+
+export default {
+ title: "Foundations/Typography/Heading",
+ argTypes: {
+ },
+};
+
+const style = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ color: "#363636",
+ display: "flex",
+ justifyContent: "center",
+ transform: "translate(-50%, -50%)",
+ lineHeight:"normal"
+};
+
+export const HeadingXL = () => (
+
+ Caption S / 20pts
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing
+
+
+
+);
+
+export const HeadingL = () => (
+
+ Heading XL / 40pts
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing
+
+
+
+);
+
+export const HeadingM = () => (
+
+ Heading L / 32pts
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing
+
+
+
+);
+
+export const HeadingS = () => (
+
+ Heading M / 24pts
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing
+
+
+
+);
+
+export const HeadingXS = () => (
+
+ Heading S / 16pts
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing
+
+
+
+);
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/Iconography.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/Iconography.stories.js
new file mode 100644
index 00000000..0676b759
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/Iconography.stories.js
@@ -0,0 +1,57 @@
+import React from "react";
+import * as components from "@egovernments/digit-ui-svg-components";
+import { CustomSVG } from "../CustomSVG";
+
+export default {
+ title: "Foundations/Iconography",
+};
+
+const gridStyle = {
+ display: "grid",
+ gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))",
+ gap: "16px",
+ padding: "16px",
+};
+
+const cardStyle = {
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ justifyContent: "center",
+ border: "1px solid #D6D5D4",
+ borderRadius: "8px",
+ padding: "16px",
+ gap: "8px",
+};
+
+const renderIcon = (IconComponent, name) => {
+ if (IconComponent) {
+ return (
+
+ Heading XS / 14pts
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing
+
+
+
+ );
+ } else {
+ return (
+
+ Invalid Icon
+
+ );
+ }
+};
+
+export const Iconography = () => {
+ const customSvgIcons = Object.entries(CustomSVG);
+ const svgIcons = Object.entries(components);
+
+ const allIcons = [...svgIcons, ...customSvgIcons].sort(([a], [b]) =>
+ a.localeCompare(b)
+ );
+
+ return (
+
+ {allIcons.map(([name, IconComponent]) => renderIcon(IconComponent, name))}
+
+ );
+};
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/LabelTypography.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/LabelTypography.stories.js
new file mode 100644
index 00000000..e81df64f
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/LabelTypography.stories.js
@@ -0,0 +1,50 @@
+import React from "react";
+import Divider from "../Divider";
+
+export default {
+ title: "Foundations/Typography/Label",
+ argTypes: {
+ },
+};
+
+const style = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ color: "#363636",
+ display: "flex",
+ justifyContent: "center",
+ transform: "translate(-50%, -50%)",
+ lineHeight: "normal",
+};
+
+export const Label = () => (
+
+
+);
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/LinkTypography.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/LinkTypography.stories.js
new file mode 100644
index 00000000..f9816986
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/foundationstories/LinkTypography.stories.js
@@ -0,0 +1,88 @@
+import React from "react";
+import Divider from "../Divider";
+
+export default {
+ title: "Foundations/Typography/Link",
+ argTypes: {
+ },
+};
+
+const style = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ color: "#363636",
+ display: "flex",
+ justifyContent: "center",
+ transform: "translate(-50%, -50%)",
+ lineHeight:"normal"
+};
+
+export const LinkL = () => (
+
+ Label / 16pts
+
+
+ Label
+
+
+
+);
+
+export const LinkS = () => (
+
+ Link L / 20pts
+
+
+ LinkL
+
+
+
+);
+
+export const linkXS = () => (
+
+ Link S / 16pts
+
+
+ LinkS
+
+
+
+);
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/index.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/index.js
new file mode 100644
index 00000000..a542ed4b
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/index.js
@@ -0,0 +1,205 @@
+import { Accordion } from "./Accordion";
+import {AccordionList} from "./Accordion";
+import HomeFooter from "./HomeFooter";
+import ActionLinks from "./ActionLinks";
+import Amount from "./Amount";
+import AppContainer from "./AppContainer";
+import BackLink from "./BackLink";
+import Banner from "./Banner";
+import BodyContainer from "./BodyContainer";
+import BreadCrumb from "./BreadCrumb";
+import BreakLine from "./BreakLine";
+import Button from "./Button";
+import Card from "./Card";
+import CardBasedOptions from "./CardBasedOptions";
+import CardCaption from "./CardCaption";
+import CardHeader from "./CardHeader";
+import CardLabel from "./CardLabel";
+import CardLabelError from "./CardLabelError";
+import CardText from "./CardText";
+import CheckBox from "./CheckBox";
+import CitizenHomeCard from "./CitizenHomeCard";
+import CitizenInfoLabel from "./CitizenInfoLabel";
+import CollapseAndExpandGroups from "./CollapseAndExpandGroups";
+import { ConnectingCheckPoints } from "./ConnectingCheckPoints";
+import DatePicker from "./DatePicker";
+import DisplayPhotos from "./DisplayPhotos";
+import Dropdown from "./Dropdown";
+import ErrorMessage from "./ErrorMessage";
+import Footer from "./Footer";
+import HeaderComponent from "./HeaderComponent";
+import HeaderBar from "./HeaderBar";
+import HorizontalNav from "./HorizontalNav";
+import Tab from "./Tab";
+import AlertCard from "./AlertCard";
+import InputTextAmount from "./InputTextAmount";
+import KeyNote from "./KeyNote";
+import LabelFieldPair from "./LabelFieldPair";
+import MobileNumber from "./MobileNumber";
+import MultiSelectDropdown from "./MultiSelectDropdown";
+import NoResultsFound from "./NoResultsFound";
+import OTPInput from "./OTPInput";
+import Paragraph from "./Paragraph";
+import PlusMinusInput from "./PlusMinusInput";
+import PopUp from "./PopUp";
+import { PrivateRoute } from "./PrivateRoute";
+import RadioButtons from "./RadioButtons";
+import Rating from "./Rating";
+import Chip from "./Chip";
+import { SVG } from "./SVG";
+// import Table from "./Table";
+import Telephone from "./Telephone";
+import TextArea from "./TextArea";
+import TextInput from "./TextInput";
+import Toast from "./Toast";
+import UploadFile from "./UploadFile";
+import WhatsNewCard from "./WhatsNewCard";
+import PageBasedInput from "./PageBasedInput";
+// import Numeric from "./Numeric";
+import Toggle from "./Toggle";
+import ToggleSwitch from "./ToggleSwitch";
+import TreeSelect from "./TreeSelect";
+import SubmitBar from "./SubmitBar";
+import ButtonSelector from "./ButtonSelector";
+import InboxSearchLinks from "./InboxSearchLinks";
+import SearchComponent from "./SearchComponent";
+import LinkLabel from "./LinkLabel";
+import RoundedLabel from "./RoundedLabel";
+import Stepper from "./Stepper";
+import Timeline from "./Timeline";
+import StringManipulator from "./StringManipulator";
+import InfoButton from "./InfoButton";
+import FileUpload from "./FileUpload";
+import UploadWidget from "./UploadWidget";
+import UploadImage from "./UploadImage";
+import ErrorBoundary from "./ErrorBoundary";
+import TextBlock from "./TextBlock";
+import Panels from "./Panels";
+import Animation from "./Animation";
+import SummaryCardFieldPair from "./SummaryCardFieldPair";
+import ButtonGroup from "./ButtonGroup";
+import Divider from "./Divider";
+import Header from "./Header";
+import HamburgerButton from "./HamburgerButton";
+import Menu from "./Menu";
+import SideNav from "./SideNav";
+import Hamburger from "./Hamburger";
+import SelectionTag from "./SelectionTag";
+import Tag from "./Tag";
+import Tooltip from "./Tooltip";
+import Switch from "./Switch";
+import { CustomSVG } from "./CustomSVG";
+import TableMain from "./TableMain";
+import TableBody from "./TableBody";
+import TableCell from "./TableCell";
+import TableFooter from "./TableFooter";
+import TableHeader from "./TableHeader";
+import TableRow from "./TableRow";
+import SidePanel from "./SidePanel";
+import NestedTable from "./NestedTable";
+import Loader from "./Loader";
+import Iframe from "./Iframe";
+
+export {
+ ErrorBoundary,
+ PageBasedInput,
+ Footer,
+ ActionLinks,
+ Amount,
+ AppContainer,
+ BackLink,
+ SideNav,
+ Hamburger,
+ Switch,
+ Accordion,
+ Iframe,
+ AccordionList,
+ Tooltip,
+ Banner,
+ BodyContainer,
+ BreadCrumb,
+ BreakLine,
+ Button,
+ Card,
+ CardBasedOptions,
+ CardCaption,
+ CardHeader,
+ CardLabel,
+ CardLabelError,
+ CardText,
+ CheckBox,
+ CitizenHomeCard,
+ CitizenInfoLabel,
+ CollapseAndExpandGroups,
+ ConnectingCheckPoints,
+ DatePicker,
+ DisplayPhotos,
+ Dropdown,
+ ErrorMessage,
+ HomeFooter,
+ HeaderComponent,
+ HeaderBar,
+ HorizontalNav,
+ Loader,
+ Tab,
+ AlertCard,
+ InputTextAmount,
+ KeyNote,
+ LabelFieldPair,
+ MobileNumber,
+ MultiSelectDropdown,
+ NoResultsFound,
+ OTPInput,
+ SidePanel,
+ Paragraph,
+ PlusMinusInput,
+ PopUp,
+ SelectionTag,
+ Tag,
+ PrivateRoute,
+ RadioButtons,
+ Rating,
+ Chip,
+ SVG,
+ Header,
+ HamburgerButton,
+ Menu,
+ // Table,
+ Telephone,
+ TextArea,
+ TextInput,
+ Toast,
+ UploadFile,
+ WhatsNewCard,
+ Toggle,
+ ToggleSwitch,
+ TreeSelect,
+ SubmitBar,
+ ButtonSelector,
+ Stepper,
+ Timeline,
+ SummaryCardFieldPair,
+ Divider,
+ ButtonGroup,
+ StringManipulator,
+ InfoButton,
+ FileUpload,
+ UploadWidget,
+ UploadImage,
+ TextBlock,
+ Panels,
+ Animation,
+ InboxSearchLinks,
+ SearchComponent,
+ LinkLabel,
+ RoundedLabel,
+ //Icons
+ CustomSVG,
+ TableMain,
+ TableHeader,
+ TableFooter,
+ TableBody,
+ TableRow,
+ TableCell,
+ NestedTable
+};
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Accordion.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Accordion.stories.js
new file mode 100644
index 00000000..7e1e52c8
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Accordion.stories.js
@@ -0,0 +1,100 @@
+import React from "react";
+import { Accordion } from "../Accordion";
+import Iframe from "../Iframe";
+
+export default {
+ title: "Atoms/Accordion",
+ component: Accordion,
+ argTypes: {
+ title: { control: "text",name:"Title" },
+ children: { control: "text",name:"Content" },
+ isOpenInitially: { control: "boolean" ,table: { disable: true } },
+ customClassName: { control: "text" ,table: { disable: true } },
+ customStyles: { control: "object" ,table: { disable: true } },
+ onToggle: { action: "onToggle",table: { disable: true } },
+ icon: { control: "text" ,name:"Icon"},
+ number: { control: "number",name:"Number" },
+ hideCardBorder: { control: "boolean",name:"Hide Border" },
+ hideDivider: { control: "boolean" ,name:"Hide Divider" },
+ hideCardBg: { control: "boolean",name:"Hide Background" },
+ hideBorderRadius: { control: "boolean" ,name:"Hide Border Radius" },
+ iconFill: { table: { disable: true } },
+ isClosed: { table: { disable: true } },
+ iconWidth: { table: { disable: true } },
+ iconHeight: { table: { disable: true } },
+ },
+};
+
+const Template = (args) =>
+ Link XS / 14pts
+
+
+ LinkXS
+
+
+
+
+ );
+};
+
+const commonArgs = {
+ label: "ActionButton",
+ className: "custom-class",
+ style: {},
+ onClick: () => {
+ console.log("clicked");
+ },
+ isDisabled: "Default",
+ variation: "primary",
+ size: "large",
+ title: "",
+ iconFill: "",
+ showBottom: "DropDown",
+ type: "actionButton",
+ optionsKey: "name",
+ isSearchable: true,
+ options: [
+ { name: "Action A", code: "Actiona" },
+ { name: "Action B", code: "Actionb" },
+ { name: "Action C", code: "Actionc" },
+ ],
+ onOptionSelect: (e) => {
+ console.log(e, "option selected");
+ },
+};
+
+export const Documentation = () => (
+
+);
+
+Documentation.storyName = "Docs";
+Documentation.argTypes = {
+ isDisabled: { table: { disable: true } },
+ label: { table: { disable: true }},
+ isSearchable: { table: { disable: true }},
+ showBottom: {table: { disable: true } },
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+ ...commonArgs,
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+ ...commonArgs,
+ variation:"secondary"
+};
+
+export const Teritiary = Template.bind({});
+Teritiary.args = {
+ ...commonArgs,
+ variation: "teritiary",
+};
+
+export const Link = Template.bind({});
+Link.args = {
+ ...commonArgs,
+ variation: "link",
+};
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/AlertCard.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/AlertCard.stories.js
new file mode 100644
index 00000000..82cbb503
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/AlertCard.stories.js
@@ -0,0 +1,180 @@
+import React from "react";
+import AlertCard from "../AlertCard";
+import TextArea from "../TextArea";
+import InfoButton from "../InfoButton";
+import Iframe from "../Iframe";
+
+export default {
+ title: "Atoms/Alert Card",
+ component: AlertCard,
+ argTypes: {
+ label: {
+ control: "text",
+ table: { disable: true },
+ },
+ variant: {
+ control: "select",
+ options: ["default", "success", "warning", "error"],
+ table: { disable: true },
+ },
+ text: { control: "text", table: { disable: true } },
+ style: {
+ control: "object",
+ table: { disable: true },
+ },
+ textStyle: {
+ control: "object",
+ table: { disable: true },
+ },
+ additionalElements: {
+ control: "boolean",
+ table: { disable: true },
+ },
+ inline: {
+ control: "select",
+ options: ["Default", "Inline"],
+ name: "Widgets Alignment",
+ mapping: {
+ Default: false,
+ Inline: true,
+ },
+ },
+ WithAction: {
+ control: "boolean",
+ name:"With Action"
+ },
+ WithWidgets: {
+ control: "boolean",
+ name:"With Widgets"
+ }
+ },
+};
+
+const additionalElements = [
+ Additional Element 1
, +,
+ ,
+];
+
+const additionalElementsWithAction = [
+ ...additionalElements,
+
+
+ );
+};
+
+const commonArgs = {
+ onChange: () => {},
+ value: "",
+ checked: true,
+ isLabelFirst: "Right",
+ label: "Label",
+ isIntermediate: false,
+ styles: {},
+ style: {},
+ disabled: "Default",
+};
+
+export const Documentation = () => (
+
+);
+
+Documentation.storyName = "Docs";
+Documentation.argTypes = {
+ label: { table: { disable: true } },
+ isLabelFirst: { table: { disable: true }},
+ disabled: { table: { disable: true }},
+};
+
+export const Unchecked = Template.bind({});
+Unchecked.args = {
+ ...commonArgs,
+ checked:false
+};
+
+export const Intermediate = Template.bind({});
+Intermediate.args = {
+ ...commonArgs,
+ checked:false,
+ isIntermediate:true
+};
+
+export const Checked = Template.bind({});
+Checked.args = {
+ ...commonArgs,
+ checked:true
+};
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Chip.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Chip.stories.js
new file mode 100644
index 00000000..5884c1c0
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Chip.stories.js
@@ -0,0 +1,109 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import Chip from "../Chip";
+import Iframe from "../Iframe";
+
+export default {
+ title: "Atoms/Chip",
+ component: Chip,
+ argTypes: {
+ className: {
+ control: "text",
+ table: { disable: true }
+ },
+ text: {
+ control: "text",name:"Text"
+ },
+ onClick: {
+ control: "function",
+ table: { disable: true }
+ },
+ onTagClick: {
+ control: "function",
+ table: { disable: true }
+ },
+ extraStyles: {
+ control: { type: "object" },
+ table: { disable: true }
+ },
+ disabled: {
+ control: "boolean",
+ table: { disable: true }
+ },
+ isErrorTag: {
+ control: "boolean",
+ table: { disable: true }
+ },
+ hideClose: {
+ control: "boolean",
+ name:"With Close",
+ mapping:{
+ true:false,
+ false:true
+ }
+ },
+ error: {
+ control: "text",
+ name:'Error'
+ // table: { disable: true }
+ },
+ WithIcon: {
+ control: "boolean",
+ name:"With Icon"
+ },
+ },
+};
+
+const Template = (args) => {
+ const { WithIcon, ...restArgs } = args;
+
+ return (
+
+
+ );
+};
+
+
+const commonArgs = {
+ text: "Chip",
+ className: "",
+ extraStyles: {},
+ onClick: () => console.log("Close icon is clicked"),
+ onTagClick: () => console.log("Tag is clicked"),
+ disabled: false,
+ isErrorTag: false,
+ error: "",
+ hideClose: false,
+ WithIcon:false
+};
+
+export const Documentation = () => (
+
+);
+
+Documentation.storyName = "Docs";
+Documentation.argTypes = {
+ text: { table: { disable: true } },
+ error: { table: { disable: true }},
+ hideClose: { table: { disable: true }},
+ WithIcon: { table: { disable: true }},
+};
+
+export const Basic = Template.bind({});
+Basic.args = {
+ ...commonArgs,
+};
+
+export const Error = Template.bind({});
+Error.args = {
+ ...commonArgs,
+ text: "ErrorChipWithError",
+ isErrorTag: true,
+ error: "ErrorMessage",
+ hideClose: false,
+};
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/ColorLibrary.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/ColorLibrary.stories.js
new file mode 100644
index 00000000..999b711b
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/ColorLibrary.stories.js
@@ -0,0 +1,451 @@
+import React from "react";
+
+export default {
+ title: "Foundations",
+};
+
+const hexCodes = {
+ "primary-1": "#C84C0E",
+ "primary-bg": "#FBEEE8",
+ "primary-2": "#0B4B66",
+ "text-primary": "#363636",
+ "text-secondary": "#787878",
+ "text-disabled": "#C5C5C5",
+ "alert-error": "#B91900",
+ "alert-errorbg": "#FFF5F4",
+ "alert-success": "#00703C",
+ "alert-successbg": "#F1FFF8",
+ "alert-warning": "#9E5F00",
+ "alert-warning-bg": "#FFF9F0",
+ "alert-info": "#0057BD",
+ "alert-infobg": "#DEEFFF",
+ "generic-background": "#EEEEEE",
+ "generic-divider": "#D6D5D4",
+ "generic-inputborder": "#505A5F",
+ "paper-primary": "#FFFFFF",
+ "paper-secondary": "#FAFAFA",
+};
+
+const commonStyles = {
+ display: "flex",
+ flexDirection: "column",
+ color: "#787878",
+ backgroundColor: "#FAFAFA",
+ padding: "16px",
+ gap: "16px",
+ borderRadius: "4px",
+ border: "1px solid #d6d5d4",
+};
+
+const commonStylesForColors = {
+ height: "40px",
+ borderRadius: "4px",
+ margin: "0 auto",
+ width: "100%",
+ border: "1px solid #d6d5d4",
+};
+
+const wrapperStyles = {
+ display: "flex",
+ flexDirection: "column",
+ gap: "4px",
+ alignItems: "center",
+ color: "#787878",
+ width: "50%",
+};
+
+const extrStyles = {
+ display: "flex",
+ flexDirection: "row",
+ gap: "4px",
+ justifyContent: "space-between",
+ color: "#787878",
+};
+
+const ColorDisplay = () => {
+ return (
+
+
+ );
+};
+
+export const Colors = () =>
+ Colors
+
+
+
+
+
+ Primary
+
+
+
+
+
+ digitv2.lightTheme.primary-1
+
+
+
+
+
+ #C84C0E
+
+
+
+
+
+ digitv2.lightTheme.primary-2
+
+
+
+
+
+ #0B4B66
+
+
+
+
+ digitv2.lightTheme.primary-bg
+
+
+
+
+
+ #FBEEE8
+
+
+
+
+
+ Text
+
+
+
+
+
+
+ digitv2.lightTheme.text-primary
+
+
+
+
+
+ #363636
+
+
+
+
+
+ digitv2.lightTheme.text-secondary
+
+
+
+
+
+ #787878
+
+
+
+
+ digitv2.lightTheme.text-disabled
+
+
+
+
+
+ #C5C5C5
+
+
+
+
+
+ Alert
+
+
+
+
+
+
+ digitv2.lightTheme.alert-error
+
+
+
+
+
+ #B91900
+
+
+
+
+
+ digitv2.lightTheme.alert-errorbg
+
+
+
+
+
+ #FFF5F4
+
+
+
+
+
+ digitv2.lightTheme.alert-success
+
+
+
+
+
+ #00703C
+
+
+
+
+
+ digitv2.lightTheme.alert-successbg
+
+
+
+
+
+ #F1FFF8
+
+
+
+
+
+ digitv2.lightTheme.alert-info
+
+
+
+
+
+ #0057BD
+
+
+
+
+
+ digitv2.lightTheme.alert-infobg
+
+
+
+
+
+ #DEEFFF
+
+
+
+
+
+ digitv2.lightTheme.alert-warning
+
+
+
+
+
+ #9E5F00
+
+
+
+
+ digitv2.lightTheme.alert-warning-bg
+
+
+
+
+
+ #FFF9F0
+
+
+
+
+
+ Generic
+
+
+
+
+
+
+ digitv2.lightTheme.generic-background
+
+
+
+
+
+ #EEEEEE
+
+
+
+
+
+ digitv2.lightTheme.generic-divider
+
+
+
+
+
+ #D6D5D4
+
+
+
+
+ digitv2.lightTheme.generic-inputborder
+
+
+
+
+
+ #505A5F
+
+
+
+
+ Paper
+
+
+
+
+
+
+ digitv2.lightTheme.paper-primary
+
+
+
+
+
+ #FFFFFF
+
+
+
+
+ digitv2.lightTheme.paper-secondary
+
+
+
+
+
+ #FAFAFA
+
+
+
+);
+
+const commonArgs = {
+ variant: "",
+ className: "",
+ style: {},
+};
+
+export const Documentation = () => (
+
+);
+
+Documentation.storyName = "Docs";
+
+export const Small = Template.bind({});
+Small.args = {
+ ...commonArgs,
+ variant: "small",
+};
+
+export const Medium = Template.bind({});
+Medium.args = {
+ ...commonArgs,
+ variant: "medium",
+};
+
+export const Large = Template.bind({});
+Large.args = {
+ ...commonArgs,
+ variant: "large",
+};
+
+export const Custom = Template.bind({});
+Custom.args = {
+ ...commonArgs,
+ variant: "large",
+ style: {
+ border: "10px solid #0B4B66",
+ },
+};
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Dropdown.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Dropdown.stories.js
new file mode 100644
index 00000000..30589785
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Dropdown.stories.js
@@ -0,0 +1,389 @@
+import React from "react";
+import Dropdown from "../Dropdown";
+import Iframe from "../Iframe";
+
+export default {
+ title: "Atoms/Single Select Dropdown",
+ component: Dropdown,
+ argTypes: {
+ t: { control: false, table: { disable: true } },
+ populators: { control: "object", table: { disable: true } },
+ inputRef: { control: false, table: { disable: true } },
+ label: { control: "text", table: { disable: true } },
+ onChange: { action: "onChange", table: { disable: true } },
+ value: { control: "text", table: { disable: true } },
+ errorStyle: { control: "object", table: { disable: true } },
+ disabled:{
+ control: "select",
+ options: ["Default", "Disabled"],
+ name: "State",
+ mapping: {
+ Default: false,
+ Disabled: true,
+ },
+ },
+ isSearchable: { control: "boolean", name: "Searchable" },
+ additionalWrapperClass: { control: "text", table: { disable: true } },
+ props: { control: "object", table: { disable: true } },
+ type: {
+ control: "select",
+ options: ["dropdown", "multiselectdropdown"],
+ table: { disable: true },
+ },
+ variant: {
+ control: "select",
+ options: [
+ "nesteddropdown",
+ "treedropdown",
+ "nestedtextdropdown",
+ "profiledropdown",
+ "profilenestedtext",
+ ],
+ table: { disable: true },
+ },
+ error: { table: { disable: true } },
+ description: { table: { disable: true } },
+ customSelector: { table: { disable: true } },
+ showArrow: { table: { disable: true } },
+ selected: { table: { disable: true } },
+ style: { table: { disable: true } },
+ option: { table: { disable: true } },
+ optionKey: { table: { disable: true } },
+ select: { table: { disable: true } },
+ optionsCustomStyle: { table: { disable: true } },
+ defaultValue: { table: { disable: true } },
+ name: { table: { disable: true } },
+ showIcon:{control:"boolean",name:"Icon"}
+ },
+};
+
+//mock options data
+const commonOptions = [
+ { code: "Option1", name: "Option1" },
+ { code: "Option2", name: "Option2" },
+ { code: "Option3", name: "Option3" },
+];
+//options with icons
+const optionsWithIcons = [
+ { code: "Option1", name: "Option1", icon: "Article" },
+ { code: "Option2", name: "Option2", icon: "Article" },
+ { code: "Option3", name: "Option3", icon: "Article" },
+];
+//options with profileIcon
+const optionsWithProfile = [
+ {
+ code: "Option1",
+ name: "Option1",
+ profileIcon:
+ "https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila--21.png",
+ },
+ {
+ code: "Option2",
+ name: "Option2",
+ profileIcon:
+ "https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila--21.png",
+ },
+ {
+ code: "Option3",
+ name: "Option3",
+ profileIcon:
+ "https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila--21.png",
+ },
+];
+//options with description
+const optionsWithNestedText = [
+ {
+ code: "Option1",
+ name: "Option1",
+ description:
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna",
+ },
+ {
+ code: "Option2",
+ name: "Option2",
+ description:
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna",
+ },
+ {
+ code: "Option3",
+ name: "Option3",
+ description:
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna",
+ },
+];
+//options with description and icon
+const nestedTextOptionWithIcons = [
+ {
+ code: "Option1",
+ name: "Option1",
+ icon: "Article",
+ description:
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna",
+ },
+ {
+ code: "Option2",
+ name: "Option2",
+ icon: "Article",
+ description:
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna",
+ },
+ {
+ code: "Option3",
+ name: "Option3",
+ icon: "Article",
+ description:
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna",
+ },
+];
+//options with description and profileIcon
+const nestedTextProfileOptions = [
+ {
+ code: "Option1",
+ name: "Option1",
+ description:
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna",
+ profileIcon:
+ "https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila--21.png",
+ },
+ {
+ code: "Option2",
+ name: "Option2",
+ description:
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna",
+ profileIcon:
+ "https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila--21.png",
+ },
+ {
+ code: "Option3",
+ name: "Option3",
+ description:
+ "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna",
+ profileIcon:
+ "https://www.freeiconspng.com/uploads/am-a-19-year-old-multimedia-artist-student-from-manila--21.png",
+ },
+];
+//nested options
+const nestedOptions = [
+ {
+ name: "Category A",
+ options: [
+ { code: "Category A.Option A", name: "Option A" },
+ { code: "Category A.Option B", name: "Option B" },
+ { code: "Category A.Option C", name: "Option C" },
+ ],
+ code: "Category A",
+ },
+ {
+ name: "Category B",
+ options: [
+ { code: "Category B.Option A", name: "Option A" },
+ { code: "Category B.Option 2", name: "Option 2" },
+ { code: "Category B.Option 3", name: "Option 3" },
+ ],
+ code: "Category B",
+ },
+];
+//nested options with icons
+const nestedOptionsWithIcons = [
+ {
+ name: "Category A",
+ options: [
+ { code: "Category A.Option A", name: "Option A", icon: "Article" },
+ { code: "Category A.Option B", name: "Option B", icon: "Article" },
+ { code: "Category A.Option C", name: "Option C", icon: "Article" },
+ ],
+ code: "Category A",
+ },
+ {
+ name: "Category B",
+ options: [
+ { code: "Category B.Option 1", name: "Option 1", icon: "Article" },
+ { code: "Category B.Option 2", name: "Option 2", icon: "Article" },
+ { code: "Category B.Option 3", name: "Option 3", icon: "Article" },
+ ],
+ code: "Category B",
+ },
+];
+//tree select options
+const treeDropdownOptions = [
+ {
+ name: "Category A",
+ options: [
+ {
+ code: "Category A.Option A",
+ name: "Option A",
+ options: [
+ { code: "Category A.Option A.Option 1", name: "Option 1" },
+ { code: "Category A.Option A.Option 2", name: "Option 2" },
+ ],
+ },
+ {
+ code: "Category A.Option B",
+ name: "Option B",
+ options: [
+ { code: "Category A.Option B.Option 1", name: "Option 1" },
+ { code: "Category A.Option B.Option 2", name: "Option 2" },
+ ],
+ },
+ ],
+ code: "Category A",
+ },
+ {
+ name: "Category B",
+ options: [
+ { code: "Category B.Option A", name: "Option A" },
+ {
+ code: "Category B.Option B",
+ name: "Option B",
+ options: [
+ { code: "Category B.Option B.Option 1", name: "Option 1" },
+ { code: "Category B.Option B.Option 2", name: "Option 2" },
+ ],
+ },
+ ],
+ code: "Category B",
+ },
+ {
+ name: "Category C",
+ options: [
+ { code: "Category C.Option A", name: "Option A" },
+ { code: "Category C.Option B", name: "Option B" },
+ ],
+ code: "Category C",
+ },
+];
+
+const getOptions = (variant, showIcon) => {
+ if (showIcon) {
+ switch (variant) {
+ case "nesteddropdown":
+ return nestedOptionsWithIcons;
+ case "treedropdown":
+ return treeDropdownOptions;
+ case "nestedtextdropdown":
+ return nestedTextOptionWithIcons;
+ case "profiledropdown":
+ return optionsWithProfile;
+ case "profilenestedtext":
+ return nestedTextProfileOptions;
+ default:
+ return optionsWithIcons;
+ }
+ } else {
+ switch (variant) {
+ case "nesteddropdown":
+ return nestedOptions;
+ case "treedropdown":
+ return treeDropdownOptions;
+ case "nestedtextdropdown":
+ return optionsWithNestedText;
+ case "profiledropdown":
+ return commonOptions;
+ case "profilenestedtext":
+ return optionsWithNestedText;
+ default:
+ return commonOptions;
+ }
+ }
+};
+
+const Template = (args) => {
+ const { showIcon, variant, ...rest } = args;
+ return (
+
+
+
+ );
+};
+
+const commonArgs = {
+ label: "Button",
+ className: "custom-class",
+ style: {},
+ onClick: () => {
+ console.log("clicked");
+ },
+ isDisabled: "Default",
+ variation: "",
+ size: "large",
+ title: "",
+ iconFill: "",
+ options: [],
+ optionsKey: "",
+ WithIcon: false,
+ isSuffix: "Prefix",
+ isSearchable: false,
+ Width:"Hug Content",
+ showBottom:"DropDown"
+};
+
+// Button with link variantion
+export const Link = Template.bind({});
+Link.args = {
+ ...commonArgs,
+ variation: "link",
+ label: "Link",
+};
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Loader.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Loader.stories.js
new file mode 100644
index 00000000..42f1b79e
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Loader.stories.js
@@ -0,0 +1,95 @@
+import React from "react";
+import Loader from "../Loader";
+import theLoaderPrimary from "../../constants/animations/theLoaderPrimary.json";
+import Iframe from "../Iframe";
+
+export default {
+ title: "Atoms/Loader",
+ component: Loader,
+ argTypes: {
+ variant: {
+ control: "select",
+ options: ["Basic", "PageLoader", "OverlayLoader"],
+ table:{disable:true}
+ },
+ className: {
+ control: "text",
+ table:{disable:true}
+ },
+ hideEllipsis: {
+ table:{disable:true}
+ },
+ style: {
+ control: { type: "object" },
+ table:{disable:true}
+ },
+ animationStyles: {
+ control: { type: "object" },
+ table:{disable:true}
+ },
+ loaderText: {
+ control: "text",
+ name:"Loader Text"
+ },
+ },
+};
+
+const Template = (args) =>
+
+
+ );
+};
+
+const commonArgs = {
+ label: "Button",
+ className: "custom-class",
+ style: {},
+ onClick: () => {
+ console.log("clicked");
+ },
+ isDisabled: "Default",
+ variation: "",
+ size: "large",
+ title: "",
+ iconFill: "",
+ options: [],
+ optionsKey: "",
+ WithIcon: false,
+ isSuffix: "Prefix",
+ isSearchable: false,
+ showBottom: "DropDown",
+ Width: "Hug Content",
+};
+
+// Button with primary variantion
+export const Primary = Template.bind({});
+Primary.args = {
+ ...commonArgs,
+ variation: "primary",
+};
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/RadioButtons.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/RadioButtons.stories.js
new file mode 100644
index 00000000..ced829ef
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/RadioButtons.stories.js
@@ -0,0 +1,114 @@
+import React, { useState } from "react";
+import Iframe from "../Iframe";
+import RadioButtons from "../RadioButtons";
+
+export default {
+ title: "Atoms/Radio Button",
+ component: RadioButtons,
+ argTypes: {
+ optionsKey: {
+ control: "text",
+ table: { disable: true },
+ },
+ options: {
+ table: { disable: true },
+ },
+ inputRef: {
+ table: { disable: true },
+ },
+ errorStyle: {
+ table: { disable: true },
+ },
+ State: {
+ control: "select",
+ options: ["Default", "Disabled", "NonEditable"],
+ },
+ additionalWrapperClass: { control: "text", table: { disable: true } },
+ error: { control: "text", table: { disable: true } },
+ style: { control: "object", table: { disable: true } },
+ innerStyles: { control: "object", table: { disable: true } },
+ selectedOption: { table: { disable: true } },
+ onSelect: { action: "onChange", table: { disable: true } },
+ alignVertical: { table: { disable: true } },
+ isLabelFirst: {
+ control: "select",
+ name:"Alignment",
+ options:[
+ "Right","Left"
+ ],
+ mapping:{
+ Right:false,
+ Left:true
+ }
+ },
+ },
+};
+
+const commonStyles = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ color: "#363636",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ transform: "translate(-50%, -50%)",
+};
+
+const Template = (args) => {
+ const { State, ...rest } = args;
+
+ const [selectedOption, setSelectedOption] = useState(
+ State === "NonEditable" ? "Option" : args.value
+ );
+
+ const handleSelectOption = (e) => {
+ const selectedValue = e.code;
+ if (selectedValue !== undefined) {
+ setSelectedOption(e);
+ }
+ };
+
+ return (
+
+
+ );
+};
+
+const commonArgs = {
+ optionsKey: "name",
+ options: [{ code: "Option", name: "Option" }],
+ inputRef: null,
+ errorStyle: null,
+ additionalWrapperClass: "",
+ error: "",
+ alignVertical: false,
+ isLabelFirst:"Right",
+ State: "Default",
+};
+
+export const Documentation = () => (
+
+);
+
+Documentation.storyName = "Docs";
+Documentation.argTypes = {
+ State: { table: { disable: true } },
+ isLabelFirst: { table: { disable: true }},
+};
+
+export const Basic = Template.bind({});
+Basic.args = {
+ ...commonArgs,
+};
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/SecondaryButton.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/SecondaryButton.stories.js
new file mode 100644
index 00000000..9825085d
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/SecondaryButton.stories.js
@@ -0,0 +1,154 @@
+import React from "react";
+import Button from "../Button";
+
+export default {
+ title: "Atoms/Button/Secondary",
+ component: Button,
+ argTypes: {
+ label: {
+ control: "text",
+ name:"Label"
+ },
+ variation: {
+ control: "select",
+ options: ["primary", "secondary", "teritiary", "link"],
+ table: { disable: true },
+ },
+ size: { control: "select", options: ["large", "medium", "small"],name:"Size" },
+ className: {
+ control: "text",
+ table: { disable: true },
+ },
+ style: {
+ control: { type: "object" },
+ table: { disable: true },
+ },
+ onClick: {
+ control: "function",
+ table: { disable: true },
+ },
+ title: {
+ control: "text",
+ table: { disable: true },
+ },
+ isSearchable: {
+ control: "boolean",table: { disable: true },
+ },
+ showBottom: {
+ control: "select",
+ options: ["DropUp", "DropDown"],
+ name: "ActionButton",
+ mapping: {
+ DropUp: false,
+ DropDown: true,
+ },
+ table: { disable: true },
+ },
+ optionsKey: {
+ control: "text",
+ table: { disable: true },
+ },
+ options: {
+ control: {
+ type: "array",
+ separator: ",",
+ },
+ table: { disable: true },
+ },
+ isDisabled: {
+ control: "select",
+ options: ["Default", "Disabled"],
+ name: "State",
+ mapping: {
+ Default: false,
+ Disabled: true,
+ },
+ },
+ textStyles: { table: { disable: true } },
+ iconFill: { table: { disable: true } },
+ icon: { table: { disable: true } },
+ onOptionSelect: { table: { disable: true } },
+ type: { table: { disable: true } },
+ WithIcon: {
+ control: "boolean",
+ name:"With Icon"
+ },
+ isSuffix: {
+ control: "select",
+ options: ["Prefix", "Suffix"],
+ name: "Icon",
+ mapping: {
+ Prefix: false,
+ Suffix: true,
+ },
+ if: { arg: "WithIcon", truthy: true},
+ },
+ Width: {
+ control: "select",
+ options: ["Hug Content", "Justify"],
+ },
+ },
+};
+
+const commonStyles = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ color: "#363636",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ transform: "translate(-50%, -50%)",
+};
+
+const Template = (args) => {
+ const { WithIcon, isSuffix, Width, ...restArgs } = args;
+
+ const widthStyles =
+ Width === "Hug Content"
+ ? { width: "auto", whiteSpace: "nowrap" }
+ : { width: "100%" };
+
+ return (
+
+
+
+ );
+};
+
+const commonArgs = {
+ label: "Button",
+ className: "custom-class",
+ style: {},
+ onClick: () => {
+ console.log("clicked");
+ },
+ isDisabled: "Default",
+ variation: "",
+ size: "large",
+ title: "",
+ iconFill: "",
+ options: [],
+ optionsKey: "",
+ WithIcon: false,
+ isSuffix: "Prefix",
+ isSearchable: false,
+ showBottom:"DropDown",
+ Width:"Hug Content"
+};
+
+
+// Button with secondary variantion
+export const Secondary = Template.bind({});
+Secondary.args = {
+ ...commonArgs,
+ variation: "secondary",
+};
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/SelectionTag.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/SelectionTag.stories.js
new file mode 100644
index 00000000..40afa051
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/SelectionTag.stories.js
@@ -0,0 +1,142 @@
+import React from "react";
+import SelectionTag from "../SelectionTag";
+import Iframe from "../Iframe";
+
+export default {
+ title: "Atoms/Selection Tag",
+ component: SelectionTag,
+ argTypes: {
+ width: {
+ control: "select",
+ options: ["Fixed-Equal", "Custom"],
+ name: "Width",
+ mapping: {
+ "Fixed-Equal": undefined,
+ Custom: 300,
+ },
+ },
+ errorMessage: {
+ control: "check",
+ name: "Error",
+ options: ["Error"],
+ },
+ options: {
+ control: "object",
+ table: { disable: true },
+ },
+ onSelectionChanged: {
+ action: "selectionChanged",
+ table: { disable: true },
+ },
+ selected: {
+ control: {
+ type: "array",
+ separator: ",",
+ },
+ table: { disable: true },
+ },
+ allowMultipleSelection: {
+ control: "boolean",
+ table: { disable: true },
+ },
+ withContainer: {
+ control: "select",
+ options: ["Enable", "Disable"],
+ name: "Container",
+ mapping: {
+ Enable: true,
+ Disable: false,
+ },
+ },
+ WithIcon: {
+ control: "boolean",
+ },
+ isSuffix: {
+ control: "select",
+ options: ["Prefix", "Suffix"],
+ name: "Icon",
+ mapping: {
+ Prefix: false,
+ Suffix: true,
+ },
+ if: { arg: "WithIcon", truthy: true },
+ },
+ },
+};
+
+const commonStyles = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ color: "#363636",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ transform: "translate(-50%, -50%)",
+};
+
+const prefixIconOptions = [
+ { name: "Option 1", code: "option1", prefixIcon: "Edit", suffixIcon: "" },
+ { name: "Option 2", code: "option2", prefixIcon: "Edit", suffixIcon: "" },
+ { name: "Option 3", code: "option3", prefixIcon: "Edit", suffixIcon: "" },
+];
+
+const suffixIconOptions = [
+ { name: "Option 1", code: "option1", prefixIcon: "", suffixIcon: "Edit" },
+ { name: "Option 2", code: "option2", prefixIcon: "", suffixIcon: "Edit" },
+ { name: "Option 3", code: "option3", prefixIcon: "", suffixIcon: "Edit" },
+];
+
+const Template = (args) => {
+ const {errorMessage,WithIcon,isSuffix,...rest} = args;
+ return (
+
+ 0 ? "Error Message" : ''} options={WithIcon ? isSuffix ? suffixIconOptions : prefixIconOptions : args.options}/>
+
+ );
+};
+
+const commonArgs = {
+ width: "Fixed-Equal",
+ errorMessage: "",
+ selected: [],
+ options: [
+ { name: "Option 1", code: "option1", prefixIcon: "", suffixIcon: "" },
+ { name: "Option 2", code: "option2", prefixIcon: "", suffixIcon: "" },
+ { name: "Option 3", code: "option3", prefixIcon: "", suffixIcon: "" },
+ ],
+ allowMultipleSelection: false,
+ onSelectionChanged: (selectedOptions) =>
+ console.log("Selected options:", selectedOptions),
+ withContainer: "Enable",
+ WithIcon:false,
+ isSuffix:"Prefix"
+};
+
+export const Documentation = () => (
+
+);
+
+Documentation.storyName = "Docs";
+Documentation.argTypes = {
+ width: { table: { disable: true } },
+ WithIcon: { table: { disable: true }},
+ errorMessage: { table: { disable: true }},
+ withContainer: {table: { disable: true } },
+ isSuffix: { table: { disable: true } },
+};
+
+export const SingleSelect = Template.bind({});
+SingleSelect.args = {
+ ...commonArgs,
+};
+
+export const MultiSelect = Template.bind({});
+MultiSelect.args = {
+ ...commonArgs,
+ allowMultipleSelection: true,
+};
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Spacers.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Spacers.stories.js
new file mode 100644
index 00000000..9745cea8
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Spacers.stories.js
@@ -0,0 +1,100 @@
+import React from "react";
+import { Spacers as SpacersMain } from "../../constants/spacers/spacers";
+
+export default {
+ title: "Foundations",
+};
+
+const commonStyles = {
+ background: "#d6d5d4",
+ width: "100%",
+};
+
+const SpacersDisplay = () => {
+ const spacerKeys = [
+ "spacer1",
+ "spacer2",
+ "spacer3",
+ "spacer4",
+ "spacer5",
+ "spacer6",
+ "spacer7",
+ "spacer8",
+ "spacer9",
+ "spacer10",
+ "spacer11",
+ "spacer12",
+ ];
+
+ // Updated toTitleCase function
+ const toTitleCase = (str) => {
+ return str
+ .replace(/([a-z])([0-9]+)/i, "$1 $2") // Add space between the name and number
+ .split(/(?=[A-Z])/g) // Split based on capital letters
+ .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+ .join(" ");
+ };
+
+ return (
+
+
+ );
+};
+
+export const Spacers = () =>
+ Spacers
+
+ {spacerKeys.map((spacerKey) => (
+
+
+ ))}
+
+
+
+
+
+ {`${toTitleCase(spacerKey)}`}
+ {`${`digitv2.spacers.${spacerKey}`}`}
+ {`${SpacersMain?.[spacerKey]}`}
+
+
+ );
+};
+
+export const Documentation = () => (
+
+);
+
+Documentation.storyName = "Docs";
+Documentation.argTypes = {
+ WithIcons: { table: { disable: true } },
+ Tab1Label: { table: { disable: true }},
+ Tab2Label: { table: { disable: true }},
+ Tab3Label: {table: { disable: true } },
+ Tab4Label: { table: { disable: true } },
+};
+
+const commonArgs = {
+ activeLink: "Tab 2",
+ showNav: true,
+ style: {},
+ className: "",
+ navClassName: "",
+ configItemKey: "code",
+ navStyles: {},
+ onTabClick: (item) => {
+ console.log(item);
+ },
+ itemStyle: {},
+ WithIcons: false,
+ Tab1Label: "",
+ Tab2Label: "",
+ Tab3Label: "",
+ Tab4Label: "",
+};
+
+export const Basic = Template.bind({});
+Basic.args = {
+ ...commonArgs,
+};
+
+export const Custom = Template.bind({});
+Custom.args = {
+ ...Basic.args,
+ style: { backgroundColor: "#FFFFFF" },
+ itemStyle: { backgroundColor: "#FAFAFA", border: "1px solid black" },
+};
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Tag.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Tag.stories.js
new file mode 100644
index 00000000..e616942e
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Tag.stories.js
@@ -0,0 +1,154 @@
+import React from "react";
+import Tag from "../Tag";
+import Iframe from "../Iframe";
+
+export default {
+ title: "Atoms/Tag",
+ component: Tag,
+ argTypes: {
+ className: {
+ control: "text",
+ table: { disable: true },
+ },
+ iconClassName: {
+ control: "text",
+ table: { disable: true },
+ },
+ label: {
+ control: "text",
+ name: "Label",
+ },
+ style: {
+ control: { type: "object" },
+ table: { disable: true },
+ },
+ labelStyle: {
+ control: { type: "object" },
+ table: { disable: true },
+ },
+ stroke: {
+ control: "check",
+ name: "Stroke",
+ options: ["Enable"],
+ },
+ type: {
+ control: "select",
+ options: ["monochrome", "success", "warning", "error"],
+ table: { disable: true },
+ },
+ alignment: {
+ control: "select",
+ options: ["center", "left", "right"],
+ table: { disable: true },
+ },
+ icon: {
+ control: "text",
+ table: { disable: true },
+ },
+ showIcon: {
+ control: "check",
+ name: "Icon",
+ options: ["Enable"],
+ },
+ iconColor: {
+ table: { disable: true },
+ },
+ onClick: {
+ control: "check",
+ name: "Clickable",
+ options: ["Enable"],
+ },
+ },
+};
+
+const commonStyles = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ color: "#363636",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ transform: "translate(-50%, -50%)",
+};
+
+const Template = (args) => {
+ const { stroke, showIcon, onClick, ...rest } = args;
+ return (
+
+ 0 ? true : false}
+ showIcon={showIcon?.length > 0 ? true : false}
+ onClick={
+ onClick?.length > 0
+ ? (e) => {
+ console.log(e);
+ }
+ : undefined
+ }
+ />
+
+ );
+};
+
+const commonArgs = {
+ label: "Tag",
+ className: "",
+ style: {},
+ stroke: "",
+ type: "monochrome",
+ icon: "",
+ showIcon: "",
+ labelStyle: {},
+};
+
+export const Documentation = () => (
+
+);
+
+Documentation.storyName = "Docs";
+Documentation.argTypes = {
+ label: { table: { disable: true } },
+ stroke: { table: { disable: true }},
+ onClick: { table: { disable: true }},
+ showIcon: {table: { disable: true } },
+};
+
+export const Basic = Template.bind({});
+Basic.args = {
+ ...commonArgs,
+ type: "monochrome",
+};
+
+export const Success = Template.bind({});
+Success.args = {
+ ...commonArgs,
+ type: "success",
+};
+
+export const Error = Template.bind({});
+Error.args = {
+ ...commonArgs,
+ type: "error",
+};
+export const Warning = Template.bind({});
+Warning.args = {
+ ...commonArgs,
+ type: "warning",
+};
+export const Custom = Template.bind({});
+Custom.args = {
+ ...commonArgs,
+ style: {
+ width: "600px",
+ },
+ labelStyle: {
+ color: "#0B4B66",
+ },
+ icon: "ArrowLeft",
+};
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/TeritiaryButton.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/TeritiaryButton.stories.js
new file mode 100644
index 00000000..cf3856c8
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/TeritiaryButton.stories.js
@@ -0,0 +1,152 @@
+import React from "react";
+import Button from "../Button";
+
+export default {
+ title: "Atoms/Button/Teritiary",
+ component: Button,
+ argTypes: {
+ label: {
+ control: "text",
+ name:"Label"
+ },
+ variation: {
+ control: "select",
+ options: ["primary", "secondary", "teritiary", "link"],
+ table: { disable: true },
+ },
+ size: { control: "select", options: ["large", "medium", "small"],name:"Size" },
+ className: {
+ control: "text",
+ table: { disable: true },
+ },
+ style: {
+ control: { type: "object" },
+ table: { disable: true },
+ },
+ onClick: {
+ control: "function",
+ table: { disable: true },
+ },
+ title: {
+ control: "text",
+ table: { disable: true },
+ },
+ isSearchable: {
+ control: "boolean",table: { disable: true },
+ },
+ showBottom: {
+ control: "select",
+ options: ["DropUp", "DropDown"],
+ name: "ActionButton",
+ mapping: {
+ DropUp: false,
+ DropDown: true,
+ },
+ table: { disable: true },
+ },
+ optionsKey: {
+ control: "text",
+ table: { disable: true },
+ },
+ options: {
+ control: {
+ type: "array",
+ separator: ",",
+ },
+ table: { disable: true },
+ },
+ isDisabled: {
+ control: "select",
+ options: ["Default", "Disabled"],
+ name: "State",
+ mapping: {
+ Default: false,
+ Disabled: true,
+ },
+ },
+ textStyles: { table: { disable: true } },
+ iconFill: { table: { disable: true } },
+ icon: { table: { disable: true } },
+ onOptionSelect: { table: { disable: true } },
+ type: { table: { disable: true } },
+ WithIcon: {
+ control: "boolean",
+ },
+ isSuffix: {
+ control: "select",
+ options: ["Prefix", "Suffix"],
+ name: "Icon",
+ mapping: {
+ Prefix: false,
+ Suffix: true,
+ },
+ if: { arg: "WithIcon", truthy: true},
+ },
+ Width: {
+ control: "select",
+ options: ["Hug Content", "Justify"],
+ },
+ },
+};
+
+const commonStyles = {
+ position: "absolute",
+ top: "50%",
+ left: "50%",
+ color: "#363636",
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ transform: "translate(-50%, -50%)",
+};
+
+const Template = (args) => {
+ const { WithIcon, isSuffix, Width, ...restArgs } = args;
+
+ const widthStyles =
+ Width === "Hug Content"
+ ? { width: "auto", whiteSpace: "nowrap" }
+ : { width: "100%" };
+
+ return (
+
+
+
+ );
+};
+
+const commonArgs = {
+ label: "Button",
+ className: "custom-class",
+ style: {},
+ onClick: () => {
+ console.log("clicked");
+ },
+ isDisabled: "Default",
+ variation: "",
+ size: "large",
+ title: "",
+ iconFill: "",
+ options: [],
+ optionsKey: "",
+ WithIcon: false,
+ isSuffix: "Prefix",
+ isSearchable: false,
+ showBottom:"DropDown",
+ Width:"Hug Content"
+};
+
+// Button with Teritiary variantion
+export const Teritiary = Template.bind({});
+Teritiary.args = {
+ ...commonArgs,
+ variation: "teritiary",
+};
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/TextBlock.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/TextBlock.stories.js
new file mode 100644
index 00000000..4282704b
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/TextBlock.stories.js
@@ -0,0 +1,104 @@
+import React from "react";
+import TextBlock from "../TextBlock";
+import Iframe from "../Iframe";
+
+export default {
+ title: "Atoms/Text Block",
+ component: TextBlock,
+ argTypes: {
+ headerContentClassName: {
+ table: { disable: true },
+ },
+ headerClassName: {
+ table: { disable: true },
+ },
+ captionClassName: {
+ table: { disable: true },
+ },
+ subHeaderClassName: {
+ table: { disable: true },
+ },
+ bodyClassName: {
+ table: { disable: true },
+ },
+ wrapperClassName: {
+ table: { disable: true },
+ },
+ style: {
+ table: { disable: true },
+ },
+ caption: {
+ control: "boolean",name:"Caption"
+ },
+ header: {
+ control: "boolean",name:"Heading"
+ },
+ subHeader: {
+ control: "boolean",name:"Subheading"
+ },
+ body: {
+ control: "boolean",name:"Body"
+ },
+ },
+};
+
+const Template = (args) => {
+ const { caption, body, header, subHeader, ...rest } = args;
+ return (
+
+ Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+ Lorem Ipsum has been the industry's
+
,
+ ,
+ ,
+ ,
+ ,
+];
+
+const subElementsToShow = [
+ "26 / 03 / 2024",
+ "11:00 PM",
+ "26 / 03 / 2024 11:00 PM",
+ "26 / 03 / 2024 11:00 PM Mon",
+ "+91 **********",
+];
+
+const Template = (args) => {
+ const { subElements, additionalElements, ...rest } = args;
+ return (
+
+
+);
+
+const commonArgs = {
+ populators: {
+ name: "toast",
+ },
+ label: "",
+ type: "success",
+ style: { left: "25%" },
+};
+
+export const Documentation = () => (
+
+);
+
+Documentation.storyName = "Docs";
+
+export const SuccessToast = Template.bind({});
+SuccessToast.args = {
+ ...commonArgs,
+ label: "Success Toast Message",
+ type: "success",
+};
+
+export const WarningToast = Template.bind({});
+WarningToast.args = {
+ ...commonArgs,
+ label: "Warning Toast Message",
+ type: "warning",
+};
+
+export const ErrorToast = Template.bind({});
+ErrorToast.args = {
+ ...commonArgs,
+ label: "Error Toast Message",
+ type: "error",
+};
+
+export const InfoToast = Template.bind({});
+InfoToast.args = {
+ ...commonArgs,
+ label: "Info Toast Message",
+ type: "info",
+};
+
+export const SuccessToastWithTransitionTime = Template.bind({});
+SuccessToastWithTransitionTime.args = {
+ ...commonArgs,
+ label: "Success Toast Message",
+ type: "success",
+ transitionTime: 600000,
+};
+
+export const WarningToastWithTransitionTime = Template.bind({});
+WarningToastWithTransitionTime.args = {
+ ...commonArgs,
+ label: "Warning Toast Message",
+ type: "warning",
+ transitionTime: 600000,
+};
+
+export const ErrorToastWithTrnasitionTime = Template.bind({});
+ErrorToastWithTrnasitionTime.args = {
+ ...commonArgs,
+ label: "Error Toast Message",
+ type: "error",
+ transitionTime: 600000,
+};
+
+export const InfoToastWithTrnasitionTime = Template.bind({});
+InfoToastWithTrnasitionTime.args = {
+ ...commonArgs,
+ label: "Info Toast Message",
+ type: "info",
+ transitionTime: 600000,
+};
\ No newline at end of file
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Toggle.stories.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Toggle.stories.js
new file mode 100644
index 00000000..2807c055
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/atoms/stories/Toggle.stories.js
@@ -0,0 +1,127 @@
+import React, { useEffect, useState } from "react";
+import Toggle from "../Toggle";
+import Iframe from "../Iframe";
+
+export default {
+ title: "Atoms/Toggle",
+ component: Toggle,
+ argTypes: {
+ inputRef: { control: false, table: { disable: true } },
+ label: { control: "text", table: { disable: true } },
+ onChange: { action: "onChange", table: { disable: true } },
+ value: { control: "text", table: { disable: true } },
+ errorStyle: { control: "object", table: { disable: true } },
+ disabled: { control: "boolean", table: { disable: true } },
+ type: { control: "radio", options: ["toggle"], table: { disable: true } },
+ additionalWrapperClass: { control: "text", table: { disable: true } },
+ props: { control: "object", table: { disable: true } },
+ Toggle1Label: { control: "text", name: "Toggle 1 Label" },
+ Toggle2Label: { control: "text", name: "Toggle 2 Label" },
+ Toggle3Label: { control: "text", name: "Toggle 3 Label" },
+ t: { table: { disable: true } },
+ options: { table: { disable: true } },
+ name: { table: { disable: true } },
+ onSelect: { table: { disable: true } },
+ selectedOption: { table: { disable: true } },
+ innerStyles: { table: { disable: true } },
+ optionsKey: { table: { disable: true } },
+ style: { table: { disable: true } },
+ numberOfToggleItems: { control: "number", name: "No of Toggle items" },
+ },
+};
+
+const Options = [
+ { code: "Toggle1", name: "Toggle1" },
+ { code: "Toggle2", name: "Toggle2" },
+ { code: "Toggle3", name: "Toggle3" },
+];
+
+const Template = (args) => {
+ const [selectedOption, setSelectedOption] = useState(args.value);
+
+ const handleSelectOption = (selectedValue) => {
+ if (selectedValue !== undefined) {
+ setSelectedOption(selectedValue);
+ }
+ };
+
+ // Generate options dynamically based on numberOfToggleItems
+ const options = Array.from(
+ { length: args.numberOfToggleItems },
+ (_, index) => {
+ const toggleLabel =
+ args[`Toggle${index + 1}Label`] &&
+ args[`Toggle${index + 1}Label`] !== ""
+ ? args[`Toggle${index + 1}Label`]
+ : `Toggle ${index + 1}`;
+ return { code: `Toggle${index + 1}`, name: toggleLabel };
+ }
+ );
+
+ return (
+
+
+ );
+};
+
+const htmlTooltip = (
+ +
+
+
+ );
+ case "paragraph":
+ return (
+
+
+ );
+ case "mobileNumber":
+ return (
+
+
+ );
+ case "custom":
+ return populators.component;
+ case "checkbox":
+ return (
+
+ {
+ // const obj = {
+ // ...props.value,
+ // [e.target.value]: e.target.checked
+ // }
+ onChange(e.target.checked);
+ }}
+ value={formData?.[populators.name]}
+ checked={formData?.[populators.name]}
+ label={t(`${populators?.title}`)}
+ styles={populators?.styles}
+ style={populators?.labelStyles}
+ variant={variant ? variant : errors?.[populators.name] ? "digit-field-error" : ""}
+ />
+
+ );
+ case "multiupload":
+ return (
+
+
+ );
+ case "component":
+ return (
+
+
+ );
+ case "apidropdown":
+ return (
+
+
+ );
+ case "multiselectdropdown":
+ return (
+
+ {
+ onChange(
+ e
+ ?.map((row) => {
+ return row?.[1] ? row[1] : null;
+ })
+ .filter((e) => e)
+ );
+ }}
+ selected={value || []}
+ defaultLabel={t(populators?.defaultText)}
+ defaultUnit={t(populators?.selectedText)}
+ config={populators}
+ variant={variant ? variant : errors?.[populators.name] ? "digit-field-error" : ""}
+ />
+
+ );
+ default:
+ return null;
+ }
+ };
+
+ const renderCharCount = () => {
+ if (charCount) {
+ const maxCharacters = populators?.validation?.maxlength || 50;
+ return (
+
+ {renderField()}
+
+
+ );
+};
+
+export default FieldComposer;
diff --git a/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/FieldController.js b/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/FieldController.js
new file mode 100644
index 00000000..01f68107
--- /dev/null
+++ b/micro-ui/web/micro-ui-internals/packages/ui-components/src/hoc/FieldController.js
@@ -0,0 +1,94 @@
+import React from "react";
+// import FieldComposer from "./FieldComposer";
+import FieldV1 from "./FieldV1";
+import { Controller } from "react-hook-form";
+
+function FieldController(args) {
+ const {
+ type,
+ populators,
+ isMandatory,
+ disable,
+ component,
+ config,
+ sectionFormCategory,
+ formData,
+ selectedFormCategory,
+ control,
+ props,
+ errors,
+ controllerProps,
+ } = args;
+ let { apiDetails } = props;
+ let disableFormValidation = false;
+ if (sectionFormCategory && selectedFormCategory) {
+ disableFormValidation = sectionFormCategory !== selectedFormCategory ? true : false;
+ }
+ const customValidation = config?.populators?.validation?.customValidation;
+ let customValidations = config?.additionalValidation
+ ? Digit?.Customizations?.[apiDetails?.masterName]?.[apiDetails?.moduleName]?.additionalValidations(
+ config?.additionalValidation?.type,
+ formData,
+ config?.additionalValidation?.keys
+ )
+ : null;
+ const customRules = customValidation ? { validate: customValidation } : customValidations ? { validate: customValidation } : {};
+ const error = (populators?.name && errors && errors[populators?.name] && Object.keys(errors[populators?.name]).length) ? (populators?.error) : null
+ const customProps = config?.customProps;
+
+ return (
+
+ {config?.description && {t(config?.description)} }
+ {renderCharCount()}
+
+ {errors.errorMessage ? (
+
+
+
+ );
+ case "radio":
+ case "dropdown":
+ case "select":
+ case "radioordropdown":
+ case "toggle":
+ return (
+
+ {
+ onChange(e.target.checked);
+ }}
+ value={value}
+ checked={formData?.[populators?.name]}
+ isIntermediate={populators?.isIntermediate}
+ label={t(`${populators?.title}`)}
+ styles={populators?.styles}
+ style={populators?.labelStyles}
+ disabled={disabled}
+ isLabelFirst={populators?.isLabelFirst}
+ id={fieldId}
+ />
+
+ );
+ case "multiselectdropdown":
+ return (
+
+ {
+ onChange(
+ e
+ ?.map((row) => {
+ return row?.[1] ? row[1] : null;
+ })
+ .filter((e) => e)
+ );
+ }}
+ selected={value || []}
+ defaultLabel={t(populators?.defaultText)}
+ defaultUnit={t(populators?.selectedText)}
+ config={populators}
+ disabled={disabled}
+ variant={variant}
+ addSelectAllCheck={populators?.addSelectAllCheck}
+ addCategorySelectAllCheck={populators?.addCategorySelectAllCheck}
+ selectAllLabel={populators?.selectAllLabel}
+ categorySelectAllLabel={populators?.categorySelectAllLabel}
+ restrictSelection={populators?.restrictSelection}
+ isSearchable={populators?.isSearchable}
+ />
+
+ );
+ case "mobileNumber":
+ return (
+
+
+ );
+ case "component":
+ return (
+
+
+ );
+ }}
+ />
+ );
+ case "apidropdown":
+ return (
+
+
+ );
+ }}
+ />
+ );
+ // case "workflowstatesfilter":
+ // return (
+ //
+ //
+ // );
+ // }}
+ // />
+ // );
+ case "dateRange":
+ return (
+
+ {
+ return {
+ if(childformData && !isEqual(formData?.[populators?.name],childformData)){
+ controllerProps.setValue(populators?.name, {...childformData});
+ }
+ }}
+ //onChange={props.onChange}
+ parentName={populators?.name}
+ inline={true}
+ hideHeader={true}
+ />
+ }}
+ rules={{ required: required, ...populators.validation }}
+ defaultValue={formData?.[populators?.name]}
+ name={populators?.name}
+ control={controllerProps?.control}
+ />
+
+ );
+
+ case "multiChildForm":
+ const multichildConfig = populators?.childform || [];
+ const entries = formData?.[populators?.name] || [];
+
+ return (
+
+ {entries.filter((ob) => ob != undefined).map((item, index) => (
+
+ );
+
+ default:
+ return null;
+ }
+ };
+
+
+
+ return (
+
+ {/* Cross Button to Remove */}
+
+
+ {
+ //const childformValues = props?.field?.value || [];
+ return( {
+ const updated = [...(formData?.[populators?.name] || [])];
+ updated[index] = childformData;
+
+ if (!isEqual(updated[index], formData?.[populators?.name][index])) {
+ controllerProps.setValue(`${populators?.name}[${index}]`, {...updated[index]});
+ }
+ }}
+ parentName={`${populators?.name}[${index}]`}
+ inline={true}
+ hideHeader={true}
+ />);
+ }}
+ name={`${populators?.name}[${index}]`}
+ control={controllerProps?.control}
+ defaultValue={item}
+ />
+
+
+
+ ))}
+
+ {/* Add Another Button */}
+
+
+
+
+ {required ? " * " : null}
+ {infoMessage ? (
+
+
+ ) : null}
+
+ {renderField()}
+
+
+ {renderDescriptionOrError()}
+ {renderCharCount()}
+
+
+ {populators?.componentInFront ? {populators.componentInFront} : null}
+ (
+
+ );
+ case "amount":
+ return (
+
+ {populators?.componentInFront ? {populators.componentInFront} : null}
+ (
+
+ );
+ case "textarea":
+ return (
+
+ (
+
+ )}
+ name={populators.name}
+ rules={!disableFormValidation ? { required: isMandatory, ...populators.validation } : {}}
+ control={control}
+ />
+
+ );
+ case "paragraph":
+ return (
+
+ (
+
+ );
+ case "mobileNumber":
+ return (
+
+ (
+
+ );
+ case "custom":
+ return (
+
+ {
+ // const obj = {
+ // ...props.value,
+ // [e.target.value]: e.target.checked
+ // }
+
+ props.onChange(e.target.checked);
+ }}
+ value={formData?.[populators.name]}
+ checked={formData?.[populators.name]}
+ label={t(`${populators?.title}`)}
+ styles={populators?.styles}
+ style={populators?.labelStyles}
+ />
+
+ );
+ }}
+ />
+ );
+ case "multiupload":
+ return (
+
+ (
+
+ );
+ case "component":
+ return (
+
+ {
+ return (
+ //
+ );
+ case "apidropdown":
+ return (
+
+
+ );
+ }}
+ />
+
+
+ );
+ }}
+ />
+ );
+ case "multiselectdropdown":
+ return (
+
+ {
+ props.onChange(
+ e
+ ?.map((row) => {
+ return row?.[1] ? row[1] : null;
+ })
+ .filter((e) => e)
+ );
+ }}
+ selected={props?.value || []}
+ defaultLabel={t(populators?.defaultText)}
+ defaultUnit={t(populators?.selectedText)}
+ config={populators}
+ />
+
+ );
+ }}
+ />
+ );
+ default:
+ // return populators?.dependency !== false ? populators : null;
+ return null;
+ }
+};
+
+export default Fields;
+
+
+//TODO: This component is currently not in use. We plan to revisit it later for necessary changes and updates.
+//
+ {/* {!field.withoutLabel && (
+
+ {t(field.label)}
+ {field.isMandatory ? " * " : null}
+ {field.labelChildren && field.labelChildren}
+
+ )} */}
+ {/* {errors && errors[field.populators?.name] && Object.keys(errors[field.populators?.name]).length ? (
+ {t(field.populators.error || errors[field.populators?.name]?.message)}
+ ) : null} */}
+
+
+ {fieldSelector(field.type, field.populators, field.isMandatory, field?.disable, field?.component, field, sectionFormCategory)}
+ {field?.description && (
+
+ {t(field.description)}
+
+ )}
+
+
+ {fieldSelector(field.type, field.populators, field.isMandatory, field?.disable, field?.component, field, sectionFormCategory)}
+ {field?.description && {t(field?.description)} }
+
*/}
+
+ {props.secondaryActionLabel}
+
+ )}
+
+ {configs?.headerLabel && (
+
+ {t(configs?.headerLabel)}
+
+ )}
+ {Digit.Utils.didEmployeeHasAtleastOneRole(
+ configs?.actions?.actionRoles
+ ) && (
+
+
+
+ {showToast && (
+
+ {configs?.sections?.links?.show && (
+
+
+ )}
+ {configs?.type === "search" && configs?.sections?.search?.show && (
+
+
+ )}
+ {configs?.type === "inbox" && configs?.sections?.filter?.show && (
+
+
+ )}
+ {configs?.type === "inbox" && (
+
+
+ )}
+ {configs?.sections?.searchResult?.show && (
+
+ {type === "FILTER" && (
+
+ )}
+
+
+
+
+
+ )}
+ {configs?.type === "search" && configs?.sections?.filter?.show && (
+
+
+ )}
+ {configs?.type === "inbox" && configs?.sections?.search?.show && (
+
+
+
+
+
+ {configs?.sections?.filter?.show && (
+ {
+ setType("FILTER");
+ setPopup(true);
+ }}
+ />
+ )}
+ {configs?.sections?.search?.show && (
+ {
+ setType("SEARCH");
+ setPopup(true);
+ }}
+ />
+ )}
+ {configs?.sections?.sort?.show && (
+ {
+ setType("SORT");
+ setPopup(true);
+ }}
+ />
+ )}
+
+ 0
+ ? !(isLoading || isFetching)
+ ? { overflowX: "auto" }
+ : {}
+ : {}
+ }
+ >
+
+
+
+
+
+ )}
+ {popup && (
+
+
+ )}
+ {/* {type === "SORT" && (
+
+ {
+ )} */}
+ {type === "SEARCH" && (
+
+
+ )}
+
+ {/* One can use this Parent to add additional sub parents to render more sections */}
+
+
+
+
+
+ );
+ }
+ case "sort": {
+ return (
+
+
+
+
+ );
+ }
+ case "search": {
+ return (
+
+
+
+
+ );
+ }
+ default: {
+ return (
+
+
+
+
+ );
+ }
+ }
+ };
+
+ return (
+
+
+
+ {showToast && (
+ {renderHeader()}
+
+ {Object.keys(row.mapping).map(key => {
+ let toRender;
+ if(row.additionalCustomization[key]){
+ toRender = (
+
+ }
+ })
+
+ function RenderResult() {
+ if (searchResult?.length === 0) {
+ return ( {}}
+ row={row.mapping} />)
+ }
+ else {
+ toRender = row.mapping[key]? (
+
{}}
+ row={row.mapping} />
+ ) : (
+
{}}
+ row={row.mapping} /> )
+ }
+ return toRender
+ })}
+
+ {
+ return {
+ style: {width : "200vw"},
+ };
+ }}
+ disableSort={config?.enableColumnSort ? false : true}
+ autoSort={config?.enableColumnSort ? true : false}
+ // globalSearch={config?.enableGlobalSearch ? filterValue : undefined}
+ // onSearch={config?.enableGlobalSearch ? searchQuery : undefined}
+ />
+
+ }
+
+ if (isLoading)
+ { return