@djb25/digit-ui-module-ws 1.0.16 → 1.0.17

package/dist/index.modern.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useRef, useMemo, Fragment as Fragment$1, useReducer, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useLocation, Switch, Route, useHistory, useRouteMatch, Redirect, useParams } from 'react-router-dom';
-import { Loader, Card, KeyNote, SubmitBar, InfoBannerIcon, Header, BackButton, PrivateRoute, Banner, CardText, ActionBar, HomeIcon, PrintBtnCommon, MultiLink, LinkButton, Toast, BreadcrumbHeader, ArrowLeft, TickMark, FormStep, CardLabel, RadioOrSelect, TextInput, CardHeader, CitizenInfoLabel, CardSubHeader, LabelFieldPair, Dropdown, CardLabelError, UploadFile, CheckBox, RadioButtons, MobileNumber, DatePicker, DeleteIcon, WrapUnMaskComponent, StatusTable, Row, CardSectionHeader, InfoIcon, TextArea, SearchField, FilterFormField, RemoveableTag, MultiSelectDropdown, InboxComposer, DropIcon, WSICon, EmployeeModuleCard, SearchAction, PopUp, DetailsCard, SearchForm, CloseSvg, CollapsibleCardPage, Table, Localities, Modal, DownloadBtnCommon, CollectionIcon, ResponseComposer, TelePhone, DisplayPhotos, CheckPoint, ConnectingCheckPoints, ActionLinks, PDFSvg, EditIcon, CardSectionSubText, DownloadIcon, CardLabelDesc, FormComposer, MultiUploadWrapper, Close as Close$e, BreakLine, ViewsIcon, Menu, ButtonSelector, CitizenHomeCard } from '@djb25/digit-ui-react-components';
+import { Loader, Card, KeyNote, SubmitBar, InfoBannerIcon, Header, BackButton, PrivateRoute, Banner, CardText, ActionBar, HomeIcon, PrintBtnCommon, MultiLink, LinkButton, Toast, BreadcrumbHeader, ArrowLeft, TickMark, FormStep, CardLabel, RadioOrSelect, TextInput, CardHeader, CitizenInfoLabel, CardSubHeader, Dropdown, UploadFile, CheckBox, RadioButtons, MobileNumber, LabelFieldPair, DatePicker, CardLabelError, DeleteIcon, WrapUnMaskComponent, StatusTable, Row, CardSectionHeader, InfoIcon, TextArea, SearchField, FilterFormField, RemoveableTag, MultiSelectDropdown, InboxComposer, DropIcon, WSICon, EmployeeModuleCard, SearchAction, PopUp, DetailsCard, SearchForm, CloseSvg, CollapsibleCardPage, Table, Localities, Modal, DownloadBtnCommon, CollectionIcon, ResponseComposer, TelePhone, DisplayPhotos, CheckPoint, ConnectingCheckPoints, ActionLinks, PDFSvg, EditIcon, CardSectionSubText, DownloadIcon, CardLabelDesc, VerticalTimeline, FormComposer, MultiUploadWrapper, Close as Close$e, BreakLine, ViewsIcon, Menu, ButtonSelector, CitizenHomeCard } from '@djb25/digit-ui-react-components';
 import { useForm, Controller, useWatch, useFormContext } from 'react-hook-form';
 import { read, utils as utils$1 } from 'xlsx';
 import { useQueryClient } from 'react-query';
@@ -9860,15 +9860,6 @@ const WSDocsRequired = ({
   const goNext = () => {
     onSelect("DocsReq", "");
   };
-  const {
-    control,
-    formState: localFormState,
-    getValues
-  } = useForm();
-  const [zro, setZro] = useState({
-    value: "",
-    error: ""
-  });
   sessionStorage.removeItem("Digit.PT_CREATE_EMP_WS_NEW_FORM");
   sessionStorage.removeItem("IsDetailsExists");
   sessionStorage.removeItem("FORMSTATE_ERRORS");
@@ -9935,23 +9926,6 @@ const WSDocsRequired = ({
       onSubmit: goNext
     })));
   }
-  const menu = [{
-    i18nKey: "ASHOK VIHAR",
-    code: "ASHOK VIHAR",
-    value: "ASHOK VIHAR"
-  }, {
-    i18nKey: "BURARI",
-    code: "BURARI",
-    value: "BURARI"
-  }, {
-    i18nKey: "DWARKA",
-    code: "DWARKA",
-    value: "DWARKA"
-  }, {
-    i18nKey: "OKHLA",
-    code: "OKHLA",
-    value: "OKHLA"
-  }];
   return /*#__PURE__*/React.createElement("div", {
     className: "employee-form-content-with-action-bar"
   }, /*#__PURE__*/React.createElement("div", {
@@ -9980,37 +9954,7 @@ const WSDocsRequired = ({
     }, /*#__PURE__*/React.createElement("span", {
       className: "ws-doc-bullet"
     }, idx + 1, "."), /*#__PURE__*/React.createElement("span", null, t(value === null || value === void 0 ? void 0 : value.i18nKey))))));
-  }), /*#__PURE__*/React.createElement(Card, {
-    className: "ws-doc-card"
-  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
-    className: "card-label-smaller"
-  }, "ZRO Location"), /*#__PURE__*/React.createElement("div", {
-    className: "field"
-  }, /*#__PURE__*/React.createElement(Controller, {
-    control: control,
-    name: "zro",
-    defaultValue: zro,
-    rules: {
-      required: t("REQUIRED_FIELD")
-    },
-    isMandatory: true,
-    render: props => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown, {
-      className: "form-field",
-      selected: getValues("gender"),
-      disable: false,
-      option: menu,
-      errorStyle: localFormState.touched.gender && zro.error ? true : false,
-      select: e => {
-        setZro(prev => ({
-          ...prev,
-          value: e
-        }));
-      },
-      optionKey: "i18nKey",
-      onBlur: props.onBlur,
-      t: t
-    }))
-  }))), localFormState && zro.error && /*#__PURE__*/React.createElement(CardLabelError, null, zro.error)))), /*#__PURE__*/React.createElement(ActionBar, {
+  })), /*#__PURE__*/React.createElement(ActionBar, {
     style: {
       display: "flex",
       justifyContent: "flex-end",
@@ -10020,8 +9964,7 @@ const WSDocsRequired = ({
     label: t("ACTION_TEST_APPLY"),
     onSubmit: () => {
       history.push(match.path.replace("create-application", "new-application"));
-    },
-    disabled: wsDocsLoading || !zro.value ? true : false
+    }
   }))));
 };
 
@@ -31290,6 +31233,7 @@ const NewApplication = () => {
   const stateId = Digit.ULBService.getStateId();
   const tenantId = Digit.ULBService.getCurrentTenantId() || ((_Digit$SessionStorage = Digit.SessionStorage.get("CITIZEN.COMMON.HOME.CITY")) === null || _Digit$SessionStorage === void 0 ? void 0 : _Digit$SessionStorage.code);
   const [previewMode, setPreviewMode] = useState(false);
+  const [currentStep, setCurrentStep] = useState(1);
   const [collapsedSections, setCollapsedSections] = useState(DEFAULT_SECTION_STATE);
   const [showToast, setShowToast] = useState(null);
   const [generatedCaptcha, setGeneratedCaptcha] = useState(generateCaptcha());
@@ -31298,7 +31242,10 @@ const NewApplication = () => {
   const [appDetails, setAppDetails] = useState({});
   const [waterAndSewerageBoth, setWaterAndSewerageBoth] = useState(null);
   const [propertyId, setPropertyId] = useState(new URLSearchParams(location.search).get("propertyId"));
-  console.log(propertyId, 'property idddddd');
+  const [zro, setZro] = useState({
+    value: "",
+    error: ""
+  });
   const initialFormValues = buildDefaultValues(getStoredFormData());
   const {
     register,
@@ -31309,8 +31256,10 @@ const NewApplication = () => {
     setError,
     clearErrors,
     reset,
+    getValues,
     formState: {
-      errors
+      errors,
+      localFormState
     }
   } = useForm({
     defaultValues: initialFormValues,
@@ -31736,9 +31685,24 @@ const NewApplication = () => {
   if (isEnableLoader || isPropertyLoading) {
     return /*#__PURE__*/React.createElement(Loader, null);
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: "employee-form-content-with-action-bar"
-  }, /*#__PURE__*/React.createElement("style", null, `
+  const menu = [{
+    i18nKey: "ASHOK VIHAR",
+    code: "ASHOK VIHAR",
+    value: "ASHOK VIHAR"
+  }, {
+    i18nKey: "BURARI",
+    code: "BURARI",
+    value: "BURARI"
+  }, {
+    i18nKey: "DWARKA",
+    code: "DWARKA",
+    value: "DWARKA"
+  }, {
+    i18nKey: "OKHLA",
+    code: "OKHLA",
+    value: "OKHLA"
+  }];
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("style", null, `
           .ws-new-application-collapsible .collapsible-card-tabs {
             display: none;
           }
@@ -31746,55 +31710,176 @@ const NewApplication = () => {
           .ws-new-application-collapsible .collapsible-card-tab-content {
             padding: 0;
           }
-        `), /*#__PURE__*/React.createElement(Header, null, t("New Water / Sewerage Application")), /*#__PURE__*/React.createElement(Card, {
+        `), /*#__PURE__*/React.createElement(Header, null, t("New Water / Sewerage Application")), /*#__PURE__*/React.createElement("div", {
     style: {
-      marginBottom: "16px"
+      display: "flex",
+      alignItems: "flex-start",
+      gap: "24px"
     }
-  }, /*#__PURE__*/React.createElement(CardSubHeader, null, previewMode ? t("Preview Application") : t("Application Form"))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(VerticalTimeline, {
+    config: [{
+      route: "application-selection",
+      timeLine: [{
+        actions: "Application Selection",
+        currentStep: 1
+      }]
+    }, {
+      route: "applicant-details",
+      timeLine: [{
+        actions: "Details of Applicant",
+        currentStep: 2
+      }]
+    }, {
+      route: "contact-details",
+      timeLine: [{
+        actions: "Contact Details",
+        currentStep: 3
+      }]
+    }, {
+      route: "djb-employee",
+      timeLine: [{
+        actions: "For DJB Employee",
+        currentStep: 4
+      }]
+    }, {
+      route: "property-address",
+      timeLine: [{
+        actions: "Property Address",
+        currentStep: 5
+      }]
+    }, {
+      route: "use-details",
+      timeLine: [{
+        actions: "Property & Connection Use Details",
+        currentStep: 6
+      }]
+    }, {
+      route: "bank-details",
+      timeLine: [{
+        actions: "Bank Details",
+        currentStep: 7
+      }]
+    }, {
+      route: "rain-water-harvesting",
+      timeLine: [{
+        actions: "Rain Water Harvesting",
+        currentStep: 8
+      }]
+    }, {
+      route: "documents",
+      timeLine: [{
+        actions: "Documents to be Attached",
+        currentStep: 9
+      }]
+    }, {
+      route: "declaration",
+      timeLine: [{
+        actions: "Declaration / Undertaking",
+        currentStep: 10
+      }]
+    }],
+    currentActiveIndex: currentStep - 1,
+    showFinalStep: false
+  }), /*#__PURE__*/React.createElement("div", {
     style: {
-      display: previewMode ? "none" : "block"
+      flex: "1",
+      overflowY: "auto",
+      minWidth: 0
     }
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SectionCard, {
-    description: "Primary request selections",
+  }, /*#__PURE__*/React.createElement(SectionCard, {
     isOpen: collapsedSections.application,
     onToggle: toggleSection,
     sectionKey: "application",
     title: "Application Selection"
-  }, /*#__PURE__*/React.createElement(FieldBlock, {
-    error: getFieldError("typeOfRequest"),
-    label: "Type of Request",
-    required: true
+  }, /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
+    className: "card-label-smaller"
+  }, "ZRO Location"), /*#__PURE__*/React.createElement("div", {
+    className: "field"
   }, /*#__PURE__*/React.createElement(Controller, {
     control: control,
-    name: "typeOfRequest",
+    name: "zro",
+    defaultValue: zro,
     rules: {
-      required: "Type of Request is required."
+      required: t("REQUIRED_FIELD")
     },
-    render: props => /*#__PURE__*/React.createElement(RadioButtons, {
-      name: "typeOfRequest",
-      options: TYPE_OF_REQUEST_OPTIONS,
-      optionsKey: "name",
-      onSelect: props.onChange,
-      selectedOption: props.value
-    })
-  })), /*#__PURE__*/React.createElement(FieldBlock, {
-    error: getFieldError("connectionType"),
-    label: "Connection Type",
-    required: true
+    isMandatory: true,
+    render: props => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown, {
+      className: "form-field",
+      selected: getValues("gender"),
+      disable: false,
+      option: menu,
+      errorStyle: !!getFieldError("zro"),
+      select: e => {
+        setZro(prev => ({
+          ...prev,
+          value: e
+        }));
+      },
+      optionKey: "i18nKey",
+      onBlur: props.onBlur,
+      t: t
+    }))
+  }))), localFormState && zro.error && /*#__PURE__*/React.createElement(CardLabelError, null, zro.error), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
+    className: "card-label-smaller"
+  }, "Type of Request"), /*#__PURE__*/React.createElement("div", {
+    className: "field"
   }, /*#__PURE__*/React.createElement(Controller, {
     control: control,
-    name: "connectionType",
+    name: "zro",
+    defaultValue: zro,
     rules: {
-      required: "Connection Type is required."
+      required: t("REQUIRED_FIELD")
     },
-    render: props => /*#__PURE__*/React.createElement(RadioButtons, {
-      name: "connectionType",
-      options: CONNECTION_TYPE_OPTIONS,
-      optionsKey: "name",
-      onSelect: props.onChange,
-      selectedOption: props.value
-    })
-  }))), /*#__PURE__*/React.createElement(SectionCard, {
+    isMandatory: true,
+    render: props => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown, {
+      className: "form-field",
+      selected: getValues("gender"),
+      disable: false,
+      option: TYPE_OF_REQUEST_OPTIONS,
+      errorStyle: !!getFieldError("zro"),
+      select: e => {
+        setZro(prev => ({
+          ...prev,
+          value: e
+        }));
+      },
+      optionKey: "name",
+      onBlur: props.onBlur,
+      t: t
+    }))
+  }))), localFormState && zro.error && /*#__PURE__*/React.createElement(CardLabelError, null, zro.error), /*#__PURE__*/React.createElement(LabelFieldPair, null, /*#__PURE__*/React.createElement(CardLabel, {
+    className: "card-label-smaller"
+  }, "Connection Type"), /*#__PURE__*/React.createElement("div", {
+    className: "field"
+  }, /*#__PURE__*/React.createElement(Controller, {
+    control: control,
+    name: "zro",
+    defaultValue: zro,
+    rules: {
+      required: t("REQUIRED_FIELD")
+    },
+    isMandatory: true,
+    render: props => /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Dropdown, {
+      className: "form-field",
+      selected: getValues("gender"),
+      disable: false,
+      option: CONNECTION_TYPE_OPTIONS,
+      errorStyle: !!getFieldError("zro"),
+      select: e => {
+        setZro(prev => ({
+          ...prev,
+          value: e
+        }));
+      },
+      optionKey: "name",
+      onBlur: props.onBlur,
+      t: t
+    }))
+  }))), localFormState && zro.error && /*#__PURE__*/React.createElement(CardLabelError, null, zro.error)), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: previewMode ? "none" : "block"
+    }
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SectionCard, {
     description: "Applicant name, organization details, and supporting ID proof.",
     isOpen: collapsedSections.applicant,
     onToggle: toggleSection,
@@ -32658,7 +32743,7 @@ const NewApplication = () => {
   }), /*#__PURE__*/React.createElement(PreviewItem, {
     label: "I Agree",
     value: formValues === null || formValues === void 0 ? void 0 : (_formValues$declarati4 = formValues.declaration) === null || _formValues$declarati4 === void 0 ? void 0 : _formValues$declarati4.agree
-  }))), /*#__PURE__*/React.createElement(ActionBar, {
+  }))))), /*#__PURE__*/React.createElement(ActionBar, {
     style: actionBarStyle
   }, !previewMode ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SubmitBar, {
     label: "Reset",