@jescon-technologies/react-native-ui-kit 0.0.4 → 0.0.6

package/src/CustomComponents/CNotesInstructions.js

@@ -0,0 +1,1000 @@
+import React, { useState, useEffect, useContext, memo } from 'react';
+import { Text, View, StyleSheet, TouchableOpacity, TextInput, ScrollView, ActivityIndicator, Dimensions } from 'react-native';
+import { colors } from '../CommonStyle/commonStyle';
+import ComponentStyles, { normalize } from '../CommonStyle/componentStyle';
+import popupStyles, { getPopupHeadingOptionText, getPopupTextAreaContainer, getPopupTextAreaChildContainer, getPopupTextAreaStyle } from '../CommonStyle/PopupStyle';
+import CMultiSelect from './CMultiSelect';
+import { APIURL } from '../../../../../src/Common/apiConstants';
+import Entypo from 'react-native-vector-icons/Entypo';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
+import { Global } from '../../../../../src/Common/Global';
+import { getLoading, isBNUL, isNU, isNUQ, notifyMessage, ValueCheck } from '../CommonStyle/ComponentFunctions';
+import { Icons } from '@jescon-technologies/react-native-ui-kit';;
+import CAwesomeButton from './CAwesomeButton';
+import Loader from '../Custom/Loader';
+import STimingSwitch from '../StaticComponents/STimingSwitch';
+import EmrResponseComponentContext from '../Handlers/emrResponseComponentContext';
+import HOCIcons from '../HOC/HOCIcons';
+
+function CNotesInstructions(props) {
+
+  const { responseJSON, setResponseJSON } = useContext(EmrResponseComponentContext);
+  const [displayText, setDisplayText] = useState(true);
+  const { width, height } = Dimensions.get('window');
+  const [data, setData] = useState(props.data);
+
+  const [isShow, setIsShow] = useState(false);
+  const [additionalNote, setAdditionalNote] = useState();
+  const [isMsgShow, setIsMsgShow] = useState(false);
+  const [msg, setMsg] = useState();
+  const [stage, setStage] = useState(2); // FAV
+  const [displayData, setDisplayData] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [refresh, setRefresh] = useState(0);
+  const [checked, setChecked] = useState(false);
+  const [editStatus, setEditStatus] = useState(false);
+
+  const defaultdata = {
+    editstatus: false,
+    editmode: false,
+    favorite: false,
+    savetext: '',
+    savecode: 0,
+    temptext: '',
+    deletestatus: false,
+  };
+
+  const [createMode, setCreateMode] = useState(defaultdata);
+
+  useEffect(() => {
+    NotesInstructionRetrieve();
+  }, []);
+
+
+  // useEffect(() => {
+  //   setData(props.data)
+  //   if (props.primarydata && props.primarydata.datavalue != 0 && props.primarydata.displayvalue != null) {
+  //     setStage(3)
+  //     setAdditionalNote(props.primarydata.displayvalue)
+  //   }
+  //   else {
+  //     setStage(2);
+  //   }
+  //   if (props.data.key == 2) {
+  //     setStage(3)
+  //   }
+  //   else {
+  //     NotesInstructionRetrieve()
+  //   }
+  // }, []);
+
+  function removeSelected() {
+    if (data.name == 'Notes') {
+      var temp = data.NotesArray;
+      var indexX = temp.findIndex(sitem => sitem.datavalue === props.primarydata.datavalue);
+      temp.splice(indexX, 1);
+      setData({ ...data, ['NotesArray']: temp });
+    }
+    else if (data.name == 'Instructions') {
+      var temp = data.InstructionsArray;
+      var indexX = temp.findIndex(sitem => sitem.datavalue === props.primarydata.datavalue);
+      temp.splice(indexX, 1);
+      setData({ ...data, ['InstructionsArray']: temp });
+    }
+  }
+
+  function NotesInstructionRetrieve() {
+
+    setStage(2);
+    setIsLoading(true);
+    let nature = "'" + data.nature + "'" + ',' + Global.userData.suuser;
+
+    let api = props.data.buttonapi != undefined ? props.data.buttonapi : props.selectionapi;
+
+    console.log('api........',props.data.buttonapi);
+
+    const splitArray = api.split(',');
+
+    splitArray.push(nature);
+
+    let savebuttonapi = splitArray.join();
+
+    let buttonapi = props.data.name == 'Notes' || props.data.name == 'Instructions' ? savebuttonapi : props.data.buttonapi;
+
+    var tempString = [];
+
+    let saveapi;
+
+    if (props.data.name == 'Notes' || props.data.name == 'Instructions') {
+
+      props.data.name == 'Notes' ?
+        isBNUL(data.NotesArray) ? data.NotesArray.map((item, i) => {
+          tempString.push(item.datavalue);
+        }) : null
+        : props.data.name == 'Instructions' ?
+          isBNUL(data.InstructionsArray) ? data.InstructionsArray.map((item, i) => {
+            tempString.push(item.datavalue);
+          }) : null
+          : null;
+
+      // var ValueString = tempString.length > 0 ? tempString.toString() : '0';
+      var ValueString = '0';
+
+      const splitApi = buttonapi.split(',');
+
+      splitApi[1] = "'" + ValueString + "'";
+
+      saveapi = splitApi.join();
+
+    }
+    else {
+      props.data.name == 'Infection Control' ?
+        isBNUL(data.infectioncontrol) ? data.infectioncontrol.map((data, i) => {
+          tempString.push(data.datavalue);
+        })
+          : null
+        : null;
+      // var ValueString = tempString.length > 0 ? tempString.toString() : '0';
+      var ValueString = '0';
+      saveapi = buttonapi + " '" + ValueString + "'";
+    }
+    setDisplayData([]);
+    console.log('NotesInstructionRetrieve.....................', JSON.stringify(APIURL + saveapi));
+
+    NetworkServiceCall('get', APIURL + saveapi, '').then(function (response) {
+      if (response.httpstatus == 200) {
+        setDisplayData(response.data.data);
+        setDisplayText(true);
+        setIsLoading(false);
+
+      } else {
+        setDisplayData(null);
+        setDisplayText(false);
+        setIsLoading(false);
+
+      }
+    });
+
+    getLoading(v => setIsLoading(false));
+
+  }
+
+  function getArray(params) {
+    // console.log("PARAMSSSSSSSSSSSSSS JSONNNNNNNNNNNNN",JSON.stringify(params))
+    switch (params.name) {
+      case 'Notes': return params.NotesArray != undefined ? params.NotesArray : [];
+      case 'Instructions': return params.InstructionsArray != undefined ? params.InstructionsArray : [];
+    }
+  }
+
+  function RetrieveAll() {
+
+    setStage(4);
+    setIsLoading(true);
+    let nature = "'" + data.nature + "'" + ',' + Global.userData.suuser;
+
+    let api = data.buttonapi != undefined ? data.buttonapi : props.selectionapi;
+    console.log('apiiiiiiiiiiiiiiii', JSON.stringify(api));
+
+    const splitArray = api.split(',');
+    splitArray.push(nature);
+    let savebuttonapi = splitArray.join();
+    console.log('RetrieveAll..............', JSON.stringify(APIURL + savebuttonapi));
+    setDisplayData([]);
+
+    NetworkServiceCall('get', APIURL + savebuttonapi, '')
+      .then(function (response) {
+        if (response.httpstatus == 200
+          && response.data != undefined
+          && response.data.data != undefined
+          && response.data.data.length > 0) {
+
+          // if (ValueCheck(props.data) && props.data.length > 0) {
+          //   var results = response.data.data.map((item) => {
+          //     getArray(props.data).map((xxx) => {
+          //       if (item.datavalue == xxx.datavalue) {
+          //         item.selected = true
+          //       }
+          //     })
+          //   })
+          // }
+
+          setDisplayData(response.data.data);
+          setDisplayText(false);
+          setIsLoading(false);
+
+        } else {
+          setDisplayData(null);
+          setDisplayText(true);
+          setIsLoading(false);
+        }
+      });
+
+    getLoading(v => setIsLoading(false));
+
+  }
+
+  function saveInfectionControl() {
+    var tempString = [];
+    data.infectioncontrol &&
+      data.infectioncontrol != null &&
+      data.infectioncontrol != undefined &&
+      data.infectioncontrol.length > 0
+      ? data.infectioncontrol.map((data, i) => {
+        tempString.push(data.datavalue);
+      })
+      : null;
+    var ValueString = tempString.length > 0 ? tempString.toString() : '0';
+    // if (ValueString != null && ValueString != undefined) {
+    setIsLoading(true);
+    let buttonapi =
+      'emrinstructions/updateinfectioncontrol/' +
+      data.homrpatientchart +
+      '/' +
+      ValueString;
+    NetworkServiceCall('get', APIURL + buttonapi, '').then(function (
+      response,
+    ) {
+      if (response.httpstatus == 200) {
+        props.visibility(false);
+        notifyMessage('Data Saved!!!', 1);
+        setIsLoading(false);
+      } else {
+        props.visibility(false);
+        setIsLoading(false);
+        //alert("Request Failed!")
+        notifyMessage('Data Not Saved!!!', 2);
+      }
+    });
+
+    getLoading(v => setIsLoading(false));
+    // }
+  }
+
+  function saveData(deletestatus) {
+
+    if (isNUQ(createMode.savetext)) {
+
+      let url = APIURL + 'commontemplatesave/RnCommonTemplateSave';
+
+      let dataset1 = {
+        groups: {
+          hosumrclassificationnature: props.arguments,
+          notesinstruction: createMode.savetext,
+          nature: createMode.favorite ? 'G' : data.nature,
+          editstatus: deletestatus ? 3 : createMode.editmode ? 2 : 1, // 1 insertion, 2 - updation , 3 - deletion
+          datavalue: createMode.editmode ? createMode.savecode : 0,
+          noteorinstruction: data.name == 'Notes' ? 1 : 2,
+          suuser: Global.userData.suuser,
+          // editstatus: editStatus ? 1 : 0,
+        },
+      };
+
+      let dataset2 = {
+        infectioncontroldetail: {
+          code: 0,
+          suavailability: 1,
+          infectioncontrol: createMode.savetext,
+          informationmode: 11111,
+          communicationmode: 11111,
+          remarks: 'Infection Control Added',
+          flag: 1,
+          suuser: Global.userData.suuser,
+        },
+      };
+
+      var params = data.name == 'Notes' || data.name == 'Instructions' ? dataset1 : dataset2;
+
+      setIsLoading(true);
+      params.groups.procedurename = data.name == 'Notes' ? 'hosumrnotes1' : 'hosumrinstruction1';
+
+      console.log('saveData', JSON.stringify(params, null, 2));
+      console.log('url...............', url);
+
+      NetworkServiceCall('post', url, params).then(function (response) {
+        if (response.httpstatus == 200) {
+
+          if (createMode.favorite) { // favourite turned on
+            setStage(2); // FAV Screen
+            NotesInstructionRetrieve();
+          }
+          else {
+            setStage(4); // ALL Screen
+            RetrieveAll();
+          }
+
+        } else {
+
+          setIsLoading(false);
+          setIsMsgShow(true);
+          setMsg(response.data.alertdata.alertMessage);
+          setTimeout(() => {
+            setIsMsgShow(false);
+          }, 2000);
+
+        }
+      });
+      getLoading(v => setIsLoading(false));
+
+    } else {
+
+      setIsMsgShow(true);
+      setMsg('Null cannot be save...Please type');
+      setTimeout(() => {
+        setIsMsgShow(false);
+      }, 2000);
+    }
+    Global.EditStatus = 1;
+    responseJSON.consultationEdit.editStatus = true;
+  }
+
+  function deSelectItem(item) {
+
+    console.log('>>>>>>>>>>>>>>>>>>>>>>>>>INS', JSON.stringify(displayData));
+
+    Global.EditStatus = 1;
+    responseJSON.consultationEdit.editStatus = true;
+    // props.IconColour(true);
+    var tempString = [];
+    var ValueString = '';
+    if (data.name == 'Notes') {
+      var temp = data.NotesArray;
+      var indexX = temp.findIndex(sitem => sitem.datavalue === item.datavalue);
+      temp.splice(indexX, 1);
+      setData({ ...data, ['NotesArray']: temp });
+      var tempArray = ValueCheck(displayData) ? displayData : [];
+      var indexXX = tempArray.findIndex(
+        sitem => sitem.datavalue === item.datavalue,
+      );
+      indexXX != -1 ? (tempArray[indexXX].selected = false) : null;
+      setDisplayData(tempArray);
+      data.NotesArray &&
+        data.NotesArray.map((data, i) => {
+          tempString.push(data.datavalue);
+          var str = tempString.join();
+          ValueString = str.toString();
+        });
+      data.value = ValueString;
+      setData({ ...data, ['value']: ValueString });
+    } else if (data.name == 'Instructions') {
+      var temp = data.InstructionsArray;
+      var indexX = temp.findIndex(sitem => sitem.datavalue === item.datavalue);
+      temp.splice(indexX, 1);
+      setData({ ...data, ['InstructionsArray']: temp });
+      var tempArray = ValueCheck(displayData) ? displayData : [];
+      var indexXX = tempArray.findIndex(
+        sitem => sitem.datavalue === item.datavalue,
+      );
+      indexXX != -1 ? (tempArray[indexXX].selected = false) : null;
+      setDisplayData(tempArray);
+      data.InstructionsArray &&
+        data.InstructionsArray.map((data, i) => {
+          tempString.push(data.datavalue);
+          var str = tempString.join();
+          ValueString = str.toString();
+        });
+      data.value = ValueString;
+      setData({ ...data, ['value']: ValueString });
+    } else {
+      var temp = data.infectioncontrol;
+      var indexX = temp.findIndex(sitem => sitem.datavalue === item.datavalue);
+      temp.splice(indexX, 1);
+      setData({ ...data, ['infectioncontrol']: temp });
+      var tempArray = ValueCheck(displayData) ? displayData : [];
+      if (tempArray != null && tempArray != undefined) {
+        var indexXX = tempArray.findIndex(
+          sitem => sitem.datavalue === item.datavalue,
+        );
+        indexXX != -1 ? (tempArray[indexXX].selected = false) : null;
+        setDisplayData(tempArray);
+      }
+      data.infectioncontrol &&
+        data.infectioncontrol.map((data, i) => {
+          tempString.push(data.datavalue);
+          var str = tempString.join();
+          ValueString = str.toString();
+        });
+      data.value = ValueString;
+      setData({ ...data, ['value']: ValueString });
+    }
+  }
+
+  function getcontainerStyle() {
+    return {
+      ...layoutstyles.component_container,
+      borderWidth: 0,
+      paddingTop: height * 0.005,
+      paddingBottom: height * 0.005,
+    };
+  }
+
+  function ForIConColor(val) {
+    props.IconColour(true);
+  }
+
+  function displaySelectedItems(data) {
+    //TO display Selected Items
+    let displaydata =
+      data.NotesArray && data.NotesArray.length > 0
+        ? data.NotesArray
+        : data.InstructionsArray &&
+          data.InstructionsArray.length > 0
+          ? data.InstructionsArray
+          : data.infectioncontrol;
+    // let displaydata = data.InstructionsArray
+    return (
+      <View style={{}}>
+        <View style={layoutstyles.display_selectedItems_container}>
+          {
+            // data.NotesArray && data.NotesArray.map((block, i) => {
+            displaydata &&
+            displaydata.map((block, i) => {
+              // if(block.displayvalue != null && block.displayvalue != undefined){
+              return (
+                <View key={i}>
+                  <View style={{ width: '90%', flexDirection: 'row' }}>
+
+                    <View style={{
+                      borderWidth: 0.5, width: Dimensions.get('screen').width - normalize(44), marginBottom: normalize(5), borderRadius: normalize(7),
+                      paddingHorizontal: normalize(0), flexDirection: 'row', alignItems: 'center',
+                    }}>
+
+                      <Icons.FontAwesome5
+                        name="dot-circle"
+                        color={Global.AppTheme.primary_color}
+                        size={normalize(15)}
+                        style={{ paddingHorizontal: normalize(5) }}
+                      />
+
+                      <Text style={{ textAlign: 'left', width: '90%' }}>
+                        {block.displayvalue}
+                      </Text>
+                    </View>
+
+                    <View style={layoutstyles.display_selectedItems_view}>
+                      <TouchableOpacity
+                        style={layoutstyles.close_Image_View}
+                        onPress={() => deSelectItem(block)}>
+                        <View style={layoutstyles.close_Image}>
+                          <Icons.Entypo
+                            name="trash"
+                            color="red"
+                            size={normalize(15)}
+                          />
+                        </View>
+                      </TouchableOpacity>
+                    </View>
+                  </View>
+                </View>
+              );
+              // }
+            })
+          }
+        </View>
+      </View>
+    );
+  }
+
+
+
+  function getAllTabFunctions(key) {
+    switch (key) {
+      case 'CNI01':
+        saveData(false);
+        break;
+      case 'CNI02':
+
+        // setAdditionalNote('');
+        setCreateMode(prevstate => {
+          const updatejson = {
+            ...prevstate,
+            savetext: '',
+          };
+          return updatejson;
+        });
+        break;
+      case 'CNI03':
+        saveData(true);
+        break;
+    }
+  }
+
+  function MainOnPress(item) {
+
+    if (item.stage == 2) {
+      NotesInstructionRetrieve();
+    }
+    else if (item.stage == 4) {
+      RetrieveAll();
+    }
+    else if (item.stage == 3) {
+      setCreateMode(defaultdata);
+      setStage(3);
+    }
+  }
+
+  return (
+    <View style={{ flex: 1, width: '100%', borderWidth: 0 }}>
+      <Text style={{ alignSelf: 'center', fontSize: normalize(12), fontWeight: 'bold', marginBottom: normalize(2), color: Global.AppTheme.primary_color }}>
+        {ValueCheck(responseJSON) &&
+          ValueCheck(responseJSON.consultationEdit) &&
+          ValueCheck(responseJSON.consultationEdit.heading) ?
+          responseJSON.consultationEdit.heading : ''}
+        {' '}
+        {ValueCheck(data) && ValueCheck(data.name) ? data.name.toUpperCase() : data.name}
+      </Text>
+      <View
+        style={{
+          width: '100%',
+          borderRadius: 5,
+          height: normalize(45),
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'space-evenly',
+          marginVertical: normalize(5),
+        }}>
+        {[{
+          'display': 'FAV',
+          'stage': 2,
+          'color': '#eaf2ff',
+          'iconname': 'heart',
+          'shadowcolor': '#fff',
+        },
+        {
+          'display': ValueCheck(data) && ValueCheck(data.name) ? data.name.toUpperCase() : data.name,
+          'stage': 4,
+          'color': '#eaf2ff',
+          'iconname': 'menu',
+          'shadowcolor': '#fff',
+        },
+        {
+          'display': 'CREATE',
+          'stage': 3,
+          'color': '#eaf2ff',
+          'iconname': 'add-to-list',
+          'shadowcolor': '#fff',
+        },
+        ].map((item, i) => {
+          return (
+            <TouchableOpacity
+              key={i}
+              onPress={() => {
+                MainOnPress(item);
+              }}
+              style={{
+                borderRadius: 7,
+                borderWidth: 1,
+                height: normalize(40),
+                width: normalize(55),
+                backgroundColor: stage == item.stage ? item.color : '#fff',
+                borderColor: stage == item.stage ? '#eaf2ff' : Global.AppTheme.primary_color,
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: 0,
+                elevation: 2,
+                shadowColor: '#000',
+                shadowOffset: { width: 0, height: 2 },
+                shadowOpacity: 0.1,
+                shadowRadius: 2,
+              }}
+            >
+              <View style={{
+                flex: 1,
+                alignItems: 'center',
+                justifyContent: 'center',
+              }}>
+                <Icons.Entypo
+                  name={item.iconname}
+                  style={{ paddingRight: 0 }}
+                  color={Global.AppTheme.primary_color}
+                  size={normalize(20)}
+                />
+                <Text adjustsFontSizeToFit numberOfLines={1} style={{
+                  color: Global.AppTheme.primary_color,
+                  fontSize: normalize(10),
+                  fontWeight: stage == item.stage ? 'bold' : 'normal',
+                  textAlign: 'center',
+                }}>
+                  {item.display}
+                </Text>
+              </View>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+
+      <View style={{ flex: 1, borderWidth: 0 }}>
+        {stage == 2 ? ( // FAV
+
+          <View style={{ flex: 1, borderWidth: 0 }}>
+            {isBNUL(displayData) ?
+              <CMultiSelect
+                component={data}
+                searchableData={displayData}
+                singlecallBack={(i, items) => {
+                  setDisplayData(prevstate => {
+                    const updatejson = [...prevstate];
+
+                    const findindex = updatejson.findIndex(item => item.datavalue === items.datavalue);
+
+                    updatejson[findindex] = {
+                      ...updatejson[findindex],
+                      selected: !updatejson[findindex].selected,
+                    };
+                    return updatejson;
+                  });
+                }}
+                selectCallBack={(val) => {
+                  props.notesSelectCallBack(displayData);
+                  props.visibility(false);
+                }}
+                editCallBack={(val) => {
+
+                  let prevcodearray = displayData.filter((i, k) => { return i.selected ? { ...i } : undefined; });
+                  let prevcode = isBNUL(prevcodearray) ? prevcodearray[0] : null;
+
+                  setCreateMode(prevstate => {
+                    const updatejson = {
+                      ...prevstate,
+                      editmode: true,
+                      editstatus: false,
+                      favorite: stage == 2 ? true : false,
+                      savetext: isNU(prevcode) ? prevcode.displayvalue : '',
+                      savecode: isNU(prevcode) ? prevcode.datavalue : '',
+                      temptext: isNU(prevcode) ? prevcode.displayvalue : '',
+                    };
+                    return updatejson;
+                  });
+                  setStage(3);
+                }}
+              />
+              : null}
+          </View>
+
+        ) : stage == 3 ? ( // CREATE
+
+          <View style={{ flex: 1 }}>
+            <ScrollView keyboardShouldPersistTaps="handled">
+              <View style={{}}>
+                {/* <ScrollView
+                  keyboardShouldPersistTaps="handled"
+                  style={{ flex: 1 }}
+                  contentContainerStyle={{
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}>
+                  {(
+                    data.NotesArray &&
+                    data.NotesArray != null &&
+                    data.NotesArray != undefined
+                  ) ||
+                    (
+                      data.InstructionsArray &&
+                      data.InstructionsArray != null &&
+                      data.InstructionsArray != undefined
+                    ) ||
+                    (
+                      data.infectioncontrol &&
+                      data.infectioncontrol != null &&
+                      data.infectioncontrol != undefined
+                    ) ? (
+                    displaySelectedItems(props.data)
+                  ) : (
+                    <View style={{ paddingTop: 50 }}>
+                      <Text style={[ComponentStyles.no_data_found_text]}>
+                        No data..Please Add {data.name}{' '}
+                      </Text>
+                    </View>
+                  )}
+                </ScrollView> */}
+
+                <View
+                  style={{
+                    position: 'absolute',
+                    bottom: normalize(-5),
+                    width: '100%',
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                  }}>
+                  {props.data.name == 'Infection Control' ? (
+                    <TouchableOpacity style={{
+                      justifyContent: 'center',
+                      borderRadius: 10,
+                      alignItems: 'center',
+                      paddingHorizontal: normalize(10),
+                    }}
+                      onPress={() => saveInfectionControl()}
+                    >
+                      <View style={{
+                        flexDirection: 'column',
+                        backgroundColor: '#f7f4f4',
+                        borderRadius: 10,
+                        paddingHorizontal: normalize(5),
+                        paddingVertical: normalize(0),
+                        alignItems: 'center',
+                      }}>
+                        <Entypo
+                          name="save"
+                          color={Global.AppTheme.primary_color}
+                          size={normalize(20)}
+                        />
+                        <Text
+                          style={{
+                            fontSize: normalize(11),
+                            color: Global.AppTheme.primary_color,
+                            fontWeight: 'bold',
+                          }}>
+                          {' '}
+                          {'Save'}
+                        </Text>
+                      </View>
+                    </TouchableOpacity>
+                  ) : null}
+                </View>
+              </View>
+
+              <View style={{ flex: 1, alignSelf: 'center' }}>
+                <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', borderWidth: 0 }}>
+                  <Text style={{ fontWeight: '300', fontSize: normalize(12), color: 'black', borderWidth: 0, flex: 1 }}>
+                    {createMode.editmode ? 'Edit' : 'Create'}
+                    {' '}
+                    {ValueCheck(data) && ValueCheck(data.name) ? data.name.slice(0, -1) : null}
+                    {' '}
+                    {createMode.editmode && isNUQ(createMode.temptext) ?
+                      <Text style={{ fontWeight: '400' }}>
+                        {' - '}{createMode.temptext}
+                      </Text>
+                      : null}
+                  </Text>
+                  <View style={{ flexDirection: 'row', alignSelf: 'flex-start' }}>
+                    {data.name == 'Notes' || data.name == 'Instructions' ? (
+                      <TouchableOpacity
+                        onPress={() => {
+                          setCreateMode(prevstate => {
+                            const updatejson = {
+                              ...prevstate,
+                              favorite: !prevstate.favorite,
+                              editstatus: true,
+                            };
+                            return updatejson;
+                          });
+                        }}
+                        style={{
+                          width: normalize(40),
+                          justifyContent: 'center',
+                          alignItems: 'center',
+                        }}>
+                        <HOCIcons.Fontisto
+                          name={createMode.favorite ? 'toggle-on' : 'toggle-off'}
+                          size={normalize(30)}
+                          color={createMode.favorite ? 'green' : '#646464'}
+                        // style={{ textAlign: 'center', borderWidth: 0, }}
+                        />
+                        <Text numberOfLines={1} adjustsFontSizeToFit style={{ bottom: normalize(-3), position: 'absolute', color: Global.AppTheme.primary_color, fontSize: normalize(9), textAlign: 'center', fontWeight: 'bold' }}>Favourite</Text>
+                      </TouchableOpacity>
+                    ) : null}
+                  </View>
+                </View>
+
+                {isLoading ? null : (
+                  isMsgShow ?
+                    <Text style={ComponentStyles.errorMsgText}>
+                      {msg}
+                    </Text> : null
+                )}
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    borderWidth: 0.7,
+                    borderColor: 'black',
+                    width: '90%',
+                    justifyContent: 'flex-start',
+                    alignItems: 'center',
+                    borderRadius: 7,
+                    marginBottom: height * 0.003,
+                    height: height * 0.30,
+                    backgroundColor: '#fff',
+                    marginTop: normalize(5),
+                  }}>
+                  <TextInput
+                    placeholder={'Type Here'}
+                    keyboardType={'default'}
+                    multiline={true}
+                    numberOfLines={5}
+                    placeholderTextColor={'lightgray'}
+                    onChangeText={changevalue =>
+
+                      setCreateMode(prevstate => {
+                        const updatejson = {
+                          ...prevstate,
+                          editstatus: true,
+                          savetext: changevalue,
+                        };
+                        return updatejson;
+                      })
+                    }
+                    value={createMode.savetext}
+                    style={getPopupTextAreaStyle(width, height)}
+                  />
+                </View>
+              </View>
+            </ScrollView>
+
+            <View style={{ flexDirection: 'row' }}>
+              {[
+                {
+                  'displaytext': 'Save',
+                  'fontcolor': Global.AppTheme.primary_color,
+                  'shadowcolor': '#fff',
+                  'size': 10,
+                  'iconname': 'save',
+                  'iconcolor': Global.AppTheme.primary_color,
+                  'selected': false,
+                  'visibility': createMode.editstatus && isNUQ(createMode.savetext) ? true : false,
+                  'iconsize': 20,
+                  'functionid': 'CNI01',
+                },
+                {
+                  'displaytext': 'Delete',
+                  'fontcolor': 'red',
+                  'shadowcolor': '#fff',
+                  'size': 10,
+                  'iconname': 'trash-alt',
+                  'iconcolor': Global.AppTheme.primary_color,
+                  'selected': false,
+                  'visibility': createMode.editmode ? true : false,
+                  'iconsize': 20,
+                  'functionid': 'CNI03',
+                },
+                {
+                  'displaytext': 'Clear',
+                  'fontcolor': Global.AppTheme.primary_color,
+                  'shadowcolor': '#fff',
+                  'size': 10,
+                  'iconname': 'eraser',
+                  'iconcolor': Global.AppTheme.primary_color,
+                  'selected': false,
+                  'visibility': isNUQ(createMode.savetext) ? true : false,
+                  'iconsize': 20,
+                  'functionid': 'CNI02',
+                },
+              ].map((item, i) => {
+                return item.visibility ?
+                  (
+                    <View key={i} style={{ borderRadius: normalize(10), paddingLeft: normalize(10) }}>
+                      <CAwesomeButton
+                        data={item}
+                        callBack={val => val == undefined ? null : getAllTabFunctions(item.functionid)}
+                      />
+                    </View>)
+                  : null;
+              })}
+            </View>
+          </View>
+
+        ) : stage == 4 ? ( // ALL
+
+          <View style={{ borderWidth: 0, flex: 1 }}>
+            {isBNUL(displayData) ?
+              <CMultiSelect
+                component={data}
+                searchableData={displayData}
+                singlecallBack={(i, items) => {
+                  setDisplayData(prevstate => {
+                    const updatejson = [...prevstate];
+
+                    const findindex = updatejson.findIndex(item => item.datavalue === items.datavalue);
+
+                    updatejson[findindex] = {
+                      ...updatejson[findindex],
+                      selected: !updatejson[findindex].selected,
+                    };
+                    return updatejson;
+                  });
+                }}
+                selectCallBack={(val) => {
+                  props.notesSelectCallBack(displayData);
+                  props.visibility(false);
+                }}
+                editCallBack={(val) => {
+
+                  let prevcodearray = displayData.filter((i, k) => { return i.selected ? { ...i } : undefined; });
+                  let prevcode = isBNUL(prevcodearray) ? prevcodearray[0] : null;
+
+                  setCreateMode(prevstate => {
+                    const updatejson = {
+                      ...prevstate,
+                      editstatus: false,
+                      editmode: true,
+                      favorite: stage == 2 ? true : false,
+                      savetext: isNU(prevcode) ? prevcode.displayvalue : '',
+                      savecode: isNU(prevcode) ? prevcode.datavalue : '',
+                      temptext: isNU(prevcode) ? prevcode.displayvalue : '',
+                    };
+                    return updatejson;
+                  });
+
+                  setStage(3);
+                }}
+              />
+              : null}
+          </View>
+
+        )
+          : null}
+      </View>
+      {isLoading ?
+        <Loader displaytext={true} />
+        : null}
+    </View>
+  );
+
+}
+export default memo(CNotesInstructions);
+
+const layoutstyles = StyleSheet.create({
+  display_selectedItems_container: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    overflow: 'hidden',
+  },
+  component_container: {
+    flexDirection: 'row',
+    borderWidth: 0.5,
+    borderColor: colors.color_componentBordercolor,
+    borderRadius: 7,
+    margin: 2,
+    marginRight: 5,
+    // backgroundColor:'red'
+  },
+  display_selectedItems_view: {
+    padding: 2,
+    justifyContent: 'center',
+  },
+  close_Image_View: {
+    width: '100%',
+    alignItems: 'flex-end',
+  },
+  close_Image: {
+    width: normalize(22),
+    height: normalize(22),
+    justifyContent: 'center',
+    borderRadius: 90,
+    borderColor: 'black',
+  },
+  display_selectedItems_Text: {
+    fontSize: normalize(14),
+    color: colors.color_componentText,
+    textAlign: 'justify',
+  },
+});
+
+{
+  /**
+To select the Notes or Instructions
+Stage 1- To Display selected items
+stage 2- To list the Items
+stage 3- can add a new item
+  {
+    "display": "FAV",
+    "stage": 2,
+    "color": "#eaf2ff",
+    "iconname": "heart",
+    "shadowcolor": "#fff"
+  },
+  {
+    "display": "ALL",
+    "stage": 4,
+    "color": "#eaf2ff",
+    "iconname": "menu",
+    "shadowcolor": "#fff"
+  },
+  {
+    "display": "CREATE",
+    "stage": 3,
+    "color": "#eaf2ff",
+    "iconname": "add-to-list",
+    "shadowcolor": "#fff"
+  }
+*/
+}