TypeError: Cannot read properties of null (reading 'scrollTop') in jest

.test.tsx

/** * @jest-environment jsdom */

import * as React from "react";
import { act } from "react-dom/test-utils";
import * as ReactDOM from "react-dom/client";
import Video from "../pages/video/Video";
import renderer from "react-test-renderer";
import { render, screen } from "@testing-library/react";
import { initialState } from "../app/slice/chatSlice";
import configureStore from "redux-mock-store";
import { Provider } from "react-redux";
import { store } from "../app/newStore";
import NewChatMobile from "../pages/NewChatMobile/NewChatMobile";
import ChatComponent from "../components/chat/Message";
import ChatList from "../components/chat/ChatList";
import Message from "../components/chat/Message";
import MobileChatComponent from "../components/chat/MobileChatComponent";

import MsgComponent from "../components/chat/MsgComponent";

import NewChatModal from "../components/chat/NewChatModal";

// This component helps get rid of the following error :: react-i18next

jest.mock("react-i18next", () => ({
 useTranslation: () => ({ t: (key) => key }),
}));

// This helps get rid of :: parentInstance.children.indexOf

jest.mock("react-dom", () => {
 const original = jest.requireActual("react-dom");

 return {
 ...original,

 createPortal: (node) => node,
 };
});

describe("Snapshot testing of Chat Components", () => {
 test("Snapshot for NewChatMobile.tsx Component", async () => {
 const renderedComponent = renderer

 .create(
 <Provider store={store}>
 <NewChatMobile />
 </Provider>
 )

 .toJSON();

 expect(renderedComponent).toMatchSnapshot();
 });

 test("Snapshot for ChatComponent.tsx Component", () => {
 const renderedComponent = renderer

 .create(
 <Provider store={store}>
 <ChatComponent />
 </Provider>
 )

 .toJSON();

 expect(renderedComponent).toMatchSnapshot();
 });

 test("Snapshot for ChatList.tsx Component", () => {
 const renderedComponent = renderer

 .create(
 <Provider store={store}>
 <ChatList />
 </Provider>
 )

 .toJSON();

 expect(renderedComponent).toMatchSnapshot();
 });

 test("Snapshot for Message.tsx Component", () => {
 const renderedComponent = renderer

 .create(
 <Provider store={store}>
 <Message />
 </Provider>
 )

 .toJSON();

 expect(renderedComponent).toMatchSnapshot();
 });

 test("Snapshot for MobileChatComponent.tsx Component", async () => {
 const renderedComponent = renderer

 .create(
 <Provider store={store}>
 <MobileChatComponent />
 </Provider>
 )

 .toJSON();

 expect(renderedComponent).toMatchSnapshot();
 });

 test("Snapshot for MsgComponent.tsx Component", () => {
 const renderedComponent = renderer

 .create(
 <Provider store={store}>
 <MsgComponent />
 </Provider>
 )

 .toJSON();

 expect(renderedComponent).toMatchSnapshot();
 });

 test("Snapshot for NewChatModal.tsx Component", async () => {
 const renderedComponent = renderer

 .create(
 <Provider store={store}>
 <NewChatModal show={true} handleCloseParent={() => {}} />
 </Provider>
 )

 .toJSON();

 expect(renderedComponent).toMatchSnapshot();
 });
});

Another file > 

import React from 'react';
import { useState, useEffect, useRef } from "react";
import Backdrop from "@mui/material/Backdrop";
import Box from "@mui/material/Box";
import Modal from "@mui/material/Modal";
import Fade from "@mui/material/Fade";
import TextField from "@mui/material/TextField";
import { styled } from "@mui/material/styles";
import Radio, { RadioProps } from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import FormControlLabel from "@mui/material/FormControlLabel";
import FormControl from "@mui/material/FormControl";
import CountryDropdown from "../../layouts/countryDropdown/CountryDropdown";
import FormLabel from "@mui/material/FormLabel";
import { useDebounce } from 'usehooks-ts'
import { getCampaignsData } from "../../apis/campaigns/campaigns";
import DropdownInupt from "../shared/Dropdown";
import config from "../../env.json";
import AssociatedPresList from "../../layouts/AssociatedPrescriber/AssociatedPresList";
import { getFormatedPhoneNumber } from '../../utils/phoneNumberUtil';
import { sendMessageApi } from '../../apis/chat/messageApi'
import { parsePhoneNumber } from "react-phone-number-input";
import { addNewContact } from '../../apis/contacts/contactsApi'
import Paper from '@mui/material/Paper';
import axios from "axios";
import { useSelector, useDispatch } from 'react-redux';
import "./NewChatModal.css";
import GenericButton from "../../layouts/button/Button";
import { debug } from "console";
import { setChatDetails, setRefreshChatList } from "../../app/slice/chatSlice";
import { useTranslation } from "react-i18next";

const BpIcon = styled("span")(({ theme }) => ({
 borderRadius: "50%",
 width: 16,
 height: 16,
 boxShadow:
 theme.palette.mode === "dark"
 ? "0 0 0 1px rgb(16 22 26 / 40%)"
 : "inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)",
 backgroundColor: theme.palette.mode === "dark" ? "#394b59" : "#f5f8fa",
 backgroundImage:
 theme.palette.mode === "dark"
 ? "linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))"
 : "linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))",
 ".Mui-focusVisible &": {
 outline: "2px auto rgba(19,124,189,.6)",
 outlineOffset: 2,
 },
 "input:hover ~ &": {
 backgroundColor: theme.palette.mode === "dark" ? "#30404d" : "#ebf1f5",
 },
 "input:disabled ~ &": {
 boxShadow: "none",
 background:
 theme.palette.mode === "dark"
 ? "rgba(57,75,89,.5)"
 : "rgba(206,217,224,.5)",
 },
}));

const BpCheckedIcon = styled(BpIcon)({
 backgroundColor: "#734BD1",
 backgroundImage:
 "linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))",
 "&:before": {
 display: "block",
 width: 16,
 height: 16,
 backgroundImage: "radial-gradient(#fff,#fff 28%,transparent 32%)",
 content: '""',
 },
 "input:hover ~ &": {
 backgroundColor: "#734BD1",
 },
});
// Inspired by blueprintjs

function BpRadio(props: RadioProps) {
 return (
 <Radio
 sx={{
 "&:hover": {
 bgcolor: "transparent",
 },
 }}
 disableRipple
 color="default"
 checkedIcon={<BpCheckedIcon />}
 icon={<BpIcon />}
 {...props}
 />
 );
}

const style = {
 position: "absolute" as "absolute",
 top: "50%",
 left: "50%",
 transform: "translate(-50%, -50%)",
 width: "30%",
 borderRadius: "1rem",
 padding: ".5rem",
 bgcolor: "white",
 border: "none",
};

export default function NewChatModal({ show, handleCloseParent }) {
 const dispatch = useDispatch()
 const { t } = useTranslation();
 const [othersName, setOthersName] = useState("");
 const [assoPrescName, setAssoPrescName] = useState("");
 const [othersPhone, setOthersPhone] = useState("");
 const [hiddenPresList, setHiddenPresList] = useState(true);
 const [assoPresc, setAssoPresc] = useState({ Id: '' });
 const [post, setPost] = useState([]);
 const [disabled, setDisabled] = useState(true);
 const [formType, setFormType] = useState(true);
 const [templateValue, setTemplateValue] = useState < any > ({});
 const [campaignId, setCampaignId] = useState(0)
 const [templateId, setTemplateId] = useState(0);
 const [templateText, setTemplateText] = useState('')
 const [isSMS, setIsSms] = useState(false);
 const [pageSize, setPageSize] = useState(10);
 const [page, setPage] = useState(0);
 const [campaign, setCampaign] = useState([]);
 const [activeCampaign, setActiveCampagign] = useState(1000);//userId
 const [template, setTemplate] = useState < any > ([])
 const [othersData, setOthersData] = useState([])
 const [othersDatahidden, setOthersDataHidden] = useState(true)
 const [selectedOthers, setSelecteedOthers] = useState < any > ({})
 const debouncedValue = useDebounce < string > (othersName, 350);
 const [assets, setAssets] = useState([])
 const [disableBrandInput, setDisableBrandInput] = useState(true)
 const [phoneError, setPhoneError] = useState(false);
 const [loading, setLoading] = useState(false);
 const [refreshTemplate, setRefreshTemplate] = useState(true);
 const [associated, setAssociated] = useState < any > ({})
 const [isForm, setIsForm] = useState(false)
 const [formQuestion, SetFromQuestion] = useState("");
 const [forms, setForms] = useState([])
 const [selectedForm, setSelectForm] = useState < any > ({})
 const [optedOut, setOptedOut] = useState(false);
 const [formsValues, setFormValues] = useState < any > ([])
 const refForm = useRef < any > (null);
 // const {
 // data: post,
 // isFetching,
 // isSuccess,
 // } = useGetPrescribersQuery({
 // page: 0,
 // pageSize: 5,
 // search: assoPrescName,
 // });
 // const pullTemplateData = (data) => {
 // console.log(data.length); // LOGS DATA FROM CHILD (My name is Dean Winchester... &)
 // // { ? : ''}
 // if (data.length > 0) {
 // setTemplateValue(true);
 // } else {
 // return null;
 // }
 // };
 useEffect(() => {
 console.log(axios.CancelToken.source());
 getTemplatesFromCampign()
 getFormsData(1001)
 }, []);
 const getContactsData = (value) => {
 // useGetContactsQuery({
 // page:this.state.page,
 // pageSize:this.state.pageSize,
 // search:this.state.search
 // })
 // const DATATEMP = useGetContactsQuery({
 // page:this.state.page,
 // pageSize:this.state.pageSize,
 // search:this.state.search
 // })
 // console.log(DATATEMP);
 debugger;
 if (value.length > 2) {
 axios
 .get(
 config.REACT_APP_CONTACTS_API_BASE +
 "/contact?IsPrescriberOnly=false&Page=" +
 0 +
 "&PageSize=" + pageSize + "&Search=" +
 value,
 {
 headers: {
 Authorization: "Bearer " + sessionStorage.getItem("login"),
 },
 }
 )
 .then((res) => {
 setOthersData(res.data.data.filter((x: any) => x.Is_Prescriber == "N"))
 setPost(res.data.data.filter((x: any) => x.Is_Prescriber == "Y"));
 });
 } else {
 setOthersDataHidden(true)
 setOthersData([])
 setPost([]);
 setHiddenPresList(true);
 }
 };
 const checkStopTyping = (e) => {
 var timeout = setTimeout(function () { }, 0);
 clearTimeout(timeout); /// clear timeout if user is typing
 timeout = setTimeout(
 function () {
 getContactsData(assoPrescName);
 },
 500 /// Time in milliseconds
 );
 };
 useEffect(() => {
 // Do fetch here...
 // Triggers when "debouncedValue" changes
 setOthersDataHidden(false)
 getContactsData(debouncedValue);
 }, [debouncedValue])
 const setPrescriber = (x: any) => {
 console.log(templateText)
 setAssoPrescName(x.AcctFull_Nm);
 setAssoPresc(x);
 setOthersPhone(getNumberFromItem(x));
 setHiddenPresList(true);
 setDisabled(false);
 // setDisableBrandInput(false)
 brandInputdisable(true, (x.AcctPh_Nbr.length > 0), true)
 setOptedOut(x.Opt_In == "N");
 };
 const getNumberFromItem = (item) => {
 debugger
 if (item.AcctPh_Nbr) {
 if (item.AcctPh_Nbr.indexOf("+") >= 0) {
 return item.AcctPh_Nbr
 } else
 return '+' + item.IntlCallPfx_Nbr + item.AcctPh_Nbr
 }
 else return ""
 }
 async function addContact() {
 // const { data: post, isFetching, isSuccess } =await useAddContactQuery({
 // AcctPh_Nbr:othersPhone,
 // Prescriber_Id:x.Id,
 // AcctFull_Nm:othersName,
 // })
 // if(isSuccess){
 // alert('succee')
 // ;
 // }
 // handleCloseParent()
 let payload = {
 AcctPh_Nbr: othersPhone,
 Prescriber_Id: assoPresc.Id as any,
 AcctFull_Nm: othersName,
 IsPrescriber: false,
 };
 console.log(payload);
 axios
 .post(
 config.REACT_APP_CONTACTS_API_BASE + "/contact",
 {
 AcctPh_Nbr: othersPhone,
 Prescriber_Id: assoPresc.Id as any,
 AcctFull_Nm: othersName,
 IsPrescriber: false,
 },
 {
 headers: {
 Authorization: "Bearer " + sessionStorage.getItem("login"),
 },
 }
 )
 .then((res) => {
 handleCloseParent(true);
 })
 .catch((err) => {
 handleCloseParent(false);
 });
 }
 const sendMessageForPresOrOthers = (formData) => {
 if (formType) {
 //prescriber
 formData.append("role_id", '0');
 formData.append("recipient_id", assoPresc.Id);
 formData.append("recipient_name", assoPresc['AcctFull_Nm']);
 formData.append("physcian_id", assoPresc.Id);
 sendMessageApi(formData, (res) => {
 //console.log(res)
 dispatch(setChatDetails(
 {
 chatId: assoPresc.Id,
 chatIsPrescriber: true,
 showChat: true,
 chatName: assoPresc['AcctFull_Nm']
 }))
 dispatch(setRefreshChatList(true))
 setLoading(false);
 reSetFormInputs(true);
 handleCloseParent(true);
 })
 }
 else {
 //others
 if (!selectedOthers.Id) {
 let phn: any = parsePhoneNumber(othersPhone);
 let payload = {
 AcctPh_Nbr: phn.nationalNumber,
 Prescriber_Id: [associated.Id],
 AcctFull_Nm: othersName,
 IntlCallPfx_Nbr: phn.countryCallingCode
 }
 addNewContact(payload, (res: any) => {
 if (res) {
 formData.append("recipient_id", res.Id);
 formData.append("recipient_name", othersName);
 formData.append("role_id", '1');
 formData.append('association_id', res.Prescribers[0].Association_Id)
 formData.append("physcian_id", res.Prescribers[0].Id);
 sendMessageApi(formData, (res) => {
 //console.log(res)
 dispatch(setRefreshChatList(true))
 dispatch(setChatDetails(
 {
 chatId: res.Id,
 chatIsPrescriber: false,
 showChat: true,
 chatName: othersName
 }))
 setLoading(false);
 reSetFormInputs(true);
 handleCloseParent(true);
 })
 }
 else {
 }
 })
 } else {
 formData.append("recipient_id", selectedOthers.Id);
 formData.append("recipient_name", othersName);
 formData.append("role_id", '1');
 formData.append('association_id', selectedOthers.Prescribers[0].Association_Id)
 formData.append("physcian_id", selectedOthers.Prescribers[0].Id);
 sendMessageApi(formData, (res) => {
 //console.log(res)
 dispatch(setRefreshChatList(true))
 dispatch(setChatDetails(
 {
 chatId: selectedOthers.Id,
 chatIsPrescriber: false,
 showChat: true,
 chatName: othersName
 }))
 setLoading(false);
 reSetFormInputs(true);
 handleCloseParent(true);
 })
 }
 }
 }
 const sendMessage = () => {
 // let data=messageData[0];
 // console.log(contactData);
 setLoading(true);
 let formData = new FormData();
 debugger
 formData.append("recipient_phone", othersPhone);
 formData.append("Campaign_ID", '1000')//templateValue.campaginId.toString());
 formData.append('wave_id', templateValue.mainWaveId)//templateValue.waveId.toString())
 formData.append('product_id', '1000')//templateValue.productId.toString())
 if (!isSMS) {
 formData.append("channel", "SMS");
 } else {
 formData.append("channel", "whatsa");
 }
 debugger
 if (isForm) {
 let fdata: any = new FormData(refForm.current)
 let details: any = [];
 for (const [key, value] of fdata) {
 details.push({ "idOfFieldToAskFromEmp": JSON.parse(key), "valueOfFieldToAskFromEmp": value })
 }
 let formPay = {
 "formId": selectedForm.FormId,
 "fieldDetails": details,
 "recipientId": assoPresc.Id,
 "recipientType": formType ? "PRESCR" : 'ASSPRS'
 }
 console.log(JSON.stringify(formPay))
 axios.post('//p360zingformsapi.azurewebsites.net/api/formRequest', formPay).then((res: any) => {
 console.log(res.data)
 let temptest = templateText.toString();
 if (temptest.indexOf('shorturl') >= 0)
 formData.append("template", templateText.toString().replace('[shorturl_1]', res.data.FormUrl));
 else
 formData.append("template", templateText + " " + res.data.FormUrl);
 formData.append('urls', res.data.FormUrl)
 sendMessageForPresOrOthers(formData);
 })
 .catch(err => {
 setLoading(false)
 })
 }
 else {
 formData.append("template_id", templateId.toString());
 formData.append("template", templateText.toString());
 sendMessageForPresOrOthers(formData);
 }
 }
 const setChat = (post: any) => {
 dispatch(setChatDetails(
 {
 chatId: post.Id,
 chatIsPrescriber: post.Is_Prescriber == "Y",
 showChat: true,
 chatName: post.AcctFull_Nm
 }))
 window.location.href = "/chat";
 }
 const TemplatesForms = [
 {
 "formId": 1000,
 "formName": "MIR",
 "fieldName": "Question",
 "fieldType": "string",
 "File_Nm": "MIR Form",
 waveId: '1000',
 form: true,
 productId: '1000',
 campaginId: '1000',
 Template_Val: 'As per your request. I have created the MIR form. Please review and submit the form here: [shorturl_1]',
 isForm: true,
 Id: 7000
 }
 ]
 const getTemplatesFromCampign = () => {
 debugger
 getCampaignsData({ page: 0, pageSize: 10 }, (res) => {
 if (res.length > 0) {
 debugger
 let tempAssets: any = [];
 let campaigns: any = [];
 let waves: any = [];
 let products: any = [];
 debugger
 res.map((x: any) => {
 debugger
 campaigns.push(x);
 x.type = "Campaign";
 x.idName = ["type", "CampaignName", "CamapignId"];
 x.labelName = "CampaignName";
 x.childName = "WaveDetails";
 x.WaveDetails.map((y: any) => {
 waves.push(y);
 y.type = "Wave";
 y.idName = ["type", "WaveName", "WaveId"];
 y.labelName = "WaveName";
 y.childName = "ProductDetails";
 //y.CampaignWave_Nm=y.WaveDetails?y.WaveDetails.Wave_Nm:"";
 y.ProductDetails.map((z: any) => {
 z.waveId = y.WaveId;
 products.push(z)
 z.type = "Product";
 z.idName = ["type", "ProductName", "ProductId"];
 z.labelName = "ProductName";
 z.childName = "TemplateDetails";
 z.TemplateDetails.map((p: any) => {
 p.type = "Template";
 p.mainWaveId = (p.AssetDetails.length == 0) ? p.CampaignWaveId : p.AssetDetails[0].CampaignWaveId
 if (p.FormId) {
 p.TemplateName = p.FormName
 }
 p.idName = ["type", "TemplateName", "TemplateId"];
 p.labelName = "TemplateName";
 p.childName = "AssetDetails";
 tempAssets = tempAssets.concat(p.AssetDetails)
 p.AssetDetails.map((o: any) => {
 o.mainItem = true
 o.type = "Asset"
 o.idName = ["type", "AssetFile_Nm", "AssetId"]
 o.labelName = "AssetFile_Nm"
 return o;
 })
 return p;
 //tempAssets.push(y.campaignWaveAsset);
 })
 return z;
 })
 return y;
 });
 return x;
 });
 setCampaign(products)
 let temp = products.length > 0 ? products[0].TemplateDetails : []
 debugger
 setTemplate(temp);
 // getFormsData()
 // setTemplate(tempAssets);
 // setAlllProducts(products);
 // setActiveProducts(products)
 // setAlllWaves(waves);
 // setActiveWaves(waves);
 // setAssets(tempAssets);
 }
 }
 )
 };
 const getFormsData = (waveId) => {
 console.log('hi')
 axios.get('//p360zingformsapi.azurewebsites.net/api/formslist/' + waveId).then((res) => {
 console.log(res.data)
 let d = res.data.map((x) => {
 x['File_Nm'] = x.formName + " Form";
 x.waveId = '1000';
 x.form = true;
 x.productId = '1000';
 x.campaginId = '1000';
 x.Template_Val = '';
 x.Category_Cd = "FRM"
 return x;
 })
 var groupBy = function (xs, key) {
 return xs.reduce(function (rv, x) {
 (rv[x[key]] = rv[x[key]] || []).push(x);
 return rv;
 }, {});
 };
 let temp = groupBy(d, 'formId')
 let data: any = [];
 for (let i in temp) {
 let o: any = temp[i][0];
 o.questions = temp[i];
 data.push(o);
 }
 console.log(data)
 // debugger
 setForms(d);
 // debugger
 })
 }
 // const getTemplatesFromCampign=(activeCampaign:any)=>{
 // axios.get(config.REACT_APP_CAMPAIGN_API_BASE+"/campaign/"+activeCampaign+"?Page="+page+"&PageSize="+pageSize,{headers:{"Authorization":"Bearer "+sessionStorage.getItem('login')}}).then((res)=>{
 // //setAssets(res.data.data);
 // let tempAssets:any=[];
 // console.log(res.data.data)
 // setCampaign(res.data.data)
 // res.data.data.map(x=>{
 // x.refCampaignWaves.map((y:any)=>{
 // tempAssets.push(y.campaignWaveTemplate);
 // return y;
 // });
 // return x;
 // })
 // setTemplateId(tempAssets[0].id)
 // setTemplateText(tempAssets[0].templateVal)
 // setTemplate(tempAssets);
 // })
 // }
 const brandInputdisable = (name, phone, asso_pres) => {
 // console.log(assoPrescName === "" && othersPhone === "", assoPrescName, othersPhone)
 if (formType) {
 if (name && phone && asso_pres) {
 debugger
 setDisableBrandInput(false)
 } else {
 debugger
 setDisableBrandInput(true)
 }
 }
 else {
 setDisableBrandInput(false)
 }
 }
 const setPhoneNumber = (e) => {
 if (e) {
 setOthersPhone(e);
 brandInputdisable((assoPrescName.length > 0), (e.length > 0), (assoPrescName.length > 0));
 } else {
 setOthersPhone("");
 brandInputdisable((assoPrescName.length > 0), false, (assoPrescName.length > 0));
 }
 // debugger
 }
 // const smsInputdisable = (name,phone,asso_pres,brand) =>{
 // if(name && phone && asso_pres && brand){
 // debugger
 // setDisableSmsInput(true)
 // } else {
 // debugger
 // setDisableSmsInput(false)
 // }
 // }
 const setOthersFromList = (x) => {
 setSelecteedOthers(x);
 setOthersName(x.AcctFull_Nm);
 //setOthersPhone(x.AcctPh_Nbr);
 setOthersDataHidden(true);
 if (x.Prescriber) {
 setPrescriber(x.Prescriber);
 }
 setOthersPhone(getNumberFromItem(x));
 brandInputdisable(true, (x.AcctPh_Nbr.length > 0), true)
 }
 const reSetFormInputs = (e) => {
 setSelecteedOthers({});
 // console.log(e)
 setFormType(e)
 // if(e === true){
 // setOthersPhone("");
 // setTemplateText("")
 // setAssoPrescName("");
 // }else{
 setTemplateId(0)
 setAssoPrescName("");
 setAssoPresc({ Id: '' });
 setHiddenPresList(true);
 setDisabled(true);
 setOthersPhone("");
 setDisableBrandInput(true)
 // setTemplate([]);
 setTemplateText("");
 setOthersName("");
 setAssoPrescName("");
 setAssets([]);
 setAssociated({})
 // }
 }
 const selectbrand = (e) => {
 debugger
 setTemplate(e.TemplateDetails ? e.TemplateDetails : [])
 // setRefreshTemplate(true)
 setTemplateText("");
 setTemplateId(0)
 setAssets([]);
 setIsForm(false)
 // getFormsData(1001)
 }
 return (
 <div>
 {/* <Button onClick={handleOpen}>Open modal</Button> */}
 <Modal
 open={show}
 // onClose={handleCloseParent}
 closeAfterTransition
 BackdropComponent={Backdrop}
 BackdropProps={{
 timeout: 500,
 }}
 className="new_chat_modal"
 >
 <Fade in={show}>
 <Box sx={style}>
 <div className="modal-header d-flex">
 <h1 className="font-newchat">New Chat</h1>
 <span onClick={() => { handleCloseParent(); reSetFormInputs(true) }} className="close">
 ×
 </span>
 </div>
 <div className="modal-body new_chat_body">
 <form onSubmit={(e) => e.preventDefault()}>
 <div className="selecttype-radio-btns">
 <FormControl className="width100per">
 <div className="newChatModalBody">
 <FormLabel id="demo-customized-radios">{t('Select Type')}</FormLabel>
 <div className='headerright' >
 <label className="autopilot-switch font-sm me-3">
 <input
 checked={isSMS}
 onChange={(e) => { setIsSms(e.target.checked) }}
 type="checkbox"
 className="font-sm"
 id="msg-wtsappChechedId"
 />
 <span id="msg-wtsapptoggle" className="b-slider b-round"></span>
 </label>
 </div>
 </div>
 <RadioGroup
 row
 defaultValue="prescriber"
 aria-labelledby="demo-customized-radios"
 name="customized-radios"
 onClick={(e: any) => {
 e.target.value === "prescriber"
 ? reSetFormInputs(true)
 : reSetFormInputs(false);
 }}
 >
 <FormControlLabel
 value="prescriber"
 control={<BpRadio />}
 label="Prescriber"
 />
 <FormControlLabel
 value="others"
 control={<BpRadio />}
 label="Others"
 />
 </RadioGroup>
 </FormControl>
 </div>
 <div className="form-fields-div new-chat-prescriber">
 {formType === true ? (
 <AssociatedPresList clearDataOnSelect={false} placeholder={"Search for Prescriber"} label="Prescriber Name" styleClass="inputEnable" setAssoPresc={(e: any) => { setPrescriber(e); }} />
 ) : (
 <div className="NewChatModalOthersName">
 <TextField
 className="roundborder inputEnable"
 onChange={(e) => {
 if (e.target.value.length == 0) {
 setSelecteedOthers({})
 }
 setOthersName(e.target.value);
 }}
 value={othersName}
 label="Recipient Name"
 placeholder="Please enter the recipient name"
 color="secondary"
 focused
 />
 <Paper hidden={othersDatahidden}>
 <div id="presList" >
 {othersData.length > 0 ? (
 othersData.map((x: any) => <div key={x.Id} onClick={() => { setOthersFromList(x) }}>{x.AcctFull_Nm}</div>)
 ) : (
 <div>No Result</div>
 )}
 </div>
 </Paper>
 {/* <div className="othesNameDiv" hidden={othersDatahidden}>
 <ul>
 {
 othersData.map((x:any)=>(
 <li key={x.Id} onClick={()=>{
 setOthersFromList(x);
 
 }}>{x.AcctFull_Nm}</li>
 ))
 }
 
 </ul>
 </div> */}
 </div>
 )}
 <CountryDropdown errorFunc={(e) => { setDisabled(e); setPhoneError(e); if (e) brandInputdisable((assoPrescName.length > 0), false, (assoPrescName.length > 0)); }} disableColored={disableBrandInput} valueNumber={othersPhone} onChangeNumber={(e: any) => { setPhoneNumber(e) }} />
 {formType === false ? (
 <div className="asso-prescriber-div createContactAssociate">
 <h1 className="font-md">Associated Prescriber</h1>
 {
 selectedOthers.Id ?
 <DropdownInupt disableColored={false} keepPlaceHolderAtStart={true} placeHolder="Select a Prescriber" label="" data={selectedOthers.Prescribers} id="" name="AcctFull_Nm" func={(e) => { setAssoPrescName(e.AcctFull_Nm); setAssociated(e) }} />
 :
 <div>
 <AssociatedPresList clearDataOnSelect={true} placeholder={"Search for an Associated Prescriber"} label="" styleClass="inputEnable" setAssoPresc={(e: any) => { brandInputdisable(true, true, true); setAssoPrescName(e.AcctFull_Nm); setAssociated(e) }} />
 {
 optedOut ? <div>
 Recipient Opted Out
 </div> : null
 }
 </div>
 }
 </div>
 ) : null}
 <div>
 <DropdownInupt disableColored={disableBrandInput} keepPlaceHolderAtStart={false} placeHolder="Select a brand" label="Brand" data={campaign} id="" name="ProductName" func={(e) => { selectbrand(e) }} />
 </div>
 <div>
 <DropdownInupt
 //refreshData={refreshTemplate}
 label="SMS Template"
 data={template}
 keepPlaceHolderAtStart={true}
 placeHolder="Select a Template"
 name="TemplateName"
 disableColored={disableBrandInput}
 func={(e) => {
 console.log(e)
 console.log(disabled, e.TemplateId == 0, optedOut)
 setIsForm(e.FormId !== null);
 setTemplateText(e.TemplateBody);
 setTemplateValue(e);
 setTemplateId(e.TemplateId);
 setAssets(e.AssetDetails ? e.AssetDetails : []);
 setSelectForm(e)
 setFormValues(e.FieldDetails)
 }}
 />
 {/* {template.length} {templateText.length} */}
 {templateText.length > 0 ?
 <div className="newchat-floating-form" style={{ display: "block" }}>
 <textarea name="sms-textarea" id="newchat_sms" value={templateText} />
 <p>
 <em>Characters : {templateText.length}</em>
 </p>
 </div>
 : null}
 {
 isForm ?
 <div className="template_body_form">
 <form ref={refForm}>
 {
 formsValues.map((x: any, i: any) => (
 <>
 <p className="para">{x.FieldName}</p>
 <textarea name={x.FieldId} id={x.FieldId} ></textarea>
 </>
 ))
 }
 </form>
 </div>
 : null
 }
 {
 assets.length > 0 ?
 <div
 className="template_assets_form"
 >
 <ul>
 {
 assets.map((x: any) => (
 <li> <a href={x.AssetFile_Url}>{x.AssetFile_Nm}</a> </li>
 ))
 }
 </ul>
 <label htmlFor="">Assets</label>
 </div>
 : null
 }
 </div>
 {/* <br /> */}
 <GenericButton label="Send"
 disable={disabled || templateId == 0 || optedOut}
 loading={loading} onClick={() => {
 sendMessage();
 }} />
 </div>
 </form>
 </div>
 </Box>
 </Fade>
 </Modal>
 </div>
 );
}