@woosmap/ui 4.73.0 → 4.76.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/InfoMessage/Flash.js +47 -0
- package/src/components/OfflineChatBot/OfflineChatBot.js +69 -0
- package/src/components/OfflineChatBot/OfflineChatBot.stories.js +24 -0
- package/src/components/OfflineChatBot/offlinechatbot.styl +71 -0
- package/src/images/offlinechat/favicon.png +0 -0
- package/src/images/offlinechat/lighthouse.png +0 -0
- package/src/images/offlinechat/sf-chat.png +0 -0
- package/src/index.js +1 -0
- package/src/styles/console/button.styl +1 -1
package/package.json
CHANGED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import React, { Component } from 'react';
|
|
2
|
+
import cl from 'classnames';
|
|
3
|
+
import PropTypes from 'prop-types';
|
|
4
|
+
import Icon from '../Icon/Icon';
|
|
5
|
+
|
|
6
|
+
export default class Flash extends Component {
|
|
7
|
+
render() {
|
|
8
|
+
const { children, icon, inverse, fill, type, shadowed, testId, ...rest } = this.props;
|
|
9
|
+
const iconComponent = icon ? <Icon size={24} icon={icon} /> : null;
|
|
10
|
+
return (
|
|
11
|
+
<div
|
|
12
|
+
className={cl(
|
|
13
|
+
'flash',
|
|
14
|
+
`flash--${type}`,
|
|
15
|
+
{ 'flash--iconed': iconComponent },
|
|
16
|
+
{ 'flash--inverse': inverse },
|
|
17
|
+
{ 'flash--fill': fill },
|
|
18
|
+
{ 'flash--shadowed': shadowed && !inverse }
|
|
19
|
+
)}
|
|
20
|
+
data-testid={testId}
|
|
21
|
+
{...rest}
|
|
22
|
+
>
|
|
23
|
+
{iconComponent}
|
|
24
|
+
<span>{children}</span>
|
|
25
|
+
</div>
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
Flash.defaultProps = {
|
|
31
|
+
type: 'error',
|
|
32
|
+
icon: '',
|
|
33
|
+
inverse: false,
|
|
34
|
+
fill: false,
|
|
35
|
+
shadowed: false,
|
|
36
|
+
testId: 'flash',
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
Flash.propTypes = {
|
|
40
|
+
children: PropTypes.node.isRequired,
|
|
41
|
+
type: PropTypes.oneOf(['info', 'success', 'warning', 'error', 'tip', 'howto']),
|
|
42
|
+
icon: PropTypes.string,
|
|
43
|
+
inverse: PropTypes.bool,
|
|
44
|
+
fill: PropTypes.bool,
|
|
45
|
+
shadowed: PropTypes.bool,
|
|
46
|
+
testId: PropTypes.string,
|
|
47
|
+
};
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import Button from '../Button/Button';
|
|
3
|
+
import { tr } from '../utils/locale';
|
|
4
|
+
import Picto from '../../images/offlinechat/sf-chat.png';
|
|
5
|
+
import Favicon from '../../images/offlinechat/favicon.png';
|
|
6
|
+
import Lighthouse from '../../images/offlinechat/lighthouse.png';
|
|
7
|
+
|
|
8
|
+
class OfflineChatBot extends React.Component {
|
|
9
|
+
constructor(props) {
|
|
10
|
+
super(props);
|
|
11
|
+
this.state = { open: false };
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
toggle = () => {
|
|
15
|
+
const { open } = this.state;
|
|
16
|
+
this.setState({ open: !open });
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
render() {
|
|
20
|
+
const { open } = this.state;
|
|
21
|
+
const title = tr('Contact us');
|
|
22
|
+
return (
|
|
23
|
+
// eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
|
|
24
|
+
<div className={`sf-chat ${open && 'sf-chat--open'}`}>
|
|
25
|
+
{!open && (
|
|
26
|
+
<div
|
|
27
|
+
className="sf-chat__button"
|
|
28
|
+
onKeyDown={() => {}}
|
|
29
|
+
tabIndex="-1"
|
|
30
|
+
role="button"
|
|
31
|
+
onClick={this.toggle}
|
|
32
|
+
>
|
|
33
|
+
<img className="sf-chat__button__icon" src={Picto} alt={title} />
|
|
34
|
+
<span className="sf-chat__button__label">{title}</span>
|
|
35
|
+
</div>
|
|
36
|
+
)}
|
|
37
|
+
{open && (
|
|
38
|
+
<div className="sf-chat__wrapper">
|
|
39
|
+
<div className="sf-chat__header">
|
|
40
|
+
<img className="sf-chat__header__favicon" src={Favicon} alt={title} />
|
|
41
|
+
<span className="sf-chat__header__title">{title}</span>
|
|
42
|
+
<Button
|
|
43
|
+
type="transparent"
|
|
44
|
+
className="sf-chat__header__action"
|
|
45
|
+
icon="close"
|
|
46
|
+
onClick={() => this.setState({ open: false })}
|
|
47
|
+
/>
|
|
48
|
+
</div>
|
|
49
|
+
<div className="sf-chat__body">
|
|
50
|
+
<img className="sf-chat__image" src={Lighthouse} alt={title} />
|
|
51
|
+
<p>
|
|
52
|
+
{tr(
|
|
53
|
+
'Sorry, no agent available for the moment, please fill in our contact support form to be contacted back'
|
|
54
|
+
)}
|
|
55
|
+
</p>
|
|
56
|
+
<p>
|
|
57
|
+
<a className="sf-chat__link" href="https://developers.woosmap.com/support/contact/">
|
|
58
|
+
{tr('Open contact form')}
|
|
59
|
+
</a>
|
|
60
|
+
</p>
|
|
61
|
+
</div>
|
|
62
|
+
</div>
|
|
63
|
+
)}
|
|
64
|
+
</div>
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
export default OfflineChatBot;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React, { useRef } from 'react';
|
|
2
|
+
import OfflineChatBot from './OfflineChatBot';
|
|
3
|
+
import Button from '../Button/Button';
|
|
4
|
+
|
|
5
|
+
const Story = {
|
|
6
|
+
title: 'base/OfflineChatBot',
|
|
7
|
+
component: OfflineChatBot,
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export default Story;
|
|
11
|
+
|
|
12
|
+
const Template = () => {
|
|
13
|
+
const chatRef = useRef(null);
|
|
14
|
+
return (
|
|
15
|
+
<div>
|
|
16
|
+
<div>
|
|
17
|
+
<Button onClick={() => chatRef.current.toggle()} label="Toggle" />
|
|
18
|
+
</div>
|
|
19
|
+
<OfflineChatBot ref={chatRef} />
|
|
20
|
+
</div>
|
|
21
|
+
);
|
|
22
|
+
};
|
|
23
|
+
export const Default = Template.bind({});
|
|
24
|
+
Default.args = {};
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
.sf-chat
|
|
2
|
+
position fixed
|
|
3
|
+
bottom 0
|
|
4
|
+
right 1.2rem
|
|
5
|
+
z-index 9999999
|
|
6
|
+
&--open
|
|
7
|
+
right 2rem
|
|
8
|
+
&__button
|
|
9
|
+
trans()
|
|
10
|
+
height 4.6rem
|
|
11
|
+
padding 0 1.2rem
|
|
12
|
+
display flex
|
|
13
|
+
align-items center
|
|
14
|
+
gap 1rem
|
|
15
|
+
background-color $primary
|
|
16
|
+
border-radius .8rem .8rem 0 0
|
|
17
|
+
color $light
|
|
18
|
+
cursor pointer
|
|
19
|
+
&__icon
|
|
20
|
+
max-width 1.7rem
|
|
21
|
+
&__label
|
|
22
|
+
white-space nowrap
|
|
23
|
+
font-weight 600
|
|
24
|
+
&:hover
|
|
25
|
+
textShadow()
|
|
26
|
+
background-color $success2
|
|
27
|
+
&__wrapper
|
|
28
|
+
width 32rem
|
|
29
|
+
height 49.8rem
|
|
30
|
+
border-radius .8rem .8rem 0 0
|
|
31
|
+
display flex
|
|
32
|
+
flex-direction column
|
|
33
|
+
box-shadow .2rem .2rem 2rem $dark20
|
|
34
|
+
overflow hidden
|
|
35
|
+
&__header
|
|
36
|
+
display flex
|
|
37
|
+
align-items center
|
|
38
|
+
padding 0 1.4rem
|
|
39
|
+
height 5rem
|
|
40
|
+
gap 1rem
|
|
41
|
+
color $light
|
|
42
|
+
background $primary
|
|
43
|
+
background linear-gradient(45Deg, $primary 0, $logo3 100%)
|
|
44
|
+
&__favicon
|
|
45
|
+
sq(3.2)
|
|
46
|
+
&__title
|
|
47
|
+
font-weight bold
|
|
48
|
+
&__action
|
|
49
|
+
&.btn.btn--transparent
|
|
50
|
+
width 3.2rem !important
|
|
51
|
+
height 3.2rem !important
|
|
52
|
+
margin-left auto
|
|
53
|
+
.icon
|
|
54
|
+
stroke-width .2rem
|
|
55
|
+
stroke $light
|
|
56
|
+
&:hover
|
|
57
|
+
background-color $light20 !important
|
|
58
|
+
&__body
|
|
59
|
+
mbib(3)
|
|
60
|
+
background-color $light
|
|
61
|
+
padding 3rem
|
|
62
|
+
text-align center
|
|
63
|
+
height 100%
|
|
64
|
+
&__image
|
|
65
|
+
max-width 20rem
|
|
66
|
+
margin 0 auto 3rem auto
|
|
67
|
+
&__link
|
|
68
|
+
color $primary
|
|
69
|
+
|
|
70
|
+
|
|
71
|
+
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/src/index.js
CHANGED
|
@@ -37,6 +37,7 @@ export { default as CountrySelect } from './components/Select/CountrySelect';
|
|
|
37
37
|
export { default as LanguageSelect } from './components/Select/LanguageSelect';
|
|
38
38
|
export { default as AsyncSelect } from './components/Select/AsyncSelect';
|
|
39
39
|
export { default as ServiceMessage } from './components/ServiceMessage/ServiceMessage';
|
|
40
|
+
export { default as OfflineChatBot } from './components/OfflineChatBot/OfflineChatBot';
|
|
40
41
|
export { default as SnackBar } from './components/SnackBar/SnackBar';
|
|
41
42
|
export { default as Stepper } from './components/Stepper/Stepper';
|
|
42
43
|
export { default as Switch } from './components/Switch/Switch';
|