Embed PVA to Mobile Apps Using React Native

import React, {useEffect, useState} from 'react';
import {WebView} from 'react-native-webview';
import {CustomTabs} from 'react-native-custom-tabs';
import { Button, SafeAreaView, ScrollView, StatusBar, StyleSheet, useColorScheme, View } from 'react-native';

const botName = 'Sugarplum';
const botID = '';
const tenantId = '';
const theURL = `https://powerva.microsoft.com/api/botmanagement/v1/directline/directlinetoken?botId=${botID}`;


const openPVA = () =>{
 CustomTabs.openURL('http://10.0.2.2:5000/').then((launched: {boolean: any}) => {
 console.log(`Launched custom tabs: ${launched}`);
 }).catch((err: any) => {
 console.error(err)
 });
}

const webChatHTML = () => {
const scriptPVA = `
 <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
 <script>
 const styleOptions = {
 // Add styleOptions to customize web chat canvas
 hideUploadButton: true
 };

 // Add your BOT ID below
 var theURL = '${theURL}';

 const store = window.WebChat.createStore(
 {},
 ({ dispatch }) => next => action => {
 if (action.type === "DIRECT_LINE/CONNECT_FULFILLED") {
 dispatch({
 meta: {
 method: "keyboard",
 },
 payload: {
 activity: {
 channelData: {
 postBack: true,
 },
 //Web Chat will show the 'Greeting' System Topic message which has a trigger-phrase 'hello'
 name: 'startConversation',
 type: "event"
 },
 },
 type: "DIRECT_LINE/POST_ACTIVITY",
 });
 }
 return next(action);
 }
 );
 fetch(theURL)
 .then(response => response.json())
 .then(conversationInfo => {
 window.WebChat.renderWebChat(
 {
 directLine: window.WebChat.createDirectLine({
 token: conversationInfo.token,
 }),
 store: store,
 styleOptions: styleOptions
 },
 document.getElementById('webchat')
 );
 })
 .catch(err => console.error("An error occurred: " + err));
 </script>`;

const pvaStyle = `
 <style>
 html,
 body {
 height: 100%;
 }
 body {
 margin: 0;
 }

 .css-o3xlyv {
 background-color: #F2F7FF;
 font-family: Segoe UI;
 font-style: normal;
 font-weight: 400;
 font-size: 14px;
 line-height: 20px;
 border: none;
 border-radius: 4px;
 }

 .css-mhj5i1:not(.from-user){
 border: none;
 }

 .css-mhj5i1.from-user{
 border: none;
 }

 .from-user .css-o3xlyv {
 background-color: #F3F2F1;
 }

 .main{
 margin: 18px;
 border-radius: 4px;
 }
 .css-eycyw2{
 background-image: url(/images/cloud-background.png);
 background-repeat: no-repeat;
 background-size: cover;
 background-attachment: fixed;
 background-position: center;
 }
 .css-eycyw2 .main {
 border-top: none;
 }

 .css-63zi5w{
 background-color: #F2F7FF; 
 }

 #webchat {
 position: fixed;
 height: calc(100% - 50px);
 width: 100%;
 top: 50px;
 overflow: hidden;
 }

 #heading {
 background-image: url(/images/cloud-background.png);
 background-repeat: no-repeat;
 background-size: cover;
 background-attachment: fixed;
 background-position: center;
 background-color: #6CA7C7;
 height: 50px;
 width: 100%;
 overflow: hidden;
 position: fixed;
 }

 h1{
 font-size: 14px;
 font-family: Segoe UI;
 font-style: normal;
 font-weight: 600;
 font-size: 14px;
 line-height: 20px;
 color: #F3F2F1;
 letter-spacing: 0.005em;
 display: table-cell;
 vertical-align: middle;
 padding: 13px 0px 0px 20px;
 }

 #chatwindow {
 height: 100%;
 width: 100%;
 overflow: hidden;
 position: fixed;
 }
 </style>`;

 return `<!DOCTYPE html>
 <html>
 <head>
 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
 ${pvaStyle}
 </head>
 <body>
 <div id="chatwindow">
 <div id="heading">
 <h1><img src="/images/robot-create-illustration.svg"> ${botName}</h1>
 </div>
 <div id="webchat"></div>
 </div>
 ${scriptPVA}
 </body>
 </html>`;
};

const App = () => 
{
 const webHTML = webChatHTML();
 return(
 <WebView source={{html: webHTML}} />
 //<WebView source={{uri: 'http://10.0.2.2:5000/'}} />
 );
};

const styles = StyleSheet.create({
 container: {
 flex: 1,
 },
 content: {
 flex: 1,
 padding: 10,
 },
 textInput: {
 borderBottomColor: '#ddd',
 borderBottomWidth: 1,
 marginBottom: 15,
 },
 row: {
 flex: 1,
 flexDirection: 'row',
 },
 inputWrap: {
 flex: 1,
 borderColor: '#ccc',
 borderBottomWidth: 1,
 marginBottom: 10,
 },
 labelCenter: {
 alignItems: 'center',
 textAlign: 'center',
 fontSize: 34,
 fontWeight: 'bold',
 },
 textInputNumber: {
 borderColor: '#ddd',
 borderWidth: 1,
 marginBottom: 15,
 },
 title: {
 fontSize: 20,
 fontWeight: 'bold',
 paddingBottom: 10,
 },
 tasks: {
 borderColor: '#000',
 borderWidth: 1,
 padding: 5,
 marginBottom: 50,
 },
});
export default App;

Hai everyone,

I tried to embed the PVA to my mobile apps using React Native. But when PVA request to Login/Masuk, and when I clicked the login button and it do nothing.

I’m using webview to embed the html code from pva.

please help

Categories:

General