change text component to field component

egovernments · May 28, 2024 · 8fb43e2 · 8fb43e2
1 parent 0e1f7f3
commit 8fb43e2
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 47 deletions.
diff --git a/.../web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignDates.js b/.../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 { ErrorMessage, TextInput } from "@egovernments/digit-ui-components";
+import { ErrorMessage, FieldV1, TextInput } from "@egovernments/digit-ui-components";
 
 const CampaignDates = ({ onSelect, formData, ...props }) => {
   const { t } = useTranslation();
@@ -33,7 +33,7 @@ const CampaignDates = ({ onSelect, formData, ...props }) => {
       setError({ startDate: "CAMPAIGN_FIELD_MANDATORY" });
     } else if (props?.props?.isSubmitting && !endDate) {
       setError({ endDate: "CAMPAIGN_FIELD_MANDATORY" });
-    } else {
+    } else if (!props?.props?.isSubmitting) {
       setError(null);
     }
   }, [props?.props?.isSubmitting]);
@@ -44,6 +44,7 @@ const CampaignDates = ({ onSelect, formData, ...props }) => {
       setError({ endDate: "CAMPAIGN_END_DATE_ERROR" });
     } else if (new Date(endDate).getTime() < new Date(startDate).getTime() && startValidation) {
       setError({ endDate: "CAMPAIGN_END_DATE_BEFORE_ERROR" });
+      onSelect("campaignDates", { startDate: startDate, endDate: endDate });
     } else if (startDate || endDate) {
       setError(null);
       onSelect("campaignDates", { startDate: startDate, endDate: endDate });
@@ -75,34 +76,40 @@ const CampaignDates = ({ onSelect, formData, ...props }) => {
           <span className="mandatory-date">*</span>
         </div>
         <div className="date-field-container">
-          <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>
+          <FieldV1
+            error={error?.startDate ? t(error?.startDate) : ""}
+            withoutLabel={true}
+            type="date"
+            value={startDate}
+            placeholder={t("HCM_START_DATE")}
+            populators={{
+              validation: {
+                min: Digit.Utils.date.getDate(Date.now() + ONE_DAY_IN_MS),
+              },
+            }}
+            min={Digit.Utils.date.getDate(Date.now() + ONE_DAY_IN_MS)}
+            onChange={(d) => {
+              setStartValidation(true);
+              setStart(d);
+            }}
+          />
+          <FieldV1
+            error={error?.endDate ? t(error?.endDate) : ""}
+            withoutLabel={true}
+            type="date"
+            value={endDate}
+            placeholder={t("HCM_END_DATE")}
+            populators={{
+              validation: {
+                min: Digit.Utils.date.getDate(Date.now() + 2 * ONE_DAY_IN_MS),
+              },
+            }}
+            min={Digit.Utils.date.getDate(Date.now() + 2 * ONE_DAY_IN_MS)}
+            onChange={(d) => {
+              setStartValidation(true);
+              setEnd(d);
+            }}
+          />
         </div>
       </LabelFieldPair>
     </React.Fragment>

diff --git a/...i/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignName.js b/...i/web/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignName.js
@@ -2,11 +2,11 @@ import React, { useState, useEffect } from "react";
 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";
+import { ErrorMessage, FieldV1 } from "@egovernments/digit-ui-components";
 
 const CampaignName = ({ onSelect, formData, control, formState, ...props }) => {
   const { t } = useTranslation();
-  const [name, setName] = useState(props?.props?.sessionData?.HCM_CAMPAIGN_NAME?.campaignName || null);
+  const [name, setName] = useState(props?.props?.sessionData?.HCM_CAMPAIGN_NAME?.campaignName || "");
   const [executionCount, setExecutionCount] = useState(0);
   const [startValidation, setStartValidation] = useState(null);
   const [error, setError] = useState(null);
@@ -16,14 +16,14 @@ const CampaignName = ({ onSelect, formData, control, formState, ...props }) => {
 
   useEffect(() => {
     if (props?.props?.isSubmitting && !name) {
-      setError({ message: "CAMPAIGN_FIELD_MANDATORY" });
+      setError({ message: "CAMPAIGN_FIELD_ERROR_MANDATORY" });
     } else {
       setError(null);
     }
   }, [props?.props?.isSubmitting]);
   useEffect(() => {
     if (startValidation && !name) {
-      setError({ message: "CAMPAIGN_NAME_ERROR" });
+      setError({ message: "CAMPAIGN_NAME_FIELD_ERROR" });
     } else if (name) {
       setError(null);
       onSelect("campaignName", name);
@@ -46,19 +46,17 @@ const CampaignName = ({ onSelect, formData, control, formState, ...props }) => {
           <span>{`${t("HCM_CAMPAIGN_NAME")}`}</span>
           <span className="mandatory-span">*</span>
         </div>
-        <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>
+        <FieldV1
+          type="text"
+          error={error?.message ? t(error?.message) : ""}
+          style={{ width: "40rem", marginBottom: "0" }}
+          populators={{ name: "campaignName" }}
+          value={name}
+          onChange={(event) => {
+            setStartValidation(true);
+            setName(event.target.value);
+          }}
+        />
       </LabelFieldPair>
     </React.Fragment>
   );