delivery new changes, toast fix, error fix

micro-ui/web/micro-ui-internals/example/public/index.html

@@ -17,7 +17,7 @@
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
 
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
-  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].44-campaign/dist/index.css" />
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].45-campaign/dist/index.css" />
   <!-- added below css for hcm-workbench module inclusion-->
 
   <!-- <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" /> -->

micro-ui/web/micro-ui-internals/packages/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egovernments/digit-ui-css",
-  "version": "1.0.44-campaign",
+  "version": "1.0.45-campaign",
   "license": "MIT",
   "main": "dist/index.css",
   "author": "Jagankumar <[email protected]>",

micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/index.scss

@@ -292,3 +292,26 @@ input[type="date"]::-webkit-calendar-picker-indicator {
     }
   }
 }
+
+.digit-toast-success {
+  max-width: 90%;
+  margin-left: auto;
+  margin-right: auto;
+  height: auto;
+  .toast-label {
+    line-height: 1.5;
+    word-break: break-word;
+    height: auto;
+    white-space: unset;
+  }
+}
+
+.digit-dropdown-select.error {
+  border: 1px solid #d4351c;
+}
+.campaign-type-wrapper {
+  .digit-error-icon-message-wrap {
+    margin-top: 4px;
+    font-size: 14px;
+  }
+}

micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { DatePicker, LabelFieldPair, Header } from "@egovernments/digit-ui-react-components";
 import { useTranslation } from "react-i18next";
-import { TextInput } from "@egovernments/digit-ui-components";
+import { ErrorMessage, TextInput } from "@egovernments/digit-ui-components";
 
 const CampaignDates = ({ onSelect, formData, ...props }) => {
   const { t } = useTranslation();
@@ -14,6 +14,8 @@ const CampaignDates = ({ onSelect, formData, ...props }) => {
   const [startDate, setStartDate] = useState(props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates?.startDate); // Set default start date to today
   const [endDate, setEndDate] = useState(props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates?.endDate); // Default end date
   const [executionCount, setExecutionCount] = useState(0);
+  const [error, setError] = useState(null);
+  const [startValidation, setStartValidation] = useState(null);
 
   useEffect(() => {
     setDates({
@@ -23,18 +25,38 @@ const CampaignDates = ({ onSelect, formData, ...props }) => {
     setStartDate(props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates?.startDate);
     setEndDate(props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates?.endDate);
   }, [props?.props?.sessionData?.HCM_CAMPAIGN_DATE?.campaignDates]);
-
+
+  useEffect(() => {
+    if (props?.props?.isSubmitting && !endDate && !startDate) {
+      setError({ startDate: "CAMPAIGN_FIELD_MANDATORY", endDate: "CAMPAIGN_FIELD_MANDATORY" });
+    } else if (props?.props?.isSubmitting && !startDate) {
+      setError({ startDate: "CAMPAIGN_FIELD_MANDATORY" });
+    } else if (props?.props?.isSubmitting && !endDate) {
+      setError({ endDate: "CAMPAIGN_FIELD_MANDATORY" });
+    } else {
+      setError(null);
+    }
+  }, [props?.props?.isSubmitting]);
   useEffect(() => {
-    onSelect("campaignDates", { startDate: startDate, endDate: endDate });
+    if (!startDate && startValidation) {
+      setError({ startDate: "CAMPAIGN_START_DATE_ERROR" });
+    } else if (!endDate && startValidation) {
+      setError({ endDate: "CAMPAIGN_END_DATE_ERROR" });
+    } else if (new Date(endDate).getTime() < new Date(startDate).getTime() && startValidation) {
+      setError({ endDate: "CAMPAIGN_END_DATE_BEFORE_ERROR" });
+    } else if (startDate || endDate) {
+      setError(null);
+      onSelect("campaignDates", { startDate: startDate, endDate: endDate });
+    }
   }, [startDate, endDate]);
 
   useEffect(() => {
     if (executionCount < 5) {
       onSelect("campaignDates", { startDate: startDate, endDate: endDate });
-      setExecutionCount(prevCount => prevCount + 1);
+      setExecutionCount((prevCount) => prevCount + 1);
     }
   });
-  
+
   function setStart(value) {
     setStartDate(value);
   }
@@ -53,20 +75,34 @@ const CampaignDates = ({ onSelect, formData, ...props }) => {
           <span className="mandatory-date">*</span>
         </div>
         <div className="date-field-container">
-          <TextInput
-            type="date"
-            value={startDate}
-            placeholder={t("HCM_START_DATE")}
-            min={Digit.Utils.date.getDate(Date.now() + ONE_DAY_IN_MS)}
-            onChange={(d) => setStart(d)}
-          />
-          <TextInput
-            type="date"
-            value={endDate}
-            placeholder={t("HCM_END_DATE")}
-            min={Digit.Utils.date.getDate(Date.now() + 2 * ONE_DAY_IN_MS)}
-            onChange={(d) => setEnd(d)}
-          />
+          <div>
+            <TextInput
+              error={error?.startDate}
+              type="date"
+              value={startDate}
+              placeholder={t("HCM_START_DATE")}
+              min={Digit.Utils.date.getDate(Date.now() + ONE_DAY_IN_MS)}
+              onChange={(d) => {
+                setStartValidation(true);
+                setStart(d);
+              }}
+            />
+            {error?.startDate && <ErrorMessage message={t(error?.startDate)} showIcon={true} />}
+          </div>
+          <div>
+            <TextInput
+              error={error?.endDate}
+              type="date"
+              value={endDate}
+              placeholder={t("HCM_END_DATE")}
+              min={Digit.Utils.date.getDate(Date.now() + 2 * ONE_DAY_IN_MS)}
+              onChange={(d) => {
+                setStartValidation(true);
+                setEnd(d);
+              }}
+            />
+            {error?.endDate && <ErrorMessage message={t(error?.endDate)} showIcon={true} />}
+          </div>
         </div>
       </LabelFieldPair>
     </React.Fragment>

micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignName.js

@@ -1,19 +1,33 @@
 import React, { useState, useEffect } from "react";
-import { Header, TextInput } from "@egovernments/digit-ui-react-components";
+import { Header } from "@egovernments/digit-ui-react-components";
 import { useTranslation } from "react-i18next";
 import { LabelFieldPair } from "@egovernments/digit-ui-react-components";
+import { ErrorMessage, TextInput } from "@egovernments/digit-ui-components";
 
-const CampaignName = ({ onSelect, formData, control, ...props }) => {
+const CampaignName = ({ onSelect, formData, control, formState, ...props }) => {
   const { t } = useTranslation();
   const [name, setName] = useState(props?.props?.sessionData?.HCM_CAMPAIGN_NAME?.campaignName || null);
   const [executionCount, setExecutionCount] = useState(0);
-
+  const [startValidation, setStartValidation] = useState(null);
+  const [error, setError] = useState(null);
   useEffect(() => {
     setName(props?.props?.sessionData?.HCM_CAMPAIGN_NAME?.campaignName);
   }, [props?.props?.sessionData?.HCM_CAMPAIGN_NAME]);
 
   useEffect(() => {
-    onSelect("campaignName", name);
+    if (props?.props?.isSubmitting && !name) {
+      setError({ message: "CAMPAIGN_FIELD_MANDATORY" });
+    } else {
+      setError(null);
+    }
+  }, [props?.props?.isSubmitting]);
+  useEffect(() => {
+    if (startValidation && !name) {
+      setError({ message: "CAMPAIGN_NAME_ERROR" });
+    } else if (name) {
+      setError(null);
+      onSelect("campaignName", name);
+    }
   }, [name, props?.props?.sessionData?.HCM_CAMPAIGN_NAME?.campaignName]);
 
   useEffect(() => {
@@ -32,7 +46,19 @@ const CampaignName = ({ onSelect, formData, control, ...props }) => {
           <span>{`${t("HCM_CAMPAIGN_NAME")}`}</span>
           <span className="mandatory-span">*</span>
         </div>
-        <TextInput style={{ width: "40rem", marginBottom: "0" }} name="campaignName" value={name} onChange={(event) => setName(event.target.value)} />
+        <div>
+          <TextInput
+            error={!!error}
+            style={{ width: "40rem", marginBottom: "0" }}
+            name="campaignName"
+            value={name}
+            onChange={(event) => {
+              setStartValidation(true);
+              setName(event.target.value);
+            }}
+          />
+          {error?.message && <ErrorMessage message={t(error?.message)} showIcon={true} />}
+        </div>
       </LabelFieldPair>
     </React.Fragment>
   );

micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignType.js

@@ -2,17 +2,24 @@ import React, { useState, useMemo, useRef, useEffect } from "react";
 import { UploadIcon, FileIcon, DeleteIconv2, Toast, Card, Header } from "@egovernments/digit-ui-react-components";
 import { useTranslation } from "react-i18next";
 import { LabelFieldPair } from "@egovernments/digit-ui-react-components";
-import { Dropdown } from "@egovernments/digit-ui-components";
+import { Dropdown, ErrorMessage } from "@egovernments/digit-ui-components";
 
-const CampaignSelection = ({ onSelect, formData, ...props }) => {
+const CampaignSelection = ({ onSelect, formData, formState, ...props }) => {
   const { t } = useTranslation();
   const tenantId = Digit.ULBService.getStateId();
   const { isLoading, data: projectType } = Digit.Hooks.useCustomMDMS(tenantId, "HCM-PROJECT-TYPES", [{ name: "projectTypes" }]);
   const [type, setType] = useState(props?.props?.sessionData?.HCM_CAMPAIGN_TYPE?.projectType || {});
   const [beneficiaryType, setBeneficiaryType] = useState(props?.props?.sessionData?.HCM_CAMPAIGN_TYPE?.projectType?.beneficiaryType || "");
   const [showBeneficiary, setShowBeneficiaryType] = useState(Boolean(props?.props?.sessionData?.HCM_CAMPAIGN_TYPE?.projectType?.beneficiaryType));
   const [executionCount, setExecutionCount] = useState(0);
+  const [error, setError] = useState(null);
+  const [startValidation, setStartValidation] = useState(null);
 
+  useEffect(() => {
+    if (props?.props?.isSubmitting && !type) {
+      setError({ message: "CAMPAIGN_FIELD_MANDATORY" });
+    }
+  }, [props?.props?.isSubmitting]);
   useEffect(() => {
     setType(props?.props?.sessionData?.HCM_CAMPAIGN_TYPE?.projectType);
     setBeneficiaryType(props?.props?.sessionData?.HCM_CAMPAIGN_TYPE?.projectType?.beneficiaryType);
@@ -26,7 +33,12 @@ const CampaignSelection = ({ onSelect, formData, ...props }) => {
   };
 
   useEffect(() => {
-    onSelect("projectType", type);
+    if (!type && startValidation) {
+      setError({ message: "CAMPAIGN_FIELD_MANDATORY" });
+    } else {
+      setError(null);
+      onSelect("projectType", type);
+    }
   }, [type]);
 
   useEffect(() => {
@@ -44,16 +56,21 @@ const CampaignSelection = ({ onSelect, formData, ...props }) => {
           <span>{`${t("HCM_CAMPAIGN_TYPE")}`}</span>
           <span className="mandatory-span">*</span>
         </div>
-        <Dropdown
-          style={{ width: "40rem" , paddingBottom: "1rem" }}
-          t={t}
-          option={projectType?.["HCM-PROJECT-TYPES"]?.projectTypes}
-          optionKey={"code"}
-          selected={type}
-          select={(value) => {
-            handleChange(value);
-          }}
-        />
+        <div className="campaign-type-wrapper">
+          <Dropdown
+            style={{ width: "40rem", paddingBottom: "1rem" }}
+            variant={error ? "error" : ""}
+            t={t}
+            option={projectType?.["HCM-PROJECT-TYPES"]?.projectTypes}
+            optionKey={"code"}
+            selected={type}
+            select={(value) => {
+              setStartValidation(true);
+              handleChange(value);
+            }}
+          />
+          {error?.message && <ErrorMessage wrapperStyles={{ marginTop: "-10px" }} message={t(error?.message)} showIcon={true} />}
+        </div>
       </LabelFieldPair>
       {showBeneficiary && (
         <LabelFieldPair>

micro-ui/web/micro-ui-internals/packages/modules/campaign-manager/src/configs/CampaignConfig.js

@@ -1,4 +1,4 @@
-export const CampaignConfig = (totalFormData, dataParams) => {
+export const CampaignConfig = (totalFormData, dataParams, isSubmitting) => {
   return [
     {
       form: [
@@ -18,6 +18,7 @@ export const CampaignConfig = (totalFormData, dataParams) => {
               customProps: {
                 module: "HCM",
                 sessionData: totalFormData,
+                isSubmitting: isSubmitting
               },
               populators: {
                 name: "projectType",
@@ -41,6 +42,7 @@ export const CampaignConfig = (totalFormData, dataParams) => {
               customProps: {
                 module: "HCM",
                 sessionData: totalFormData,
+                isSubmitting: isSubmitting
               },
               populators: {
                 name: "campaignName",
@@ -64,6 +66,7 @@ export const CampaignConfig = (totalFormData, dataParams) => {
               customProps: {
                 module: "HCM",
                 sessionData: totalFormData,
+                isSubmitting: isSubmitting
               },
               populators: {
                 name: "campaignDates",