SelectedWillType File with updated optimizations
Tue Dec 19 2023 04:45:44 GMT+0000 (Coordinated Universal Time)
Saved by @alfred555 #react.js
/* eslint-disable func-names */
/* eslint-disable no-param-reassign */
/* eslint-disable no-return-assign */
/* eslint-disable no-alert */
/* eslint-disable no-unreachable-loop */
/* eslint-disable no-restricted-syntax */
/* eslint-disable no-dupe-else-if */
/* eslint-disable @typescript-eslint/no-use-before-define */
/* eslint-disable no-confusing-arrow */
/* eslint-disable no-nested-ternary */
/* eslint-disable no-fallthrough */
/* eslint-disable consistent-return */
/* eslint-disable @typescript-eslint/no-shadow */
/* eslint-disable @typescript-eslint/no-unused-expressions */
/* eslint-disable react/no-unstable-nested-components */
/* eslint-disable @typescript-eslint/comma-spacing */
/* eslint-disable array-callback-return */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable react/no-unstable-nested-components */
/* eslint-disable react/prop-types */
/* eslint-disable max-len */
/* eslint-disable react/no-array-index-key */
/* eslint-disable @typescript-eslint/no-unused-vars */
/* eslint-disable react/destructuring-assignment */
import * as React from 'react';
import './styles.scss';
// MUI imports
import { styled } from '@mui/material/styles';
import Stack from '@mui/material/Stack';
import Stepper from '@mui/material/Stepper';
import Step from '@mui/material/Step';
import StepLabel from '@mui/material/StepLabel';
import StepDoneIcon from '@mui/icons-material/Done';
import StepConnector, {
stepConnectorClasses,
} from '@mui/material/StepConnector';
import { StepIconProps } from '@mui/material/StepIcon';
// import Button from '@mui/material/Button';
// import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
// Package imports
import {
useParams, useNavigate, useLocation, Navigate,
} from 'react-router';
import { useSelector, useDispatch } from 'react-redux';
import { Modal, Button } from 'react-bootstrap';
import { trackPromise } from 'react-promise-tracker';
// Redux Reducers import
import {
WillStepState,
fetchWillStepList,
willStepSelector,
} from '@redux/slices/wills-steps-list';
import {
WillBeneficiaryShareStateaftersave,
fetchWillBeneficiaryShareStateaftersave,
willBeneficiaryShareListSelector,
} from '@redux/slices/wills-getbeneficiary-sharelist';
import {
WillBeneficiaryState,
fetchWillBeneficiaryState,
willBeneficiaryListSelector,
} from '@redux/slices/wills-shares-estate';
import {
WillBeneficiaryShareState,
fetchGetAllPropertyDetailsDetailsByProfileID,
willBeneficiaryListShareSelector,
fetchGetBeneficiaryShareList,
} from '@redux/slices/wills-specific-estate';
import {
fetchPersonalInformationByGuid,
getServiceId,
resetErrorState,
setErrorInfo,
setIsSpouseSelected,
setShowSpouseDetails,
setTestatorName,
willPersonalInformationSelector,
} from '@redux/slices/will-personal-information';
import {
WillBookState,
fetchWillBookState,
willBookSelector,
} from '@redux/slices/wills-book-appointment';
import {
WillSubstituteBeneficiaryState,
fetchWillSubsitituteBeneficiaryState,
willSubstituteBeneficiaryListSelector,
} from '@redux/slices/will-substitute-beneficiarylist';
import {
checkMirrorWillSelected,
checkSingleWillSelected,
checkVirtualSelected,
clearSelectedDistribution,
clearSelectedWillType,
disableNavigation,
fetchIncompleteSteps,
getIncompleteSteps,
getNewActiveStep,
setCompletedStepList,
setCompletedSteps,
setHighlightedSteps,
setHusbandCompletedSteps,
setIsChangeService,
setIsCompleteWillInfo,
setIsTestatorStepsCompleted,
setIsUpgradeWill,
setNavigationIndex,
setShowIncompleteStepsModal,
setSpouseCompletedSteps,
setStepFlow,
setWillPreviewCompleted,
setWillTypeID,
storeActiveStep,
willsValidatorSelector,
} from '@redux/slices/willsValidator';
import {
setPropertyAdded,
willRealEstateSelector,
} from '@redux/slices/will-realEstate';
import { setBeneficiaryAdded, willBeneficiaryDataSelector } from '@redux/slices/wills-beneficiary-details';
import { clearState } from '@redux/reducers/actions';
import {
fetchActiveServices,
fetchLawyerDraftWills,
setIsModifyWill,
setModifyAppointment,
willActiveServiceSelector,
} from '@redux/slices/will-active-service';
import {
setFromWillPreview,
willPreviewSelector,
} from '@redux/slices/will-preview';
import {
setFromUploadDocs,
willDocumentUploadSelector,
} from '@redux/slices/will-documents-upload';
import { willAccountInformationSelector } from '@redux/slices/wills-financial-Accounts';
import { willCompanyShareInformationSelector } from '@redux/slices/will-company-share-information';
// Assets Import
import tickIcon from '@assets/tick.svg';
import closeIcon from '@assets/Group 151.svg';
import sticker from '@assets/Rectangle 786.png';
// Components Import
import WillTypeSelection from '@components/WillTypeSelection';
import WillPayment from '@components/WillPayment';
import WillRealEstateDetail from '@components/WillRealEstateDetail';
import WillBookAppointment from '@components/WillBookAppointment';
import CompanyShareInfo from '@components/CompanyShareInfo';
import RegistrationStepper from '@components/RegistrationStepper';
import WillBeneficiaryDetail from '@components/WillBeneficiaryDetail';
import WillsMinorChildren from '@components/WillsMinorChildern';
import WillExecutorDetail from '@components/WillExecutorDetail';
import WillRealEstateDistribution from '@components/WillRealEstateDistribution';
import WillBySpecificRealEstate from '@components/WillBySpecificRealEstate';
import WillBySpecificRealEstateBusinessOwners from '@components/WillBySpecificRealEstateBusinessOwners';
import WillBySpecificRealEstateFinancialAssets from '@components/WillBySpecificRealEstateFinancialAssets';
import WillBySharesOfEstate from '@components/WillBySharesOfEstate';
import DocumentManager from '@components/DocumentManager';
import WillPersonalInformation from '@components/WillPersonalInformation';
import WillDraftDetail from '@components/WillDraftDetail';
import WillWitnessDetails from '@components/WillWitnessDetails';
import WillInterimGuardianDetail from '@components/WillInterimGuardianDetail';
import WillGuardianDetail from '@components/WillGuardianDetail';
import WillGuardianInformation from '@components/WillGuardianInformation';
import AccountsInformation from '@components/AccountsInformation';
import MovableAndImmovableProperty from '@components/MovableAndImmovableProperty';
import WillLocationTypeSelection from '@components/WillLocationTypeSelection';
import WillPreview from '@components/WillPreview';
import ScaffoldingIcons from '@components/ScaffoldingIcons';
import QuickBookingWarningModal from '@components/QuickBookingWarningModal';
import { dropDownSelector } from '@redux/slices/dropDowns';
import { willPaymentDetailSelector } from '@redux/slices/will-payment-detail';
import {
BUISINESS_OWNERS_WILL, FINANCIAL_ASSETS_WILL, FULL_WILL, GUARDIANSHIP_WILL, PROPERTY_WILL, TEMPLATED_FULL_WILL,
} from '@utils/config';
import useWillsIncompleteSteps from '@utils/hooks/useWillsIncompleteSteps';
import getIncompleteStepsList from '@utils/getIncompleteSteps';
import getThirdStepName from '@utils/getThirdStepName';
import useHandleReload from '@utils/hooks/useHandleReload';
import useWillsCompletedSteps from '@utils/hooks/useWillsCompletedSteps';
import { loginSelector } from '@redux/slices/login-flow';
import IncompleteStepsModal from './incompleteStepsModal';
// API
import api from '../../api';
// import DeleteConfirmationModal from '@components/DeleteConfirmationModal';
const DeleteConfirmationModal = React.lazy(
() => import('@components/DeleteConfirmationModal'),
);
const ColorlibConnector = styled(StepConnector)(({ theme }) => ({
[`&.${stepConnectorClasses.alternativeLabel}`]: {
top: 22,
},
[`&.${stepConnectorClasses.active}`]: {
[`& .${stepConnectorClasses.line}`]: {
height: 3,
border: 0,
backgroundColor:
theme.palette.mode === 'dark' ? theme.palette.grey[800] : '#eaeaf0',
borderRadius: 1,
},
},
[`&.${stepConnectorClasses.completed}`]: {
[`& .${stepConnectorClasses.line}`]: {
height: 3,
border: 0,
backgroundColor:
theme.palette.mode === 'dark' ? theme.palette.grey[800] : '#eaeaf0',
borderRadius: 1,
},
},
[`& .${stepConnectorClasses.line}`]: {
height: 3,
border: 0,
backgroundColor:
theme.palette.mode === 'dark' ? theme.palette.grey[800] : '#eaeaf0',
borderRadius: 1,
},
}));
const ColorlibStepIconRoot = styled('div')<{
ownerState: { completed?: boolean; active?: boolean };
}>(({ theme, ownerState }) => ({
backgroundColor:
theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#1B202D',
zIndex: 1,
color: '#fff',
width: 60,
height: 60,
display: 'flex',
borderRadius: '50%',
justifyContent: 'center',
alignItems: 'center',
// marginRight: (ownerState.completed || ownerState.active) ? 327 : 0,
...(ownerState.active && {
backgroundColor: '#023979',
boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)',
}),
...(ownerState.completed && {
backgroundColor: '#3ECDAB',
}),
}));
function ColorlibStepIcon(
props: StepIconProps & {
stepNumber: Array<number>;
currentIndex: number;
data: Array<string>;
},
) {
// , data: Array<string>, currentIndex: number
const {
active, completed, className, currentIndex, stepNumber, icon, data,
} = props;
// console.log('props',props);
const { currentStep } = useSelector(willsValidatorSelector);
const selectedNum = currentIndex - 1;
// console.log('currentIndex', currentIndex);
// console.log('stepNumber', stepNumber);
// console.log('currentStep from selector in custom comp', currentStep);
const icons: { [index: string]: React.ReactElement | any } = {
1: completed ? <StepDoneIcon /> : null,
2: completed ? <StepDoneIcon /> : null,
3: completed ? <StepDoneIcon /> : null,
4: completed ? <StepDoneIcon /> : null,
5: completed ? <StepDoneIcon /> : null,
6: completed ? <StepDoneIcon /> : null,
7: completed ? <StepDoneIcon /> : null,
8: completed ? <StepDoneIcon /> : null,
9: completed ? <StepDoneIcon /> : null,
10: completed ? <StepDoneIcon /> : null,
11: completed ? <StepDoneIcon /> : null,
12: completed ? <StepDoneIcon /> : null,
13: completed ? <StepDoneIcon /> : null,
14: completed ? <StepDoneIcon /> : null,
15: completed ? <StepDoneIcon /> : null,
16: completed ? <StepDoneIcon /> : null,
};
return (
<ColorlibStepIconRoot
ownerState={{ completed, active }}
className={className}
>
{icons[String(props.icon)] ? icons[String(icon)] : icon}
</ColorlibStepIconRoot>
);
}
export interface CustomizedSteppersProps {
data: Array<string>;
currentIndex: number;
setCurrentIndex: React.Dispatch<React.SetStateAction<number>>;
}
// eslint-disable-next-line max-len, react/function-component-definition
const CustomizedSteppers: React.FC<CustomizedSteppersProps> = () => {
const [activeStep, setActiveStep] = React.useState(0);
const [skipped, setSkipped] = React.useState(new Set<number>());
// const [completedSteps, setCompletedSteps] = React.useState([]);
const [num1, setNum1] = React.useState(0);
const [num2, setNum2] = React.useState(1);
const [currentBtnStep, setCurrentBtnStep] = React.useState<number>();
const [iconNum1, setIconNum1] = React.useState(0);
const [iconNum2, setIconNum2] = React.useState(3);
const [childData, setChildData] = React.useState('');
const [childData1, setChildData1] = React.useState('');
const [currentIndex, setCurrentIndex] = React.useState(0);
const [data, setdata] = React.useState<string>();
const [newCompletedSteps, setNewCompletedSteps] = React.useState([]);
// const [incompleteSteps, setIncompleteSteps] = React.useState([]);
const [isShowBookAppointment, setIsShowBookAppointment] = React.useState(false);
const [currentSelectedStep, setCurrentSelectedStep] = React.useState<number>(null);
// Will Preview Reached
const [willPreviewReached, setWillPreviewReached] = React.useState<boolean>(false);
// Skip to bookAppointment flag
const [showSkipToAppointmentModal, setShowSkipToAppointmentModal] = React.useState<boolean>(false);
const [stepLabel, setStepLabel] = React.useState([]);
// Steps to map in the modal (incomplete steps)
const [steps, setSteps] = React.useState<any>([]);
const [spouseIncomplete, setSpouseIncomplete] = React.useState<any>([]);
const [husbandIncomplete, setHusbandIncomplete] = React.useState<any>([]);
const [show, setShow] = React.useState<boolean>(false);
// Router Navigation
const navigate = useNavigate();
const { state } = useLocation();
console.log('state', state);
// Params
const { parameterGuid } = useParams();
// Will type ID (For identifying willTypes)
// const willTypeID = Number(parameterGuid);
// Dispatch actions using dispatch
const dispatch = useDispatch();
// Store Subscriptions
const {
mirrorWillCheck,
singleWillCheck,
currentStep,
newActiveStep,
navigationEnabled,
navigationIndex,
isQuickBooking,
guardianShipWill,
byShareCheck,
bySpecificCheck,
isVirtual,
isInPerson,
incompleteSteps,
spouseCompletedSteps,
husbandCompletedSteps,
willPreviewCompleted,
isCompleteWillInfo,
isChangeService,
willTypeID, // Will type ID (For identifying willTypes)
isUpgradeWill,
showIncompleteStepsModal,
highlightedStep,
distributionCompleted,
isMirrorWill,
} = useSelector(willsValidatorSelector);
// Will Personal Informations
const {
profileGuid, isSpouseSelected, spouseGuid, serviceId,
} = useSelector(
willPersonalInformationSelector,
);
// User loggedIn Slice
const { userData } = useSelector(loginSelector);
const { lawyerDraftWills } = useSelector(willActiveServiceSelector);
// Step List
const { results, loading, hasErrors } = useSelector<unknown, WillStepState>(
willStepSelector,
);
// States to handle incompleteSteps Modal
const { fromWillPreview } = useSelector(willPreviewSelector);
const { fromUploadDocs,isDocumentsChanged } = useSelector(willDocumentUploadSelector);
// Active service
const { activeService, isModifyWill, modifyAppointment } = useSelector(
willActiveServiceSelector,
);
// Distribution of Shares Enabling conditions
const { propertyAdded, propertyList, isPropertyChanged } = useSelector(
willRealEstateSelector,
);
const { beneficiaryAdded, isBeneficiaryChanged,beneficiaryList } = useSelector(
willBeneficiaryDataSelector,
);
const { accountList, isaddAccountInformation } = useSelector(
willAccountInformationSelector,
);
const { companyShareInformationList, isCompanyShareInformationChanged } = useSelector(willCompanyShareInformationSelector);
const { selectedEmiratesList } = useSelector(dropDownSelector);
const { handleRedirectEvent } = useSelector(willPaymentDetailSelector);
const willTypeNumber = localStorage.getItem('willTypeID');
const willTypeId = Number(willTypeNumber);
const handleChildData = (data: string) => {
setChildData(data);
};
const handleDataFromChild = (data: string) => {
setChildData1(data);
};
const [showModal, setShowModal] = React.useState(false);
const [draftSActiveService, setDraftSActiveService] = React.useState<any>([]);
console.log('draftSActiveService', draftSActiveService);
React.useEffect(() => {
switch (activeService?.length) {
case 2:
// There is a modify will service available in active services
setDraftSActiveService(activeService[1]);
break;
case 1:
// There is only one active service in active services API
setDraftSActiveService(activeService[0]);
break;
default:
// Do nothing
}
}, [activeService]);
// Custom hook to handle Reload when on forms => Wills,Registrations,Cases etc
useHandleReload(activeService,'/wills');
/**
* Handles showing the incomplete steps modal.
*
* @param {string} stepName - The name of the step.
* @return {void} This function does not return anything.
*/
const handleShowIncompleteStepsModal = (stepName?: string): void => {
setShowModal(true);
};
/**
* Handles closing of the incomplete steps modal.
*
* @return {void} This function does not return anything.
*/
const handleCloseModal = (): void => {
setShowModal(false);
dispatch(setShowIncompleteStepsModal(false));
};
const isStepSkipped = (step: number) => skipped.has(step);
/**
* Retrieves the list of completed steps for a given user profile.
*
* @return {Promise<void>} This function does not return anything.
*/
const getCompletedSteps = React.useCallback(async () => {
const completedSteps = await trackPromise(
api.getCompletedStepsListByGUID(
isSpouseSelected ? spouseGuid : profileGuid,
),
);
const completedStepNumbers = completedSteps?.data?.Output;
const steps = completedStepNumbers.map((stepNumber: any) => Number(stepNumber.stepNumber));
setNewCompletedSteps(steps);
}, [isSpouseSelected, spouseGuid, profileGuid]);
React.useEffect(() => {
const condition = willTypeID === TEMPLATED_FULL_WILL || willTypeID === FINANCIAL_ASSETS_WILL || willTypeID === PROPERTY_WILL || willTypeID === BUISINESS_OWNERS_WILL;
if (condition) {
if (newCompletedSteps.includes(3) && newCompletedSteps.includes(5)) {
dispatch(setPropertyAdded(true));
dispatch(setBeneficiaryAdded(true));
} else {
dispatch(setPropertyAdded(false));
dispatch(setBeneficiaryAdded(false));
}
}
},[newCompletedSteps,willTypeID]);
// Clear all states here (global && local)
// Page Mount LifeCycle
React.useEffect(() => {
dispatch<any>(fetchActiveServices());
window.scrollTo(0, 0);
dispatch(clearState());
// dispatch(storeActiveStep(0));
// Set activeStep (stepID) === 1(willTypeSelection) on initial page mount
dispatch(getNewActiveStep(1));
dispatch(clearSelectedWillType());
// Set Default step as will type selection
dispatch(storeActiveStep(0));
// Set highlighted step to 1
dispatch(setHighlightedSteps(1));
dispatch(resetErrorState());
setNewCompletedSteps([]);
window.addEventListener('popstate', () => {
window.location.reload();
});
return () => {
window.removeEventListener('popstate', () => console.log('listner removed'));
// setNewCompletedSteps([]);
};
}, []);
// If user is a draftsman fetch draftsman details here
React.useEffect(() => {
if (userData.DraftsmanGuid) {
dispatch<any>(fetchLawyerDraftWills());
}
},[userData]);
// if the selected lawyer from the Draftman list is mirrorWill then set the mirrorwill flag to true
React.useEffect(() => {
setTimeout(() => {
if (isMirrorWill) {
dispatch(checkMirrorWillSelected());
}
},100);
},[]);
// Redirect to wills page if the dummy url is entered by the user
React.useEffect(() => {
if (state === null) {
navigate('/wills');
}
}, [state]);
// Fetch completedSteps each time the switcher is changed or Beneficiary or (account/property/company) is added || removed && if document is uploaded or removed (in any case)
const getCompletedStepsCallback = React.useCallback(() => getCompletedSteps(), [
isSpouseSelected,
isBeneficiaryChanged,
isPropertyChanged,
isCompanyShareInformationChanged,
isaddAccountInformation,
isDocumentsChanged,
]);
React.useEffect(() => {
getCompletedStepsCallback();
}, [getCompletedStepsCallback]);
// If accountList is present && propertyList is present && companyShareInformationList is present ==> enable condition to allow Distribution Of Shares/Accounts
React.useEffect(() => {
if (
accountList?.length !== 0
|| propertyList?.length !== 0
|| companyShareInformationList?.length !== 0
|| selectedEmiratesList?.length !== 0
) {
dispatch(setPropertyAdded(true));
} else {
dispatch(setPropertyAdded(false));
}
}, [accountList, propertyList, companyShareInformationList,selectedEmiratesList]);
React.useEffect(() => {
if (beneficiaryList.length > 0) {
dispatch(setBeneficiaryAdded(true));
} else {
dispatch(setBeneficiaryAdded(false));
}
},[beneficiaryList]);
// If stepNumber === 3 OR 5 is not present in completedSteps response && activeStep === Distribution Of Shares ==> TODO ==> Redirection to any other step ?
React.useEffect(() => {
if (
(!newCompletedSteps.includes(3) || !newCompletedSteps.includes(5))
&& (newActiveStep === 18 || newActiveStep === 6)
) {
setShow(true);
// const result = window.confirm('Please complete accounts/property/company && beneficiary steps');
// if (result) {
// // Navigate to step 4 for now ==> change later on
// dispatch(setHighlightedSteps(5));
// dispatch(setNavigationIndex(5));
// dispatch(getNewActiveStep(5));
// } else {
// dispatch(setHighlightedSteps(5));
// dispatch(setNavigationIndex(5));
// dispatch(getNewActiveStep(5));
// }
}
}, [newCompletedSteps, newActiveStep]);
// If activeServices present && changeService is true && has willTypeID ==> set willTypeID from activeServices here
React.useEffect(() => {
if (isChangeService && draftSActiveService?.willTypeID) {
dispatch(setWillTypeID(draftSActiveService?.willTypeID));
}
}, [activeService, isChangeService]);
// Set willtypeID here if lawyerDetails have willtypeID and changeService is true ==> to change dynamically
// React.useEffect(() => {
// if (isChangeService && lawyerDraftWills[0]?.willTypeID) {
// dispatch(setWillTypeID(lawyerDraftWills[0]?.willTypeID));
// }
// },[lawyerDraftWills]);
/**
* Handles Complete Will Info Functionality
*
* @return {Promise<void>} A promise that resolves when the function completes.
*/
const handleCompleteWillInfo = async (): Promise<void> => {
try {
// Get Completed Steps list and enable tick mark condition in the stepper
await getCompletedSteps();
// dispatch(setShowSpouseDetails(false));
const {
stepID,stepNumber,steps,testatorSteps,spouseSteps,
} = await getIncompleteStepsList(
profileGuid,
spouseGuid,
isSpouseSelected ? spouseGuid : profileGuid,
serviceId,
);
console.log('totalSteps',steps);
console.log('spouseSteps',spouseSteps);
console.log('testatorSteps',testatorSteps);
// dispatch(setIsSpouseSelected(!!spouseSteps)); need clarity here
const getStepID = () => testatorSteps.length > 0 ? testatorSteps[0].stepID : spouseSteps[0].stepID;
const getStepNumber = () => testatorSteps.length > 0 ? Number(testatorSteps[0].stepNumber) : Number(spouseSteps[0].stepNumber);
if (steps?.length === 0) {
if (willTypeID === 1) {
// Full Will
dispatch(getNewActiveStep(9)); // Book Appointment
dispatch(setHighlightedSteps(11));
dispatch(setNavigationIndex(11));
} else if (willTypeID === 2) {
// GuardianShip Will
dispatch(getNewActiveStep(9)); // Book Appointment
dispatch(setHighlightedSteps(9));
dispatch(setNavigationIndex(9));
} else {
// All other wills
dispatch(getNewActiveStep(21)); // Will Preview
dispatch(setHighlightedSteps(9));
dispatch(setNavigationIndex(9));
}
} else {
/* use this condition to check spouseGUID is present in activeServices Mirror Will
* if Not ==> redirect all navigation to Personal Details step
* else ==> redirect to first incomplete step as normal */
const condition = draftSActiveService?.isMirrorWill
&& draftSActiveService?.spouseProfileGUID === null;
console.log('draftSActiveServiceincompletewillinfo',draftSActiveService);
if (singleWillCheck) {
dispatch(getNewActiveStep(condition ? 2 : getStepID()));
dispatch(setHighlightedSteps(condition ? 2 : getStepNumber()));
dispatch(setNavigationIndex(condition ? 2 : getStepNumber()));
} else if (mirrorWillCheck) {
dispatch(setIsSpouseSelected(testatorSteps.length === 0));
dispatch(getNewActiveStep(spouseGuid === null ? 2 : getStepID()));
dispatch(setHighlightedSteps(spouseGuid === null ? 2 : getStepNumber()));
dispatch(setNavigationIndex(spouseGuid === null ? 2 : getStepNumber()));
}
}
} catch (error) {
dispatch(resetErrorState());
dispatch(setErrorInfo('Some Error occured !'));
}
};
const handleChangeService = async () => {
dispatch<any>(fetchActiveServices());
dispatch(setIsCompleteWillInfo(false));
dispatch(getNewActiveStep(2));
dispatch(setHighlightedSteps(2));
dispatch(setNavigationIndex(2));
// Get Completed Steps list and enable tick mark condition in the stepper
await getCompletedSteps();
};
const handleUpgradeWill = async () => {
// dispatch(storeActiveStep(1));
dispatch(setHighlightedSteps(2));
dispatch(setNavigationIndex(2));
// dispatch(getNewActiveStep(2));
// Get Completed Steps list and enable tick mark condition in the stepper
await getCompletedSteps();
};
const handleModifyAppointment = () => {
if (willTypeID === FULL_WILL) {
dispatch(getNewActiveStep(9));
dispatch(setHighlightedSteps(11));
dispatch(setNavigationIndex(11));
dispatch(checkVirtualSelected());
} else if (willTypeID === GUARDIANSHIP_WILL) {
dispatch(getNewActiveStep(9));
dispatch(setHighlightedSteps(9));
dispatch(setNavigationIndex(9));
dispatch(checkVirtualSelected());
} else {
dispatch(getNewActiveStep(9));
dispatch(setHighlightedSteps(10));
dispatch(setNavigationIndex(10));
dispatch(checkVirtualSelected());
}
};
const handleModifyWill = async () => {
dispatch(storeActiveStep(1));
dispatch(setHighlightedSteps(2));
dispatch(setNavigationIndex(2));
dispatch(getNewActiveStep(2));
};
// Complete Will Info Functionality Handled in this useEffect
React.useEffect(() => {
if (isCompleteWillInfo) {
handleCompleteWillInfo();
}
}, [isCompleteWillInfo]);
// If Active Service is present
React.useEffect(() => {
if (draftSActiveService?.isMirrorWill) {
dispatch(checkMirrorWillSelected());
dispatch(setIsSpouseSelected(false));
} else {
dispatch(checkSingleWillSelected());
}
}, [activeService, isChangeService]);
// Change Service functionality
React.useEffect(() => {
if (isChangeService) {
handleChangeService();
}
}, [isChangeService]);
React.useEffect(() => {
if (isUpgradeWill) {
dispatch(setWillTypeID(1));
// TODO ==> complete API integration for upgrade will and check for isUpgradeWill Flag in the response; Use the new profileGUID for fetching completed steps
handleUpgradeWill();
}
}, [isUpgradeWill]);
// Modify Appointment Functionality ==> Here ==> Navigates to Book Appointment step
React.useEffect(() => {
if (modifyAppointment) {
handleModifyAppointment();
}
},[modifyAppointment]);
// If modifyWill is selected ==> navigate to Personal Details
/*
if single will ==> navigate to Personal Details ==> Done
if mirror will
==> Testator ==> Yes ==> navigate to Personal Details
==> No ==> navigate to Personal Details (change to Single Will)
==> Spouse ==> Yes ==> navigate to Personal Details (change to Single Will)
==> Cancel ==> Do Nothing (Close Modal)
*/
React.useEffect(() => {
if (isModifyWill) {
handleModifyWill();
}
},[isModifyWill]);
// Check if property && beneficiary are added for navigation to Real Estate Distribution
const dateSelected = childData;
// Fetch all steps list
React.useEffect(() => {
dispatch<any>(fetchWillStepList(willTypeID || willTypeId)); // from LocalStorage && Redux
}, [dispatch, willTypeID, dateSelected, isSpouseSelected,willTypeId]);
// React.useEffect(() => {
// dispatch<any>(fetchWillBookState(dateSelected));
// }, [dispatch, dateSelected]);
// Map stepID(Number) to the array
const stepNumber: any = results?.map((d: any) => d.stepID);
// Map stepNumber(string) to the array
const stepNumArray: any = results?.map((d: any) => Number(d.stepNumber));
// Check draft and remaining will steps here---------------------------------
const isDraft: boolean = false;
// if (incompleteSteps.length > 0) {
// isDraft = true;
// } else {
// isDraft = false;
// }
// test response steps
const responseSteps = [8, 9];
const finishedSteps: any = [];
stepNumber.forEach((s: any) => {
// Use incompletSteps array here
if (!responseSteps.includes(s)) {
finishedSteps.push(s);
}
});
/**
* Handle continue in incomplete steps modal
*
* @param {any} id - stepNumber ()
* @param {number} number - stepId
* @return {void} The function does not return anything.
*/
const handleContinue = async (id: any, number: number): Promise<void> => {
window.scrollTo(0, 0);
dispatch(setShowIncompleteStepsModal(false));
setShowModal(false);
// Optimization
if (singleWillCheck) { // TODO ==> Check Single will condition
dispatch(setNavigationIndex(id));
dispatch(setHighlightedSteps(id)); // PS:: This is stepNumber
dispatch(getNewActiveStep(number)); // PS:: This is stepID
} else if (mirrorWillCheck) {
if (fromUploadDocs) {
dispatch(setNavigationIndex(id));
dispatch(setHighlightedSteps(id)); // PS:: This is stepNumber
dispatch(getNewActiveStep(number)); // PS:: This is stepID
}
if (fromWillPreview) {
await getCompletedSteps(); // Get completed Steps of the testator/spouse
await dispatch(setIsSpouseSelected(!isSpouseSelected));
dispatch(setNavigationIndex(id));
dispatch(setHighlightedSteps(id)); // PS:: This is stepNumber
dispatch(getNewActiveStep(number)); // PS:: This is stepID
}
// Handle continue case from Submit Button for ModifyAppointment
// dispatch(setNavigationIndex(id));
// dispatch(setHighlightedSteps(id)); // PS:: This is stepNumber
// dispatch(getNewActiveStep(number)); // PS:: This is stepID
}
// Set states to initial state/false here after the function is executed
dispatch(setFromUploadDocs(false));
dispatch(setFromWillPreview(false));
};
const getIncompleteStepsByGuid = (step: any) => {
const husbandIncompleteSteps = step?.filter(
(s: any) => s?.bookedForProfileGuid === profileGuid,
);
const spouseIncompleteSteps = step?.filter(
(s: any) => s?.bookedForProfileGuid === spouseGuid,
);
setSpouseIncomplete(spouseIncompleteSteps);
setHusbandIncomplete(husbandIncompleteSteps);
if (willPreviewCompleted) {
setSteps(spouseIncompleteSteps);
} else {
setSteps(husbandIncompleteSteps);
}
};
React.useEffect(() => {
if (incompleteSteps?.length !== 0) {
getIncompleteStepsByGuid(incompleteSteps);
}
}, [incompleteSteps]);
console.log('isShowBookAppointment',isShowBookAppointment);
// Get StepID when navigating from Beneficiary Details using next button
const getStepIDFromBeneficiaryStep = (willType: number): number => {
switch (willType) {
case PROPERTY_WILL:
return 6;
case FINANCIAL_ASSETS_WILL:
case BUISINESS_OWNERS_WILL:
case TEMPLATED_FULL_WILL:
return 18;
case FULL_WILL:
return 12;
default:
return 0;
}
};
/**
* Handles the next step in the process.
*
* @param {number} step - The current step number.
* @param {any} stepName - The name of the current step.
* @param {boolean} completed - Indicates if the step is completed.
*/
const handleNext = async (
step: number,
stepName?: any,
completed?: boolean,
) => {
console.log('STEPNUMBER', step);
console.log('COMPLETED', completed);
window.scrollTo(0, 0);
setCurrentSelectedStep(step);
// Revert Active Service Funtionalities back to initial state on first handleNext Step
dispatch(setIsChangeService(false));
// dispatch(setIsCompleteWillInfo(false));
dispatch(setModifyAppointment(false));
// dispatch(setIsUpgradeWill(false));
dispatch(setIsModifyWill(false));
// Set upgradeWill flag to false if next clicked from Personal Details
if (stepName === 'personal') {
dispatch(setIsUpgradeWill(false));
}
// Show selection option in Real Estate Distribution for Property Will up on next from beneficiary Details
if (step === 5) {
dispatch(clearSelectedDistribution());
}
// If quick booking is enabled
if (isQuickBooking && stepName !== 'willTypeSelection') {
setActiveStep(8);
if (stepName === 'bookAppointment') {
setActiveStep((prev) => prev + 1);
}
} else if (!isQuickBooking && stepName !== 'willTypeSelection') {
// setActiveStep(3);
}
if (stepName === 'personal' && isQuickBooking) {
setShowSkipToAppointmentModal(true);
}
// If upload documents is active and Book appointment is visible
if (stepName === 'upload' && !isShowBookAppointment) {
// Incomplete steps API called here
try {
const response = await trackPromise(
api.validateWillSteps(
profileGuid,
spouseGuid,
isSpouseSelected ? spouseGuid : profileGuid,
serviceId,
),
);
// Save incomplete steps list in store (redux)
const incompletedSteps = response?.data?.Output;
const testatorIncompleteSteps = incompletedSteps.filter((step:any) => step.bookedForProfileGuid === profileGuid);
const spouseIncompleteSteps = incompletedSteps.filter((step:any) => step.bookedForProfileGuid === spouseGuid);
console.log('testatorIncompleteSteps', testatorIncompleteSteps);
console.log('spouseIncompleteSteps', spouseIncompleteSteps);
dispatch(getIncompleteSteps(isSpouseSelected ? spouseIncompleteSteps : testatorIncompleteSteps));
// Mirror Will && Testator
if (mirrorWillCheck && !isSpouseSelected) {
if (testatorIncompleteSteps.length !== 0) {
handleShowIncompleteStepsModal();
} else {
// alert('go to next step');
dispatch(setHighlightedSteps(9));
dispatch(setNavigationIndex(9));
dispatch(getNewActiveStep(13));
}
} else if (mirrorWillCheck && isSpouseSelected) { // Mirror Will && Spouse
if (spouseIncompleteSteps.length !== 0) {
handleShowIncompleteStepsModal();
} else {
dispatch(setHighlightedSteps(9));
dispatch(setNavigationIndex(9));
dispatch(getNewActiveStep(13));
}
}
if (singleWillCheck) {
// Show incomplete steps Modal only if the response is not empty
if (incompletedSteps.length !== 0) {
handleShowIncompleteStepsModal();
} else {
// Ask for confirmation on this functionality
setIsShowBookAppointment(true);
// Set View component, highlighted step in stepper and icon
dispatch(setHighlightedSteps(9));
dispatch(setNavigationIndex(9));
dispatch(getNewActiveStep(21));
setNewCompletedSteps((prev: any) => [...prev, 3, 4, 5, 6, 7, 8]);
// dispatch(storeActiveStep(9));
}
}
} catch (error) {
console.log(error);
}
} else if (stepName === 'beneficiary-details' && willTypeID !== 1) {
// Not needed for Full Will
// If property and beneficiray is added then only we can navigate or go next to Real Estate Distribution
if (propertyAdded && beneficiaryAdded) {
dispatch(setHighlightedSteps(6));
dispatch(getNewActiveStep(getStepIDFromBeneficiaryStep(willTypeID)));
dispatch(setNavigationIndex(null));
// // Highlighted step handled here
// dispatch(setHighlightedSteps(step + 1));
// // Set Current step number
// dispatch(disableNavigation());
// setCurrentSelectedStep(step);
// // getWillStep(step);
// const nextIndex = (currentIndex + 1) % stepNumber.length;
// setCurrentIndex(nextIndex);
// // setActiveStep((prevActiveStep) => prevActiveStep + 1);
// // Need more testing here
// setCurrentBtnStep(step + 1);
// setActiveStep((prevActiveStep) => prevActiveStep + 1);
// dispatch(storeActiveStep(step));
// dispatch(getNewActiveStep(0));
// dispatch(setNavigationIndex(null));
} else {
await dispatch<any>(resetErrorState());
await dispatch<any>(setErrorInfo(`Please complete Beneficiary Details and ${getThirdStepName(willTypeID)}`));
}
} else {
// ----------------------------------------------------------------
// Highlighted step handled here
// dispatch(setHighlightedSteps(step + 1));
// // Test case
// // getWillStep(step);
// dispatch(disableNavigation());
// const nextIndex = (currentIndex + 1) % stepNumber.length;
// setCurrentIndex(nextIndex);
// // dispatch(storeActiveStep(activeStep + 1));
// // Get stepNumber list from the stepList array
// const stepNumberList: any = results?.map((res) => Number(res?.stepNumber));
// // // Handling ICONS navigation in handleNext()
// if (step === 3) {
// setIconNum1(3);
// setIconNum2(6);
// } else if (step === 6) {
// setIconNum1(6);
// setIconNum2(9);
// } else if (step === 9) {
// if (willTypeID === 2) {
// // Guardianship Will
// setIconNum1(7);
// setIconNum2(10);
// } else {
// setIconNum1(8);
// setIconNum2(11);
// }
// } else if (step > stepNumberList[stepNumberList.length - 2]) {
// // setIconNum1(8);
// // setIconNum2(11);
// navigate('/wills');
// }
// // Handle distribution of shares/Real estate distribution in ICONS
// if (step === 7) {
// setIconNum1(6);
// setIconNum2(9);
// }
// // Set current step to pass as a prop to the further components to use
// // the handleNext method in those respective components
// // NB:increment the step number by 1 to get correct list of completed steps
// setCurrentBtnStep(step + 1);
// let newSkipped = skipped;
// if (isStepSkipped(activeStep)) {
// newSkipped = new Set(newSkipped.values());
// newSkipped.delete(activeStep);
// }
// // Increment activestep from state
// setActiveStep((prevActiveStep) => prevActiveStep + 1);
// // Increment currentStep from store state
// dispatch(storeActiveStep(step));
// dispatch(setStepFlow());
// setSkipped(newSkipped);
// dispatch(getNewActiveStep(0));
// dispatch(setNavigationIndex(null));
// if (navigationEnabled) {
// setNewCompletedSteps((prevSteps: any) => [
// ...prevSteps,
// completed ? navigationIndex : null,
// ]);
// dispatch(setCompletedStepList(completed ? navigationIndex : null));
// dispatch(storeActiveStep(navigationIndex));
// setActiveStep(navigationIndex);
// } else {
// setNewCompletedSteps((prevStep: any) => [
// ...prevStep,
// completed ? step : null,
// ]);
// dispatch(setCompletedStepList(completed ? step : null));
// // setNewCompletedSteps((prevStep: any) => [...prevStep,step]);
// }
// ----------------------------------------------------------------
// Stepper/Next Optimisations
dispatch(setHighlightedSteps(step + 1));
dispatch(storeActiveStep(step));
dispatch(getNewActiveStep(0));
dispatch(setNavigationIndex(step + 1));
// dispatch(setNavigationIndex(null));
setNewCompletedSteps((prev:any) => [...prev,completed ? step : null]);
}
};
console.log('stepNumArray', stepNumArray);
// Stepper Icons (scaffolding Icons) Optimisation
React.useEffect(() => {
if (highlightedStep !== 1) {
if (stepNumArray.length === highlightedStep) {
setIconNum1(highlightedStep - 3);
setIconNum2(highlightedStep);
} else {
setIconNum1(highlightedStep - 2);
setIconNum2(highlightedStep + 1);
}
}
},[highlightedStep]);
React.useEffect(() => {
if (newActiveStep === 9 && isQuickBooking) {
setIconNum1(8);
setIconNum2(11);
}
if (willTypeID === 2 && guardianShipWill) {
// Guardianship Will
setIconNum1(navigationIndex === 2 ? 0 : 6);
setIconNum2(navigationIndex === 2 ? 3 : 9);
}
}, [newActiveStep, isQuickBooking, guardianShipWill]);
// Common function for enabling book appointment if all steps are completed
const checkAllStepsCompleted = (completedSteps:number[],completedStepsList:number[]) => {
const isAllStepsCompleted = completedSteps.every((step:number) => completedStepsList.includes(step));
setIsShowBookAppointment(isAllStepsCompleted);
};
React.useEffect(() => {
if (willTypeID === GUARDIANSHIP_WILL) {
const completedSteps = [1,2,4,5,6];
checkAllStepsCompleted(completedSteps,newCompletedSteps);
} else if (willTypeID === FULL_WILL) {
const completedSteps = [1,2,3,4,7,8];
checkAllStepsCompleted(completedSteps,newCompletedSteps);
} else {
const completedSteps = [1,2,3,4,5,6,7,8];
checkAllStepsCompleted(completedSteps,newCompletedSteps);
}
},[newCompletedSteps]);
React.useEffect(() => {
getCompletedSteps();
},[isShowBookAppointment]);
const handleBack = () => {
const activeStepInBack = activeStep - 1;
setActiveStep((prevActiveStep) => prevActiveStep - 1);
setNum1((prevState) => prevState - 1);
setNum2((prevState) => prevState - 1);
if (
activeStepInBack === 2
|| activeStepInBack === 5
|| activeStepInBack === 8
|| activeStepInBack === 11
) {
setIconNum1((prevState) => prevState - 3);
setIconNum2((prevState: any) => prevState - 3);
}
};
const clearRealEstateShareOption = () => {
dispatch(clearSelectedDistribution());
};
const getRealEstateOption = () => {
if (willTypeID === 5 || willTypeID === 4) {
// FAW && BOW
return (
<WillBySpecificRealEstate
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={clearRealEstateShareOption}
// parameterGuid={parameterGuid}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
/>
);
}
if (willTypeID === 6) {
// Templated Full Will
return (
<WillBySharesOfEstate
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={clearRealEstateShareOption}
parameterGuid={parameterGuid}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
/>
);
}
if (!byShareCheck && !bySpecificCheck) {
return (
<WillRealEstateDistribution
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={handleBack}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
/>
);
}
if (byShareCheck) {
return (
<WillBySharesOfEstate
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={clearRealEstateShareOption}
parameterGuid={parameterGuid}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
/>
);
}
if (bySpecificCheck) {
return (
<WillBySpecificRealEstate
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={clearRealEstateShareOption}
// parameterGuid={parameterGuid}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
/>
);
}
};
const getRealEstateOptionforfinancial = () => {
if (willTypeID === 4) {
// BOW
return (
<WillBySpecificRealEstateBusinessOwners
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={handleBack}
parameterGuid={parameterGuid}
/>
);
}
if (willTypeID === 5) {
// FAW
return (
<WillBySpecificRealEstateFinancialAssets
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={handleBack}
parameterGuid={parameterGuid}
/>
);
}
};
const getLocationType = () => {
if (!isVirtual && !isInPerson) {
return <WillLocationTypeSelection />;
}
if (isVirtual) {
return (
<WillBookAppointment
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={handleBack}
willTypeID={willTypeID}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
/>
);
}
};
React.useEffect(() => {
getWillStep(currentStep);
getRealEstateOption();
getRealEstateOptionforfinancial();
}, [byShareCheck, bySpecificCheck]);
React.useEffect(() => {
getWillStep(currentStep);
getLocationType();
}, [isVirtual, isInPerson]);
const getWillStep = (step: number) => {
let stepID;
if (isDraft) {
// Change responseSteps to incompleteSteps ahen using api
stepID = responseSteps[step];
} else {
stepID = stepNumber[step];
}
// console.log('stepIndex', stepID);
switch (newActiveStep !== 0 ? newActiveStep : stepID) {
// switch (newActiveStep !== 0 ? newActiveStep : step + 1) {
case 1:
return <WillTypeSelection />;
// return <WillLocationTypeSelection />;
case 2:
return (
<WillPersonalInformation
willTypeID={willTypeID}
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={handleBack}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
/>
);
case 3:
return (
<WillRealEstateDetail
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={handleBack}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
/>
// <WillGuardianInformation
// handleNext={handleNext}
// currentBtnStep={currentBtnStep}
// handleBack={handleBack}
// />
);
case 4:
return (
<WillExecutorDetail
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={handleBack}
willTypeID={willTypeID}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
// setNewCompletedSteps={setNewCompletedSteps}
/>
);
case 5:
return (
<WillBeneficiaryDetail
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={handleBack}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
willTypeID={willTypeID}
/>
);
case 6:
return getRealEstateOption();
case 7:
return (
<WillWitnessDetails
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={handleBack}
willTypeID={willTypeID}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
/>
);
case 8:
return (
<DocumentManager
willTypeID={willTypeID}
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={handleBack}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
/>
);
case 9:
return getLocationType();
case 10:
return (
<WillPayment
willTypeID={willTypeID}
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={handleBack}
/>
);
case 11:
return (
<WillGuardianInformation
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={handleBack}
// willTypeID={parameterGuid}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
/>
);
case 12:
return (
<WillsMinorChildren
// willTypeGuid={parameterGuid}
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={handleBack}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
/>
);
case 13:
return (
<WillDraftDetail
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={handleBack}
willTypeID={willTypeID}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
/>
);
case 15:
return (
<WillInterimGuardianDetail
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={handleBack}
// willTypeID={parameterGuid}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
/>
);
case 16:
// Permanent Guardian Details
return (
<WillGuardianDetail
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={handleBack}
// willTypeID={parameterGuid}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
/>
);
case 17:
return (
<CompanyShareInfo
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={handleBack}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
/>
);
case 18:
return getRealEstateOption();
case 19:
return (
<AccountsInformation
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={handleBack}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
/>
);
case 20:
return (
<MovableAndImmovableProperty
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={handleBack}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
/>
);
case 21:
return (
<WillPreview
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={handleBack}
// parameterGuid={parameterGuid}
handleShowIncompleteStepsModal={handleShowIncompleteStepsModal}
handleCloseModal={handleCloseModal}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
/>
);
default:
break;
}
};
// const recievedData = (single:any,mirror:any) => {
// console.log('data',single,mirror);
// };
return (
<div className="main">
<div className="case-details d-flex flex-column">
<div className="row title-row ">
<div className="col-lg-3 col-md-3 col-sm-12 col-xs-8 back-col-new">
<RegistrationStepper
activeStep={activeStep + 1}
parameterGuid={parameterGuid}
results={results}
stepNumber={stepNumber}
finishedSteps={finishedSteps}
isDraft={isDraft}
stepNumArray={stepNumArray}
completedStepNumArray={newCompletedSteps.filter(
(value, index, self) => self.indexOf(value) === index,
)} // Remove Duplicates
currentSelectedStep={currentSelectedStep}
setCurrentSelectedStep={setCurrentSelectedStep}
isShowBookAppointment={isShowBookAppointment}
willTypeID={willTypeID}
setNewCompletedSteps={setNewCompletedSteps}
/>
</div>
<div className="col-lg-9 col-md-9 col-sm-12 col-xs-12 title-col">
<Stack sx={{ width: '100%' }} spacing={4}>
<Stepper
activeStep={activeStep}
alternativeLabel
connector={<ColorlibConnector />}
>
<div className="line" />
<div className="scaffolding">
{results?.slice(iconNum1, iconNum2)?.map((label, index) => (
<ScaffoldingIcons
stepNumber={label?.stepNumber}
stepName={label?.stepName.toUpperCase()}
completed={newCompletedSteps.includes(
Number(label.stepNumber),
)}
/>
))}
</div>
</Stepper>
{/* {getWillStep(newActiveStep !== 0 ? newActiveStep : currentStep)} */}
<div className="stepsDiv">
{(isUpgradeWill || isModifyWill)
&& (newActiveStep === 1 || newActiveStep === 0)
? (
<WillPersonalInformation
willTypeID={willTypeID}
handleNext={handleNext}
currentBtnStep={currentBtnStep}
handleBack={handleBack}
setNewCompletedSteps={setNewCompletedSteps}
newCompletedSteps={newCompletedSteps}
/>
) : (
getWillStep(currentStep)
)}
</div>
{/* Revert back */}
{newActiveStep === 1 && !isUpgradeWill && (
<Box sx={{ display: 'flex', flexDirection: 'row', pt: 2 }}>
<button
type="button"
// Removed activeStep(state variable) from the parameter
onClick={() => handleNext(1, 'willTypeSelection', true)}
className={
!(mirrorWillCheck || singleWillCheck)
? 'next-btn-disabled'
: 'next-btn'
}
disabled={!(mirrorWillCheck || singleWillCheck)}
>
Next Step
</button>
</Box>
)}
</Stack>
</div>
</div>
</div>
{/* Modal for showing incomplete steps */}
<IncompleteStepsModal
showModal={showModal || showIncompleteStepsModal}
handleCloseModal={handleCloseModal}
steps={incompleteSteps}
handleContinue={handleContinue}
/>
{/* Modal if quickBooking is true */}
<QuickBookingWarningModal
showModal={showSkipToAppointmentModal}
handleCloseModal={() => setShowSkipToAppointmentModal(false)}
/>
<React.Suspense fallback={<div>Loading...</div>}>
<DeleteConfirmationModal
show={show}
handleClose={() => {
setShow(false);
dispatch(setHighlightedSteps(5));
dispatch(setNavigationIndex(5));
dispatch(getNewActiveStep(5));
}}
handleContinue={() => {
setShow(false);
dispatch(setHighlightedSteps(5));
dispatch(setNavigationIndex(5));
dispatch(getNewActiveStep(5));
}}
type="Test"
fromShares
/>
</React.Suspense>
</div>
);
};
export default CustomizedSteppers;
/**
* If navigation is enabled then we need to call a different function instead of handleNext(say:handleNavigateNext)
* else we use the normal handleNext function and complete the navigation
*
*/
Comments