;
+};
+
+export type PromiseAction = PayloadAction>;
+
+export function createPromiseAction(
+ prefix: string
+): PromiseActionCreatorWithPayload {
+ const resolveAction = createAction, string>(`${prefix}.RESOLVED`, (payload) => ({ payload }));
+ const rejectAction = createAction>(`${prefix}.REJECTED`, (payload) => ({ payload }));
+
+ const triggerAction = createAction>(`${prefix}.TRIGGER`, (payload: P) => ({
+ payload,
+ meta: {
+ promise: {
+ resolveAction,
+ rejectAction,
+ },
+ },
+ }));
+
+ return ((): PromiseActionCreatorWithPayload => {
+ const f: any = triggerAction;
+ f.trigger = triggerAction;
+ f.resolved = resolveAction;
+ f.rejected = rejectAction;
+ return f;
+ })();
+}
+
+export function* resolvePromiseAction(action: PromiseAction, value: A) {
+ yield put(action.meta.promise.resolveAction(value));
+ action.meta?.promise?.resolve?.(value);
+}
+
+export function* rejectPromiseAction(action: PromiseAction, value: B) {
+ yield put(action.meta.promise.rejectAction(value));
+ action.meta?.promise?.reject?.(value);
+}
+
+const isTriggerAction = (action: PayloadAction) => !!action.meta?.promise?.resolveAction;
+
+export const promiseMiddleware: Middleware = (store) => (next) => (
+ action: PayloadAction
+) => {
+ if (isTriggerAction(action)) {
+ return new Promise((resolve, reject) =>
+ next({
+ ...action,
+ meta: {
+ promise: {
+ ...action.meta.promise,
+ resolve,
+ reject,
+ },
+ },
+ })
+ );
+ }
+
+ return next(action);
+};
diff --git a/src/shared/utils/rendering.ts b/src/shared/utils/rendering.ts
new file mode 100644
index 0000000..794ba4d
--- /dev/null
+++ b/src/shared/utils/rendering.ts
@@ -0,0 +1,9 @@
+import { always, Arity0Fn, complement, equals, ifElse, isNil } from 'ramda';
+
+export const renderWhen = (pred: (arg: any) => boolean, fn: Arity0Fn) => ifElse(pred, fn, always(null));
+
+export const renderWhenNotNil = (fn: Arity0Fn) => renderWhen(complement(isNil), fn);
+
+export const renderWhenTrue = (fn: Arity0Fn) => renderWhen(equals(true), fn);
+
+export const renderWhenTrueOtherwise = (fn: Arity0Fn, otherwise: Arity0Fn) => ifElse(equals(true), fn, otherwise);
diff --git a/src/shared/utils/reportError.ts b/src/shared/utils/reportError.ts
new file mode 100644
index 0000000..27014e3
--- /dev/null
+++ b/src/shared/utils/reportError.ts
@@ -0,0 +1,9 @@
+/**
+ * Generic function for error reporting.
+ * Use it in all sagas, so you can later send errors to Sentry.
+ * @param error
+ * @returns void
+ */
+export const reportError = (error: any): void => {
+ console.error(error); //eslint-disable-line
+};
diff --git a/src/shared/utils/storybook.tsx b/src/shared/utils/storybook.tsx
new file mode 100644
index 0000000..8402531
--- /dev/null
+++ b/src/shared/utils/storybook.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Action, createStore } from 'redux';
+import { Provider } from 'react-redux';
+import { createReducer, Reducer } from '@reduxjs/toolkit';
+import { Story } from '@storybook/react';
+
+import { store } from '../../mocks/store';
+import { GlobalState } from '../../config/reducers';
+
+export const withRedux = (initialState: GlobalState = store, reducer: Reducer | null = null) => (
+ StoryComponent: Story
+) => {
+ const store = createStore(reducer ?? createReducer(initialState, {}));
+ return (
+
+
+
+ );
+};
diff --git a/src/shared/utils/testUtils.tsx b/src/shared/utils/testUtils.tsx
new file mode 100644
index 0000000..633d6b4
--- /dev/null
+++ b/src/shared/utils/testUtils.tsx
@@ -0,0 +1,76 @@
+import React, { ReactNode, ReactElement } from 'react';
+import { HelmetProvider } from 'react-helmet-async';
+import { render } from '@testing-library/react';
+import { createStore } from 'redux';
+import { identity } from 'ramda';
+import { Provider } from 'react-redux';
+import { createMemoryHistory, MemoryHistory } from 'history';
+import { Route, Router } from 'react-router';
+import { IntlProvider } from 'react-intl';
+import produce from 'immer';
+
+import { DEFAULT_LOCALE, translationMessages, MessagesObject } from '../../i18n';
+import { store as fixturesStore } from '../../mocks/store';
+import createReducer, { GlobalState } from '../../config/reducers';
+
+export const PLACEHOLDER_TEST_ID = 'content';
+export const PLACEHOLDER_CONTENT = content;
+
+export const spiedHistory = (route = '/') => {
+ const history = createMemoryHistory({ initialEntries: [route] });
+ const pushSpy = jest.spyOn(history, 'push');
+ return {
+ history,
+ pushSpy,
+ };
+};
+
+interface ContextData {
+ router?: {
+ url?: string;
+ routePath?: string;
+ history?: MemoryHistory;
+ };
+ store?: GlobalState;
+ messages?: MessagesObject;
+}
+
+interface ProvidersWrapperProps {
+ children: ReactNode;
+ context?: ContextData;
+}
+
+export const ProvidersWrapper = ({ children, context = {} }: ProvidersWrapperProps) => {
+ const { router = {}, store = fixturesStore, messages } = context;
+ const { url = `/${DEFAULT_LOCALE}`, routePath = '/:lang/', history } = router;
+
+ const routerHistory: MemoryHistory = history ?? createMemoryHistory({ initialEntries: [url] });
+
+ const intlProviderMockProps = {
+ locale: DEFAULT_LOCALE,
+ messages: messages ?? translationMessages[DEFAULT_LOCALE],
+ };
+
+ return (
+
+
+
+
+ {children}
+
+
+
+
+ );
+};
+
+export const makeContextRenderer = (component: (props: T | Record) => ReactElement) => (
+ props?: T,
+ context?: ContextData
+) =>
+ render(component(props ?? {}), {
+ wrapper: ({ children }) => {children},
+ });
+
+export const makePropsRenderer = (component: (props: T | Record) => ReactElement) => (props?: T) =>
+ render(component(props ?? {}));
diff --git a/src/shared/utils/unsupported/__tests__/unsupportedBrowserDetection.spec.ts b/src/shared/utils/unsupported/__tests__/unsupportedBrowserDetection.spec.ts
new file mode 100644
index 0000000..5873df8
--- /dev/null
+++ b/src/shared/utils/unsupported/__tests__/unsupportedBrowserDetection.spec.ts
@@ -0,0 +1,132 @@
+import UnsupportedBrowserDetection, { BrowserConfig } from '../unsupportedBrowserDetection';
+
+/* eslint-disable max-len*/
+const CHROME_UA =
+ 'Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/61.0.3163.100 Safari/537.36';
+const IE_UA = 'Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)';
+const CRAWLER_UA = 'Googlebot/2.1';
+const FB_UA =
+ 'Mozilla/5.0 (Linux; Android 4.4.4; One Build/KTU84L.H4) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/33.0.0.0 Mobile Safari/537.36 [FB_IAB/FB4A;FBAV/28.0.0.20.16;]';
+/* eslint-enable max-len*/
+
+function setUserAgent(userAgent: string) {
+ // @ts-ignore
+ navigator.__defineGetter__('userAgent', () => userAgent);
+}
+
+describe('Utils: UnsupportedBrowserDetection Class', () => {
+ const config: BrowserConfig = {
+ desktop: [
+ {
+ browser: 'firefox',
+ minversion: 41,
+ },
+ {
+ browser: 'ie',
+ versions: [11, 'edge'],
+ },
+ {
+ browser: 'chrome',
+ minversion: 45,
+ },
+ {
+ browser: 'edge',
+ },
+ {
+ os: 'mac os',
+ minos: '10.10.0',
+ browser: 'safari',
+ minversion: 8,
+ },
+ ],
+ tablet: [
+ {
+ os: 'ios',
+ minos: '9',
+ browser: 'mobile safari',
+ },
+ {
+ os: 'android',
+ minos: '5.0',
+ browser: 'chrome',
+ },
+ {
+ browser: 'ie',
+ versions: [11, 'edge'],
+ },
+ {
+ browser: 'edge',
+ },
+ ],
+ mobile: [
+ {
+ os: 'ios',
+ minos: '9',
+ browser: 'mobile safari',
+ },
+ {
+ os: 'ios',
+ minos: '5.0',
+ browser: 'chrome',
+ },
+ {
+ os: 'android',
+ minos: '5.0',
+ browser: 'chrome',
+ minversion: 50,
+ },
+ ],
+ };
+
+ const checkSupport = ({
+ config,
+ isInAppBrowserSupported,
+ }: {
+ config: BrowserConfig;
+ isInAppBrowserSupported?: boolean;
+ }) => new UnsupportedBrowserDetection(config, isInAppBrowserSupported);
+
+ beforeEach(() => {
+ document.documentElement.className = '';
+ });
+
+ describe('isSupported()', () => {
+ it('should return true for supported browser', () => {
+ setUserAgent(CHROME_UA);
+
+ const detector = checkSupport({ config });
+
+ expect(detector.isSupported()).toBe(true);
+ });
+
+ it('should return false for unsupported browser', () => {
+ setUserAgent(IE_UA);
+
+ const detector = checkSupport({ config });
+
+ expect(detector.isSupported()).toBe(false);
+ });
+
+ it('should return true when is in-app browser and isInAppBrowserSupported equals true', () => {
+ setUserAgent(FB_UA);
+
+ const detector = checkSupport({ config, isInAppBrowserSupported: true });
+
+ expect(detector.isSupported()).toBe(true);
+ });
+
+ it('should return false when is in-app browser and isInAppBrowserSupported equals false', () => {
+ setUserAgent(FB_UA);
+
+ const detector = checkSupport({ config, isInAppBrowserSupported: false });
+
+ expect(detector.isSupported()).toBe(false);
+ });
+
+ it('should return true for crawler bots', () => {
+ setUserAgent(CRAWLER_UA);
+ const detector = checkSupport({ config });
+ expect(detector.isSupported()).toBe(true);
+ });
+ });
+});
diff --git a/src/shared/utils/unsupported/support.messages.ts b/src/shared/utils/unsupported/support.messages.ts
new file mode 100644
index 0000000..1c9733a
--- /dev/null
+++ b/src/shared/utils/unsupported/support.messages.ts
@@ -0,0 +1,13 @@
+/* eslint-disable max-len */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+ pageTitle: {
+ id: 'unsupported.pageTitle',
+ defaultMessage: 'Unsupported Browser',
+ },
+ title: {
+ id: 'unsupported.title',
+ defaultMessage: 'Unsupported Browser',
+ },
+});
diff --git a/src/shared/utils/unsupported/support.ts b/src/shared/utils/unsupported/support.ts
new file mode 100644
index 0000000..56606cc
--- /dev/null
+++ b/src/shared/utils/unsupported/support.ts
@@ -0,0 +1,34 @@
+import { DEFAULT_LOCALE, translationMessages } from '../../../i18n';
+
+//eslint-disable-next-line import/first
+import UnsupportedBrowserDetection from './unsupportedBrowserDetection';
+import { unsupportedPageContent } from './unsupportedPage/unsupportedPage';
+
+require('es5-shim');
+require('es5-shim/es5-sham');
+require('./unsupportedPage/unsupportedPage.css');
+//eslint-disable-next-line import/first
+//eslint-disable-next-line import/first
+
+const detection = new UnsupportedBrowserDetection();
+
+export const setUnsupportedClasses = () => {
+ document.documentElement.className += ` device-${detection.deviceType}`;
+
+ if (detection.isInAppBrowser) {
+ document.documentElement.className += ' in-app-browser';
+ }
+
+ if (!detection.isSupported()) {
+ document.documentElement.className += ' unsupported';
+ const unsupportedPageElement = document.querySelector('.unsupported-page');
+ const appElement = document.querySelector('#app');
+
+ if (unsupportedPageElement && appElement) {
+ unsupportedPageElement.style.display = 'block';
+ appElement.style.display = 'none';
+ document.title = 'Unsupported Browser';
+ unsupportedPageElement.innerHTML = unsupportedPageContent;
+ }
+ }
+};
diff --git a/src/shared/utils/unsupported/unsupportedBrowserDetection.ts b/src/shared/utils/unsupported/unsupportedBrowserDetection.ts
new file mode 100644
index 0000000..76887e4
--- /dev/null
+++ b/src/shared/utils/unsupported/unsupportedBrowserDetection.ts
@@ -0,0 +1,168 @@
+import { UAParser } from 'ua-parser-js';
+import semverCompare from 'semver-compare';
+import { pickBy } from 'ramda';
+
+type Platform = 'desktop' | 'tablet' | 'mobile';
+
+type BrowserVersion = number | string;
+
+type RequirementType = 'browser' | 'minversion' | 'versions' | 'os' | 'minos';
+
+interface BrowserRequirement {
+ browser: string;
+ minversion?: BrowserVersion;
+ versions?: BrowserVersion[];
+ os?: string;
+ minos?: string;
+}
+
+type BrowserCheckResults = Record;
+
+export type BrowserConfig = Record;
+
+const DEFAULT_SUPPORTED_BROWSERS_CONFIG: BrowserConfig = {
+ desktop: [
+ {
+ browser: 'firefox',
+ minversion: 41,
+ },
+ {
+ browser: 'ie',
+ versions: [11, 'edge'],
+ },
+ {
+ browser: 'chrome',
+ minversion: 45,
+ },
+ {
+ browser: 'edge',
+ },
+ {
+ os: 'mac os',
+ minos: '10.10.0',
+ browser: 'safari',
+ minversion: 8,
+ },
+ ],
+ tablet: [
+ {
+ os: 'ios',
+ minos: '9',
+ browser: 'mobile safari',
+ },
+ {
+ os: 'android',
+ minos: '5.0',
+ browser: 'chrome',
+ },
+ {
+ browser: 'ie',
+ versions: [11, 'edge'],
+ },
+ {
+ browser: 'edge',
+ },
+ ],
+ mobile: [
+ {
+ os: 'ios',
+ minos: '9',
+ browser: 'mobile safari',
+ },
+ {
+ os: 'ios',
+ minos: '5.0',
+ browser: 'chrome',
+ },
+ {
+ os: 'android',
+ minos: '5.0',
+ browser: 'chrome',
+ minversion: 50,
+ },
+ ],
+};
+
+export default class UnsupportedBrowserDetection {
+ parser = new UAParser();
+ private supportedBrowsersConfig: BrowserConfig;
+ private readonly isInAppBrowserSupported: boolean;
+
+ constructor(config = DEFAULT_SUPPORTED_BROWSERS_CONFIG, isInAppBrowserSupported = true) {
+ this.supportedBrowsersConfig = config;
+ this.isInAppBrowserSupported = isInAppBrowserSupported;
+ }
+
+ get isInAppBrowser() {
+ return this.ua.indexOf('FBAN') > -1 || this.ua.indexOf('FBAV') > -1 || this.ua.indexOf('Twitter') > -1;
+ }
+
+ get isCrawler() {
+ return ['Googlebot', 'Bingbot', 'Slurp', 'DuckDuckBot', 'Baiduspider', 'YandexBot'].some(
+ (crawlerName) => this.ua.indexOf(crawlerName) > -1
+ );
+ }
+
+ get device() {
+ return this.parser.getDevice();
+ }
+
+ get ua() {
+ return this.parser.getUA();
+ }
+
+ get browser() {
+ return this.parser.getBrowser();
+ }
+
+ get os() {
+ return this.parser.getOS();
+ }
+
+ get deviceType(): Platform {
+ const { type = 'desktop' } = this.device;
+ return type as Platform;
+ }
+
+ compareVersions(a: BrowserVersion | undefined, b: string | undefined) {
+ if (!a || !b) {
+ return false;
+ }
+
+ if (typeof a === 'string' || (a as any) instanceof String) {
+ return semverCompare(a as string, b) <= 0;
+ }
+
+ return a <= parseInt(b, 10);
+ }
+
+ isSupported() {
+ if (this.isCrawler) {
+ return true;
+ }
+
+ if (this.isInAppBrowser) {
+ return this.isInAppBrowserSupported;
+ }
+
+ const { version: browserVersion = '' } = this.browser;
+
+ return this.supportedBrowsersConfig[this.deviceType].some((options: BrowserRequirement) => {
+ const { os, minos, browser, minversion, versions } = options;
+ const parsedVersion = isNaN(parseInt(browserVersion, 10))
+ ? browserVersion.toLocaleLowerCase()
+ : parseInt(browserVersion, 10);
+
+ const checked: BrowserCheckResults = {
+ os: os === this.os.name?.toLowerCase(),
+ minos: this.compareVersions(minos, this.os.version),
+ browser: browser === this.browser.name?.toLowerCase(),
+ minversion: this.compareVersions(minversion, browserVersion),
+ versions: versions ? versions.indexOf(parsedVersion) >= 0 : false,
+ };
+
+ const requiredChecks: BrowserCheckResults = pickBy((val, key) => Object.keys(options).includes(key), checked);
+ return !Object.values(requiredChecks).includes(false);
+ });
+ }
+}
diff --git a/src/shared/utils/unsupported/unsupportedPage/fonts/Hellix-Medium.otf b/src/shared/utils/unsupported/unsupportedPage/fonts/Hellix-Medium.otf
new file mode 100644
index 0000000..37cdcdf
Binary files /dev/null and b/src/shared/utils/unsupported/unsupportedPage/fonts/Hellix-Medium.otf differ
diff --git a/src/shared/utils/unsupported/unsupportedPage/fonts/Hellix-SemiBold.otf b/src/shared/utils/unsupported/unsupportedPage/fonts/Hellix-SemiBold.otf
new file mode 100644
index 0000000..7ec3ad9
Binary files /dev/null and b/src/shared/utils/unsupported/unsupportedPage/fonts/Hellix-SemiBold.otf differ
diff --git a/src/shared/utils/unsupported/unsupportedPage/unsupportedPage.css b/src/shared/utils/unsupported/unsupportedPage/unsupportedPage.css
new file mode 100644
index 0000000..6c733aa
--- /dev/null
+++ b/src/shared/utils/unsupported/unsupportedPage/unsupportedPage.css
@@ -0,0 +1,112 @@
+@font-face {
+ font-family: 'Hellix';
+ font-style: normal;
+ font-weight: normal;
+ src: url('./fonts/Hellix-Medium.otf') format('opentype');
+}
+
+@font-face {
+ font-family: 'Hellix';
+ font-style: normal;
+ font-weight: bold;
+ src: url('./fonts/Hellix-SemiBold.otf') format('opentype');
+}
+
+.unsupported-page .container {
+ width: 100%;
+ height: 100vh;
+ color: #ffffff;
+ font-family: 'Hellix', sans-serif;
+ position: relative;
+ background-color: #111111;
+ background-image: url('../../../../images/clouds.png');
+ background-repeat: no-repeat;
+ background-position: 50% 90%;
+}
+
+.unsupported-page .navbar {
+ max-width: 1920px;
+ margin: 0 auto;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ height: 100px;
+ display: flex;
+ align-items: flex-start;
+ justify-content: space-between;
+ padding: 40px 35px 2px;
+ z-index: 5;
+}
+
+.unsupported-page .navbar .exit {
+ border: 1px solid rgb(255, 255, 255);
+ color: rgb(255, 255, 255);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ border-radius: 2px;
+ font-weight: normal;
+ font-size: 16px;
+ line-height: 28px;
+ text-decoration: none;
+ padding: 8px 52px 8px 20px;
+ background-image: url('../../../../images/icons/out.svg');
+ background-repeat: no-repeat;
+ background-position: calc(100% - 20px) 50%;
+}
+
+.unsupported-page .navbar .logo {
+ width: 174px;
+ height: 50px;
+ background-image: url('../../../../images/icons/logo-full.svg');
+ background-repeat: no-repeat;
+ overflow: hidden;
+ text-indent: -100px;
+}
+
+.unsupported-page .content h1 {
+ font-size: 48px;
+ margin: 0;
+}
+
+.unsupported-page .content p {
+ margin: 48px 0;
+ font-size: 20px;
+ line-height: 140%;
+ color: #767676;
+}
+
+.unsupported-page .content {
+ max-width: 720px;
+ margin: 0 auto;
+ padding: 106px 0 0 0;
+ text-align: center;
+}
+
+@media (max-width: 768px) {
+ .unsupported-page .navbar .logo {
+ width: 32px;
+ height: 40px;
+ background-image: url('../../../../images/icons/logo-icon.svg');
+ background-repeat: no-repeat;
+ display: block;
+ margin: 8px auto 0;
+ }
+
+ .unsupported-page .navbar .exit {
+ display: none;
+ }
+
+ .unsupported-page .content h1 {
+ font-size: 32px;
+ margin: 0 24px;
+ }
+
+ .unsupported-page .content p {
+ margin: 24px 24px 36px;
+ font-size: 16px;
+ line-height: 140%;
+ color: #767676;
+ }
+}
diff --git a/src/shared/utils/unsupported/unsupportedPage/unsupportedPage.ts b/src/shared/utils/unsupported/unsupportedPage/unsupportedPage.ts
new file mode 100644
index 0000000..3410b79
--- /dev/null
+++ b/src/shared/utils/unsupported/unsupportedPage/unsupportedPage.ts
@@ -0,0 +1,15 @@
+export const unsupportedPageContent = `
+
+
+
+
Unsupported Browser
+
+ You are using a browser that we don't support.
+ For the best experience please use the latest version of Chrome, Firefox, or Safari.
+
+
+
- Apptension Tech Radar
-
-
-