submitclaimopd

 // import { useEffect, useMemo, useState } from "react";

// import {

// FormDataOPD,

// getBillBreakupSchema,

// // getBillBreakupSchemaForSchemaValidation,

// // getBankDetailsSchema,

// getClaimDetailsSchema,

// // getUploadDocumentsSchema,

// useClaimFormOpd,

// } from "./schema";

// import {

// border,

// background,

// margin,

// gap,

// flex,

// padding,

// Color,

// radius,

// screen,

// } from "@ebh/capsule/theme";

// import ClaimDetails from "./partials/claim-details";

// import BillBreakUp from "./partials/bill-breakup"

// import { ArrayPath, FieldErrors, FormProvider } from "react-hook-form";

// // import DocumentUpload from "./partials/document-upload";

// import NavbarHeader from "../../../components/navbar-header";

// import { FormContainer } from "../../../theme/styles";

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

// import { css } from "@emotion/react";

// import ExpandableFormSection from "../../../components/form-expansion";

// import ResetButtonWithModal from "../../../components/reset-button-with-modal";

// import { Button, useToast, Text, Divider } from "@ebh/capsule";

// import { SectionValidator } from "../../claims/ipd-reimbursement/section-validation";

// // import { getBillBreakupSchemaForSchemaValidation } from "../../claims/ipd-reimbursement/schema";

// import {

// useClaimSubmit,

// useFamilyMembers,

// useMasterData,

// usePolicyConfig,

// useSaveDraft,

// useSelectedFamilyMemberDetails,

// } from "../../../api/hooks/ipd-reimbursement-hooks";

// import { decryptData } from "../../../utils/decrypt-data";

// import {

// ISelectedUserDetails,

// SectionItem,

// } from "../../../interfaces/context-interface";

// import { startCaseCustom } from "../../../utils/start-case";

// import { useNavigate, useSearchParams } from "react-router";

// // import { setDraftDataInForm } from "../../claims/ipd-reimbursement/draft";

// import { useDraftView } from "../../../api/hooks/draft-ipd-opd-hooks";

// import { POLICY_DATA } from "../../../constants";

// import { scrollToFirstError } from "../../../utils/get-error-field";

// // import { useCoachmarkSubmitMutation } from "../../../api/hooks/coachmark/use-save-coachmark";

// // import {

// // claimSubmissionPayloadOpd,

// // draftSubmissionPayloadOpd,

// // } from "./payload";

// // import { claimSubmissionPayloadOpd,draftSubmissionPayloadOpd } from "../../claims/opd-reimbursement/payload";

// import {

// OPDClaimSubmittedEvent,

// // OPDClaimSubStartedEvent,

// } from "../../clevertap-events/opd-events";

// import cookiesManager from "../../../utils/cookies-manager";

// // import { BR_TAG_REGEX } from "../../../components/constants/regex";

// // import { useClaimSubmissionPopup } from "../ipd-reimbursement/partials/hooks/use-claim-sub-popup";

// import { useClaimSubmissionPopup } from "../../claims/ipd-reimbursement/partials/hooks/use-claim-sub-popup";

// function NonMedicalClaimSubmission() {

// const toast = useToast({ timeout: 5000 });

// const [expandedSection, setExpandedSection] =

// useState<string>("claim-details");

// const [hasSubmittedWithErrors, setHasSubmittedWithErrors] = useState(false);

// const [searchParams] = useSearchParams();

// const navigate = useNavigate();

// const paramsDraftSeqId = searchParams.get("draftSeqId");

// const isPhone = !useScreen("md");

// const policyGroupSeqId =

// cookiesManager.get(POLICY_DATA.POLICY_GROUP_SEQ_ID) || "";

// const { data: policyConfigData } = usePolicyConfig(policyGroupSeqId);

// const showBillBreakup = policyConfigData?.showBillsBreakupOpd || false;

// const showCategoryType = policyConfigData?.showCategoryTypeOpdReimbursement || false;

// // const hardCopySubmissionAddress = policyConfigData?.corporateSubmissionAddress?.replace(BR_TAG_REGEX, '');

// const formMethods = useClaimFormOpd({

// showBillBreakup,

// showCategoryType,

// });

// const {

// control,

// handleSubmit,

// reset,

// formState: { errors, isValid },

// setValue,

// watch,

// getValues,

// setError,

// clearErrors,

// } = formMethods;

// const selectedMember = watch("claimDetails.nameOrRelationship");

// const selectedClaimType = watch("claimDetails.claimType");

// const { showPopup, ClaimPopup } = useClaimSubmissionPopup();

// const consultationDate = watch("claimDetails.consultationDate");

// const isFormDisabled = !selectedMember;

// const formValues = watch();

// // const { data: encryptedData } =

// // useSelectedFamilyMemberDetails(selectedMember);

// // const decryptedData: ISelectedUserDetails | undefined = useMemo(() => {

// // const decrypted = decryptData(encryptedData?.data);

// // return decrypted ? JSON.parse(decrypted) : null;

// // }, [encryptedData?.data]);

// // const { data: draftData } = useDraftView(

// // policyGroupSeqId,

// // paramsDraftSeqId ?? ""

// // );

// // const { data: familyRelationsList } = useFamilyMembers(policyGroupSeqId, {

// // enabled: !!paramsDraftSeqId,

// // staleTime: Infinity,

// // gcTime: Infinity,

// // });

// // const { data: officesData } = useMasterData("offices", {

// // enabled: !!paramsDraftSeqId,

// // staleTime: Infinity,

// // gcTime: Infinity,

// // });

// // const { data: billDocuments } = useMasterData("billOpdDocUploadTypes", {

// // enabled: !!paramsDraftSeqId,

// // });

// // const { data: opdDocsUploadTypes } = useMasterData("opdDocUploadTypes", {

// // enabled: !!paramsDraftSeqId,

// // staleTime: Infinity,

// // });

// // const memberName = decryptedData?.memName;

// // const groupId = decryptedData?.groupId;

// const { mutate: saveDraftMutate, isPending: isSavingDraft } = useSaveDraft({

// // onSuccess: () => {

// // toast("Draft saved successfully!", "success");

// // navigate("/vhc-portal/claims/opd");

// // },

// // onError: (error: any) => {

// // const message = error?.message.replace(/@/g, "");

// // const finalMessage = message || "Failed to save draft.";

// // toast(startCaseCustom(finalMessage), "error");

// // },

// });

// // const { mutate: submitCoachmark } = useCoachmarkSubmitMutation({

// // onSuccess: (response) => {

// // setShowCoachmark(!response?.data?.isShown);

// // },

// // });

// // useEffect(() => {

// // submitCoachmark({ page: "opd", type: "coachmarks" });

// // }, []);

// // useEffect(() => {

// // if (memberName) {

// // OPDClaimSubStartedEvent(isPhone, memberName, groupId);

// // }

// // }, [memberName]);

// const { mutate, isPending } = useClaimSubmit({

// // onSuccess: (response) => {

// // const inwardNo = response?.data?.inwardNumber;

// // const inwardSeqId = response?.data?.claimInwardSeqId;

// // reset();

// // showPopup(inwardNo, hardCopySubmissionAddress, inwardSeqId, inwardNo, true);

// // OPDClaimSubmittedEvent(isPhone, memberName, groupId);

// // window.scrollTo({

// // top: 90,

// // behavior: "smooth",

// // });

// // },

// // onError: (error: any) => {

// // const message =

// // error?.message?.replace(/@/g, "") ||

// // "Something went wrong while submitting the claim.";

// // toast(message, "error");

// // },

// });

// const onFormErrors = (errors: FieldErrors) => {

// scrollToFirstError(errors);

// };

// // useEffect(() => {

// // if (draftData) {

// // setDraftDataInForm({

// // draftData,

// // setValue,

// // control,

// // getValues,

// // familyRelationsList,

// // officesData,

// // billDocuments,

// // // opdDocsUploadTypes,

// // });

// // }

// // }, [draftData, familyRelationsList, billDocuments, opdDocsUploadTypes]);

// const onSubmit = (data: FormDataOPD) => {

// // const payload = claimSubmissionPayloadOpd(

// // data,

// // decryptedData,

// // consultationDate,

// // selectedClaimType

// // );

// // mutate({ payload });

// };

// const handleReset = () => {

// reset();

// };

// const handleSaveDraft = () => {

// // const data = getValues();

// // const requiredFields = {

// // mobileNumber: data.claimDetails.mobileNumber,

// // ailment: data.claimDetails.ailment,

// // claimType: data?.claimDetails?.claimType,

// // emailId: data.claimDetails.email,

// // consultationDate: data?.claimDetails?.consultationDate,

// // };

// // const missingFields = Object.entries(requiredFields)

// // .filter(([_, value]) => !value || value.trim?.() === "")

// // .map(([key]) => key);

// // if (missingFields.length > 0) {

// // toast(

// // `Please fill in required fields: ${startCaseCustom(

// // missingFields.join(", ")

// // )}`,

// // "error"

// // );

// // return;

// // }

// // const payload = draftSubmissionPayloadOpd(

// // data,

// // decryptedData,

// // consultationDate,

// // draftData,

// // paramsDraftSeqId

// // );

// // saveDraftMutate({ payload });

// };

// const sections: SectionItem[] = [

// {

// id: "claim-details",

// title: "Claim Details",

// fieldName: "claimDetails",

// schema: getClaimDetailsSchema({ showCategoryType }),

// component: (

// <ClaimDetails<FormDataOPD>

// control={control}

// errors={errors}

// setError={setError}

// clearErrors={clearErrors}

// // isFormDisabled={isFormDisabled}

// isOpdClaim={true}

// // decryptedData={decryptedData}

// setValue={setValue}

// getValues={getValues}

// showCategoryType={showCategoryType}

// watch={watch}

// />

// ),

// },

// // ...(showBillBreakup

// // ? [

// {

// id: "bill-breakup",

// title: "Bill Breakup",

// subtitle:"You can add multiple bills",

// fieldName: "billBreakup",

// schema: getBillBreakupSchema(),

// subHeader: errors.billBreakup?.message as string,

// subHeaderColor: "error-500" as Color,

// component: (

// <BillBreakUp<FormDataOPD>

// control={control}

// errors={errors}

// // isFormDisabled={isFormDisabled}

// fieldArrayName={"billBreakup" as ArrayPath<FormDataOPD>}

// isOpdClaim={true}

// // decryptedData={decryptedData}

// />

// ),

// },

// // ],

// // : []),

// // {

// // id: "upload-documents",

// // title: "Upload Documents",

// // fieldName: "uploadedDocuments",

// // schema: getUploadDocumentsSchema(),

// // component: (

// // <DocumentUpload

// // control={control}

// // errors={errors}

// // isFormDisabled={isFormDisabled}

// // setValue={setValue}

// // getValues={getValues}

// // isOPDClaim={true}

// // documentFieldName={"uploadedDocuments"}

// // documentCategory="opdDocUploadTypes"

// // width={"30%"}

// // />

// // ),

// // },

// ];

// return (

// <>

// <div css={[screen("md", margin(-4, "bottom")), margin(0, "bottom")]}>

// <div css={[padding(1, 3)]}>

// <NavbarHeader

// color="gray-400"

// variant={isPhone ? "header-3" : "sub-heading-1"}

// title={isPhone ? "Non Medical Claims" : "Back"}

// />

// </div>

// {isPhone && <Divider color="gray-200" />}

// </div>

// <FormProvider {...formMethods}>

// <form onSubmit={handleSubmit(onSubmit, onFormErrors)}>

// <FormContainer

// css={[

// flex("column"),

// gap(10),

// isPhone

// ? css([

// {

// minHeight: "calc(100vh - 64px)",

// overflow: "hidden",

// },

// flex("column"),

// ])

// : {},

// ]}

// >

// <div

// css={[

// flex("column"),

// gap(5),

// isPhone

// ? css([

// {

// overflowY: "auto",

// },

// padding(80, "bottom"),

// ])

// : flex("column"),

// ]}

// >

// {!isPhone && (

// <div

// css={[

// margin(2, "bottom"),

// { width: "100%" },

// border(2),

// background("accent-100"),

// padding(3, 4, 3, 4),

// radius(2),

// ]}

// >

// <Text variant="header-3" color="gray-400">

// Submit Claim

// </Text>

// </div>

// )}

// {sections.map((section) => (

// <SectionValidator

// key={section.id}

// fieldName={section.fieldName}

// schema={section.schema}

// isExpanded={expandedSection === section.id}

// forceValidation={hasSubmittedWithErrors}

// >

// {(validationProps) => (

// <ExpandableFormSection

// id={section?.id}

// title={section?.title}

// subtitle={section?.subtitle}

// expandedSection={expandedSection}

// onExpandOrCollapse={setExpandedSection}

// hasError={validationProps.hasError}

// subHeader={section?.subHeader}

// subHeaderColor={section?.subHeaderColor}

// hasFormErrors={hasSubmittedWithErrors}

// errors={errors}

// formValues={formValues}

// >

// {section.component}

// </ExpandableFormSection>

// )}

// </SectionValidator>

// ))}

// {!isPhone && (

// <div css={[border(1, "gray-100"), margin(4, "top")]}></div>

// )}

// <div

// css={[

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

// padding(5),

// background("white"),

// isPhone

// ? css([

// {

// position: "fixed",

// bottom: 0,

// left: 0,

// right: 0,

// zIndex: 10,

// },

// border(2, "gray-100"),

// ])

// : {},

// ]}

// >

// {!isPhone && (

// <ResetButtonWithModal

// onResetClick={handleReset}

// onSaveDraftClick={handleSaveDraft}

// />

// )}

// <div

// css={[

// flex("row"),

// gap(5),

// { width: "100%" },

// screen("md", flex("row", "justify-end")),

// ]}

// >

// <Button

// variant="secondary"

// onClick={handleSaveDraft}

// disabled={isSavingDraft}

// loading={isSavingDraft}

// data-joyride-id="save-draft-opd"

// css={[{ flex: 1 }, screen("md", { flex: "unset" })]}

// >

// Save as Draft

// </Button>

// <Button

// type="submit"

// disabled={isPending}

// loading={isPending}

// onClick={() => {

// if (!isValid) {

// setHasSubmittedWithErrors(true);

// return;

// }

// setHasSubmittedWithErrors(false);

// }}

// css={[{ flex: 1 }, screen("md", { flex: "unset" })]}

// >

// Submit

// </Button>

// </div>

// </div>

// </div>

// {ClaimPopup}

// </FormContainer>

// </form>

// </FormProvider>

// </>

// );

// }

// export default NonMedicalClaimSubmission