[IMPROVE] Replace i18n package (#657)

.editorconfig

@@ -11,9 +11,5 @@ insert_final_newline = true
 [*.{js,coffee,html,less,css,scss,json}]
 indent_style = tab
 
-[*.i18n.json]
-indent_style = space
-indent_size = 2
-
 [*.md]
 trim_trailing_whitespace = false

.eslintignore

@@ -1,3 +1,4 @@
 /build/*
-/src/i18n/index.js
 !/.storybook
+
+src/i18next.js

.eslintrc

@@ -47,7 +47,8 @@
 		"react/require-render-return": "error",
 		"react/self-closing-comp": "error",
 		"react-hooks/rules-of-hooks": "error",
-    "react-hooks/exhaustive-deps": "warn"
+    	"react-hooks/exhaustive-deps": "warn",
+		"no-sequences": "off"
 	},
 	"settings": {
     "react": {

.storybook/webpack.config.js

@@ -6,9 +6,6 @@ module.exports = ({ config }) => {
 		[require.resolve('../src/lib/uiKit')]: require.resolve('./mocks/uiKit'),
 	};
 
-	const babelRule = config.module.rules.find((rule) => Array.isArray(rule.use) && rule.use.find(({ loader }) => loader === 'babel-loader'));
-	babelRule.use.push({ loader: 'preact-i18nline/webpack-loader' });
-
 	config.module.rules = config.module.rules.filter(({ loader }) => !/json-loader/.test(loader));
 
 	const fileLoader = config.module.rules.find(({ loader }) => /file-loader/.test(loader));

README.md

@@ -78,10 +78,6 @@ yarn test
 # run the storybook
 yarn storybook
 
-# before commit run
-yarn i18n
-```
-
 ## Screens:
 ![image](https://user-images.githubusercontent.com/5263975/44279585-497b2980-a228-11e8-81a2-36bc3389549e.png)
 ![image](https://user-images.githubusercontent.com/5263975/44279599-5730af00-a228-11e8-8873-553ef53ee25a.png)

package.json

@@ -21,7 +21,6 @@
 		"eslint": "eslint src",
 		"stylelint": "stylelint 'src/**/*.scss'",
 		"storybook": "start-storybook -p 9001 -c .storybook",
-		"i18n": "i18nline synch && node_modules/.bin/eslint --fix src/i18n/index.js",
 		"deploy-storybook": "storybook-to-ghpages",
 		"release": "gh-release -c master --assets build.tar.gz",
 		"loki:test": "loki test --chromeDockerImage=chinello/alpine-chrome:latest --chromeFlags=\"--headless --no-sandbox --disable-gpu --disable-features=VizDisplayCompositor\" --verboseRenderer --requireReference --reactUri file:./storybook-static",
@@ -62,7 +61,6 @@
 		"loki": "^0.24.0",
 		"lorem-ipsum": "^2.0.3",
 		"mini-css-extract-plugin": "^0.11.0",
-		"node-sass": "^4.14.1",
 		"npm-run-all": "^4.1.5",
 		"postcss-css-variables": "^0.17.0",
 		"postcss-dir-pseudo-class": "^5.0.0",
@@ -72,6 +70,7 @@
 		"postcss-logical": "^4.0.2",
 		"postcss-selector-not": "^4.0.0",
 		"rimraf": "^3.0.2",
+		"sass": "^1.49.10",
 		"sass-loader": "^9.0.2",
 		"serve": "^11.3.2",
 		"style-loader": "^1.2.1",
@@ -93,14 +92,14 @@
 		"desvg": "^1.0.2",
 		"emoji-mart": "^3.0.0",
 		"history": "^5.0.0",
-		"i18nline": "^2.0.1",
+		"i18next": "^21.3.3",
 		"markdown-it": "^11.0.0",
 		"mem": "^6.1.0",
 		"mitt": "^2.1.0",
 		"preact": "^10.4.6",
-		"preact-i18nline": "^2.0.0",
 		"preact-router": "^3.2.1",
 		"query-string": "^6.13.1",
+		"react-i18next": "^11.13.0",
 		"whatwg-fetch": "^3.4.0"
 	},
 	"browserslist": [
@@ -113,11 +112,6 @@
 		"gitEmail": "[email protected]",
 		"commitMessage": "Deploy Storybook to GitHub Pages [skip ci]"
 	},
-	"husky": {
-		"hooks": {
-			"pre-commit": "run-s i18n && git add -A src/i18n"
-		}
-	},
 	"houston": {
 		"updateFiles": [
 			"package.json"

src/components/Alert/index.js

@@ -1,12 +1,12 @@
 import { h, Component } from 'preact';
+import { withTranslation } from 'react-i18next';
 
-import I18n from '../../i18n';
 import CloseIcon from '../../icons/close.svg';
 import { createClassName } from '../helpers';
 import styles from './styles.scss';
 
 
-export class Alert extends Component {
+class Alert extends Component {
 	static defaultProps = {
 		timeout: 3000,
 		hideCloseButton: false,
@@ -28,7 +28,7 @@ export class Alert extends Component {
 		clearTimeout(this.dismissTimeout);
 	}
 
-	render = ({ success, warning, error, color, hideCloseButton, className, style = {}, children }) => (
+	render = ({ success, warning, error, color, hideCloseButton, className, style = {}, children, t }) => (
 		<div
 			role='alert'
 			className={createClassName(styles, 'alert', { success, warning, error }, [className])}
@@ -44,11 +44,13 @@ export class Alert extends Component {
 				<button
 					onClick={this.handleDismiss}
 					className={createClassName(styles, 'alert__close')}
-					aria-label={I18n.t('Dismiss this alert')}
+					aria-label={t('dismiss_this_alert')}
 				>
 					<CloseIcon width={20} height={20} />
 				</button>
 			)}
 		</div>
 	)
 }
+
+export default withTranslation()(Alert);

src/components/Alert/stories.js

@@ -3,7 +3,7 @@ import { withKnobs, boolean, color, text } from '@storybook/addon-knobs';
 import { storiesOf } from '@storybook/react';
 import { h } from 'preact';
 
-import { Alert } from '.';
+import Alert from '.';
 import { screenCentered, loremIpsum } from '../../helpers.stories';
 
 

src/components/App/App.js

@@ -0,0 +1,245 @@
+import i18next from 'i18next';
+import { h, Component } from 'preact';
+import { Router, route } from 'preact-router';
+import queryString from 'query-string';
+import { withTranslation } from 'react-i18next';
+
+import history from '../../history';
+import Connection from '../../lib/connection';
+import CustomFields from '../../lib/customFields';
+import Hooks from '../../lib/hooks';
+import { parentCall } from '../../lib/parentCall';
+import Triggers from '../../lib/triggers';
+import userPresence from '../../lib/userPresence';
+import { ChatConnector } from '../../routes/Chat';
+import ChatFinished from '../../routes/ChatFinished';
+import GDPRAgreement from '../../routes/GDPRAgreement';
+import LeaveMessage from '../../routes/LeaveMessage';
+import Register from '../../routes/Register';
+import SwitchDepartment from '../../routes/SwitchDepartment';
+import TriggerMessage from '../../routes/TriggerMessage';
+import { store } from '../../store';
+import { visibility, isActiveSession, setInitCookies } from '../helpers';
+
+function isRTL(s) {
+	const rtlChars = '\u0591-\u07FF\u200F\u202B\u202E\uFB1D-\uFDFD\uFE70-\uFEFC';
+	const rtlDirCheck = new RegExp(`^[^${ rtlChars }]*?[${ rtlChars }]`);
+
+	return rtlDirCheck.test(s);
+}
+
+export class App extends Component {
+	state = {
+		initialized: false,
+		poppedOut: false,
+	}
+
+	handleRoute = async () => {
+		setTimeout(() => {
+			const {
+				config: {
+					settings: {
+						registrationForm,
+						nameFieldRegistrationForm,
+						emailFieldRegistrationForm,
+						forceAcceptDataProcessingConsent: gdprRequired,
+					},
+					online,
+					departments = [],
+				},
+				gdpr: {
+					accepted: gdprAccepted,
+				},
+				triggered,
+				user,
+			} = this.props;
+
+			setInitCookies();
+
+			if (gdprRequired && !gdprAccepted) {
+				return route('/gdpr');
+			}
+
+			if (!online) {
+				parentCall('callback', 'no-agent-online');
+				return route('/leave-message');
+			}
+
+			const showDepartment = departments.filter((dept) => dept.showOnRegistration).length > 0;
+
+			const showRegistrationForm = (
+				registrationForm
+					&& (nameFieldRegistrationForm || emailFieldRegistrationForm || showDepartment)
+			)
+				&& !triggered
+				&& !(user && user.token);
+			if (showRegistrationForm) {
+				return route('/register');
+			}
+		}, 100);
+	}
+
+	handleTriggers() {
+		const { config: { online, enabled } } = this.props;
+
+		Triggers.enabled = online && enabled;
+
+		if (online && enabled) {
+			Triggers.init();
+		}
+	}
+
+	handleEnableNotifications = () => {
+		const { dispatch, sound = {} } = this.props;
+		dispatch({ sound: { ...sound, enabled: true } });
+	}
+
+	handleDisableNotifications = () => {
+		const { dispatch, sound = {} } = this.props;
+		dispatch({ sound: { ...sound, enabled: false } });
+	}
+
+	handleMinimize = () => {
+		parentCall('minimizeWindow');
+		const { dispatch } = this.props;
+		dispatch({ minimized: true });
+	}
+
+	handleRestore = () => {
+		parentCall('restoreWindow');
+		const { dispatch, undocked } = this.props;
+		const dispatchRestore = () => dispatch({ minimized: false, undocked: false });
+		const dispatchEvent = () => {
+			dispatchRestore();
+			store.off('storageSynced', dispatchEvent);
+		};
+		if (undocked) {
+			store.on('storageSynced', dispatchEvent);
+		} else {
+			dispatchRestore();
+		}
+	}
+
+	handleOpenWindow = () => {
+		parentCall('openPopout');
+		const { dispatch } = this.props;
+		dispatch({ undocked: true, minimized: false });
+	}
+
+	handleDismissAlert = (id) => {
+		const { dispatch, alerts = [] } = this.props;
+		dispatch({ alerts: alerts.filter((alert) => alert.id !== id) });
+	}
+
+	handleVisibilityChange = async () => {
+		const { dispatch } = this.props;
+		await dispatch({ visible: !visibility.hidden });
+	}
+
+	handleLanguageChange = () => {
+		this.forceUpdate();
+	}
+
+	dismissNotification = () => !isActiveSession();
+
+	initWidget() {
+		const { minimized, iframe: { visible }, dispatch } = this.props;
+		parentCall(minimized ? 'minimizeWindow' : 'restoreWindow');
+		parentCall(visible ? 'showWidget' : 'hideWidget');
+
+		visibility.addListener(this.handleVisibilityChange);
+		this.handleVisibilityChange();
+		window.addEventListener('beforeunload', () => {
+			visibility.removeListener(this.handleVisibilityChange);
+			dispatch({ minimized: true, undocked: false });
+		});
+
+		i18next.on('languageChanged', this.handleLanguageChange);
+	}
+
+	checkPoppedOutWindow() {
+		// Checking if the window is poppedOut and setting parent minimized if yes for the restore purpose
+		const { dispatch } = this.props;
+		const poppedOut = queryString.parse(window.location.search).mode === 'popout';
+		this.setState({ poppedOut });
+		if (poppedOut) {
+			dispatch({ minimized: false });
+		}
+	}
+
+	async initialize() {
+		// TODO: split these behaviors into composable components
+		await Connection.init();
+		this.handleTriggers();
+		CustomFields.init();
+		Hooks.init();
+		userPresence.init();
+		this.initWidget();
+		this.checkPoppedOutWindow();
+
+		this.setState({ initialized: true });
+		parentCall('ready');
+	}
+
+	async finalize() {
+		CustomFields.reset();
+		userPresence.reset();
+		visibility.removeListener(this.handleVisibilityChange);
+	}
+
+	componentDidMount() {
+		this.initialize();
+	}
+
+	componentWillUnmount() {
+		this.finalize();
+	}
+
+	componentDidUpdate() {
+		const { i18n } = this.props;
+		document.dir = isRTL(i18n.t('yes')) ? 'rtl' : 'ltr';
+	}
+
+	render = ({
+		sound,
+		undocked,
+		minimized,
+		expanded,
+		alerts,
+		modal,
+	}, { initialized, poppedOut }) => {
+		if (!initialized) {
+			return null;
+		}
+		const screenProps = {
+			notificationsEnabled: sound && sound.enabled,
+			minimized: !poppedOut && (minimized || undocked),
+			expanded: !minimized && expanded,
+			windowed: !minimized && poppedOut,
+			sound,
+			alerts,
+			modal,
+			onEnableNotifications: this.handleEnableNotifications,
+			onDisableNotifications: this.handleDisableNotifications,
+			onMinimize: this.handleMinimize,
+			onRestore: this.handleRestore,
+			onOpenWindow: this.handleOpenWindow,
+			onDismissAlert: this.handleDismissAlert,
+			dismissNotification: this.dismissNotification,
+		};
+
+		return (
+			<Router history={history} onChange={this.handleRoute}>
+				<ChatConnector default path='/' {...screenProps} />
+				<ChatFinished path='/chat-finished' {...screenProps} />
+				<GDPRAgreement path='/gdpr' {...screenProps} />
+				<LeaveMessage path='/leave-message' {...screenProps} />
+				<Register path='/register' {...screenProps} />
+				<SwitchDepartment path='/switch-department' {...screenProps} />
+				<TriggerMessage path='/trigger-messages' {...screenProps} />
+			</Router>
+		);
+	}
+}
+
+export default withTranslation()(App);