Untitled

import { Navigate, withPage, Lift } from '@d-lift/core';
import {
Section,
Page,
Header,
Row,
Column,
Button,
Para,
Card,
List,
ListItem,
Selectbox,
} from '@d-lift/uxcomponents';
import React, { useEffect, useState } from 'react';
import PageData from '@/UXModule/bcDesktopWayfinder/aplDesktopWayfinderData.json';
import CPUtil from '@/Util/CPUtil';
import ButtonNavigation from '@/UXModule/ButtonNavigation/ButtonNavigation';
import './APLCN.scss';
const pageConfig = {
PageName: 'APLCN',
Description: 'Case And Notice Page',
ContextRoot: 'Appeals',
ContentManager: true,
PageType: 'workflow',
WorkFlowNavigation: true,
TemplateOptions: { cardWorkflow: true },
pageId: 'APLCN',
ShowTitle: false,
};
const APLCN = () => {
useEffect(() => {
CPUtil.setValueInAppcontext('currentStep', 3);
CPUtil.setValueInAppcontext('wayFinderSteps', PageData);
}, []);
const onNext = () => {
CPUtil.setValueInAppcontext('currentStep', 4);
//DriverUtil.navigateToNext(AppContext.pagedetails.getPageConfig().pageId);
};
const onBack = () => {
Navigate.to('/Appeals/AppealsProgramReason/APLPR');
};
return (
<Page>
<Section className="container">
<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={closeViewDetails}
/>
</Column>
<Column>
<Button
className="col-auto mx-2 mb-2"
labelKey="applNumber_btn_text"
//click={closeViewDetails}
/>
</Column>
</Row>
<Section
id="caseNumber_card"
className="dynamic-fields left-button mb-4"
// showIf=""
>
<Selectbox
id="case_question1"
labelKey="case_question1"
defaultOption="true"
defaultOptionValue="SEL"
defaultOptionLabelKey="common_selectone"
//model="optiongroup"
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"
//model="optiongroup"
required="{true}"
validationRules="required"
errormessages='{{"required": "common_mandatory_error"}}'
/>
</Section>
<Section
id="applNumber_card"
className="dynamic-fields right-button mb-4"
// showIf=""
>
<Selectbox
id="application_question"
labelKey="application_question"
defaultOption="true"
defaultOptionValue="SEL"
defaultOptionLabelKey="common_selectone"
//model="optiongroup"
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="optiongroup"
required="{true}"
validationRules="required"
errormessages='{{"required": "common_mandatory_error"}}'
/>
<Para className="ux-helper-text" labelKey="case_question_helper_text" />
</Section>
<ButtonNavigation onNext={onNext} onBack={onBack} />
</Page>
);
};
export default withPage(pageConfig, APLCN);

update the above code to display the caseNumber_card when caseNumber button is clicked and display the applNumber_card when applNumber button is clicked using showif. when one is open the other one should be hidden