From 608939de9faa4d53306bdfc3725967b79ff8ee51 Mon Sep 17 00:00:00 2001 From: Aishwarya Srivastava Date: Tue, 28 Jan 2025 16:05:26 +0530 Subject: [PATCH] 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 --- .../toggleTabs/toggleTabs.module.scss | 5 +- .../AgencyManagement/interfaces/types.ts | 3 +- src/pages/AllAgents/AgentForm/AgentForm.tsx | 36 ++++++++---- .../components/form/ActiveInactiveWrapper.tsx | 41 -------------- .../form/ActiveNextMonthWrapper.tsx | 55 +++++++++++++++++++ .../form/ExternalFieldAgentForm.tsx | 17 +++++- .../form/InternalFieldAgentForm.tsx | 42 +++++++++++++- .../AgentForm/constants/constants.ts | 3 +- .../AllAgents/AgentForm/interfaces/types.ts | 7 +++ 9 files changed, 149 insertions(+), 60 deletions(-) create mode 100644 src/pages/AllAgents/AgentForm/components/form/ActiveNextMonthWrapper.tsx diff --git a/src/components/toggleTabs/toggleTabs.module.scss b/src/components/toggleTabs/toggleTabs.module.scss index 8af0a56f..605ceeee 100644 --- 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); } } } diff --git a/src/pages/AgencyManagement/interfaces/types.ts b/src/pages/AgencyManagement/interfaces/types.ts index 802186c6..98efae28 100644 --- 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>; + errors: Partial> | Partial>; rules?: RegisterOptions; styles: CSSModuleClasses; validationMessage: string; diff --git a/src/pages/AllAgents/AgentForm/AgentForm.tsx b/src/pages/AllAgents/AgentForm/AgentForm.tsx index 24665329..4d2837d7 100644 --- 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} /> ) : ( { showLocationVerificationToast={showLocationVerificationToast} setShowLocationVerificationToast={setShowLocationVerificationToast} isEditPanDetailsDisabled={isEditPanDetailsDisabled} + showActiveNextMonthToggle={showActiveNextMonthToggle as boolean} + isAgentActiveNextMonth={isAgentActiveNextMonth} + setIsAgentActiveNextMonth={setIsAgentActiveNextMonth} + isAgentActiveNextMonthToggleDirty={isAgentActiveNextMonthToggleDirty} + setIsAgentActiveNextMonthToggleDirty={setIsAgentActiveNextMonthToggleDirty} /> ) ) : ( diff --git a/src/pages/AllAgents/AgentForm/components/form/ActiveInactiveWrapper.tsx b/src/pages/AllAgents/AgentForm/components/form/ActiveInactiveWrapper.tsx index 13d1d05f..5e9a4b2e 100644 --- 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 (
{emailAddress ? ( @@ -83,28 +64,6 @@ const ActiveInactiveWrapper = (props: ActiveInactiveWrapperProps) => { )}
- {showActiveNextMonthToggle && ( -
-
-
- - Active for next month - - -
-
- )}
); }; diff --git a/src/pages/AllAgents/AgentForm/components/form/ActiveNextMonthWrapper.tsx b/src/pages/AllAgents/AgentForm/components/form/ActiveNextMonthWrapper.tsx new file mode 100644 index 00000000..e350bf69 --- /dev/null +++ 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 ( +
+ + Active for next month + + +
+ ); +}; + +export default ActiveNextMonthWrapper; diff --git a/src/pages/AllAgents/AgentForm/components/form/ExternalFieldAgentForm.tsx b/src/pages/AllAgents/AgentForm/components/form/ExternalFieldAgentForm.tsx index dc19259b..7914fbb1 100644 --- 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 - +
{ 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
- +
+
+
+ + Training Agent + +
+ +
+
+
>; isEditPanDetailsDisabled: boolean; + showActiveNextMonthToggle?: boolean; + isAgentActiveNextMonth: boolean; + setIsAgentActiveNextMonth: (value: boolean) => void; + isAgentActiveNextMonthToggleDirty: boolean; + setIsAgentActiveNextMonthToggleDirty: (value: boolean) => void; } export interface IHandleVerificationProps {