@kiwicom/smart-faq/src/shared/ssr/Contexts.js

// @flow

import * as React from 'react';
import Cookies from 'js-cookie';
import { ThemeProvider } from 'styled-components';
import { Provider as ModalProvider } from '@kiwicom/nitro/lib/services/modal/context';
import ModalValue from '@kiwicom/nitro/lib/components/Value';
import InitCurrency from '@kiwicom/nitro/lib/components/InitCurrency';
import InitAuth from '@kiwicom/nitro/lib/components/InitAuth';
import { Provider as AuthProvider } from '@kiwicom/nitro/lib/services/auth/context';
import { Provider as CurrencyProvider } from '@kiwicom/nitro/lib/services/currency/context';
import { Provider as FetchedProvider } from '@kiwicom/nitro/lib/services/fetched/context';
import InitIntl from '@kiwicom/nitro/lib/components/InitIntl';
import { Provider as IntlProvider } from '@kiwicom/nitro/lib/services/intl/context';
import { Provider as BrandProvider } from '@kiwicom/nitro/lib/services/brand/context';
import { getTokens } from '@kiwicom/orbit-design-tokens';
import { logout } from '@kiwicom/nitro/lib/services/auth/api';
import isBrowser from 'relay-in-next/src/isBrowser';
import InitLog from '@kiwicom/nitro/lib/components/InitLog';
import { Provider as LogProvider } from '@kiwicom/nitro/lib/services/log/context';

import { LanguageContext } from '../../SmartFAQ/context/Language';
import SearchStateProvider from '../../SmartFAQ/context/SearchState';
import PageVariantContext from '../../SmartFAQ/context/PageVariant';
import IsomorphicRouter from './IsomorphicRouter';
import { UserContext } from '../../SmartFAQ/context/User';

type Props = {
  children: React.Node,
  location: string,
  lng: string,
  ip: string,
  userContext: Object,
  theme: Object,
  currencyId: string,
  language: Object,
  countries: Object,
  brand: Object,
  fetched: Object,
  intl: Object,
  screenWidthFallback: number,
};

const LogContexts = ({ children }: {| children: React.Node |}) =>
  isBrowser ? (
    <InitLog>
      {ctx => <LogProvider value={ctx}>{children}</LogProvider>}
    </InitLog>
  ) : (
    <>{children}</>
  );
class Contexts extends React.Component<Props> {
  handleCurrencyChange = (currency: string) => {
    Cookies.set('preferred_currency', currency, {
      expires: 3650, // 10 years - standard copied from kiwi.com and holidays.kiwi.com
    });
  };

  handleSignIn = (token: string) => {
    Cookies.set('ua_session_token', token);
  };

  handleSignOut = () => {
    const token = Cookies.get('ua_session_token');
    logout(token);
  };

  handleMyBooking = () => {
    // callback only receives simpleToken as a paramter
    // window.location.href = `https://www.kiwi.com/${lng}/manage/${bid}/${simpleToken}`;
  };

  handleSocialAuth = () => {
    // redirect the user to the given URL (callback receives authUrl as a paramter)
  };

  handleRegister = () => {};

  render() {
    const {
      children,
      lng,
      ip,
      location,
      userContext,
      theme,
      currencyId,
      language,
      countries,
      brand,
      fetched,
      intl,
      screenWidthFallback,
    } = this.props;
    const redirectUrl = isBrowser ? window.location.href : 'https://kiwi.com';

    return (
      <LogContexts>
        <BrandProvider value={brand}>
          <InitIntl raw={intl}>
            {intl => (
              <IntlProvider value={intl}>
                <LanguageContext.Provider value={language.id}>
                  <FetchedProvider value={fetched}>
                    <InitCurrency
                      brand={brand}
                      countries={countries}
                      affiliate=""
                      ip={ip}
                      initialCurrency={currencyId}
                      langCurrency={language.currency}
                      onChange={this.handleCurrencyChange}
                    >
                      {currency => (
                        <CurrencyProvider
                          value={{
                            ...currency,
                            currency: currency.currency,
                          }}
                        >
                          <InitAuth
                            token={Cookies.get('ua_session_token') || null}
                            brand={brand}
                            redirectURL={redirectUrl}
                            onMyBooking={this.handleMyBooking}
                            onSocialAuth={this.handleSocialAuth}
                            onSignIn={this.handleSignIn}
                            onSignOut={this.handleSignOut}
                            onRegister={this.handleRegister}
                          >
                            {auth => (
                              <AuthProvider value={auth}>
                                <ModalValue>
                                  {modal => (
                                    <ModalProvider value={modal}>
                                      <ThemeProvider
                                        theme={{
                                          ...theme,
                                          orbit: {
                                            ...getTokens(),
                                            fontFamily:
                                              "'Circular Pro', -apple-system, '.SFNSText-Regular', 'San Francisco', 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif",
                                          },
                                        }}
                                      >
                                        <UserContext.Provider
                                          value={userContext}
                                        >
                                          <IsomorphicRouter
                                            basename={`/${lng}`}
                                            location={location}
                                            context={{}}
                                          >
                                            <PageVariantContext.Provider
                                              value={{
                                                variant: 'fullPage',
                                                urlPrefix: '/help',
                                                screenWidthFallback,
                                              }}
                                            >
                                              <SearchStateProvider>
                                                {children}
                                              </SearchStateProvider>
                                            </PageVariantContext.Provider>
                                          </IsomorphicRouter>
                                        </UserContext.Provider>
                                      </ThemeProvider>
                                    </ModalProvider>
                                  )}
                                </ModalValue>
                              </AuthProvider>
                            )}
                          </InitAuth>
                        </CurrencyProvider>
                      )}
                    </InitCurrency>
                  </FetchedProvider>
                </LanguageContext.Provider>
              </IntlProvider>
            )}
          </InitIntl>
        </BrandProvider>
      </LogContexts>
    );
  }
}

export default Contexts;