Iframe

bin/build.js

@@ -1,6 +1,6 @@
 const webpack = require('webpack')
 
-const webpackConfig = require('../webpack/prod.js')
+const webpackConfig = require('../webpack/dev')
 
 const bundler = webpack(webpackConfig)
 

src/components/Expander/style.scss

@@ -11,6 +11,7 @@
   border-radius: 3px;
   box-shadow: 0 1px 6px lightgrey, 0 2px 32px lightgrey;
   transition: opacity 0.3s;
+  z-index: 2147483647;
 
   &.open {
     opacity: 1;

src/components/Live/style.scss

@@ -11,8 +11,8 @@
   }
 }
 
-@media only screen and (min-width: 420px) and (min-height: 575px) {
+@media only screen and (min-width: 1000px) and (min-height: 900px) {
   .RecastApp .RecastAppLive, .CaiApp .CaiAppLive {
-    height: 460px;
+    height: 800px;
   }
 }

src/components/Message/Buttons.js

@@ -16,7 +16,7 @@ const Buttons = ({ content, sendMessage, style }) => {
       </p>
 
       <div className='Buttons--container'>
-        {buttons.slice(0, 3).map((b, i) => (
+        {buttons.slice(0, 6).map((b, i) => (
           <Button key={i} button={b} sendMessage={sendMessage} />
         ))}
       </div>

src/components/Message/List.js

@@ -1,58 +1,78 @@
-import React from 'react'
+import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+
 import { sanitizeUrl } from '@braintree/sanitize-url'
 
 import { truncate } from 'helpers'
 
 import Button from 'components/Button'
+import Text from 'components/Message/Text'
 
-const ListElement = ({ title, subtitle, imageUrl, buttons, sendMessage }) => {
-  const button = buttons[0]
-  const titleMaxLength = 25
-  const subTitleMaxLength = 50
-  const buttonTitleMaxLength = 20
 
-  return (
-    <div className='RecastAppListElement CaiAppListElement'>
-      {imageUrl
-        && sanitizeUrl(imageUrl) !== 'about:blank' && (
-        <img src={imageUrl} className='RecastAppListElement--img CaiAppListElement--img' />
-      )}
+class ListElement extends Component {
 
-      <div className='RecastAppListElement--container CaiAppListElement--container'>
-        <p className='RecastAppListElement--title CaiAppListElement--title'>{truncate(title, titleMaxLength)}</p>
-        <p className='RecastAppListElement--subtitle CaiAppListElement--subtitle'>{truncate(subtitle, subTitleMaxLength)}</p>
+    state = {
+        showDetail: false
+    }
 
-        {button
-          && (button.type === 'web_url' ? (
-            sanitizeUrl(button.value) !== 'about:blank' && (
-              <a
-                href={button.value}
-                className='RecastAppListElement--button CaiAppListElement--button'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                {truncate(button.title, buttonTitleMaxLength)}
-              </a>
-            )
-          ) : (
-            <div
-              className='RecastAppListElement--button CaiAppListElement--button'
-              onClick={() => sendMessage({ type: 'text', content: button.value })}
-            >
-              {truncate(button.title, buttonTitleMaxLength)}
-            </div>
-          ))}
-      </div>
-    </div>
-  )
+    render () {
+      const { title, subtitle, imageUrl, buttons, detail, sendMessage } = this.props
+      const { showDetail} = this.state
+          const titleMaxLength = 25
+          const subTitleMaxLength = 50
+          const buttonTitleMaxLength = 20
+      return (
+        <div className='RecastAppListElement CaiAppListElement'>
+        <div className='RecastAppListElement--head CaiAppListElement--head'>
+              {imageUrl
+                && sanitizeUrl(imageUrl) !== 'about:blank' && (
+                <img src={imageUrl} className='RecastAppListElement--img CaiAppListElement--img' />
+              )}
+
+              <div className='RecastAppListElement--container CaiAppListElement--container'>
+                <p className='RecastAppListElement--title CaiAppListElement--title'
+                    onClick={() => this.setState({ showDetail: !showDetail })}>
+                    {truncate(title, titleMaxLength)}
+                </p>
+                <p className='RecastAppListElement--subtitle CaiAppListElement--subtitle'>{truncate(subtitle, subTitleMaxLength)}</p>
+              {buttons.slice(0, 3).map((button, i) => (
+                button
+                  && (button.type === 'web_url' ? (
+                    button.value && sanitizeUrl(button.value) !== 'about:blank' && (
+                      <a
+                        href={button.value}
+                        className='RecastAppListElement--button CaiAppListElement--button'
+                        target='_blank'
+                        rel='noopener noreferrer'
+                      >
+                        {truncate(button.title, buttonTitleMaxLength)}
+                      </a>
+                    )
+                  ) : (
+                    <div
+                      className='RecastAppListElement--button CaiAppListElement--button'
+                      onClick={() => sendMessage({ type: 'text', content: button.value })}
+                    >
+                      {truncate(button.title, buttonTitleMaxLength)}
+                    </div>
+                  )))
+              )}
+              </div>
+          </div>
+            {detail && (
+                <Text content={detail} style={showDetail?{display: 'block'}:{display:'none'}} />
+             )}
+        </div>
+      )
+    }
 }
 
 ListElement.propTypes = {
   title: PropTypes.string,
   subtitle: PropTypes.string,
   imageUrl: PropTypes.string,
   buttons: PropTypes.array,
+  detail: PropTypes.string,
   sendMessage: PropTypes.func,
 }
 

src/components/Message/Text.js

@@ -7,10 +7,21 @@ import { truncate } from 'helpers'
 import './style.scss'
 
 const Text = ({ content, style }) => {
-  let respond
+  let respond, iframeSrc, iframeWidth, iframeHeight, iframeScroll
 
   if (typeof content === 'string') {
     respond = content
+    if(respond.indexOf("iframe")!=-1){
+       // var str = '<iframe src="/xi/ui/offcyclecomp/pages/spotAwardUserIndexMobile.xhtml" width="100%" height="400" scrolling="no"/>';
+        var re ='<iframe src="(.*)" width="(.*)" height="(.*)" scrolling="(.*)"/>';
+        var p = new RegExp(re, "gm");
+        var myArray = respond.match(p);
+        iframeSrc = RegExp.$1;
+        iframeWidth = RegExp.$2;
+        iframeHeight = RegExp.$3;
+        iframeScroll = RegExp.$4;
+        respond = respond.replace(p,'');
+    }
   } else if (typeof content === 'object') {
     respond = JSON.stringify(content)
   } else if (typeof content === 'number') {
@@ -23,10 +34,10 @@ const Text = ({ content, style }) => {
 
   return (
     <div style={style} className={'RecastAppText CaiAppText'}>
-      {sanitizeHtml(truncate(respond, 640))
-        .replace(/&amp;/g, 'g')
-        .replace(/&lt;/g, '<')
-        .replace(/&gt;/g, '>')}
+      {respond}
+      {iframeSrc&&
+      (<iframe src={iframeSrc} width={iframeWidth} height={iframeHeight} scrolling={iframeScroll} frameborder="0"/>)
+      }
     </div>
   )
 }

src/components/Message/style.scss

@@ -73,7 +73,7 @@
    */
 
   .RecastAppText, .CaiAppText {
-    max-width: 290px;
+  /*  max-width: 290px;*/
     padding: 0.8rem;
     border-radius: 3px;
 
@@ -194,8 +194,14 @@
 
     .RecastAppListElement, .CaiAppListElement {
       display: flex;
+      flex-direction: column;
       width: 290px;
 
+      &--head {
+        display: flex;
+        width: 100%;
+      }
+
       &--img {
         width: 80px;
         height: 80px;

src/containers/Chat/style.scss

@@ -49,15 +49,15 @@
   }
 }
 
-@media only screen and (min-width: 420px) and (min-height: 575px) {
+@media only screen and (min-width: 1000px) and (min-height: 900px) {
   .RecastApp .RecastAppChat, .CaiApp .CaiAppChat {
     right: 10px;
     bottom: 10px;
     border-radius: 3px;
     top: auto;
     left: auto;
-    width: 370px;
-    height: auto;
+    width: 1000px;
+    height: 900px;
     box-shadow: 0 5px 40px rgba(0, 0, 0, 0.16);
 
     &--slogan {