praktice-navigator-react-web-sdk

Praktice-Navigator `React-webSDK`

New Features

Importing SDK and rendering host component
Getting started with $Generator
Available Props to Navigator
SDK Native Component layout
Rendering Custom components in SDK

Minimum required version of react 16.3.x

To use navigator SDK you must have ClientID.

In case you do not have a client ID, please write to contact@praktice.ai

Importing SDK and rendering host component

import { NavigatorSDK } from 'praktice-navigator-react-web-sdk'
export default class App extends React.Component {
  render() {
    return (
        <NavigatorSDK
            clientId = 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX'
        />
    )}
}

This will load SDK with all default UI Component, but can also pass your own component to SDK and render it.

Getting started with `$Generator`

$Generator is required for accessing the dynamic data and methods of SDK, and it can be imported like

import ${Generator} from 'praktice-navigator-react-native-sdk'

every time you invoke $Generator you have to pass request object to generate data from it

Format of requestObject

{
    type: "categoryTitle" 
 	component: Button 
    componentProps: [ 
    	{style: {fontWeight: "bold"}}, //React native style only
        "fullWidth"	//Custom props
    ]
}

key	data type	description
type	string, required	Unique for every component, see in component section
component	class, optional	Data will be wrapped in this component, if it is null then data will be render in it's native component
componentProps	array, optional	Props to the above component, array can only contain either string or object
payload	string/int/array/object	Payload to dynamic method. Please check component documentation for detail.

Example of genrating Symptoms list

var requestObject =  {
     type: "categoryList",
     component:Button,
     componentProps: [
       {style: {fontWeight: "bold"}},
       "fullWidth",
       "bordered"
     ]
 }
 
const ListData = $Generator(requestObject) // return the UI element List

Available props to Navigator

Passing Custom component to NavigatorSDK component

List of Component can be passed to NavigatorSDK

Component (type)	Status	Description
searchComponent	working	Repalces the search component
categoryComponent	working	component in which all symptoms are render
errorMessageComponent	working	This component get render when thier is an error on backend side
showDocBtn	working	In this you can call `$Generator` to obatin the result.
patientInfoQueryComponent	working	Component which collect user data, like age and gender
loader	working	Custom loader inside the sdk

Category Component -

<NavigatorSDK
    clientId = "XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX"
    categoryComponent={CustomCategoryComponent}
    patientInfoQueryComponent={CustomPacientInfoQueryComponent}
    showDocBtn={CustomShowDocComponent}
    errorMessageComponent={CustomErrorComponent}
    loader={CustomLoaderComponent}
/>

Import Autocomplete

Autocomplete can be imported and rendered by the $Generator

const AutoComplete = $Generator({type:"autoComplete"})
 
<AutoComplete
    query={this.state.inputvalue}
      onSelect={(e) => {this.setState({inputvalue: e})}}
    containerStyle={...}
    listStyle={...}
/>

props	type	description
query	string, required	value of input
onSelect	func, required	this callback function will fire when the user will select any suggestion from autocomplete, developer are advised to use this callback to set the value of input
containerStyle	Object, optional	These styles will be applied to the container which surrounds the autocomplete component.
listStyle	Object, optional	These style will be applied to the result list.

Custom Styling of SDK Component

Currently four component support custom styling to the SDK component, but before you proceed to this step, developer's are advised to see the component layout.

See Component Layout

Component	Prop name	Available keys for style object, all keys are optional
SDK Container	sdkContainerStyle	wrapper wrapper_m sectA sectA_m sectA_container sectA_container_m selected selected_m sectB sectB_m search_button_wrapper search_button_wrapper_m search_button search_button_m selectedSymptoms
Category Component	categoryComponentStyle	category_wrapper category_wrapper_m titleCategory titleCategory_m symptoms_wrapper symptoms_wrapper_m symptoms symptoms_m symptoms_selected symptoms_selected_m
Selected SymptomsComponent	selectedSymptomsStyle	Flat style object (no keys, just react style)
selectedSymptomsCrossStyle	selectedSymptomsCrossStyle	Flat style object
Input Component Style	inputComponentStyle	Flat style Object
AutoComplete Component Style	autoCompleteComponentStyle	containerStyle listStyle

<NavigatorSDK
    clientId = ""
    errorComponent={ErrorComponent}
    patientInfoQueryComponent={PacientInfoQuery}
    showDocBtn={CustomShowDocBtn}
    loader={CustomLoaderComponent}
    // Custom Style Object to tune the native component style.
    sdkContainerStyle = {customContainerStyle}
    categoryComponentStyle={customCategoryStyle}
    inputComponentStyle={cusotmInputComponentStyle}
/>
 
 
const customCategoryStyle = {
  symptoms_selected_m: {
    color: "white",
    fontSize: "0.8rem",
    fontWeight: "600",
    fontFamily: "sans-serif",
    cursor: "pointer"
  },
  symptoms_selected: {
    color: "white",
    fontSize: "0.8rem",
    fontWeight: "600",
    background: "red"
  }
};
const customContainerStyle = {
  sectA: {
    background: "red",
    display: "flex",
    height: "-webkit-fill-available",
    padding: "1rem",
    maxWidth: "300px"
  }
};
 
// Flat style object
const customInputComponentStyle = {
  margin: "5px",
  border: "4px solid #efefef"
}

Your style object must comply with the rules of react style object

Utility Props

Props Key	data type	description
patientGender	string `female` or `male`	If this prop is passed to navigator SDK then, SDK will never ask for the patient gender from the user, it will use the provided value when needed.
patientAge	int	If this prop is passed to navigator SDK then, SDK will never ask for the patient age from the user, it will use the provided value when needed.
maximumNumberOfCategories	int	This limits the number of Category to be render.
maximumTermsPerCategories	int	This is limit the numbder of terms/symptoms in one category.
permitEmptySelection	boolean	If set true, then SDK will not disable the SEARCH DOCTORS Button when there is no symptoms selected. and if user clicks without selecting any symptoms SDK will respond with General Physician

Custom Listner for Seacrh Doctors

In some cases, where the related symptoms won't exist (example - treatment like a Muscle Biopsy or condition like Non Hodgkin's Lympoma, SDK would directly invoke the listener if the listner is passed as a prop. Otherwise, in such cases, where no related symptoms exist, SDK would not render any medical terms in the category component.

<NavigatorSDK
  clientId = 'XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX'
  searchDoctorlistner={this.customListner}
>
 
customListner(resultData){
  console.log("Hmm... no more option ..time to navigate to", resultData)
}

Rendering Custom components in SDK

Search Component

This component does not require any dynamic data to render but require only two method from SDK, one to submit the patient query back to SDK and other to render autocomplete

 $Generator({type:"inputSearch",payload: "I have a leg pain"})

For AutComplete

const AutoComplete = $Generator({type:"autoComplete"})
<AutoComplete
  query={this.state.inputvalue}
  onSelect={(e) => {this.setState({inputvalue: e})}}
  containerStyle={...}
  listStyle={...}
/>

props	type	description
query	string, required	value of input
onSelect	func, required	this callback function will fire when the user will select any suggestion from autocomplete, developer are advised to use this callback to set the value of input
containerStyle	Object, optional	These styles will be applied to the container which surrounds the autocomplete component.
listStyle	Object, optional	These style will be applied to the result list.

Category Component

Component Layout

Dynamic data available for this component

Data	type	return type	provides
Category Title	`categoryTitle`	single UI element	Category Title, example: Comman Health Prombelm, Bone & Joint problems
Symptoms List	`categoryList`	List of UI Element	Symptoms List, example: Leg pain, Stress

Getting Dynamic data

const CategoryTitle = $Generator({
   type: "categoryTitle",
   component: Text,
   componentProps: [{ style: { fontWeight: "bold" } }]
 });
const SymptomsList = $Generator({
    type: "categoryList",
    component:Button,
     componentProps: [
          {style: {fontWeight: "bold"}},
          "fullWidth",
          "bordered"
        ]
    })
 
//Rendering the data
//below whole class component is repetitive section as represented in image
export class CategoryComponent extends React.Component{
   render(){
   return(
       <View>
          <CategoryTitle/>
           <SymptomsList/>
       </View>
     )}
  }

Patient Info Component

This component does not require any dynamic data to render but require only one method from SDK to submit the patient data
```
 $Generator({type:"submitPatientInfo",debug:true})(true, "female", "26")
```
Show Doc Button

This component will replace the native button of Show Doctor in SDK, this component does not require any dynamic data to be render but has one method to obtain the result in json format from SDK.

Developer is responsible to navigate further on the basis of result. SDK will not navigate further, and spinner will continue.
```
$Generator({type:"showSpeciality"})
```
Error Component

This component does not require any dynamic data or method from SDK, it will render on screen if any error logs up either on front-end side or on the back-end side

currently there is no provision of detecting the error type, but in future it will have an error code and error message for developer
Loader Component

This Component does not require any dynamic data or method from SDK, it will replace the native loader of SDK.