@djb25/digit-ui-module-wt 1.0.18 → 1.0.19

package/dist/index.modern.js

@@ -1,7 +1,7 @@
 import { TickMark, ArrowDown, MobileNumber, CardLabelError, TextInput, Dropdown, DatePicker, SubmitBar, Card, Table, Loader, Toast, AppContainer, ModuleHeader, ArrowLeft, PrivateRoute, HomeIcon, KeyNote, Modal, CardHeader, CardText, FormStep, CardLabel, RadioButtons, UploadFile, TextArea, CheckBox, CardSubHeader, StatusTable, Row, GenericFileIcon, LinkButton, EditIcon, Banner, CHBIcon, EmployeeModuleCard, CloseSvg, Label, LinkLabel, ActionBar, DetailsCard, SearchAction, FilterAction, PopUp, ShippingTruck, CustomNameDropdown, MultiSelectDropdown, LabelFieldPair, AddIcon, Menu, Header, TelePhone, DisplayPhotos, CardSectionHeader, CheckPoint, ConnectingCheckPoints, MultiLink, Localities, RemoveableTag, FormComposer, PDFSvg, MultiUploadWrapper, Close as Close$g, BreakLine, InfoBannerIcon, ViewsIcon, ButtonSelector, LocationIcon, CitizenHomeCard, PTIcon, ApplicantDetails, AddressDetails } from '@djb25/digit-ui-react-components';
 import React, { useState, useMemo, useCallback, useEffect, Fragment, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useHistory, useRouteMatch, Switch, Route, Redirect, Link, useParams } from 'react-router-dom';
+import { useLocation, useRouteMatch, useHistory, Switch, Route, Redirect, Link, useParams } from 'react-router-dom';
 import { useQueryClient } from 'react-query';
 import { useForm, Controller } from 'react-hook-form';
 import { io } from 'socket.io-client';
@@ -137,7 +137,6 @@ const VerticalTimeline = ({
     t
   } = useTranslation();
   const location = useLocation();
-  const history = useHistory();
   const currentRoute = location.pathname.split("/").pop();
   if (currentRoute === "info") return null;
   const steps = config.filter(item => item.timeLine && item.timeLine.length > 0).reduce((acc, item) => {
@@ -156,9 +155,9 @@ const VerticalTimeline = ({
     return acc;
   }, []).sort((a, b) => a.stepNumber - b.stepNumber);
   steps.push({
-    key: 'final-submit',
-    label: 'Review & Submit',
-    routes: ['check', 'wt-acknowledgement', 'mt-acknowledgement', 'tp-acknowledgement'],
+    key: "final-submit",
+    label: "Review & Submit",
+    routes: ["check", "wt-acknowledgement", "mt-acknowledgement", "tp-acknowledgement"],
     stepNumber: steps.length + 1
   });
   const currentStepIndex = steps.findIndex(step => step.routes.includes(currentRoute));
@@ -166,15 +165,17 @@ const VerticalTimeline = ({
   const handleStepClick = (route, index) => {};
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "vertical-timeline-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "vertical-timeline-wrapper"
   }, steps.map((step, index) => {
     const isCompleted = index < activeStepIndex;
     const isActive = index === activeStepIndex;
     return /*#__PURE__*/React.createElement("div", {
       key: index,
-      className: `vertical-timeline-step ${isCompleted ? 'completed' : ''} ${isActive ? 'active' : ''}`,
+      className: `vertical-timeline-step ${isCompleted ? "completed" : ""} ${isActive ? "active" : ""}`,
       onClick: () => handleStepClick()
     }, /*#__PURE__*/React.createElement("div", {
-      className: `vertical-timeline-connector ${index < activeStepIndex ? 'completed' : ''}`
+      className: `vertical-timeline-connector ${index < activeStepIndex ? "completed" : ""}`
     }), /*#__PURE__*/React.createElement("div", {
       className: "vertical-timeline-pill"
     }, isCompleted ? /*#__PURE__*/React.createElement(TickMark, null) : step.stepNumber), /*#__PURE__*/React.createElement("div", {
@@ -182,7 +183,7 @@ const VerticalTimeline = ({
     }, /*#__PURE__*/React.createElement("div", {
       className: "vertical-timeline-label"
     }, t(step.label))));
-  })));
+  }))));
 };
 
 const WTCreate = () => {
@@ -352,26 +353,11 @@ const WTCreate = () => {
   const MTAcknowledgement = (_Digit3 = Digit) === null || _Digit3 === void 0 ? void 0 : (_Digit3$ComponentRegi = _Digit3.ComponentRegistryService) === null || _Digit3$ComponentRegi === void 0 ? void 0 : _Digit3$ComponentRegi.getComponent("MTAcknowledgement");
   const TPAcknowledgement = (_Digit4 = Digit) === null || _Digit4 === void 0 ? void 0 : (_Digit4$ComponentRegi = _Digit4.ComponentRegistryService) === null || _Digit4$ComponentRegi === void 0 ? void 0 : _Digit4$ComponentRegi.getComponent("TPAcknowledgement");
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    style: {
-      display: "flex",
-      width: "100%",
-      gap: "24px"
-    }
-  }, !pathname.includes("/info") && /*#__PURE__*/React.createElement("div", {
-    style: {
-      flex: "0 0 280px",
-      background: "#fff",
-      padding: "20px 0",
-      boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
-      borderRadius: "4px"
-    }
-  }, /*#__PURE__*/React.createElement(VerticalTimeline, {
+    className: "employee-form-section-wrapper"
+  }, !pathname.includes("/info") && /*#__PURE__*/React.createElement(VerticalTimeline, {
     config: config
-  })), /*#__PURE__*/React.createElement("div", {
-    style: {
-      flex: "1",
-      overflowY: "auto"
-    }
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "employee-form-section"
   }, /*#__PURE__*/React.createElement(Switch, null, config.map((routeObj, index) => {
     var _userDetails$user;
     const {
@@ -2547,31 +2533,16 @@ const SearchApplication = ({
     }, t("ES_COMMON_CLEAR_SEARCH"));
   };
   return /*#__PURE__*/React.createElement("form", {
-    onSubmit: handleSubmit(onSubmitInput)
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-    className: "search-container",
-    style: {
-      width: "auto",
-      marginBottom: "16px",
-      marginLeft: isInboxPage ? "" : "revert"
-    }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "search-complaint-container",
-    style: {
-      width: "100%"
-    }
-  }, (type === "mobile" || mobileView) && /*#__PURE__*/React.createElement("div", {
+    onSubmit: handleSubmit(onSubmitInput),
+    className: "search-form-wrapper search-complaint-container"
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, (type === "mobile" || mobileView) && /*#__PURE__*/React.createElement("div", {
     className: "complaint-header"
   }, /*#__PURE__*/React.createElement("h2", null, t("ES_COMMON_SEARCH_BY")), /*#__PURE__*/React.createElement("span", {
     onClick: onClose
   }, /*#__PURE__*/React.createElement(CloseSvg, null))), /*#__PURE__*/React.createElement("div", {
-    className: "complaint-input-container for-pt " + (!isInboxPage ? "for-search" : ""),
-    style: {
-      width: "100%",
-      display: "grid"
-    }
+    className: "formcomposer-section-grid"
   }, searchFields === null || searchFields === void 0 ? void 0 : (_searchFields$filter = searchFields.filter(e => true)) === null || _searchFields$filter === void 0 ? void 0 : _searchFields$filter.map((input, index) => {
-    var _formState$dirtyField, _formState$errors, _formState$errors$inp;
+    var _formState$dirtyField, _formState$errors, _formState$errors$inp, _formState$errors2, _formState$errors2$in;
     return /*#__PURE__*/React.createElement("div", {
       key: input.name,
       className: "input-fields"
@@ -2600,7 +2571,7 @@ const SearchApplication = ({
       name: input.name,
       control: control,
       defaultValue: ""
-    })), formState !== null && formState !== void 0 && (_formState$dirtyField = formState.dirtyFields) !== null && _formState$dirtyField !== void 0 && _formState$dirtyField[input.name] ? /*#__PURE__*/React.createElement("span", {
+    })), formState !== null && formState !== void 0 && (_formState$dirtyField = formState.dirtyFields) !== null && _formState$dirtyField !== void 0 && _formState$dirtyField[input.name] && formState !== null && formState !== void 0 && (_formState$errors = formState.errors) !== null && _formState$errors !== void 0 && (_formState$errors$inp = _formState$errors[input.name]) !== null && _formState$errors$inp !== void 0 && _formState$errors$inp.message ? /*#__PURE__*/React.createElement("span", {
       style: {
         fontWeight: "700",
         color: "rgba(212, 53, 28)",
@@ -2609,27 +2580,20 @@ const SearchApplication = ({
         fontSize: "12px"
       },
       className: "inbox-search-form-error"
-    }, formState === null || formState === void 0 ? void 0 : (_formState$errors = formState.errors) === null || _formState$errors === void 0 ? void 0 : (_formState$errors$inp = _formState$errors[input.name]) === null || _formState$errors$inp === void 0 ? void 0 : _formState$errors$inp.message) : null);
-  }), isInboxPage && /*#__PURE__*/React.createElement("div", {
-    style: {
-      gridColumn: "2/3",
-      textAlign: "right",
-      paddingTop: "10px",
-      padding: "10px"
-    },
-    className: "input-fields"
-  }, /*#__PURE__*/React.createElement("div", null, clearAll())), type === "desktop" && !mobileView && /*#__PURE__*/React.createElement("div", {
-    style: {
-      maxWidth: "unset",
-      marginLeft: "unset"
-    },
-    className: "search-submit-wrapper"
-  }, /*#__PURE__*/React.createElement(SubmitBar, {
-    className: "submit-bar-search",
-    label: t("ES_COMMON_SEARCH"),
+    }, formState === null || formState === void 0 ? void 0 : (_formState$errors2 = formState.errors) === null || _formState$errors2 === void 0 ? void 0 : (_formState$errors2$in = _formState$errors2[input.name]) === null || _formState$errors2$in === void 0 ? void 0 : _formState$errors2$in.message) : null);
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "formcomposer-section-button"
+  }, isInboxPage ? /*#__PURE__*/React.createElement("div", {
+    className: "generic-button clear-search"
+  }, /*#__PURE__*/React.createElement("p", {
+    onClick: clearSearch
+  }, t("ES_COMMON_CLEAR_SEARCH"))) : /*#__PURE__*/React.createElement("div", null, clearAll()), type === "desktop" && !mobileView && /*#__PURE__*/React.createElement(SubmitBar, {
+    className: "generic-button",
     disabled: !!Object.keys(formState.errors).length || formValueEmpty(),
-    submit: true
-  }), !isInboxPage && /*#__PURE__*/React.createElement("div", null, clearAll()))))), (type === "mobile" || mobileView) && /*#__PURE__*/React.createElement(ActionBar, {
+    label: t("ES_COMMON_SEARCH"),
+    submit: true,
+    form: "search-form"
+  })), (type === "mobile" || mobileView) && /*#__PURE__*/React.createElement(ActionBar, {
     className: "clear-search-container"
   }, /*#__PURE__*/React.createElement("button", {
     className: "clear-search",