quick-consultation

 quick-consultation/index.tsx:----

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

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

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

// import { useNavigate } from "react-router-dom";

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

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

// import { yupResolver } from "@hookform/resolvers/yup";

// import { useForm } from "react-hook-form";

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

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

// import {

// defaultQuickConsultationValues,

// QuickConsultationFormData,

// QuickConsultationSchema,

// } from "./schema.ts";

// import LoadingScreen from "../loading-screen.tsx";

// import QuickConsultationForm from "./quick-consultation-form/index.tsx";

// import { useState } from "react";

// import { Cookies } from "react-cookie";

// import { usePatientMembers } from "../../api/hooks/corporate-benfits/quick-consultation/fetch-patient-details.ts";

// import { useSubmitQuickConsultation } from "../../api/hooks/corporate-benfits/quick-consultation/submit-patient-details.ts";

// import { useUpdateQuickConsultation } from "../../api/hooks/corporate-benfits/quick-consultation/update-patient-details.ts";

// import { AxiosError } from "axios";

// import { QUICK_CONSULTATION_DETAILS } from "../../constants.ts";

// import { useQuickConsultationContext } from "../../context/quick-consultation-context.tsx";

// import HeaderBack from "../../components/header-back/index.tsx";

// import { calculateAge } from "../../utils/calculate-age.ts";

// export default function QuickConsultation () {

// const navigate = useNavigate();

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

// const [selectedPatient, setSelectedPatient] = useState(false);

// const [dependentSlug, setDependentSlug] = useState("");

// const cookies = new Cookies();

// const Toast = useToast();

// const { setConsultationDetails } = useQuickConsultationContext();

// const {

// data: patientProfileList,

// isFetching: isPatientFetching,

// isLoading: isPatientLoading,

// } = usePatientMembers();

// const { submitConsultation, isSubmitting } = useSubmitQuickConsultation();

// const { updateConsultation, isUpdating } = useUpdateQuickConsultation();

// const methods = useForm<QuickConsultationFormData>({

// defaultValues: defaultQuickConsultationValues,

// resolver: yupResolver(QuickConsultationSchema()),

// mode: "onChange",

// });

// const {

// control,

// handleSubmit,

// reset,

// formState: { errors },

// } = methods;

// const isFormDisabled = !selectedPatient;

// const handleReset = () => {

// reset(defaultQuickConsultationValues);

// };

// const isLoading =

// isPatientLoading || isPatientFetching || isSubmitting || isUpdating;

// const submitQuickConsultation = (data: QuickConsultationFormData) => {

// const isOtherPatient =

// data?.quickconsultationDetails?.patientname?.toLowerCase() === "others";

// const quickConsultationData = {

// full_name: data?.quickconsultationDetails?.name ?? "",

// gender: data?.quickconsultationDetails?.gender ?? "",

// height:

// Number(data?.quickconsultationDetails?.heightFt) * 12 +

// Number(data?.quickconsultationDetails?.heightIn),

// weight: data?.quickconsultationDetails?.weight ?? "",

// dob: data?.quickconsultationDetails?.dateOfBirth ?? "",

// ...(isOtherPatient ? {} : { patient_slug_id: dependentSlug ?? "" }),

// email: data?.quickconsultationDetails?.emailId ?? "",

// phone: data?.quickconsultationDetails?.mobileNumber ?? "",

// ...(isOtherPatient ? { terms_and_condition: true } : {}),

// };

// setConsultationDetails({

// patientname: data?.quickconsultationDetails?.patientname ?? "",

// gender: data?.quickconsultationDetails?.gender ?? "",

// relation: data?.quickconsultationDetails?.relation ?? "",

// age: String(calculateAge(data?.quickconsultationDetails?.dateOfBirth)),

// });

// if (!selectedPatient && dependentSlug) {

// handleUpdateConsultationAPI(quickConsultationData);

// } else if (selectedPatient && !dependentSlug) {

// handleSubmitConsultationAPI(quickConsultationData);

// } else {

// console.error("No valid endpoint found.");

// }

// };

// const handleSubmitConsultationAPI = (payload: any) => {

// submitConsultation(payload, {

// onSuccess: (data) => {

// reset(defaultQuickConsultationValues);

// const patientSlug = data?.patient_slug_id;

// if (patientSlug) {

// cookies.set(QUICK_CONSULTATION_DETAILS.PATIENT_SLUG, patientSlug, {

// path: "/",

// });

// }

// navigate(`/vhc-portal/quickconsultation/condition`);

// },

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

// const message =

// (error as AxiosError<{ message?: string }>)?.response?.data

// ?.message ||

// error.message ||

// "Something went wrong!";

// Toast(message, "error");

// },

// });

// };

// const handleUpdateConsultationAPI = (payload: any) => {

// updateConsultation(payload, {

// onSuccess: (data) => {

// reset(defaultQuickConsultationValues);

// const patientSlug = data?.patient_slug_id;

// if (patientSlug) {

// cookies.set(QUICK_CONSULTATION_DETAILS.PATIENT_SLUG, patientSlug, {

// path: "/",

// });

// }

// navigate(`/vhc-portal/quickconsultation/condition`);

// },

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

// const message =

// (error as AxiosError<{ message?: string }>)?.response?.data

// ?.message ||

// error.message ||

// "Something went wrong!";

// Toast(message, "error");

// },

// });

// };

// return (

// <>

// <div css={[padding(4, "x")]}>

// <HeaderBack title="Quick Consultation" />

// </div>

// {/* Consultation Form */}

// <FormProvider {...methods}>

// <form

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

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

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

// })}

// >

// <QuickConsultationForm

// control={control}

// errors={errors}

// isFormDisabled={isFormDisabled}

// patientProfileList={patientProfileList?.patient_profile_details}

// setSelectedPatient={setSelectedPatient}

// setDependentSlug={setDependentSlug}

// reset={reset}

// />

// <div

// css={[

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

// gap(2),

// padding(3),

// background("white"),

// css({

// position: "fixed",

// bottom: 0,

// left: 0,

// right: 0,

// zIndex: 10,

// }),

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

// screen(

// "md",

// css({

// position: "static",

// zIndex: "auto",

// }),

// border(0),

// margin(5, "x")

// ),

// ]}

// >

// {!isPhone && (

// <Button type="button" variant="secondary" onClick={handleReset}>

// Reset

// </Button>

// )}

// <Button

// type="submit"

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

// >

// Confirm

// </Button>

// </div>

// </form>

// </FormProvider>

// {isLoading && (

// <div

// css={[

// flex("center"),

// padding(5),

// {

// position: "fixed",

// top: "50%",

// left: "50%",

// transform: "translate(-50%, -50%)",

// zIndex: 1000,

// },

// ]}

// >

// <LoadingScreen />

// </div>

// )}

// </>

// );

// }

quick-consultation-condition-form/index.tsx:

// import { Grid, Text, TextArea, Box, Button } from "@ebh/capsule";

// import {

// padding,

// radius,

// gap,

// border,

// flex,

// cols,

// background,

// margin,

// screen,

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

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

// import { useForm } from "react-hook-form";

// import illustration from "../../../assets/quick-consultation/Illustration-01.png";

// import { useNavigate } from "react-router-dom";

// import { useQuickConsultationContext } from "../../../context/quick-consultation-context";

// import HeaderBack from "../../../components/header-back";

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

// const ConditionDetails: React.FC = () => {

// const {

// register,

// watch,

// setValue,

// handleSubmit,

// formState: { errors },

// } = useForm({

// defaultValues: {

// question: "",

// },

// });

// const navigate = useNavigate();

// const questionValue = watch("question") || "";

// const { setQuestion } = useQuickConsultationContext();

// const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {

// setValue("question", e.target.value);

// };

// const submitQuickConsultation = (data: { question: string }) => {

// setQuestion(data.question);

// navigate(`/vhc-portal/quickconsultation/consultation`);

// };

// const isFormDisabled = false;

// return (

// <>

// {/* <div css={[padding(3, "x")]}>

// <HeaderBack title="Quick Consultation" />

// </div> */}

// <div css={[padding(4, "x")]}>

// <HeaderBack title="Quick Consultation" />

// </div>

// <form

// onSubmit={handleSubmit(submitQuickConsultation)}

// css={[margin(0, "y")]}

// >

// <Grid

// lg={2}

// md={2}

// sm={1}

// xl={2}

// css={[

// padding(5, "x"),

// gap(4),

// border(0),

// cols(1),

// padding(0, "y"),

// margin(1),

// { width: "100%" },

// screen(

// "md",

// css([

// gap(20),

// cols(2),

// border(1),

// radius(3),

// padding(10, "x"),

// padding(10, "y"),

// margin(5),

// { width: "auto" },

// ])

// ),

// ]}

// >

// {/* Left Side */}

// <Grid

// lg={2}

// md={2}

// sm={1}

// xl={2}

// css={[

// flex("row-reverse"),

// screen("md", css([flex("row"), gap(2)])),

// ]}

// >

// <Box>

// <img src={illustration} alt="illustration" />

// </Box>

// <Box css={[padding(10, "y"), screen("md", padding(5, "y"))]}>

// <Text variant="header-2" color="primary-400">

// Doctor is now available for online consultation

// </Text>

// <Text variant="sub-heading-1" color="gray-300">

// Connect with doctor instantly

// </Text>

// </Box>

// </Grid>

// {/* Right Side */}

// <Grid

// lg={2}

// md={2}

// sm={2}

// xl={2}

// css={[flex("column"), screen("md", css([gap(2), padding(5, "y")]))]}

// >

// <Box css={[flex("row", "justify-between")]}>

// <Text variant="sub-heading-1" color="gray-300">

// Explain your condition briefly to help us assign a doctor for

// you

// </Text>

// <Text variant="sub-heading-1" color="gray-300">

// {questionValue.length}/100

// </Text>

// </Box>

// <Box css={padding(2, "y")}>

// <TextArea

// {...register("question")}

// value={questionValue}

// onChange={handleChange}

// placeholder="Explain your condition"

// label=""

// error={Boolean(errors?.question?.message)}

// hint={errors?.question?.message}

// rows={5}

// maxLength={100}

// css={[{ width: "100%" }]}

// disabled={isFormDisabled}

// />

// </Box>

// </Grid>

// </Grid>

// {/* Buttons */}

// <Box

// css={[

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

// gap(2),

// padding(3),

// background("white"),

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

// {

// position: "fixed",

// bottom: 0,

// left: 0,

// right: 0,

// zIndex: 10,

// },

// screen(

// "md",

// css([

// {

// position: "static",

// zIndex: "auto",

// },

// border(0),

// margin(5, "x"),

// ])

// ),

// ]}

// >

// <Button

// type="submit"

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

// disabled={!questionValue.trim()}

// >

// Confirm

// </Button>

// </Box>

// </form>

// </>

// );

// };

// export default ConditionDetails;

phone-consultation/index.tsx:--

// patient_slug_id:"iwE6ncUipKeP4GdueS3ueSzI",

........
quick-consulation-condation.index.tsx:---

import { useEffect } from "react";

import { Grid, Text, TextArea, Box, Button } from "@ebh/capsule";

import {

  padding,

  radius,

  gap,

  border,

  flex,

  cols,

  background,

  margin,

  screen,

} from "@ebh/capsule/theme";

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

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

import illustration from "../../../assets/quick-consultation/Illustration-01.png";

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

import { useQuickConsultationContext } from "../../../context/quick-consultation-context";

import HeaderBack from "../../../components/header-back";

const SESSION_KEY = "quickConsultationCondition";

const ConditionDetails: React.FC = () => {

  const { setQuestion, question } = useQuickConsultationContext();

  const navigate = useNavigate();

  // Load value from sessionStorage if available

  const storedSession = sessionStorage.getItem(SESSION_KEY);

  const sessionValue = storedSession ? JSON.parse(storedSession).question : "";

  const {

    register,

    watch,

    setValue,

    handleSubmit,

    formState: { errors },

  } = useForm({

    defaultValues: {

      question: sessionValue || question || "",

    },

  });

  const questionValue = watch("question") || "";

  // Persist to sessionStorage and Context on every change

  useEffect(() => {

    sessionStorage.setItem(SESSION_KEY, JSON.stringify({ question: questionValue }));

    setQuestion(questionValue);

  }, [questionValue]);

  // Ensure form is in sync with context if user navigated back

  useEffect(() => {

    if (question && !questionValue) {

      setValue("question", question);

    }

  }, [question, setValue]);

  const submitQuickConsultation = (data: { question: string }) => {

    setQuestion(data.question);

    sessionStorage.setItem(SESSION_KEY, JSON.stringify({ question: data.question }));

    navigate(`/vhc-portal/quickconsultation/consultation`);

  };

  const isFormDisabled = false;

  return (

    <>

      <div css={[padding(4, "x")]}>

        <HeaderBack title="Quick Consultation" />

      </div>

      <form

        onSubmit={handleSubmit(submitQuickConsultation)}

        css={[margin(0, "y")]}

      >

        <Grid

          lg={2}

          md={2}

          sm={1}

          xl={2}

          css={[

            padding(5, "x"),

            gap(4),

            border(0),

            cols(1),

            padding(0, "y"),

            margin(1),

            { width: "100%" },

            screen(

              "md",

              css([

                gap(20),

                cols(2),

                border(1),

                radius(3),

                padding(10, "x"),

                padding(10, "y"),

                margin(5),

                { width: "auto" },

              ])

            ),

          ]}

        >

          <Grid

            lg={2}

            md={2}

            sm={1}

            xl={2}

            css={[

              flex("row-reverse"),

              screen("md", css([flex("row"), gap(2)])),

            ]}

          >

            <Box>

              <img src={illustration} alt="illustration" />

            </Box>

            <Box css={[padding(10, "y"), screen("md", padding(5, "y"))]}>

              <Text variant="header-2" color="primary-400">

                Doctor is now available for online consultation

              </Text>

              <Text variant="sub-heading-1" color="gray-300">

                Connect with doctor instantly

              </Text>

            </Box>

          </Grid>

          {/* Right Side */}

          <Grid

            lg={2}

            md={2}

            sm={2}

            xl={2}

            css={[flex("column"), screen("md", css([gap(2), padding(5, "y")]))]}

          >

            <Box css={[flex("row", "justify-between")]}>

              <Text variant="sub-heading-1" color="gray-300">

                Explain your condition briefly to help us assign a doctor for

                you

              </Text>

              <Text variant="sub-heading-1" color="gray-300">

                {questionValue.length}/100

              </Text>

            </Box>

            <Box css={padding(2, "y")}>

              <TextArea

                {...register("question")}

                value={questionValue}

                onChange={(e) => setValue("question", e.target.value)}

                placeholder="Explain your condition"

                label=""

                error={Boolean(errors?.question?.message)}

                hint={errors?.question?.message}

                rows={5}

                maxLength={100}

                css={[{ width: "100%" }]}

                disabled={isFormDisabled}

              />

            </Box>

          </Grid>

        </Grid>

        {/* Buttons */}

        <Box

          css={[

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

            gap(2),

            padding(3),

            background("white"),

            border(2, "gray-100"),

            {

              position: "fixed",

              bottom: 0,

              left: 0,

              right: 0,

              zIndex: 10,

            },

            screen(

              "md",

              css([

                {

                  position: "static",

                  zIndex: "auto",

                },

                border(0),

                margin(5, "x"),

              ])

            ),

          ]}

        >

          <Button

            type="submit"

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

            disabled={!questionValue.trim()}

          >

            Confirm

          </Button>

        </Box>

      </form>

    </>

  );

};

export default ConditionDetails;

hooks:---

fetch-patient-details.ts:---

import { useQuery } from "@tanstack/react-query";

import { fetchPatientProfileDetails } from "../../../corporate-benefits/quick-consultation";

import { FamilyMembersResponse } from "../../../../modules/quick-consultation/interface";

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

import { Cookies } from "react-cookie";

export const usePatientMembers = () => {

const cookies = new Cookies();

// const patient_slug = cookies.get(USER_DATA.USER_SLUG); //"patient_slug"

const patient_slug = "iwE6ncUipKeP4GdueS3ueSzI";

return useQuery<FamilyMembersResponse>({

queryKey: ["patientinfo", patient_slug],

queryFn: () => fetchPatientProfileDetails(patient_slug),

enabled: !!patient_slug,

});

};

.............

quick-consulation-context:--

// import { createContext, useContext, useState, ReactNode } from "react";

// interface QuickConsultationContextType {

// patientname: string;

// gender: string;

// relation: string;

// age: string;

// question: string;

// price: number | null;

// setConsultationDetails: (data: {

// patientname: string;

// gender: string;

// relation: string;

// age?: string;

// question?: string;

// price?: number | null;

// }) => void;

// setQuestion: (question: string) => void;

// setPrice: (price: number) => void;

// clearConsultationDetails: () => void;

// }

// const QuickConsultationContext = createContext<

// QuickConsultationContextType | undefined

// >(undefined);

// export const QuickConsultationProvider = ({

// children,

// }: {

// children: ReactNode;

// }) => {

// const [patientname, setPatientname] = useState("");

// const [gender, setGender] = useState("");

// const [relation, setRelation] = useState("");

// const [age, setAge] = useState("");

// const [question, setQuestionState] = useState("");

// const [price, setPriceState] = useState<number | null>(null);

// const setConsultationDetails = ({

// patientname,

// gender,

// relation,

// age = "",

// question = "",

// price = null,

// }: {

// patientname: string;

// gender: string;

// relation: string;

// age?: string;

// question?: string;

// price?: number | null;

// }) => {

// setPatientname(patientname);

// setGender(gender);

// setRelation(relation);

// setAge(age);

// setQuestionState(question);

// setPriceState(price);

// };

// const setQuestion = (question: string) => {

// setQuestionState(question);

// };

// const setPrice = (value: number) => {

// setPriceState(value);

// };

// const clearConsultationDetails = () => {

// setPatientname("");

// setGender("");

// setRelation("");

// setAge("");

// setQuestionState("");

// setPriceState(null);

// };

// return (

// <QuickConsultationContext.Provider

// value={{

// patientname,

// gender,

// relation,

// age,

// question,

// price,

// setConsultationDetails,

// setQuestion,

// setPrice,

// clearConsultationDetails,

// }}

// >

// {children}

// </QuickConsultationContext.Provider>

// );

// };

// export const useQuickConsultationContext = () => {

// const context = useContext(QuickConsultationContext);

// if (!context) {

// throw new Error(

// "useQuickConsultationContext must be used within a QuickConsultationProvider"

// );

// }

// return context;

// };