learning first page

 import { ArrowForwardIcon } from "@ebh/capsule/icons"

import { background, flex } from "@ebh/capsule/theme"

import { padding,gap,border,margin,screen } from "@ebh/capsule/theme"

import { THEME_COLORS } from "../../../theme/color"

import { Text } from "@ebh/capsule"

import { useNavigate } from 'react-router-dom';

import { useScreen } from "@ebh/capsule/hooks";

import { FormProvider } from "react-hook-form";

import ResetButtonWithModal from "../../../common/reset-button-with-modal"

import { Button } from "@ebh/capsule"

import { css } from "@emotion/react"

import { ConditionDetails } from "../QuickConsultationConditionForm"

export default function QuickConsultationForm() {

return (

<>

{/* Navigarion bar start */}

<div css={[

flex("row", "justify-start", "items-center"),

gap(2), padding(5, "x"), padding(5, "y"),

border(2, 'bottom'),

screen("md", border(0, 'bottom')),

{

position: "sticky",

top: 0,

backgroundColor: THEME_COLORS['white'],

zIndex: 10,

},

]}>

<ArrowForwardIcon

css={{ transform: "rotate(180deg)", cursor: "pointer" }}

onClick={handleNavigateBack}

/>

<div css={[flex("row", "justify-between"),

// background('caution-200'),

{width: 288},gap(4)]}

>

<div css={[padding(1,'y')]}>

<Text variant="header-3" color="secondary-600">Quick Consultation</Text>

</div>

{

isPhone && (

<div css={[flex("row"),

// background('accent-400')

]

}>

<ArrowForwardIcon

css={{ transform: "rotate(180deg)", cursor: "pointer" }}

onClick={handleNavigateBack}

/>

</div>

)

}

</div>

</div>

{/* Navigarion bar end */}

{/* consultation form */}

{/*<FormProvider

// {...methods}

>*}

<form css={[margin(20, "bottom")]}

// onSubmit={handleSubmit(submitIntimation, (formErrors) => {

// console.error("Validation failed", formErrors);

// })}

>

{/* Accordions, forms */}

<div css={[margin(1, 'y'), screen('md', margin(5, 'x'), margin(5, 'y'))]}>

{/* <ClassNames>

{({ css }) => (

<Accordion

title={

<div css={[flex('row', 'items-center'), gap(5)]}>

<Text>Claim Details</Text>

{isPhone && isClaimDetailsComplete() && (

<div>

<img src={checkCircleIcon} alt="success" />

</div>

)}

</div>

}

open={isClaimOpen}

onChange={() => setIsClaimOpen(!isClaimOpen)}

classes={{

summary: css([

background("accent-100"),

radius(3, 'top'),

padding(5, 'x'),

{ color: THEME_COLORS['gray-500'] }

]),

description: css({

borderWidth: "1px",

borderBottomLeftRadius: "20px",

borderBottomRightRadius: "20px",

borderColor: THEME_COLORS['gray-100'],

}),

}}

css={[margin(5, 'bottom')]}

>

<ClaimDetailsForm

control={control}

errors={errors}

isFormDisabled={isFormDisabled}

familyRelationsList={familyRelationsList}

mobile={cookies.get('mobile')}

/>

</Accordion>

)}

</ClassNames>

<ClassNames>

{({ css }) => (

<Accordion

title="Hospital Details"

open={isHospitalOpen}

onChange={() => setIsHospitalOpen(!isHospitalOpen)}

classes={{

summary: css([background("accent-100"), radius(3, 'top'), padding(5, 'x'), { color: THEME_COLORS['gray-500'] }]),

description: css({

borderWidth: "1px",

borderBottomLeftRadius: "20px",

borderBottomRightRadius: "20px",

borderColor: THEME_COLORS['gray-100']

}),

}}

>

<HospitalDetail

control={methods.control}

errors={errors}

setSelectedHospital={setSelectedHospital}

selectedHospital={selectedHospital}

/>

</Accordion>

)}

</ClassNames> */}

{isPhone?'':<ConditionDetails/>}

</div>

{/* Buttons */}

<div

css={[

flex("row", "justify-between"),

gap(2),

padding(3),

background("white"),

isPhone

? css([{

position: "fixed",

bottom: 0,

left: 0,

right: 0,

zIndex: 10,

}, border(2, "gray-100")])

: css([margin(5, 'x')]),

]}

>

{

!isPhone

? <ResetButtonWithModal

// onResetClick={handleReset}

// disabled={!isAnyFieldFilled}

/>

:

<Button type="button" variant="secondary"

css={[isPhone ? { display:'none'} : {}]}

>

Save as Draft

</Button>

}

<Button type="submit" css={[isPhone ? { flex: 1 } : {}]}

// disabled={!isAnyFieldFilled}

>

{isPhone?'Confirm':'Submit'}

</Button>

</div>

{/* </form> */}

{/* </FormProvider> */}

{/* SPinner */}

{/* {isApiFetching && ( */}

<div css={[flex("center"), padding(5), { position: "fixed", top: "50%", left: "50%", transform: "translate(-50%, -50%)", zIndex: 1000 }]}>

loading....

{/* <LoadingScreen /> */}

</div>

{/* )} */}

</>

)

}