@slanglabs/slang-conva-react-native-retail-assistant/components/SlangConvaTrigger.js

The client library for adding and interacting with Slang CONVA's Retail In-App Voice Assistant.

import React from 'react';
import { TouchableOpacity, View, Image, Text } from 'react-native';
import { RetailUserJourney, SlangRetailAssistant } from '..';

class SlangConvaTrigger extends React.Component {
  constructor(props) {
    super(props);
    this.handlePress = this.handlePress.bind(this);
  }

  handlePress() {
    SlangRetailAssistant.startConversation(RetailUserJourney.SEARCH);
  }

  render() {
      const {
          image,
          backgroundColor = "#000000",
          enableCircularBackground = false,
          width,
          height
      } = this.props;

      const containerStyle = {
          width: width || 50,
          height: height || 50,
          borderRadius: enableCircularBackground ? (width || height ? (width || height) / 2 : 25) : 0,
          backgroundColor: enableCircularBackground ? backgroundColor : 'transparent',
          alignItems: 'center',
          justifyContent: 'center',
      };

      const imageStyle = {
          width: '50%',
          height: '50%',
          borderRadius: enableCircularBackground ? (width || height ? (width || height) * 0.35 : 17.5) : 0,
        };

      return (
          <TouchableOpacity activeOpacity={1} onPress={this.handlePress}>
            <View style={containerStyle}>
              {image ? (
                <Image source={image} style={imageStyle} />
              ) : (
              <Image source={require('../images/mic_image.png')} style={imageStyle} />
              )}
            </View>
          </TouchableOpacity>
        );
  }
}

export default SlangConvaTrigger;