Skip to content
Permalink
9771994e3a
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Go to file
 
 
Cannot retrieve contributors at this time
99 lines (85 sloc) 4.36 KB
import React, { Fragment, useEffect, useState } from 'react';
import './Widget.css';
import { MediumContent, LargeContent, useTextKitWidget, WidgetViewSize } from '@statflo/textkit-widget-sdk-react'
const Widget = () => {
const [hasMounted, setHasMounted] = useState(false);
const [theme, setTheme] = useState(false);
useEffect(() => {
setHasMounted(true);
}, []);
const { state, setHeader, setSize } = hasMounted && useTextKitWidget();
const [headerReplaced, setHeaderReplaced] = useState<boolean>(false);
useEffect(() => {
if (state && state.app && theme !== state.app.theme) {
document.documentElement.style.setProperty('--background', state.app.theme.css.backgroundColor);
document.documentElement.style.setProperty('--background--highlight', state.app.theme.css.backgroundHighlightColor);
document.documentElement.style.setProperty('--primary', state.app.theme.css.primaryColor);
document.documentElement.style.setProperty('--primary-text', state.app.theme.css.primaryTextColor);
document.documentElement.style.setProperty('--primary--active', state.app.theme.css.primaryActiveColor);
document.documentElement.style.setProperty('--primary--hover', state.app.theme.css.primaryHoverColor);
document.documentElement.style.setProperty('--text', state.app.theme.css.textColor);
setTheme(state.app.theme)
}
}, [state]);
const swapHeader = () => {
if (headerReplaced) {
setHeader('Your Standard Widget');
setHeaderReplaced(false);
} else {
setHeader('My New Header');
setHeaderReplaced(true);
}
}
const closeWidget = () => {
setSize(WidgetViewSize.Medium);
}
return (
<Fragment>
<MediumContent>
<div className='widget-container transition-opacity'>
<h1 className='widget-title'>
This is a Standard Widget.
</h1>
<p className='widget-copy'></p>
<a href='https://docs.textkit.io' rel='noreferrer' target="_blank" className='widget-link widget-link__doc'>Read our docs to learn more.</a>
<p className='widget-more'>Click show more to enlarge this widget</p>
</div>
</MediumContent>
<LargeContent>
<div className='widget-container' style={{ height: state ? state?.maxHeight : 100 }}>
<div className='widget-flex-container'>
<h1 className='widget-title'>
This is the large view of a Standard Widget
</h1>
</div>
<div className='widget-flex-container'>
{state && state.context && (
<><div className="widget-spacer">
<pre>conversationId:</pre>
<small>{state.context.conversationId}</small>
</div>
<div className="widget-spacer">
<pre>externalId:</pre>
<small>{state.context.external.externalId}</small>
</div>
<div className="widget-spacer">
<pre>topicId:</pre>
<small>{state.context.campaignId}</small>
</div>
<div className="widget-spacer">
<pre>all:</pre>
<small>{JSON.stringify(state.context)}</small>
</div>
</>
)}
</div>
<div className='widget-action-bar'>
<button onClick={closeWidget} className='widget-cancel'>Cancel</button>
<button onClick={swapHeader} className='widget-button widget-button-wide'>Change Header</button>
</div>
</div>
</LargeContent>
</Fragment>
)
}
export default Widget;