@botonic/react 0.36.0-alpha.0 → 0.36.0-alpha.1

package/lib/esm/webchat/webview.js

@@ -1,70 +0,0 @@
-import { __awaiter } from "tslib";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useContext, useEffect } from 'react';
-import styled from 'styled-components';
-import { COLORS, ROLES, WEBCHAT } from '../constants';
-import { WebchatContext, WebviewRequestContext } from '../contexts';
-const StyledWebview = styled.div `
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  background-color: ${COLORS.SOLID_WHITE};
-  z-index: 2;
-  border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
-`;
-const StyledWebviewHeader = styled.div `
-  text-align: right;
-  background-color: ${COLORS.WILD_SAND_WHITE};
-  border-top: 1px solid ${COLORS.SOLID_BLACK_ALPHA_0_2};
-  border-bottom: 1px solid ${COLORS.SOLID_BLACK_ALPHA_0_2};
-  border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
-`;
-const StyledCloseHeader = styled.div `
-  display: inline-block;
-  padding: 8px 12px;
-  cursor: pointer;
-`;
-const StyledWebviewContent = styled.div `
-  flex: 1;
-  overflow: auto;
-`;
-const FrameStyles = `
-  border-style: none;
-  width: 100%;
-  height: 100%;
-`;
-const StyledFrame = styled.iframe `
-  ${FrameStyles}
-`;
-const StyledFrameAsDiv = styled.div `
-  ${FrameStyles}
-`;
-export const WebviewHeader = () => {
-    const { closeWebview } = useContext(WebviewRequestContext);
-    const { getThemeProperty } = useContext(WebchatContext);
-    return (_jsx(StyledWebviewHeader, Object.assign({ role: ROLES.WEBVIEW_HEADER, style: Object.assign({}, getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.webviewHeaderStyle)) }, { children: _jsx(StyledCloseHeader, Object.assign({ onClick: closeWebview }, { children: "\u2715" })) })));
-};
-export const WebviewContainer = props => {
-    const { webchatState } = useContext(WebchatContext);
-    const { closeWebview } = useContext(WebviewRequestContext);
-    const Webview = webchatState.webview;
-    const close = (e) => __awaiter(void 0, void 0, void 0, function* () {
-        if (e.data === 'botonicCloseWebview') {
-            yield closeWebview();
-        }
-    });
-    useEffect(() => {
-        if (window.addEventListener) {
-            window.addEventListener('message', close, false);
-        }
-        else if (window.attachEvent) {
-            // ie8
-            window.attachEvent('onmessage', close);
-        }
-    }, []);
-    return (_jsxs(StyledWebview, Object.assign({ role: ROLES.WEBVIEW, style: Object.assign({}, props.style) }, { children: [_jsx(WebviewHeader, { style: { flex: 'none' } }), _jsx(StyledWebviewContent, { children: typeof Webview === 'string' ? (_jsx(StyledFrame, { src: Webview })) : (_jsx(StyledFrameAsDiv, { children: _jsx(Webview, {}) })) })] })));
-};
-//# sourceMappingURL=webview.js.map

package/lib/esm/webchat/webview.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"webview.js","sourceRoot":"","sources":["../../../src/webchat/webview.jsx"],"names":[],"mappings":"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"}

package/src/react-bot.jsx

@@ -1,38 +0,0 @@
-import { CoreBot } from '@botonic/core'
-import React from 'react'
-
-import { Text } from './components/text'
-import { RequestContext } from './contexts'
-
-export class ReactBot extends CoreBot {
-  constructor(options) {
-    super({
-      defaultRoutes: [
-        {
-          path: '404',
-          action: () => <Text>I don't understand you</Text>, // eslint-disable-line
-        },
-      ],
-      renderer: args => this.renderReactActions(args),
-      ...options,
-    })
-  }
-
-  async renderReactActions({ request, actions }) {
-    const renderedActions = []
-    let props
-    let renderedAction
-    for (const Action of actions) {
-      if (Action) {
-        props = Action.botonicInit ? await Action.botonicInit(request) : {}
-        renderedAction = (
-          <RequestContext.Provider value={request}>
-            <Action {...props} />
-          </RequestContext.Provider>
-        )
-        renderedActions.push(renderedAction)
-      }
-    }
-    return renderedActions
-  }
-}

package/src/util/webchat.js

@@ -1,57 +0,0 @@
-import merge from 'lodash.merge'
-import UAParser from 'ua-parser-js'
-import { v7 as uuidv7 } from 'uuid'
-
-import { WEBCHAT } from '../constants'
-import { getProperty } from './objects'
-
-/**
- * Returns the value of a property defined in bot's theme based on WEBCHAT.CUSTOM_PROPERTIES dictionary.
- * It gives preference to nested defined properties (e.g.: header.style) over plain properties (e.g.: headerStyle).
- * If property doesn't exist, returns the defaultValue.
- */
-export const _getThemeProperty =
-  theme =>
-  (property, defaultValue = undefined) => {
-    for (const [k, v] of Object.entries(WEBCHAT.CUSTOM_PROPERTIES)) {
-      if (v == property) {
-        const nestedProperty = getProperty(theme, v)
-        if (nestedProperty !== undefined) return nestedProperty
-        const plainProperty = getProperty(theme, k)
-        if (plainProperty !== undefined) return plainProperty
-        return defaultValue
-      }
-    }
-    return undefined
-  }
-
-export const createUser = () => {
-  const parser = new UAParser()
-  const ua = parser.getResult()
-  let name = `${ua.os.name} ${ua.browser.name}`
-  if (ua.device && ua.device.type) name = `${ua.device.type} ${name}`
-  return {
-    id: uuidv7(),
-    name,
-  }
-}
-export const initSession = session => {
-  if (!session) session = {}
-  const hasUserId = session.user && session.user.id !== undefined
-  if (!session.user || Object.keys(session.user).length === 0 || !hasUserId)
-    session.user = !hasUserId ? merge(session.user, createUser()) : createUser()
-  return session
-}
-
-export const shouldKeepSessionOnReload = ({
-  initialDevSettings,
-  devSettings,
-}) => !initialDevSettings || (devSettings && devSettings.keepSessionOnReload)
-
-export const getServerErrorMessage = serverConfig => {
-  if (!serverConfig || !serverConfig.errorMessage) return 'Connection issues'
-  if (typeof serverConfig.errorMessage === 'function') {
-    return serverConfig.errorMessage()
-  }
-  return serverConfig.errorMessage
-}

package/src/webchat/header.jsx

@@ -1,149 +0,0 @@
-import React, { forwardRef, useContext } from 'react'
-import styled from 'styled-components'
-
-import { COLORS, ROLES, WEBCHAT } from '../constants'
-import { WebchatContext } from '../contexts'
-import { Scale } from '../shared/styles'
-import { resolveImage } from '../util/environment'
-import { ConditionalWrapper } from '../util/react'
-import { BotonicContainerId } from './constants'
-
-const Header = styled.div`
-  display: flex;
-  background: linear-gradient(
-    90deg,
-    ${COLORS.BLEACHED_CEDAR_PURPLE} 0%,
-    ${props => props.color} 100%
-  );
-  border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
-  z-index: 2;
-  height: inherit;
-`
-
-const ImageContainer = styled.div`
-  padding: 10px;
-  align-items: center;
-`
-
-const Image = styled.img`
-  width: 32px;
-  border-radius: 50%;
-`
-
-const TextContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  flex: 1 1 auto;
-`
-
-const Title = styled.div`
-  display: flex;
-  font-family: inherit;
-  font-size: 15px;
-  font-weight: bold;
-  color: ${COLORS.SOLID_WHITE};
-`
-
-const Subtitle = styled.div`
-  display: flex;
-  font-family: inherit;
-  font-size: 11px;
-  color: ${COLORS.SOLID_WHITE};
-`
-
-const CloseHeader = styled.div`
-  padding: 0px 16px;
-  cursor: pointer;
-  color: ${COLORS.SOLID_WHITE};
-  font-family: inherit;
-  font-size: 36px;
-`
-
-export const DefaultHeader = props => {
-  const { getThemeProperty } = props
-  const animationsEnabled = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.enableAnimations,
-    true
-  )
-  const headerImage = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.headerImage,
-    getThemeProperty(
-      WEBCHAT.CUSTOM_PROPERTIES.brandImage,
-      WEBCHAT.DEFAULTS.LOGO
-    )
-  )
-
-  const headerTitle = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.headerTitle,
-    WEBCHAT.DEFAULTS.TITLE
-  )
-  const headerSubtitle = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.headerSubtitle,
-    ''
-  )
-
-  return (
-    <Header
-      role={ROLES.HEADER}
-      color={props.color}
-      style={{ ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.headerStyle) }}
-    >
-      {headerImage && (
-        <ImageContainer>
-          <Image src={resolveImage(headerImage)} />
-        </ImageContainer>
-      )}
-      <TextContainer ml={headerImage ? '0px' : '16px'}>
-        <Title mb={headerSubtitle ? '6px' : '0px'}>{headerTitle}</Title>
-        <Subtitle>{headerSubtitle}</Subtitle>
-      </TextContainer>
-      <ConditionalWrapper
-        condition={animationsEnabled}
-        wrapper={children => <Scale>{children}</Scale>}
-      >
-        <CloseHeader onClick={props.onCloseClick}>⨯</CloseHeader>
-      </ConditionalWrapper>
-    </Header>
-  )
-}
-
-const StyledWebchatHeader = styled.div`
-  border-radius: 8px 8px 0px 0px;
-  box-shadow: ${COLORS.PIGEON_POST_BLUE_ALPHA_0_5} 0px 2px 5px;
-  height: 55px;
-  flex: none;
-`
-
-export const WebchatHeader = forwardRef((props, ref) => {
-  const { webchatState, getThemeProperty } = useContext(WebchatContext)
-
-  const handleCloseWebchat = event => {
-    props.onCloseClick(event.target.value)
-  }
-
-  const CustomHeader = getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.customHeader)
-  if (CustomHeader) {
-    return (
-      <div id={BotonicContainerId.Header} ref={ref}>
-        <CustomHeader onCloseClick={handleCloseWebchat} />
-      </div>
-    )
-  }
-
-  return (
-    <StyledWebchatHeader id={BotonicContainerId.Header} ref={ref}>
-      <DefaultHeader
-        webchatState={webchatState}
-        getThemeProperty={getThemeProperty}
-        color={getThemeProperty(
-          WEBCHAT.CUSTOM_PROPERTIES.brandColor,
-          COLORS.BOTONIC_BLUE
-        )}
-        onCloseClick={handleCloseWebchat}
-      />
-    </StyledWebchatHeader>
-  )
-})
-
-WebchatHeader.displayName = 'WebchatHeader'

package/src/webchat/replies.jsx

@@ -1,64 +0,0 @@
-import React, { useContext } from 'react'
-import styled from 'styled-components'
-
-import { WEBCHAT } from '../constants'
-import { WebchatContext } from '../contexts'
-import { BotonicContainerId } from './constants'
-
-const ScrollableReplies = styled.div`
-  overscroll-behavior: contain;
-  -webkit-overflow-scrolling: touch;
-`
-
-const RepliesContainer = styled.div`
-  display: flex;
-  text-align: center;
-  justify-content: ${props => props.justify};
-  flex-wrap: ${props => props.wrap};
-  padding-bottom: 10px;
-  margin-left: 5px;
-  margin-right: 5px;
-  overflow-x: scroll;
-`
-
-const ReplyContainer = styled.div`
-  flex: none;
-  display: inline-block;
-  margin: 3px;
-`
-
-const options = {
-  left: 'flex-start',
-  center: 'center',
-  right: 'flex-end',
-}
-
-export const WebchatReplies = props => {
-  const { webchatState, getThemeProperty, repliesRef } =
-    useContext(WebchatContext)
-  let justifyContent = 'center'
-  const flexWrap = getThemeProperty(
-    WEBCHAT.CUSTOM_PROPERTIES.wrapReplies,
-    'wrap'
-  )
-  if (flexWrap == 'nowrap') justifyContent = 'flex-start'
-  else if (getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.alignReplies))
-    justifyContent =
-      options[getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.alignReplies)]
-
-  return (
-    <ScrollableReplies>
-      <RepliesContainer
-        id={BotonicContainerId.RepliesContainer}
-        ref={repliesRef}
-        className='replies-container'
-        justify={justifyContent}
-        wrap={flexWrap}
-      >
-        {webchatState.replies.map((r, i) => (
-          <ReplyContainer key={i}>{r}</ReplyContainer>
-        ))}
-      </RepliesContainer>
-    </ScrollableReplies>
-  )
-}

package/src/webchat/webview.jsx

@@ -1,105 +0,0 @@
-import React, { useContext, useEffect } from 'react'
-import styled from 'styled-components'
-
-import { COLORS, ROLES, WEBCHAT } from '../constants'
-import { WebchatContext, WebviewRequestContext } from '../contexts'
-
-const StyledWebview = styled.div`
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  bottom: 0;
-  width: 100%;
-  height: 100%;
-  background-color: ${COLORS.SOLID_WHITE};
-  z-index: 2;
-  border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
-`
-
-const StyledWebviewHeader = styled.div`
-  text-align: right;
-  background-color: ${COLORS.WILD_SAND_WHITE};
-  border-top: 1px solid ${COLORS.SOLID_BLACK_ALPHA_0_2};
-  border-bottom: 1px solid ${COLORS.SOLID_BLACK_ALPHA_0_2};
-  border-radius: ${WEBCHAT.DEFAULTS.BORDER_RADIUS_TOP_CORNERS};
-`
-const StyledCloseHeader = styled.div`
-  display: inline-block;
-  padding: 8px 12px;
-  cursor: pointer;
-`
-
-const StyledWebviewContent = styled.div`
-  flex: 1;
-  overflow: auto;
-`
-
-const FrameStyles = `
-  border-style: none;
-  width: 100%;
-  height: 100%;
-`
-
-const StyledFrame = styled.iframe`
-  ${FrameStyles}
-`
-
-const StyledFrameAsDiv = styled.div`
-  ${FrameStyles}
-`
-
-export const WebviewHeader = () => {
-  const { closeWebview } = useContext(WebviewRequestContext)
-  const { getThemeProperty } = useContext(WebchatContext)
-  return (
-    <StyledWebviewHeader
-      role={ROLES.WEBVIEW_HEADER}
-      style={{
-        ...getThemeProperty(WEBCHAT.CUSTOM_PROPERTIES.webviewHeaderStyle),
-      }}
-    >
-      <StyledCloseHeader onClick={closeWebview}>✕</StyledCloseHeader>
-    </StyledWebviewHeader>
-  )
-}
-
-export const WebviewContainer = props => {
-  const { webchatState } = useContext(WebchatContext)
-  const { closeWebview } = useContext(WebviewRequestContext)
-  const Webview = webchatState.webview
-
-  const close = async e => {
-    if (e.data === 'botonicCloseWebview') {
-      await closeWebview()
-    }
-  }
-
-  useEffect(() => {
-    if (window.addEventListener) {
-      window.addEventListener('message', close, false)
-    } else if (window.attachEvent) {
-      // ie8
-      window.attachEvent('onmessage', close)
-    }
-  }, [])
-
-  return (
-    <StyledWebview
-      role={ROLES.WEBVIEW}
-      style={{
-        ...props.style,
-      }}
-    >
-      <WebviewHeader style={{ flex: 'none' }} />
-      <StyledWebviewContent>
-        {typeof Webview === 'string' ? (
-          <StyledFrame src={Webview} />
-        ) : (
-          <StyledFrameAsDiv>
-            <Webview />
-          </StyledFrameAsDiv>
-        )}
-      </StyledWebviewContent>
-    </StyledWebview>
-  )
-}