React-native-srschat NPM

React Native Instalily Chat

Importing

Installing the package: npm i react-native-srschat

Example Implementation

import React, { useState } from 'react';
import { View, StyleSheet, Button } from 'react-native';
import { Chat } from 'react-native-srschat';

export default function App() {
  const [showIcon, setShowIcon] = useState(true);
  const [toggleChat, setToggleChat] = useState(false);

  const onProductCardClick = (productData) => {
    console.log('Product Card Clicked:', productData);
  };

  const onAddToCartClick = (productData) => {
    console.log('Added to Cart:', productData);
  };

  const data = {
    "customer_code": "HPTA",
    "branch_code": "BELHARR",
    "active_ship_to": 1,
    "branch_full_name": "BEL-AQUA HARRISBURG",
    "customer_token": "eyJraWQiOiIxIiwiYWxnIjoiSFMyNTYifQ.eyJ1aWQiOjExMTM4MCwidXR5cGlkIjozLCJpYXQiOjE3MzkyNzg3MTcsImV4cCI6MTczOTMwNzUxN30.xCFMhmvz-Cdw-fp8O5a6ZS3zWUjueTPUXTUPFsOCDFs"
  }

  const uiConfig = {
    testButtons: false, // show the test buttons for onProductCardClick and onAddToCartClick – defaults to false
    iconType: "button", // "button" or "tab" – defaults to button
    iconPosition: { // ex. button { bottom: 80, right: 20 } tab { bottom: 600, right: 0 } – defaults to { bottom: 80, right: 20 }
      bottom: 80,
      right: 20,
    },
    showIcon: showIcon, // true or false, show the chat icon – no prop defaults to true
    toggleChat: toggleChat // toggle the chat window
  }

  return (
    <>
    <View style={styles.container}>
      <View style={styles.container}>
        <Button title="Toggle Chat" onPress={() => setToggleChat(prev => !prev)}/>
        <Button title="Show Icon" onPress={() => setShowIcon(prev => !prev)} />
      </View>
    </View>
    <Chat
        data={data}
        onProductCardClick={onProductCardClick}
        onAddToCartClick={onAddToCartClick}
        uiConfig={uiConfig}
      />
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    marginTop: 200
  },
});

Example Implementation

With successful integration, you should see the bubble pop up in the bottom right corner of the screen.

Clicking on the bubble will pull up the chat interface. The chat is still in development. There are currently two placeholder buttons that execute the funtions onProductCardClick and onAddToCartClick. These functions will send a product payload.

To Do (HERITAGE)

Create a function for onProductCardClick to navigate to the product page when clicked.
Create a function for onAddToCartClick to add the associated quantity and item to cart.
Pass through the data needed for the chat (listed in the example implementation).