@woosmap/ui 4.74.0 → 4.77.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "4.74.0",
+  "version": "4.77.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"

package/src/components/InfoMessage/Flash.js

@@ -0,0 +1,47 @@
+import React, { Component } from 'react';
+import cl from 'classnames';
+import PropTypes from 'prop-types';
+import Icon from '../Icon/Icon';
+
+export default class Flash extends Component {
+    render() {
+        const { children, icon, inverse, fill, type, shadowed, testId, ...rest } = this.props;
+        const iconComponent = icon ? <Icon size={24} icon={icon} /> : null;
+        return (
+            <div
+                className={cl(
+                    'flash',
+                    `flash--${type}`,
+                    { 'flash--iconed': iconComponent },
+                    { 'flash--inverse': inverse },
+                    { 'flash--fill': fill },
+                    { 'flash--shadowed': shadowed && !inverse }
+                )}
+                data-testid={testId}
+                {...rest}
+            >
+                {iconComponent}
+                <span>{children}</span>
+            </div>
+        );
+    }
+}
+
+Flash.defaultProps = {
+    type: 'error',
+    icon: '',
+    inverse: false,
+    fill: false,
+    shadowed: false,
+    testId: 'flash',
+};
+
+Flash.propTypes = {
+    children: PropTypes.node.isRequired,
+    type: PropTypes.oneOf(['info', 'success', 'warning', 'error', 'tip', 'howto']),
+    icon: PropTypes.string,
+    inverse: PropTypes.bool,
+    fill: PropTypes.bool,
+    shadowed: PropTypes.bool,
+    testId: PropTypes.string,
+};

package/src/components/OfflineChatBot/OfflineChatBot.js

@@ -0,0 +1,74 @@
+import React from 'react';
+import Button from '../Button/Button';
+import { tr } from '../utils/locale';
+import Picto from '../../images/offlinechat/sf-chat.png';
+import Favicon from '../../images/offlinechat/favicon.png';
+import Lighthouse from '../../images/offlinechat/lighthouse.png';
+
+class OfflineChatBot extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { open: false };
+    }
+
+    toggle = () => {
+        const { open } = this.state;
+        this.setState({ open: !open });
+    };
+
+    render() {
+        const { open } = this.state;
+        const title = tr('Contact us');
+        return (
+            // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+            <div className={`sf-chat ${open && 'sf-chat--open'}`}>
+                {!open && (
+                    <div
+                        className="sf-chat__button"
+                        onKeyDown={() => {}}
+                        tabIndex="-1"
+                        role="button"
+                        onClick={this.toggle}
+                    >
+                        <img className="sf-chat__button__icon" src={Picto} alt={title} />
+                        <span className="sf-chat__button__label">{title}</span>
+                    </div>
+                )}
+                {open && (
+                    <div className="sf-chat__wrapper">
+                        <div className="sf-chat__header">
+                            <img className="sf-chat__header__favicon" src={Favicon} alt={title} />
+                            <span className="sf-chat__header__title">{title}</span>
+                            <Button
+                                type="transparent"
+                                className="sf-chat__header__action"
+                                icon="close"
+                                onClick={() => this.setState({ open: false })}
+                            />
+                        </div>
+                        <div className="sf-chat__body">
+                            <img className="sf-chat__image" src={Lighthouse} alt={title} />
+                            <p>
+                                {tr(
+                                    'Sorry, no agent available for the moment, please fill in our contact support form to be contacted back'
+                                )}
+                            </p>
+                            <p>
+                                <a
+                                    target="_blank"
+                                    className="sf-chat__link"
+                                    href="https://developers.woosmap.com/support/contact/"
+                                    rel="noreferrer"
+                                >
+                                    {tr('Open contact form')}
+                                </a>
+                            </p>
+                        </div>
+                    </div>
+                )}
+            </div>
+        );
+    }
+}
+
+export default OfflineChatBot;

package/src/components/OfflineChatBot/OfflineChatBot.stories.js

@@ -0,0 +1,24 @@
+import React, { useRef } from 'react';
+import OfflineChatBot from './OfflineChatBot';
+import Button from '../Button/Button';
+
+const Story = {
+    title: 'base/OfflineChatBot',
+    component: OfflineChatBot,
+};
+
+export default Story;
+
+const Template = () => {
+    const chatRef = useRef(null);
+    return (
+        <div>
+            <div>
+                <Button onClick={() => chatRef.current.toggle()} label="Toggle" />
+            </div>
+            <OfflineChatBot ref={chatRef} />
+        </div>
+    );
+};
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/OfflineChatBot/offlinechatbot.styl

@@ -0,0 +1,71 @@
+.sf-chat
+	position fixed
+	bottom 0
+	right 1.2rem
+	z-index 9999999
+	&--open
+		right 2rem
+	&__button
+		trans()
+		height 4.6rem
+		padding 0 1.2rem
+		display flex
+		align-items center
+		gap 1rem
+		background-color  $primary
+		border-radius .8rem .8rem 0 0
+		color $light
+		cursor pointer
+		&__icon
+			max-width 1.7rem
+		&__label
+			white-space nowrap
+			font-weight 600
+		&:hover
+			textShadow()
+			background-color $success2
+	&__wrapper
+		width 32rem
+		height 49.8rem
+		border-radius .8rem .8rem 0 0
+		display flex
+		flex-direction column
+		box-shadow .2rem .2rem 2rem $dark20
+		overflow hidden
+	&__header
+		display flex
+		align-items center
+		padding 0 1.4rem
+		height 5rem
+		gap 1rem
+		color $light
+		background $primary
+		background linear-gradient(45Deg, $primary 0, $logo3 100%)
+		&__favicon
+			sq(3.2)
+		&__title
+			font-weight bold
+		&__action
+			&.btn.btn--transparent
+				width 3.2rem !important
+				height 3.2rem !important
+				margin-left auto
+				.icon
+					stroke-width .2rem
+					stroke $light
+				&:hover
+					background-color $light20 !important
+	&__body
+		mbib(3)
+		background-color $light
+		padding 3rem
+		text-align center
+		height 100%
+	&__image
+		max-width 20rem
+		margin 0 auto 3rem auto
+	&__link
+		color $primary
+
+
+

package/src/index.js

@@ -37,6 +37,7 @@ export { default as CountrySelect } from './components/Select/CountrySelect';
 export { default as LanguageSelect } from './components/Select/LanguageSelect';
 export { default as AsyncSelect } from './components/Select/AsyncSelect';
 export { default as ServiceMessage } from './components/ServiceMessage/ServiceMessage';
+export { default as OfflineChatBot } from './components/OfflineChatBot/OfflineChatBot';
 export { default as SnackBar } from './components/SnackBar/SnackBar';
 export { default as Stepper } from './components/Stepper/Stepper';
 export { default as Switch } from './components/Switch/Switch';