NTP-24413 | User Management changes for training flag (#1350)

* NTP-24413| User managementchanges for Training changes * NTP-24413| made training flag true by default * NTP-24413 | PR comments resolved * NTP-24413 | function check * NTP-24413| Toggle tabs design changes
2025-01-28 16:05:26 +05:30
parent 45ef37ac8b
commit 608939de9f
9 changed files with 149 additions and 60 deletions
--- a/src/components/toggleTabs/toggleTabs.module.scss
+++ b/src/components/toggleTabs/toggleTabs.module.scss
@@ -5,16 +5,17 @@
  .feedbackTabsWrapper {
    display: inline-flex;
    background-color: var(--bg-secondary);
-    padding: 3px;
+    padding: 1px;
    margin: 10px 0;
    border-radius: 8px;
    border: 1px solid var(--navi-color-gray-border);
    .tabItem {
      padding: 4px 8px;
-      border-radius: 8px;
+      border-radius: 6px;
      cursor: pointer;
      &.active {
        background-color: white;
+        box-shadow: var(--box-shadow-2);
      }
    }
  }
--- a/src/pages/AgencyManagement/interfaces/types.ts
+++ b/src/pages/AgencyManagement/interfaces/types.ts
@@ -6,6 +6,7 @@ import {
  AGENCY_TEAM_OPTIONS
 } from '../constants/constants';
 import { IOption } from '@cp/src/components/FilterDrawer/types';
+import { AgentFormValues } from '../../AllAgents/AgentForm/interfaces/types';

 export interface AddAgencyDrawerProps {
  isDrawerOpen: boolean;
@@ -127,7 +128,7 @@ export type ToggleTabsProps = {
  name: string;
  tabOptions: { label: string; value: boolean }[];
  handleToggleClick?: (value: boolean) => void;
-  errors: Partial<FieldErrorsImpl<AgencyFormValues>>;
+  errors: Partial<FieldErrorsImpl<AgencyFormValues>> | Partial<FieldErrorsImpl<AgentFormValues>>;
  rules?: RegisterOptions;
  styles: CSSModuleClasses;
  validationMessage: string;
--- a/src/pages/AllAgents/AgentForm/AgentForm.tsx
+++ b/src/pages/AllAgents/AgentForm/AgentForm.tsx
@@ -231,6 +231,7 @@ export const AgentForm = forwardRef((props: AgentFormProps, ref) => {
          panNumber: agentData?.panNumber,
          panCardView: agentData?.panCardView,
          panCard: {},
+          isTrainingAgent: agentData?.isTrainingAgent || false,
          currentMonthLatitude:
            agentData?.agentAllocationProfileView?.previousMonthAllocationView?.baseLocation
              ?.latitude,
@@ -377,7 +378,8 @@ export const AgentForm = forwardRef((props: AgentFormProps, ref) => {
      agentType,
      dateOfBirth,
      panNumber,
-      panCard
+      panCard,
+      isTrainingAgent
    } = data;

    const createAgentRequest = {
@@ -433,7 +435,8 @@ export const AgentForm = forwardRef((props: AgentFormProps, ref) => {
            postalCode: reverseGeocodedAgentPincode
          }
        }
-      }
+      },
+      isTrainingAgent
    };
    createAgent(createAgentRequest, setIsSubmitButtonDisabled, setShowLoader, onClose);
  };
@@ -467,7 +470,8 @@ export const AgentForm = forwardRef((props: AgentFormProps, ref) => {
      dateOfBirth,
      panNumber,
      panCard = {},
-      panCardView = {}
+      panCardView = {},
+      isTrainingAgent
    } = data;
    const userDocumentUpdateRequest =
      panCard && Object.keys(panCard).length > 0 ? panCard : panCardView?.userDocument ?? {};
@@ -476,7 +480,10 @@ export const AgentForm = forwardRef((props: AgentFormProps, ref) => {
      draCertificate && Object.keys(draCertificate).length > 0
        ? draCertificate
        : draCertificateView?.draCertificate ?? {};
-
+    const showTrainingAgent =
+      agencyCodeRequested === NAVI_AGENCY_CODE &&
+      roles?.length === 1 &&
+      roles?.[0] === Roles.ROLE_FIELD_AGENT;
    const updateAgentRequest = {
      name: agentName,
      phoneNumber,
@@ -540,7 +547,8 @@ export const AgentForm = forwardRef((props: AgentFormProps, ref) => {
            postalCode: reverseGeocodedAgentPincode
          }
        }
-      }
+      },
+      isTrainingAgent: showTrainingAgent && isTrainingAgent
    };

    updateAgent(
@@ -574,7 +582,8 @@ export const AgentForm = forwardRef((props: AgentFormProps, ref) => {
  }, [isDirty, isAgentActiveToggleDirty, isAgentActiveNextMonthToggleDirty]);

  const showActiveNextMonthToggle =
-    showFieldAgentForm || rolesAvailable.includes(Roles.ROLE_IN_HOUSE_CSA_AGENT);
+    (showFieldAgentForm || rolesAvailable.includes(Roles.ROLE_IN_HOUSE_CSA_AGENT)) &&
+    agentData?.referenceId;
  const isEditPanDetailsDisabled = isPanVerified && !hasPanEditAccess;

  return (
@@ -586,13 +595,8 @@ export const AgentForm = forwardRef((props: AgentFormProps, ref) => {
            emailAddress={agentData?.emailAddress || ''}
            updatedAt={agentData?.updatedAt || ''}
            isAgentActive={isAgentActive}
-            showActiveNextMonthToggle={showActiveNextMonthToggle}
-            isAgentActiveNextMonth={isAgentActiveNextMonth}
-            setIsAgentActiveNextMonth={setIsAgentActiveNextMonth}
            isEditDisabled={!!isEditDisabled}
            toggleAgentActive={toggleAgentActive}
-            isAgentActiveNextMonthToggleDirty={isAgentActiveNextMonthToggleDirty}
-            setIsAgentActiveNextMonthToggleDirty={setIsAgentActiveNextMonthToggleDirty}
            dashedLineColor="var(--navi-color-gray-c3)"
          />
        )}
@@ -641,6 +645,11 @@ export const AgentForm = forwardRef((props: AgentFormProps, ref) => {
                    showLocationVerificationToast={showLocationVerificationToast}
                    setShowLocationVerificationToast={setShowLocationVerificationToast}
                    isEditPanDetailsDisabled={isEditPanDetailsDisabled}
+                    showActiveNextMonthToggle={showActiveNextMonthToggle as boolean}
+                    isAgentActiveNextMonth={isAgentActiveNextMonth}
+                    setIsAgentActiveNextMonth={setIsAgentActiveNextMonth}
+                    isAgentActiveNextMonthToggleDirty={isAgentActiveNextMonthToggleDirty}
+                    setIsAgentActiveNextMonthToggleDirty={setIsAgentActiveNextMonthToggleDirty}
                  />
                ) : (
                  <ExternalFieldAgentForm
@@ -668,6 +677,11 @@ export const AgentForm = forwardRef((props: AgentFormProps, ref) => {
                    showLocationVerificationToast={showLocationVerificationToast}
                    setShowLocationVerificationToast={setShowLocationVerificationToast}
                    isEditPanDetailsDisabled={isEditPanDetailsDisabled}
+                    showActiveNextMonthToggle={showActiveNextMonthToggle as boolean}
+                    isAgentActiveNextMonth={isAgentActiveNextMonth}
+                    setIsAgentActiveNextMonth={setIsAgentActiveNextMonth}
+                    isAgentActiveNextMonthToggleDirty={isAgentActiveNextMonthToggleDirty}
+                    setIsAgentActiveNextMonthToggleDirty={setIsAgentActiveNextMonthToggleDirty}
                  />
                )
              ) : (
--- a/src/pages/AllAgents/AgentForm/components/form/ActiveInactiveWrapper.tsx
+++ b/src/pages/AllAgents/AgentForm/components/form/ActiveInactiveWrapper.tsx
@@ -1,7 +1,5 @@
 import { Switch, Typography } from '@navi/web-ui/lib/primitives';
 import { DateFormat, dateFormat } from '@cp/src/utils/DateHelper';
-import ToggleTabs from '@cp/src/components/toggleTabs/ToggleTabs';
-import { ACTIVE_NEXT_MONTH_OPTIONS } from '../../constants/constants';

 type ActiveInactiveWrapperProps = {
  styles: CSSModuleClasses;
@@ -10,11 +8,6 @@ type ActiveInactiveWrapperProps = {
  isAgentActive: boolean;
  toggleAgentActive: () => void;
  isEditDisabled: boolean;
-  showActiveNextMonthToggle?: boolean;
-  isAgentActiveNextMonth: boolean;
-  setIsAgentActiveNextMonth: (value: boolean) => void;
-  isAgentActiveNextMonthToggleDirty?: boolean;
-  setIsAgentActiveNextMonthToggleDirty?: (value: boolean) => void;
  dashedLineColor?: string;
 };

@@ -26,21 +19,9 @@ const ActiveInactiveWrapper = (props: ActiveInactiveWrapperProps) => {
    isAgentActive,
    toggleAgentActive,
    isEditDisabled,
-    showActiveNextMonthToggle,
-    isAgentActiveNextMonth,
-    setIsAgentActiveNextMonth,
-    isAgentActiveNextMonthToggleDirty,
-    setIsAgentActiveNextMonthToggleDirty,
    dashedLineColor = 'var(--navi-color-gray-c3)'
  } = props;

-  const handleToggleTabChange = (value: string | boolean) => {
-    if (isEditDisabled) return;
-    setIsAgentActiveNextMonth(!isAgentActiveNextMonth);
-    setIsAgentActiveNextMonthToggleDirty &&
-      setIsAgentActiveNextMonthToggleDirty(!isAgentActiveNextMonthToggleDirty);
-  };
-
  return (
    <div className={styles.editContainer}>
      {emailAddress ? (
@@ -83,28 +64,6 @@ const ActiveInactiveWrapper = (props: ActiveInactiveWrapperProps) => {
          )}
        </>
      </div>
-      {showActiveNextMonthToggle && (
-        <div className="flex-1">
-          <div
-            className="border border-dashed border-[1px] rounded-[1px] m-4"
-            style={{ borderColor: dashedLineColor }}
-          />
-          <div className="flex justify-between pl-5 pr-5 rounded-[8px]">
-            <Typography variant="p3" color="var(--navi-color-gray-c1))" className="pt-1.5">
-              Active for next month
-            </Typography>
-            <ToggleTabs
-              selected={isAgentActiveNextMonth}
-              onTabClick={handleToggleTabChange}
-              tabOptions={ACTIVE_NEXT_MONTH_OPTIONS}
-              size="h6"
-              tabClass="!m-0"
-              containerClass="rounded-lg"
-              isToggleDisabled={isEditDisabled}
-            />
-          </div>
-        </div>
-      )}
    </div>
  );
 };
--- a/src/pages/AllAgents/AgentForm/components/form/ActiveNextMonthWrapper.tsx
+++ b/src/pages/AllAgents/AgentForm/components/form/ActiveNextMonthWrapper.tsx
@@ -0,0 +1,55 @@
+import { Typography } from '@navi/web-ui/lib/primitives';
+import ToggleTabs from '@cp/src/components/toggleTabs/ToggleTabs';
+import { tabOptions } from '@cp/src/pages/AgencyManagement/constants/constants';
+import { isFunction } from '@cp/src/utils/commonUtils';
+interface ActiveNextMonthWrapperProps {
+  showActiveNextMonthToggle: boolean;
+  isEditDisabled: boolean;
+  isAgentActiveNextMonth: boolean;
+  setIsAgentActiveNextMonth: (value: boolean) => void;
+  isAgentActiveNextMonthToggleDirty: boolean;
+  setIsAgentActiveNextMonthToggleDirty: (value: boolean) => void;
+}
+const ActiveNextMonthWrapper = (props: ActiveNextMonthWrapperProps) => {
+  const {
+    showActiveNextMonthToggle,
+    isEditDisabled,
+    isAgentActiveNextMonth,
+    setIsAgentActiveNextMonth,
+    isAgentActiveNextMonthToggleDirty,
+    setIsAgentActiveNextMonthToggleDirty
+  } = props;
+
+  if (!showActiveNextMonthToggle) return <></>;
+
+  const handleToggleTabChange = (value: string | boolean) => {
+    if (isEditDisabled) return;
+    setIsAgentActiveNextMonth(!isAgentActiveNextMonth);
+    if (isFunction(setIsAgentActiveNextMonthToggleDirty)) {
+      setIsAgentActiveNextMonthToggleDirty(!isAgentActiveNextMonthToggleDirty);
+    }
+  };
+
+  return (
+    <div className="flex justify-between pl-5 pr-8 mt-4 rounded-[8px]">
+      <Typography
+        variant="p4"
+        color="var(--navi-bordered-input-label-text-color)"
+        className="pt-1.5"
+      >
+        Active for next month
+      </Typography>
+      <ToggleTabs
+        selected={isAgentActiveNextMonth}
+        onTabClick={handleToggleTabChange}
+        tabOptions={tabOptions}
+        size="h6"
+        tabClass="!m-0"
+        containerClass="rounded-lg"
+        isToggleDisabled={isEditDisabled}
+      />
+    </div>
+  );
+};
+
+export default ActiveNextMonthWrapper;
--- a/src/pages/AllAgents/AgentForm/components/form/ExternalFieldAgentForm.tsx
+++ b/src/pages/AllAgents/AgentForm/components/form/ExternalFieldAgentForm.tsx
@@ -21,6 +21,7 @@ import {
 import { IAgentFormProps } from '../../interfaces/types';
 import AgentFormDownloadPan from './AgentFormDownloadPan';
 import AgentFormDateInput from './AgentFormDateInput';
+import ActiveNextMonthWrapper from './ActiveNextMonthWrapper';

 const ExternalFieldAgentForm = (props: IAgentFormProps) => {
  const {
@@ -47,7 +48,12 @@ const ExternalFieldAgentForm = (props: IAgentFormProps) => {
    setShowLocationVerificationToast,
    setReverseGeocodedAgentCity,
    setReverseGeocodedAgentPincode,
-    isEditPanDetailsDisabled = false
+    isEditPanDetailsDisabled = false,
+    showActiveNextMonthToggle = false,
+    isAgentActiveNextMonth,
+    setIsAgentActiveNextMonth,
+    isAgentActiveNextMonthToggleDirty,
+    setIsAgentActiveNextMonthToggleDirty
  } = props;

  const bucketGroup = useSelector((state: RootState) => state?.teamLeadDashboard?.bucketGroup);
@@ -105,7 +111,14 @@ const ExternalFieldAgentForm = (props: IAgentFormProps) => {
          Agent Details
        </Typography>
      </div>
-
+      <ActiveNextMonthWrapper
+        showActiveNextMonthToggle={showActiveNextMonthToggle}
+        isEditDisabled={isEditDisabled}
+        isAgentActiveNextMonth={isAgentActiveNextMonth}
+        setIsAgentActiveNextMonth={setIsAgentActiveNextMonth}
+        isAgentActiveNextMonthToggleDirty={isAgentActiveNextMonthToggleDirty}
+        setIsAgentActiveNextMonthToggleDirty={setIsAgentActiveNextMonthToggleDirty}
+      />
      <div className={styles.inputContainer}>
        <AgentFormTextbox
          control={control}
--- a/src/pages/AllAgents/AgentForm/components/form/InternalFieldAgentForm.tsx
+++ b/src/pages/AllAgents/AgentForm/components/form/InternalFieldAgentForm.tsx
@@ -26,6 +26,9 @@ import {
 import { IAgentFormProps } from '../../interfaces/types';
 import AgentFormDownloadPan from './AgentFormDownloadPan';
 import AgentFormDateInput from './AgentFormDateInput';
+import FormToggleTab from '@cp/src/pages/AgencyManagement/components/forms/FormToggleTab';
+import { tabOptions } from '@cp/src/pages/AgencyManagement/constants/constants';
+import ActiveNextMonthWrapper from './ActiveNextMonthWrapper';

 const InternalFieldAgentForm = (props: IAgentFormProps) => {
  const {
@@ -52,7 +55,12 @@ const InternalFieldAgentForm = (props: IAgentFormProps) => {
    setReverseGeocodedAgentCity,
    setReverseGeocodedAgentPincode,
    setShowLocationVerificationToast,
-    isEditPanDetailsDisabled = false
+    isEditPanDetailsDisabled = false,
+    showActiveNextMonthToggle = false,
+    isAgentActiveNextMonth,
+    setIsAgentActiveNextMonth,
+    isAgentActiveNextMonthToggleDirty,
+    setIsAgentActiveNextMonthToggleDirty
  } = props;

  const agentPreferences = useSelector(
@@ -112,7 +120,37 @@ const InternalFieldAgentForm = (props: IAgentFormProps) => {
          Agent Details
        </Typography>
      </div>
-
+      <div className={styles.inputContainer}>
+        <div className="flex flex-row justify-between items-center pr-8">
+          <div className="flex flex-row gap-1">
+            <Typography
+              variant="p4"
+              color="var(--navi-bordered-input-label-text-color)"
+              className="pt-1.5"
+            >
+              Training Agent
+            </Typography>
+          </div>
+          <FormToggleTab
+            control={control}
+            name="isTrainingAgent"
+            errors={errors}
+            rules={{ required: false }}
+            styles={styles}
+            validationMessage={'This field is required'}
+            tabOptions={tabOptions}
+            isToggleDisabled={isEditDisabled}
+          />
+        </div>
+      </div>
+      <ActiveNextMonthWrapper
+        showActiveNextMonthToggle={showActiveNextMonthToggle}
+        isEditDisabled={isEditDisabled}
+        isAgentActiveNextMonth={isAgentActiveNextMonth}
+        setIsAgentActiveNextMonth={setIsAgentActiveNextMonth}
+        isAgentActiveNextMonthToggleDirty={isAgentActiveNextMonthToggleDirty}
+        setIsAgentActiveNextMonthToggleDirty={setIsAgentActiveNextMonthToggleDirty}
+      />
      <div className={styles.inputContainer}>
        <AgentFormTextbox
          control={control}
--- a/src/pages/AllAgents/AgentForm/constants/constants.ts
+++ b/src/pages/AllAgents/AgentForm/constants/constants.ts
@@ -52,7 +52,8 @@ export const defaultValues = {
  agentType: '',
  activeNextMonth: 'true',
  dateOfBirth: '',
-  panNumber: ''
+  panNumber: '',
+  isTrainingAgent: true
 };

 export const NAVI_AGENCY_CODE = '1000';
--- a/src/pages/AllAgents/AgentForm/interfaces/types.ts
+++ b/src/pages/AllAgents/AgentForm/interfaces/types.ts
@@ -75,6 +75,7 @@ export interface AgentFormValues {
      status?: string;
    };
  };
+  isTrainingAgent?: boolean;
 }

 export interface Agent {
@@ -150,6 +151,7 @@ export interface Agent {
      };
    };
  };
+  isTrainingAgent?: boolean;
 }

 export interface AgentPageRequest extends PageRequest {
@@ -252,6 +254,11 @@ export interface IAgentFormProps {
  showLocationVerificationToast: boolean;
  setShowLocationVerificationToast: React.Dispatch<React.SetStateAction<boolean>>;
  isEditPanDetailsDisabled: boolean;
+  showActiveNextMonthToggle?: boolean;
+  isAgentActiveNextMonth: boolean;
+  setIsAgentActiveNextMonth: (value: boolean) => void;
+  isAgentActiveNextMonthToggleDirty: boolean;
+  setIsAgentActiveNextMonthToggleDirty: (value: boolean) => void;
 }

 export interface IHandleVerificationProps {