pk-sp13w-check v1.0.2

Praktice-Navigator React-webSDK

• New Features AutoComplete Custom Styling to SDK Component Pass patientInfo, so that SDK should not ask for it. Limit the number of category and symptoms per category
  • Custom Selected Symptoms Component
  • Custom Listner for Search Doctors
  • Custom Styling to native SDK Component
    • Search Component
    • Selected Symptoms Component
    • Autocomplete Component

Table of contents

• Importing SDK and rendering host component
• Getting started with $Generator
• Available Props to Navigator Passing Custom component to NavigatorSDK component Import Autocomplete Custom Styling of SDK Component Utility Props
  • Custom Listner for Search Doctors
• SDK Native Component layout
• Rendering Custom components in SDK Search Component Category Component Selected Symptoms Component Patient Info Query Component Show Doctors Button Error Component * Loader Component

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
    ]
}

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={...}
/>

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

<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

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.