ReimbursmentForm>index.tsx

 import React from "react";

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

import { useFetchMasterData } from "../../../api/hooks/opd-reimbursement-replica-hooks/fetch-master-data";

import { useFetchPolicyDetails } from "../../../api/hooks/opd-reimbursement-replica-hooks/fetch-policy-details";

import { useFetchBankDetails } from "../../../api/hooks/opd-reimbursement-replica-hooks/fetch-bank-details";

import { FormContainer,FormTopHeaderView } from "../styles";

import { useFieldArray, useForm, useWatch } from "react-hook-form";

import { Text } from "@ebh/capsule";

import { ISuccessBankDetailsResponse,IMembers } from "../api-req-res";

interface ReimbursmentFormProps {

formInputsDisabled?: boolean;

defaultValues?: FormData;

}

const isPhone = !useScreen("md");

const ReimbursmentForm: React.FC<ReimbursmentFormProps> = () => {

// const { data: masterData, isLoading, error } = useFetchMasterData();

const {

data: { data: { data: { cities = [], categories = [] } = {} } = {} } = {},

} = useFetchMasterData();

const {

control,

handleSubmit,

reset,

getValues,

setValue,

watch,

setError,

register,

clearErrors,

trigger,

formState: { errors },

} = useForm<FormData>({

resolver: yupResolver(

getSchema({

isCityRequired: !!cities?.length && showNearestCity,

isCategoriesRequired: !!categories?.length,

isChequeRequired: !bankData?.BankAccountNumber || isBankDetailsChanged,

grpid: userContext?.grpid,

showBankDetails: showBankDetails,

showClaimForm: showClaimForm

})

),

mode: "onChange",

reValidateMode: "onChange",

defaultValues: populateFormDefaultValues(),

});

// const {

// data: policyDetails,

// isLoading: ispolicyDetailsLoading,

// error: isPolicyDetailserror,

// } = useFetchPolicyDetails();

// console.log(

// "Policy Data:",

// policyDetails,

// ispolicyDetailsLoading,

// isPolicyDetailserror

// );

const { data: { data: { data: policyDetails = {} as any } = {} } = {} } =

useFetchPolicyDetails();

// const {

// data: bankDetails,

// isLoading: isbankDetailsLoading,

// error: isbankDetailserror,

// } = useFetchBankDetails();

// console.log(

// "bank Data:",

// bankDetails,

// isbankDetailsLoading,

// isbankDetailserror

// );

const {

data: {

data: {

data: bankData = {} as ISuccessBankDetailsResponse["data"]["data"],

} = {},

} = {},

} = useFetchBankDetails();

const claimDetailsValues = useWatch({

control,

name: ["members", "policyNumber", "ailment", "consultationDate"],

});

return (

<>

<FormContainer>

{!isPhone && (

<FormTopHeaderView>

<div>

<Text variant="header-2">Claim Reimbursement</Text>

</div>

{/* {!isInReview && isClaimDetailsFilled && (

<ResetButtonWithModal

onResetClick={handleFormReset}

onSaveDraftClick={handleSaveDraftClick}

/>

)}

</FormTopHeaderView>

)}

{!!createClaimErrMsg && (

<ErrorMessageBlock messages={createClaimErrMsg} />

)}

{!!createEligibilityErrMsg && (

<ErrorMessageBlock messages={createEligibilityErrMsg} />

)} */}

<div>

<ClaimDetails

control={control}

setError={setError}

clearErrors={clearErrors}

cities={cities}

categories={categories}

policyDetails={policyDetails as any}

formInputsDisabled={isInReview}

id="claim-details"

expandedFormSection={expandedFormSection}

handleFormSectionToggle={handleFormSectionToggle}

getFormValues={getValues}

setFormValues={setValue}

watch={watch}

setClaimDates={setClaimDates}

getClaimDates={getClaimDates}

showNearestCity={showNearestCity}

/>

{/* <BillBreakUp

fields={fields}

append={append}

update={update}

remove={remove}

control={control}

expandedFormSection={expandedFormSection}

onExpandOrCollapse={handleFormSectionToggle}

clearErrors={clearErrors}

formErrors={errors}

policyDetails={policyDetails as any}

formInputsDisabled={isInReview}

getClaimDates={getClaimDates}

showUnsavedWarning={showUnsavedWarning}

/> */}

{/* {showClaimForm && (

<ClaimForm

control={control}

register={register}

errors={errors}

trigger={trigger}

setValue={setValue}

getValue={getValues}

handleFormSectionToggle={handleFormSectionToggle}

expandedFormSection={expandedFormSection}

formInputsDisabled={isInReview}

/>

)} */}

{/* {showBankDetails && (

<BankDetails

control={control}

formInputsDisabled={isInReview}

policyDetails={policyDetails}

id="bank-details"

expandedFormSection={expandedFormSection}

handleFormSectionToggle={handleFormSectionToggle}

getFormValues={getValues}

setFormValues={setValue}

setError={setError}

register={register}

trigger={trigger}

isBankDetailsChanged={isBankDetailsChanged}

setIsBankDetailsChanged={setIsBankDetailsChanged}

/>

)}

</div> */}

</FormContainer>

{/* <div

css={[

flex("center"),

background("white"),

gap(7),

padding(isPhone ? 4 : 15, "y"),

{ position: "fixed", bottom: 0, width: "100%" },

screen("sm", background("transparent"), { position: "static" }),

]}

> */}

{/* <Button

variant="secondary"

loading={isDraftPending}

onClick={() => {

pushGaEvent({

eventCategory: "ep_reimbursement_submission_form_page",

eventAction: "save_as_draft_click",

eventLabel7: "new",

});

handleSaveDraftClick();

}}

>

Save as Draft

</Button>

<Button

variant="primary"

loading={isEligibilityPending}

onClick={handleReviewAndSubmit}

>

Submit

</Button> */}

{/* {showmodal && (

<div

css={[flex("center", "center"), background("transparent"), { position: "fixed", top: 0, left: 0, width: "100%", height: "100%", zIndex: 1000 }]}

>

<Hcudeclaration

saveclaimdetails={handleOnClaimSubmit}

closedeclaration={handleShowHcuDeclaration}

chktnc={chktncRef}

showmodal={showmodal}

grpid={userContext.grpid}

/>

</div>

)}

<ReviewPopup

onClose={() => setShowReviewPopup(false)}

open={showReviewPopup}

onSubmit={handleFinalSubmitBttn}

submissionLoading={isCreateClaimPending}

/> */}

</div>

</>

);

};

export default ReimbursmentForm;