Untitled

update the below  code so that , if case card is selected then clear the data in application card on click on onnext and vice versa


import React, { useEffect, useState } from 'react';
import {
    Section,
    Page,
    Header,
    Row,
    Column,
    Button,
    Para,
    Selectbox,
    UX,
} from '@d-lift/uxcomponents';
import { withPage, Navigate, useAppState, AppContext, Lift } from '@d-lift/core';
import CPUtil from '@/Util/CPUtil';
import ButtonNavigation from '@/UXModule/ButtonNavigation/ButtonNavigation';
import './APLCN.scss';
import appealsService from '@/Services/Dashboard/AppealsService';
import appealsApplicationService from '@/Services/Dashboard/AppealsApplicationService';
import ConstantKeys from '@/Constants/ConstantKeys';
import dataAdapter from '@/Adapters/DataAdapter';
import PSUtil from '@/Util/PSUtil';

const pageConfig = {
    PageName: 'APLCN',
    Description: 'Case And Notice Page',
    ContextRoot: 'Appeals',
    ContentManager: true,
    PageType: 'workflow',
    WorkFlowNavigation: true,
    TemplateOptions: { cardWorkflow: true },
    pageId: 'APLCN',
    ShowTitle: false,
    SaveAndExitActionUrl: '/APLCN/APLCNLoad',
    PersistActionUrl: '/APLCN/APLCNNext',
};

const APLCN = () => {
    const defaultData = {
        caseNumber: '',
        appealingIndvId: '',
        applicationNumber: '',
        noticeType: '',
        appealId: '',
    };
    const [APLCN] = useAppState('APLCN', defaultData);
    const [selectionFlag, setSelectionFlag] = useState(null);
    const [visibleCard, setVisibleCard] = useState(null);
    const [filteredCaseNumberList, setFilteredCaseNumberList] = useState([]);
    const [personList, setPersonList] = useState([]);
    const [caseDetailsResponse, setCaseDetailsResponse] = useState('caseDetailsResponse', {});
    const [trackingNumberList, setTrackingNumberList] = useState('trackingNumberList', {});

    useEffect(() => {
        // Only set current step, don't reset wayfinder steps
        CPUtil.setValueInAppcontext('currentStep', 3);
        APLCNLoadData();
    }, []);

    const APLCNLoadData = () => {
        let serviceContextUrl = dataAdapter.getServiceUrlContext('APLCN');
        dataAdapter
            .invokeAppealLoad(
                serviceContextUrl.baseUrl + '/APLCN/APLCNLoad',
                'APLCN',
                'APLCNLoad',
                serviceContextUrl.serviceContext,
            )
            .then((response) => {
                if (response) {
                    let loadAppealId =
                        response?.data?.pageCollection?.Appeals_Collection?.[0].appealId;
                    AppContext.model.setValue('APLCN.appealId', loadAppealId);
                } else {
                    console.log('No data received from APLCNLoadData');
                }
            })
            .catch((error) => {
                console.error('Error in APLCNLoadData:', error);
            });
    };

    useEffect(() => {
        fetchDataAndUpdateState();
        fetchApplicationNumber();
    }, []);

    const fetchDataAndUpdateState = async () => {
        try {
            let guID = 'b6db655b-94ac-4f89-b8e1-c2b3d65512bf'; //hardcoded guID for now
            const caseDetailsResponse = await getCaseDetails(guID);
            console.log('Case Details Response >>>>>>>>>:', caseDetailsResponse);

            setCaseDetailsResponse(caseDetailsResponse);

            if (!caseDetailsResponse?.caseData) {
                console.log('Invalid case data received');
                return;
            }

            const programCd = 'snap'; //Hardcoded fore now, will remove once able to pass data from prev screen

            let filteredCases = [];
            if (programCd === 'snap') {
                filteredCases = caseDetailsResponse.caseData.filter((c) =>
                    c.programList.some((p) => p.programCode === 'FS'),
                );
            } else if (programCd === 'ff') {
                filteredCases = caseDetailsResponse.caseData.filter((c) =>
                    c.programList.some((p) => p.programCode === 'TA'),
                );
            }

            setFilteredCaseNumberList(
                filteredCases.map((c) => ({
                    value: c.caseNumber,
                    label: c.caseNumber,
                })),
            );
        } catch (error) {
            console.error('Error processing case details:', error);
        }
    };

    const getCaseDetails = async (guID) => {
        try {
            const response = await appealsService.getCaseDetails({ guID });
            CPUtil.setValueInAppcontext('caseDetails', response);
            return response;
        } catch (error) {
            console.error('Error fetching case details:', error);
            throw error;
        }
    };

    const getPersonList = (e) => {
        const value = e?.target?.value;
        if (value) {
            const selectedCase = caseDetailsResponse.caseData.find(
                (c) => c.caseNumber === APLCN.caseNumber,
            );
            if (selectedCase?.casePersonDetails) {
                setPersonList(
                    selectedCase.casePersonDetails.map(
                        (p) => {
                            // program.programPersonDetails.map((p) => {
                            console.log('Person:', p, p.personId);

                            return {
                                value: p.personId,
                                label: `${p.firstName} ${p.lastName} ${
                                    p.middleInitial || ''
                                }`.trim(),
                            };
                        },
                        // }),
                    ),
                );
            }
        }
    };

    const fetchApplicationNumber = async () => {
        try {
            CPUtil.showSpinner();

            let requestJson = {
                serviceContext: 'householddemographics',
                userDetails: {
                    loginUserId: 'b6db655b-94ac-4f89-b8e1-c2b3d65512bf',
                    appNumber: PSUtil.getAppNum(),
                    browserName: Lift.Device.browserName,
                    deviceType: Lift.Device.deviceType,
                },
                currentActionDetails: {
                    pageId: 'ABGAD',
                    pageAction: 'ABGADNext',
                    indvSeqDetails: {},
                },
                pageCollection: {
                    ApplicationRequest_Collection: {
                        gUID: 'b6db655b-94ac-4f89-b8e1-c2b3d65512bf',
                        caseList: [],
                    },
                },
            };

            let applicationDetailsResponse = await getApplicationDetails(requestJson);
            let trackingNumberList =
                applicationDetailsResponse?.pageCollection?.OngoingApplications?.map(
                    (app) => app.tracking_num,
                ).filter((trackingNum) => trackingNum !== null);

            setTrackingNumberList(trackingNumberList);
        } catch (exceptionObject) {
            console.error('Error fetching application details:', exceptionObject);
        } finally {
            CPUtil.hideSpinner();
        }
    };

    const getApplicationDetails = async (requestJson) => {
        try {
            return await appealsApplicationService.getApplicationDetails({ requestJson });
        } catch (error) {
            console.error('Error fetching application details:', error);
            throw error;
        }
    };

    const onNext = () => {
        // Check if "NONE" option is selected
        if (selectionFlag === null) {
            AppContext.model.setValue(
                'selectionErrorMsg',
                'Select Case number or Application number to proceed.',
            );
            setSelectionFlag(false);
            return;
        } else {
            // Clear error if validation passes
            AppContext.model.setValue('selectionErrorMsg', '');
            setSelectionFlag(true);
        }

        let data = AppContext.model.getValue(AppContext.pagedetails.getPageConfig().pageId);
        if (!AppContext.model.getValue('errorMsg')) {
            dataAdapter
                .invokeAppealPersist(
                    { ...data, appealId: CPUtil.getValueFromAppContext('appealId') }, // Pass appealId if it exists
                    AppContext.pagedetails.getPageConfig().persistActionUrl,
                    'Appeals_Collection',
                    APLCN,
                )
                .then(() => {
                    // Get current visited steps
                    const visitedSteps = CPUtil.getValueFromAppContext('visitedSteps') || [];
                    const nextStep = 3;

                    // Add next step to visited steps if not already there
                    if (!visitedSteps.includes(nextStep)) {
                        visitedSteps.push(nextStep);
                    }

                    // Update visited steps in context
                    CPUtil.setValueInAppcontext('visitedSteps', visitedSteps);
                    CPUtil.setValueInAppcontext('currentStep', nextStep);

                    // Update AppContext model
                    AppContext.model.setValue('visitedSteps', visitedSteps);
                    AppContext.model.setValue('currentStep', nextStep);

                    Navigate.to('/Appeals/AppealsAppeallantInfo/APLIN');
                });
        }
    };

    const onBack = () => {
        CPUtil.setValueInAppcontext('currentStep', 2);
        Navigate.to('/Appeals/AppealsContinuationOfBenefits/APLCB');
    };

    return (
        <Page>
            <Section className="container">
                <UX
                    id="selectionError"
                    errorType="error"
                    type="pageError"
                    showIf={selectionFlag === false}>
                    {AppContext.model.getValue('selectionErrorMsg')}
                </UX>
                <Header labelKey="case_header" />
                <Header header-size="2" className="mt-4" labelKey="case_subheader" />
                <Row>
                    <Column>
                        <Button
                            className="col-auto mx-2 mb-2"
                            labelKey="caseNumber_btn_text"
                            click={() => {
                                setVisibleCard('case');
                                setSelectionFlag(true);
                            }}
                        />
                    </Column>
                    <Column>
                        <Button
                            className="col-auto mx-2 mb-2"
                            labelKey="applNumber_btn_text"
                            click={() => {
                                setVisibleCard('appl');
                                setSelectionFlag(true);
                            }}
                        />
                    </Column>
                </Row>

                {visibleCard === 'case' && (
                    <Section id="caseNumber_card" className="dynamic-fields left-button mb-4">
                        <Selectbox
                            id="case_question1"
                            labelKey="case_question1"
                            defaultOption="true"
                            defaultOptionValue="SEL"
                            defaultOptionLabelKey="common_selectone"
                            list={filteredCaseNumberList}
                            model="APLCN.caseNumber"
                            optionLabel="label"
                            optionValue="value"
                            change={(e) => {
                                getPersonList(e);
                            }}
                            required="{true}"
                            validationRules="required"
                            errormessages='{{"required": "common_mandatory_error"}}'
                        />
                        <Para className="ux-helper-text" labelKey="case_question_helper_text" />
                        <Selectbox
                            id="case_question2"
                            labelKey="case_question2"
                            defaultOption="true"
                            defaultOptionValue="SEL"
                            defaultOptionLabelKey="selectIndividual_dropdown_text"
                            list={personList}
                            model="APLCN.appealingIndvId"
                            optionLabel="label"
                            optionValue="value"
                            required="{true}"
                            validationRules="required"
                            errormessages='{{"required": "common_mandatory_error"}}'
                        />
                    </Section>
                )}

                {visibleCard === 'appl' && (
                    <Section id="applNumber_card" className="dynamic-fields right-button mb-4">
                        <Selectbox
                            id="application_question"
                            labelKey="application_question"
                            defaultOption="true"
                            defaultOptionValue="SEL"
                            defaultOptionLabelKey="common_selectone"
                            model="APLCN.applicationNumber"
                            list={trackingNumberList.map((num) => ({ value: num, label: num }))}
                            optionLabel="label"
                            optionValue="value"
                            required="{true}"
                            validationRules="required"
                            errormessages='{{"required": "common_mandatory_error"}}'
                        />
                        <Para
                            className="ux-helper-text"
                            labelKey="application_question_helper_text"
                        />
                    </Section>
                )}

                <Header header-size="2" className="mt-4" labelKey="selectNotice_subheader" />
                <Selectbox
                    id="appeal_reason"
                    labelKey="selectNotice_question"
                    defaultOption="true"
                    defaultOptionValue="SEL"
                    defaultOptionLabelKey="selectDoc_dropdown_text"
                    model="APLCN.noticeType"
                    optionLabel={ConstantKeys.REF_TABLE_COLS.DESCRIPTION}
                    optionValue={ConstantKeys.REF_TABLE_COLS.CODE}
                />
                <Para className="ux-helper-text" labelKey="case_question_helper_text" />
            </Section>
            <ButtonNavigation onNext={onNext} onBack={onBack} />
        </Page>
    );
};

export default withPage(pageConfig, APLCN);