fixed the flow and some ui/ux issues (#1704)

Co-authored-by: Jagankumar <[email protected]>
egovernments · Oct 30, 2024 · 47017f0 · 47017f0
1 parent ae8650c
commit 47017f0
Show file tree

Hide file tree

Showing 10 changed files with 64 additions and 42 deletions.
diff --git a/health/micro-ui/web/micro-ui-internals/example/public/index.html b/health/micro-ui/web/micro-ui-internals/example/public/index.html
@@ -16,7 +16,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].13/dist/index.css" />
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].14/dist/index.css" />
 
   <!-- added below css for hcm-workbench module inclusion-->
   <!-- <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" /> -->

diff --git a/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaignCycle.scss b/health/micro-ui/web/micro-ui-internals/packages/css/src/pages/employee/campaignCycle.scss
@@ -15,7 +15,7 @@
     border: 1px solid #d6d5d4;
     border-radius: 0.4rem;
     padding: 1rem;
-    margin-right: 1.5rem;
+    margin-right: 1rem;
     margin-bottom: 1.5rem;
     .card-text {
       margin: 0;
@@ -239,6 +239,7 @@
     display: flex;
     align-content: center;
     justify-content: space-between;
+    font-family: theme(digitv2.fontFamily.sans);
   }
   .attribute-container {
     border: 1px solid #d6d5d4;

diff --git a/...eb/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignSummary.js b/...eb/micro-ui-internals/packages/modules/campaign-manager/src/components/CampaignSummary.js
@@ -707,7 +707,7 @@ const CampaignSummary = (props) => {
 
   return (
     <>
-      <div style={{ display: "flex", justifyContent: "space-between" }}>
+      <div style={{ display: "flex", justifyContent: "space-between" , marginBottom:"-2.5rem" }}>
         <Header className="summary-header">{t("ES_TQM_SUMMARY_HEADING")}</Header>
         {/* {userCredential && (
           <Button

diff --git a/...ro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js b/...ro-ui-internals/packages/modules/campaign-manager/src/components/CampaignUpdateSummary.js
@@ -214,15 +214,15 @@ const CampaignUpdateSummary = (props) => {
               navigationKey: "card2",
               sections: [
                 {
-                  name: "target",
+                  name: "facility",
                   type: "COMPONENT",
                   component: "CampaignDocumentsPreview",
                   props: {
-                    documents: data?.[0]?.resources?.filter((i) => i?.type === "boundaryWithTarget"),
+                    documents: data?.[0]?.resources?.filter((i) => i.type === "facility"),
                   },
-                  cardHeader: { value: t("TARGET_DETAILS"), inlineStyles: { marginTop: 0, fontSize: "1.5rem" } },
+                  cardHeader: { value: t("FACILITY_DETAILS"), inlineStyles: { marginTop: 0, fontSize: "1.5rem" } },
                   cardSecondaryAction: noAction !== "false" && (
-                    <div className="campaign-preview-edit-container" onClick={() => handleRedirect(4)}>
+                    <div className="campaign-preview-edit-container" onClick={() => handleRedirect(2)}>
                       <span>{t(`CAMPAIGN_EDIT`)}</span>
                       <EditIcon />
                     </div>
@@ -234,15 +234,15 @@ const CampaignUpdateSummary = (props) => {
               navigationKey: "card2",
               sections: [
                 {
-                  name: "facility",
+                  name: "user",
                   type: "COMPONENT",
                   component: "CampaignDocumentsPreview",
                   props: {
-                    documents: data?.[0]?.resources?.filter((i) => i.type === "facility"),
+                    documents: data?.[0]?.resources?.filter((i) => i.type === "user"),
                   },
-                  cardHeader: { value: t("FACILITY_DETAILS"), inlineStyles: { marginTop: 0, fontSize: "1.5rem" } },
+                  cardHeader: { value: t("USER_DETAILS"), inlineStyles: { marginTop: 0, fontSize: "1.5rem" } },
                   cardSecondaryAction: noAction !== "false" && (
-                    <div className="campaign-preview-edit-container" onClick={() => handleRedirect(2)}>
+                    <div className="campaign-preview-edit-container" onClick={() => handleRedirect(3)}>
                       <span>{t(`CAMPAIGN_EDIT`)}</span>
                       <EditIcon />
                     </div>
@@ -254,15 +254,15 @@ const CampaignUpdateSummary = (props) => {
               navigationKey: "card2",
               sections: [
                 {
-                  name: "user",
+                  name: "target",
                   type: "COMPONENT",
                   component: "CampaignDocumentsPreview",
                   props: {
-                    documents: data?.[0]?.resources?.filter((i) => i.type === "user"),
+                    documents: data?.[0]?.resources?.filter((i) => i?.type === "boundaryWithTarget"),
                   },
-                  cardHeader: { value: t("USER_DETAILS"), inlineStyles: { marginTop: 0, fontSize: "1.5rem" } },
+                  cardHeader: { value: t("TARGET_DETAILS"), inlineStyles: { marginTop: 0, fontSize: "1.5rem" } },
                   cardSecondaryAction: noAction !== "false" && (
-                    <div className="campaign-preview-edit-container" onClick={() => handleRedirect(3)}>
+                    <div className="campaign-preview-edit-container" onClick={() => handleRedirect(4)}>
                       <span>{t(`CAMPAIGN_EDIT`)}</span>
                       <EditIcon />
                     </div>

diff --git a/...icro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js b/...icro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SearchChecklist.js
@@ -1,5 +1,5 @@
 import { Header, InboxSearchComposer } from "@egovernments/digit-ui-react-components";
-import { Dropdown, ViewCardFieldPair, Toast, Card, TextBlock, Button, PopUp, CardText, Stepper } from "@egovernments/digit-ui-components";
+import { Dropdown, ViewCardFieldPair, Toast, Card, TextBlock, Button, PopUp, CardText, Stepper} from "@egovernments/digit-ui-components";
 import React, { useState, useEffect } from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
@@ -12,6 +12,7 @@ const SearchChecklist = () => {
   const tenantId = Digit.ULBService.getCurrentTenantId();
   const searchParams = new URLSearchParams(location.search);
   const id = searchParams.get("campaignId");
+  const [showToast, setShowToast] = useState(null);
   const [campaignName, setCampaignName] = useState(searchParams.get("name"));
 
   const stateData = window.history.state;
@@ -86,7 +87,9 @@ const SearchChecklist = () => {
   }, [HCM]);
 
   const onStepClick = (step) => {
-    history.push(`/${window.contextPath}/employee/campaign/setup-campaign?id=${id}&preview=true&action=false&actionBar=true&key=13&summary=true`);
+      setShowToast({ key: "error", label: "CAMPAIGN_CANNOT_CLICK" });
+      return;
+    // history.push(`/${window.contextPath}/employee/campaign/setup-campaign?id=${id}&preview=true&action=false&actionBar=true&key=13&summary=true`);
   };
   // useEffect(() => {
   //   setListsOpt(HCM?.HCM?.CHECKLIST_TYPES?.map((item) => ({ list: `HCM_CHECKLIST_TYPE_${item.code}` })));
@@ -101,6 +104,10 @@ const SearchChecklist = () => {
     setList(data);
   };
 
+  const closeToast = () => {
+    setShowToast(null);
+  };
+
   checklistSearchConfig[0].sections.search.uiConfig.fields[0].populators.options = codesopt;
   checklistSearchConfig[0].sections.search.uiConfig.fields[1].populators.options = listsopt;
   checklistSearchConfig[0].additionalDetails = { campaignName };
@@ -225,6 +232,14 @@ const SearchChecklist = () => {
             ></InboxSearchComposer>
           </div>
         </div>
+        {showToast && (
+        <Toast
+          type={showToast?.key === "error" ? "error" : showToast?.key === "info" ? "info" : showToast?.key === "warning" ? "warning" : "success"}
+          label={t(showToast?.label)}
+          transitionTime={showToast.transitionTime}
+          onClose={closeToast}
+        />
+      )}
       </React.Fragment>
     );
   }

diff --git a/.../micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SetupCampaign.js b/.../micro-ui-internals/packages/modules/campaign-manager/src/pages/employee/SetupCampaign.js
@@ -671,8 +671,11 @@ const SetupCampaign = ({ hierarchyType, hierarchyData }) => {
                     message: t("ES_CAMPAIGN_CREATE_SUCCESS_RESPONSE"),
                     text: t("ES_CAMPAIGN_CREATE_SUCCESS_RESPONSE_TEXT"),
                     info: t("ES_CAMPAIGN_SUCCESS_INFO_TEXT"),
-                    actionLabel: t("HCM_CAMPAIGN_SUCCESS_RESPONSE_ACTION"),
-                    actionLink: `/${window.contextPath}/employee/campaign/my-campaign`,
+                    actionLabel: t("HCM_CONFIGURE_APP_RESPONSE_ACTION"),
+                    actionLink: `/${window.contextPath}/employee/campaign/checklist/search?name=${data?.CampaignDetails?.campaignName}&campaignId=${data?.CampaignDetails?.id}`,
+                    name: data?.CampaignDetails?.campaignName,
+                    projectId: data?.CampaignDetails?.projectId,
+                    data: data,
                   }
                 );
                 Digit.SessionStorage.del("HCM_CAMPAIGN_MANAGER_FORM_DATA");
@@ -1374,7 +1377,7 @@ const SetupCampaign = ({ hierarchyType, hierarchyData }) => {
       setCurrentKey(14);
       setCurrentStep(5);
     } else if (step === 1 && totalFormData["HCM_CAMPAIGN_NAME"] && totalFormData["HCM_CAMPAIGN_TYPE"] && totalFormData["HCM_CAMPAIGN_DATE"]) {
-      setCurrentKey(5);
+      setCurrentKey(4);
       setCurrentStep(1);
     } else if (!totalFormData["HCM_CAMPAIGN_NAME"] || !totalFormData["HCM_CAMPAIGN_NAME"]) {
       // Do not set stepper and key
@@ -1537,7 +1540,7 @@ const SetupCampaign = ({ hierarchyType, hierarchyData }) => {
     <React.Fragment>
       {noAction !== "false" && (
         <Stepper
-          customSteps={["HCM_CAMPAIGN_SETUP_DETAILS", "HCM_BOUNDARY_DETAILS", "HCM_DELIVERY_DETAILS", "HCM_UPLOAD_DATA", "HCM_REVIEW_DETAILS"]}
+          customSteps={["HCM_CAMPAIGN_SETUP_DETAILS", "HCM_BOUNDARY_DETAILS", "HCM_DELIVERY_DETAILS", "HCM_UPLOAD_DATA", "HCM_REVIEW_DETAILS" , "HCM_CONFIGURE_APP"]}
           currentStep={currentStep + 1}
           onStepClick={onStepClick}
           activeSteps={active}

diff --git a/...s/packages/modules/campaign-manager/src/pages/employee/deliveryRule/AddDeliverycontext.js b/...s/packages/modules/campaign-manager/src/pages/employee/deliveryRule/AddDeliverycontext.js
@@ -18,7 +18,7 @@ import { useTranslation } from "react-i18next";
 import RemoveableTagNew from "../../../components/RemovableTagNew";
 import AddProducts from "./AddProductscontext";
 import { CycleContext } from ".";
-import { RadioButtons, TextInput } from "@egovernments/digit-ui-components";
+import { RadioButtons, TextInput , Chip } from "@egovernments/digit-ui-components";
 import { PRIMARY_COLOR } from "../../../utils";
 
 const DustbinIcon = () => (
@@ -820,19 +820,11 @@ const AddDeliveryRule = ({ targetedData, deliveryRules, setDeliveryRules, index,
           index={index}
           key={key}
         />
-        <div className="product-tag-container">
+        <div className="product-tag-container digit-tag-container">
           {delivery?.products?.length > 0 &&
             delivery?.products?.map((i) => {
               return i?.value && i?.count ? (
-                <RemoveableTagNew
-                  extraStyles={{
-                    closeIconStyles: {
-                      fill: "#505A5F",
-                    },
-                  }}
-                  text={{ value: i?.name }}
-                  onClick={() => removeProduct(i)}
-                />
+                <Chip key={i.key} text={i?.name} onClick={() => removeProduct(i)} className="multiselectdropdown-tag" hideClose={false} />
               ) : null;
             })}
         </div>

diff --git a/...s/packages/modules/campaign-manager/src/pages/employee/deliveryRule/AddProductscontext.js b/...s/packages/modules/campaign-manager/src/pages/employee/deliveryRule/AddProductscontext.js
@@ -1,8 +1,8 @@
-import { AddIcon, Button, CardText, Label, LabelFieldPair } from "@egovernments/digit-ui-react-components";
+import { AddIcon, CardText, Label, LabelFieldPair } from "@egovernments/digit-ui-react-components";
 import React, { Fragment, useContext, useEffect, useState } from "react";
 import PlusMinusInput from "../../../components/PlusMinusInput";
 import { useTranslation } from "react-i18next";
-import { Dropdown, TextInput, Toast } from "@egovernments/digit-ui-components";
+import { Dropdown, TextInput, Toast ,Button } from "@egovernments/digit-ui-components";
 import { Link } from "react-router-dom";
 import { CycleContext } from ".";
 import { PRIMARY_COLOR } from "../../../utils";
@@ -231,9 +231,20 @@ function AddProducts({ stref, selectedDelivery, showToast, closeToast, selectedP
               {t(`CAMPAIGN_RESOURCE`)} {c + 1}
             </CardText>
             {products?.length > 1 ? (
-              <div className="delete-resource-icon" onClick={() => deleteItem(i, c)}>
-                <DustbinIcon />
-              </div>
+              // <div className="delete-resource-icon" onClick={() => deleteItem(i, c)}>
+              //   <DustbinIcon />
+              // </div>
+              <Button
+              // className="custom-class"
+              icon="Delete"
+              iconFill=""
+              label={t(`DELETE`)}
+              onClick={() => deleteItem(i, c)}
+              size=""
+              style={{}}
+              title=""
+              variation="link"
+            />
             ) : null}
           </div>
           <div className="add-resource-label-field-container">
@@ -265,8 +276,8 @@ function AddProducts({ stref, selectedDelivery, showToast, closeToast, selectedP
           variation="secondary"
           label={t(`CAMPAIGN_PRODUCTS_MODAL_SECONDARY_ACTION`)}
           className={"add-rule-btn hover"}
-          icon={<AddIcon fill={PRIMARY_COLOR} styles={{ height: "1.5rem", width: "1.5rem" }} />}
-          onButtonClick={add}
+          icon="AddIcon"
+          onClick={add}
         />
       )}
       <div

diff --git a/...nals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js b/...nals/packages/modules/campaign-manager/src/pages/employee/deliveryRule/MultiTabcontext.js
@@ -154,8 +154,8 @@ const TabContent = ({ activeSubTab, subTabCount = 3, onSubTabChange, project })
     <Card className="sub-tab-container">
       <SubTabs campaignData={campaignData} subTabCount={subTabCount} activeSubTab={activeSubTab} onSubTabChange={onSubTabChange} />
       <div>
-        <CardSubHeader className="tab-content-header">{t(`CAMPAIGN_TAB_TEXT`)}</CardSubHeader>
-        <CardText>{t(`CAMPAIGN_TAB_SUB_TEXT_${project?.code ? project?.code?.toUpperCase() : project?.toUpperCase()}`)} </CardText>
+        {/* <CardSubHeader className="tab-content-header">{t(`CAMPAIGN_TAB_TEXT`)}</CardSubHeader> */}
+        <CardText>{t(`CAMPAIGN_DELIVERY_TAB_SUB_TEXT_${project?.code ? project?.code?.toUpperCase() : project?.toUpperCase()}`)} </CardText>
       </div>
       {/* Add content specific to each tab as needed */}
       {/* <InfoCard

diff --git a/health/micro-ui/web/public/index.html b/health/micro-ui/web/public/index.html
@@ -11,7 +11,7 @@
   <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
   <!-- added below css for hcm-workbench module inclusion-->
 
-  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].13/dist/index.css" />
+  <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].14/dist/index.css" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#00bcd1" />
   <title>DIGIT HCM</title>