\r\n );\r\n}\r\n","import React, { Component, Fragment } from \"react\";\r\nimport ReactWebChat from \"botframework-webchat\";\r\n//import BookingApp from \"./BookingApp\";\r\nimport \"./ChatWindow.css\";\r\nimport \"./bootstrap.min.css\";\r\nimport \"./ChatWindowNew.css\";\r\nimport WebViewExtension, {\r\n WEB_VIEW_EXT_ID,\r\n} from \"./Extensions/WebViewExtension/WebViewExtension\";\r\nimport WebViewExternalExtension, {\r\n WEB_VIEW_EX_EXT_ID,\r\n} from \"./Extensions/WebViewExternalExtension/WebViewExternalExtension\";\r\nimport ChatSuggestionExtension, {\r\n CHAT_SUGGESTION_EXT_ID,\r\n} from \"./Extensions/ChatSuggestionExtension/ChatSuggestionExtension\";\r\nimport PersistentMenu from \"./ChatComponent/PersistentMenu\";\r\nimport PropertyPopup from \"./ChatComponent/PropertyPopup\";\r\nimport { IntlProvider } from \"react-intl\";\r\nimport AppLocale from \"./lang\";\r\nimport {\r\n DropdownMenu,\r\n DropdownItem,\r\n DropdownToggle,\r\n UncontrolledDropdown,\r\n Row,\r\n Col,\r\n Input,\r\n FormGroup,\r\n Label,\r\n Form,\r\n Button,\r\n CustomInput,\r\n} from \"reactstrap\";\r\nimport BookingApp from \"./BookingApp\";\r\nimport ChatWindowTypingIndicator from \"./ChatWindowTypingIndicator\";\r\nimport ChatWindowParticipantTagger from \"./ChatWindowParticipantTagger\";\r\nimport ChatWindowCardAction from \"./ChatWindowCardAction\";\r\nimport Translate from \"./helpers/Translate\";\r\nimport { AttachmentMiddleware } from \"./Extensions/AttachmentMiddleware\";\r\nimport IntlMessages from \"./helpers/IntlMessages\";\r\nimport ReactHtmlParser from \"react-html-parser\";\r\nimport CheckAvailablity from \"./ChatComponent/CheckAvailablity\";\r\nimport ServicePopup from \"./ChatComponent/ServicePopup\";\r\nimport FeedbackPopup from \"./ChatComponent/FeedbackPopup\";\r\nimport AutoCompleteExtension, {\r\n CHAT_AUTOCOMPLETE_EXT_ID,\r\n} from \"./Extensions/AutoCompleteExtension/AutoCompleteExtension\";\r\nimport ThumbFeedback from \"./ChatComponent/ThumbFeedback\";\r\nconst TRANSLATE_URL = process.env.REACT_APP_API_URL + \"/google-translate\";\r\nconst ANALYTICS_URL = process.env.REACT_APP_API_URL + \"/google-analytics\";\r\nconst VISITOR_URL = process.env.REACT_APP_API_URL + \"/visitors\";\r\nconst ADDLINK_URL = process.env.REACT_APP_API_URL + \"/links\";\r\nconst SERVICES_URL = process.env.REACT_APP_API_URL + \"/searchallservice\";\r\nconst LEAVE_FEEDBACK = process.env.REACT_APP_API_URL + \"/save-leavefeedback\";\r\nconst styleOptions = {\r\n backgroundColor: \"#e9eef4\",\r\n bubbleBorderRadius: 8,\r\n bubbleTextColor: \"#353f48\",\r\n bubbleBackground: \"#fff\",\r\n bubbleFromUserBorderRadius: 8,\r\n bubbleFromUserBackground: \"#dfcf92\",\r\n bubbleFromUserTextColor: \"#353f48\",\r\n sendBoxTextColor: \"#000\",\r\n sendBoxBorderTop: \"solid 1px #fff\",\r\n sendBoxBorderBottom: \"\",\r\n sendBoxButtonColor: \"#767676\",\r\n sendBoxButtonColorOnFocus: \"#333\",\r\n sendBoxButtonColorOnHover: \"#333\",\r\n sendBoxPlaceholderColor: \"#767676\",\r\n paddingWide: 20,\r\n hideUploadButton: true,\r\n timestampColor: \"#767676\",\r\n sendBoxBackground: \"#fff\",\r\n bubbleBorderColor: \"#E6E6E6\",\r\n bubbleFromUserBorderColor: \"#E6E6E6\",\r\n suggestedActionLayout: \"stacked\",\r\n suggestedActionHeight: 30,\r\n suggestedActionBorderRadius: \"50vh\",\r\n suggestedActionBorderWidth: 0,\r\n suggestedActionBackground: \"#fff\",\r\n suggestedActionTextColor: \"#353f48\",\r\n};\r\n\r\nconst localeOptions = [\r\n { id: \"en\", name: \"English\", desc: \"English\", code: \"en\", locale: \"en\" },\r\n { id: \"hi\", name: \"Hindi\", desc: \"हिंदी\", code: \"hi\", locale: \"hi\" },\r\n {\r\n id: \"id\",\r\n name: \"Indonesian\",\r\n desc: \"bahasa Indonesia\",\r\n code: \"id\",\r\n locale: \"id\",\r\n },\r\n { id: \"es\", name: \"Spanish\", desc: \"Español\", code: \"es\", locale: \"es\" },\r\n { id: \"fr\", name: \"French\", desc: \"français\", code: \"fr\", locale: \"fr\" },\r\n { id: \"de\", name: \"German\", desc: \"Deutsche\", code: \"de\", locale: \"de\" },\r\n { id: \"zh\", name: \"Chinese\", desc: \"简体中文\", code: \"ZH-簡\", locale: \"zh\" },\r\n {\r\n id: \"vi\",\r\n name: \"Vietnamese\",\r\n desc: \"Tiếng Việt\",\r\n code: \"vi\",\r\n locale: \"vi\",\r\n },\r\n { id: \"th\", name: \"Thai\", desc: \"ไทย\", code: \"th\", locale: \"th\" },\r\n { id: \"ja\", name: \"Japanese\", desc: \"日本語\", code: \"ja\", locale: \"ja\" },\r\n {\r\n id: \"zh-TW\",\r\n name: \"Chinese (Traditional)\",\r\n desc: \"繁體中文\",\r\n code: \"ZH-繁\",\r\n locale: \"hk\",\r\n },\r\n {\r\n id: \"tl\",\r\n name: \"Tagalog (Filipino)\",\r\n desc: \"Tagalog (Filipino)\",\r\n code: \"tl\",\r\n locale: \"tl\",\r\n },\r\n { id: \"af\", name: \"Afrikaans\", desc: \"Afrikaans\", code: \"af\", locale: \"af\" },\r\n { id: \"ko\", name: \"Korean\", desc: \"한국어\", code: \"ko\", locale: \"ko\" },\r\n { id: \"mi\", name: \"Maori\", desc: \"Maori\", code: \"mi\", locale: \"mi\" },\r\n { id: \"ar\", name: \"Arabic\", desc: \"عربي\", code: \"ar\", locale: \"ar\" },\r\n { id: \"ru\", name: \"Russian\", desc: \"Русский\", code: \"ru\", locale: \"ru\" },\r\n { id: \"fi\", name: \"Finnish\", desc: \"Suomalainen\", code: \"fi\", locale: \"fi\" },\r\n];\r\n\r\nexport default class ChatWindow extends Component {\r\n constructor(props) {\r\n super(props);\r\n\r\n this.props.bookingApp.callbacks.close = () => {\r\n this.props.bookingApp.open = false;\r\n this.forceUpdate();\r\n };\r\n this.props.setBubbleToShrinkIn();\r\n localStorage.setItem(this.props.language_state_store, this.props.lang);\r\n this.state = {\r\n ask_close: false,\r\n menu_open: false,\r\n ask_bot_hide: false,\r\n language: this.props.lang,\r\n languageCode: \"\",\r\n langLocale: \"\",\r\n visitorPopupState: true,\r\n googleAnalytics: {},\r\n name: \"\",\r\n email: \"\",\r\n phoneNumber: \"\",\r\n firstName: \"\",\r\n lastName: \"\",\r\n zipCode: \"\",\r\n consentGiven: false,\r\n languageOptions: localeOptions.sort(this.dynamicSort(\"name\")),\r\n persistentMenuData: [],\r\n open_language_popup: false,\r\n open_property_popup: false,\r\n open_availblity_popup: false,\r\n open_service_popup: false,\r\n open_ZChatfeedback_popup: false,\r\n bubble_type: \"\",\r\n availblityData: null,\r\n zChatfeedbackData: null,\r\n isServiceAvailable: false,\r\n isButtonDisable: false,\r\n leaveFeedbackMessage: \"\",\r\n endChat: false,\r\n };\r\n\r\n this.state.confirm_cookies =\r\n localStorage.getItem(this.props.cookies_state_store) !== \"yes\";\r\n\r\n this.hide_bot_confirm = () => {\r\n this.setState({ ask_bot_hide: false });\r\n this.props.hideBot();\r\n };\r\n this.close_bot_ask_hide = () => {\r\n this.setState({ ask_bot_hide: false });\r\n this.props.onClosed();\r\n };\r\n this.end_clicked = () => {\r\n this.setState({ ask_close: true });\r\n this.setState({ menu_open: false });\r\n if (this.props.messenger === true) {\r\n this.props.bot_restartClick();\r\n }\r\n };\r\n this.menu_popup_open = () => {\r\n this.setState({ menu_open: true });\r\n this.setState({ ask_close: false });\r\n };\r\n this.menu_popup_Close = () => {\r\n this.setState({ menu_open: false });\r\n };\r\n this.close_confirmed = () => {\r\n if (this.props.inZenDesk) {\r\n this.setState({\r\n ask_close: false,\r\n open_ZChatfeedback_popup: true,\r\n endChat: true,\r\n });\r\n } else {\r\n this.setState({ ask_close: false });\r\n this.props.endClicked();\r\n }\r\n };\r\n this.close_language_popup = () => {\r\n this.setState({ open_language_popup: false });\r\n };\r\n this.open_language_popup = () => {\r\n this.setState({ open_language_popup: true });\r\n };\r\n this.close_property_popup = () => {\r\n this.setState({ open_property_popup: false });\r\n };\r\n this.close_service_popup = () => {\r\n this.setState({ open_service_popup: false });\r\n };\r\n this.OpenServicePopUp = () => {\r\n this.setState({ open_service_popup: true });\r\n };\r\n this.popupclose_confirmed = () => {\r\n this.setState({ ask_close: false });\r\n this.props.closeClicked();\r\n };\r\n this.refresh = () => {\r\n this.props.refreshClicked();\r\n };\r\n this.close_cancel = () => {\r\n this.setState({ ask_close: false });\r\n };\r\n this.close_clicked = () => {\r\n this.setState({ ask_bot_hide: true });\r\n //this.props.onClosed();\r\n };\r\n this.close_cardapp = () => {\r\n this.setState({ card_app: undefined });\r\n };\r\n this.close_roomapp = () => {\r\n this.setState({ room_app: undefined });\r\n };\r\n this.cookies_understood = () => {\r\n localStorage.setItem(this.props.cookies_state_store, \"yes\");\r\n this.setState({ confirm_cookies: false });\r\n };\r\n this.availblityForm = (data) => {\r\n this.setState({ open_availblity_popup: true, availblityData: data });\r\n };\r\n this.closeAvailblityForm = () => {\r\n this.setState({ open_availblity_popup: false });\r\n this.props.setAvailblity(undefined);\r\n };\r\n\r\n this.setZchatFeedback = (data) => {\r\n this.setState({\r\n open_ZChatfeedback_popup: false,\r\n zChatfeedbackData: data,\r\n });\r\n this.props.sendFeedbackZenDeskChat(data, this.state.endChat);\r\n };\r\n\r\n this.cookies_details = (cookiesURL) => {\r\n this.addLinks(cookiesURL);\r\n if (window.parent) {\r\n window.parent.postMessage(\"openUrl:\" + cookiesURL + \"\", \"*\");\r\n } else {\r\n window.location = cookiesURL;\r\n }\r\n };\r\n\r\n this.bob_site = (poweredByURL) => {\r\n this.addLinks(poweredByURL);\r\n if (window.parent) {\r\n window.parent.postMessage(\"openUrl:\" + poweredByURL + \"\", \"*\");\r\n } else {\r\n window.location = poweredByURL;\r\n }\r\n };\r\n\r\n this.movetotop = () => {\r\n var els = document.getElementsByClassName(\r\n \"webchat__basic-transcript__scrollable\"\r\n );\r\n for (var el of els) {\r\n el.scrollTo({ top: 0, behavior: \"smooth\" });\r\n }\r\n };\r\n\r\n this.save_visitor = async (event) => {\r\n event.preventDefault();\r\n var user = {\r\n iid: this.props.iid,\r\n gid: this.props.gid,\r\n pid: this.props.pid,\r\n name: this.state.name,\r\n firstName: this.state.firstName,\r\n lastName: this.state.lastName,\r\n zipCode: this.state.zipCode,\r\n email: this.state.email,\r\n phoneNumber: this.state.phoneNumber,\r\n consentGiven: this.state.consentGiven,\r\n };\r\n this.setState({ visitorPopupState: false, isButtonDisable: true });\r\n const req = await fetch(`${VISITOR_URL}/${this.props.vid}`, {\r\n method: \"POST\",\r\n headers: {\r\n Accept: \"application/json\",\r\n \"Content-Type\": \"application/json\",\r\n },\r\n body: JSON.stringify({\r\n user: user,\r\n }),\r\n });\r\n\r\n localStorage.setItem(\r\n this.props.visitor_state_store,\r\n JSON.stringify(user)\r\n );\r\n };\r\n\r\n this.addLinks = async (link) => {\r\n const req = await fetch(`${ADDLINK_URL}`, {\r\n method: \"POST\",\r\n headers: {\r\n Accept: \"application/json\",\r\n \"Content-Type\": \"application/json\",\r\n },\r\n body: JSON.stringify({\r\n id: this.props.directline.conversationId,\r\n groupId: this.props.gid,\r\n link: link,\r\n }),\r\n });\r\n };\r\n // Adds bot/user tags and icon to conversation blocks\r\n let tagger = new ChatWindowParticipantTagger(\r\n this.props.botSettings.name,\r\n this.props.botSettings.urls.icon,\r\n this.props.gid,\r\n this.props.iid,\r\n this.props.mobile\r\n );\r\n tagger.start();\r\n }\r\n\r\n createCssRules() {\r\n let intervalId = setInterval(() => {\r\n let sendButtonDiv = document.getElementsByClassName(\r\n \"webchat__icon-button\"\r\n );\r\n document.styleSheets[0].insertRule(\r\n `\r\n .chat_header_btn_resize i{\r\n color:${this.props.botSettings.colours.closeIcon} !important;\r\n }\r\n `,\r\n 0\r\n );\r\n document.styleSheets[0].insertRule(\r\n `\r\n .chat_header_btn_resize i:hover{\r\n color:${this.props.botSettings.colours.closeIconHover} !important;\r\n }\r\n `,\r\n 0\r\n );\r\n document.styleSheets[0].insertRule(\r\n `\r\n .chat_header_btn_end svg {\r\n fill: ${this.props.botSettings.colours.closeIcon} !important;\r\n }\r\n `,\r\n 0\r\n );\r\n document.styleSheets[0].insertRule(\r\n `\r\n .chat_header_btn_end svg:hover {\r\n fill: ${this.props.botSettings.colours.closeIconHover} !important;\r\n }\r\n `,\r\n 0\r\n );\r\n document.styleSheets[0].insertRule(\r\n `\r\n .header_icon svg {\r\n fill: ${this.props.botSettings.colours.closeIcon} !important;\r\n }\r\n `,\r\n 0\r\n );\r\n document.styleSheets[0].insertRule(\r\n `\r\n .header_icon svg:hover {\r\n fill: ${this.props.botSettings.colours.closeIconHover} !important;\r\n }\r\n `,\r\n 0\r\n );\r\n document.styleSheets[0].insertRule(\r\n `\r\n .chat_header_btn_close svg {\r\n fill: ${this.props.botSettings.colours.minimizeIcon} !important;\r\n }\r\n `,\r\n 0\r\n );\r\n document.styleSheets[0].insertRule(\r\n `\r\n .chat_header_btn_close svg:hover {\r\n fill: ${this.props.botSettings.colours.minimizeIconHover} !important;\r\n }\r\n `,\r\n 0\r\n );\r\n document.styleSheets[0].insertRule(\r\n `\r\n .chat_header_btn_language svg {\r\n fill: ${this.props.botSettings.colours.minimizeIcon} !important;\r\n }\r\n `,\r\n 0\r\n );\r\n document.styleSheets[0].insertRule(\r\n `\r\n .chat_header_btn_language svg:hover {\r\n fill: ${this.props.botSettings.colours.minimizeIconHover} !important;\r\n }\r\n `,\r\n 0\r\n );\r\n document.styleSheets[0].insertRule(\r\n `\r\n .chat_header_menuitem svg {\r\n fill: ${this.props.botSettings.colours.minimizeIcon} !important;\r\n }\r\n `,\r\n 0\r\n );\r\n document.styleSheets[0].insertRule(\r\n `\r\n .chat_header_menuitem svg:hover {\r\n fill: ${this.props.botSettings.colours.minimizeIconHover} !important;\r\n }\r\n `,\r\n 0\r\n );\r\n document.styleSheets[0].insertRule(\r\n `\r\n .webchat__send-icon {\r\n opacity:1;\r\n fill: ${this.props.botSettings.colours.sendIcon} !important;\r\n cursor: pointer;\r\n }\r\n `,\r\n 0\r\n );\r\n document.styleSheets[0].insertRule(\r\n `\r\n .webchat__send-icon:hover {\r\n fill: ${this.props.botSettings.colours.sendIconHover} !important;\r\n \r\n }\r\n `,\r\n 0\r\n );\r\n document.styleSheets[0].insertRule(\r\n `.main {\r\n margin-left: 13px;\r\n margin-right: 13px;\r\n border-bottom-left-radius: 8px;\r\n border-bottom-right-radius: 8px;\r\n border-top-left-radius: 8px;\r\n border-top-right-radius: 8px;\r\n }`,\r\n 0\r\n );\r\n if (sendButtonDiv.length !== 0) {\r\n sendButtonDiv[0].innerHTML =\r\n \"![](\"/res/crosswebview.png\")
\r\n ![](\"https://bmbuiassetsprod.blob.core.windows.net/images/minimizeresults.png\")
{\" \"}\r\n ![](\"/res/myma_ai.png\")
\r\n \r\n \r\n ) : (\r\n ![](\"/res/myma_ai_new.png\")
\r\n