Merge pull request entur#1391 from solita-sabinaf/TIS-565/fintraffic_…

…style_customisations

TIS-565/Fintraffic UI customisations

package.json

@@ -57,7 +57,8 @@
     "react-redux": "8.1.3",
     "react-router-dom": "6.23.1",
     "redux-sentry-middleware": "0.2.2",
-    "uuid": "10.0.0"
+    "uuid": "10.0.0",
+    "@fintraffic/fds-coreui-css": "0.1.3"
   },
   "devDependencies": {
     "@redux-devtools/extension": "3.3.0",

src/components/JourneyPatterns/index.tsx

@@ -77,7 +77,7 @@ const JourneyPatterns = ({ journeyPatterns, onChange, children }: Props) => {
             })}
             ref={textFieldRef}
           />
-          <div>
+          <div className={'confirm-dialog-buttons'}>
             <SecondaryButton
               onClick={() => setShowModal(false)}
               className="margin-right"

src/config/ConfigContext.ts

@@ -3,4 +3,6 @@ import { Config } from './config';
 
 export const ConfigContext = createContext<Config>({});
 
-export const useConfig = () => useContext(ConfigContext);
+export const useConfig = () => {
+  return useContext(ConfigContext);
+};

src/config/config.ts

@@ -9,7 +9,13 @@ import { Locale } from '../i18n';
  *  For multi-level features, only the top-level featureName should be
  *  toggled.
  */
-export interface SandboxFeatures {}
+export interface SandboxFeatures {
+  /**
+   * Fintraffic's custom features or assets grouped in one location;
+   * For example: custom styles override, logo component and translations provider.
+   */
+  Fintraffic: boolean;
+}
 
 export interface Config {
   /**
@@ -74,4 +80,13 @@ export interface Config {
    * Sandbox feature configuration
    */
   sandboxFeatures?: SandboxFeatures;
+
+  /**
+   * Path to folder inder /ext that contains features or assets of a company that adopted Nplan.
+   * This is used e.g. for:
+   *    CustomStyle, when determining the relevant custom style class;
+   *    CustomLogo;
+   *    overriding translations (case appTitle)
+   */
+  extPath?: string;
 }

src/ext/Fintraffic/CustomIntlProvider/FintrafficIntlProvider.tsx

@@ -0,0 +1,62 @@
+import { Suspense, useDeferredValue, useEffect, useState } from 'react';
+import { IntlProvider } from 'react-intl';
+import { selectLocale, updateConfiguredLocale } from 'i18n/intlSlice';
+import { getMessages } from 'i18n';
+import { useAppSelector, useAppDispatch } from '../../../store/hooks';
+import { useConfig } from '../../../config/ConfigContext';
+import { getExtMessages } from './getExtMessages';
+
+/**
+ * Main objective of this was to override certain translation values (e.g. appTitle)
+ * and use additional translation keys that are relevant only for the custom Fintraffic features;
+ *
+ * @param children
+ * @constructor
+ */
+export const FintrafficIntlProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [messages, setMessages] = useState<Record<string, string> | undefined>(
+    undefined,
+  );
+  const { defaultLocale, extPath } = useConfig();
+  const selectedLocale = useAppSelector(selectLocale);
+  const deferredMessages = useDeferredValue(messages);
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    if (defaultLocale) {
+      dispatch(updateConfiguredLocale(defaultLocale));
+    }
+  }, [defaultLocale]);
+
+  useEffect(() => {
+    getMessages(selectedLocale).then(async (messagesForLocale) => {
+      setMessages(() => messagesForLocale);
+      if (extPath) {
+        const extMessages = await getExtMessages(extPath, selectedLocale);
+        const combinedMessages = {
+          ...messagesForLocale,
+          ...extMessages,
+        } as Record<string, string>;
+        setMessages(() => combinedMessages);
+      }
+    });
+  }, [selectedLocale, extPath]);
+
+  return (
+    <Suspense>
+      {deferredMessages !== null && (
+        <IntlProvider
+          locale={selectedLocale}
+          messages={messages}
+          defaultLocale={defaultLocale || 'fi'}
+        >
+          {children}
+        </IntlProvider>
+      )}
+    </Suspense>
+  );
+};

src/ext/Fintraffic/CustomIntlProvider/getExtMessages.ts

@@ -0,0 +1,14 @@
+import { Locale } from '../../../i18n';
+import { ExtMessages } from './translations/translationKeys';
+
+/**
+ * Getting translation overrides or additional translations related specifically to external company that adopted Nplan
+ * @param extPath
+ * @param locale
+ */
+export const getExtMessages = async (
+  extPath: string,
+  locale: Locale,
+): Promise<Record<ExtMessages, string>> => {
+  return (await import(`./translations/${locale}.ts`)).messages;
+};

src/ext/Fintraffic/CustomIntlProvider/index.ts

@@ -0,0 +1,2 @@
+import { FintrafficIntlProvider } from './FintrafficIntlProvider';
+export default FintrafficIntlProvider;

src/ext/Fintraffic/CustomIntlProvider/translations/en.ts

@@ -0,0 +1,4 @@
+export const messages = {
+  appTitle: 'RAE',
+  appLogoTitle: 'Route and schedule editor',
+};

src/ext/Fintraffic/CustomIntlProvider/translations/fi.ts

@@ -0,0 +1,4 @@
+export const messages = {
+  appTitle: 'RAE',
+  appLogoTitle: 'Reitti- ja aikataulueditori',
+};

src/ext/Fintraffic/CustomIntlProvider/translations/sv.ts

@@ -0,0 +1,4 @@
+export const messages = {
+  appTitle: 'RAE',
+  appLogoTitle: 'Rutt- och schemaredigerare',
+};

src/ext/Fintraffic/CustomIntlProvider/translations/translationKeys.ts

@@ -0,0 +1,4 @@
+import { messages as fiMessages } from './fi';
+
+export type ExtMessagesKey = typeof fiMessages;
+export type ExtMessages = keyof ExtMessagesKey;

src/ext/Fintraffic/CustomLogo/FintrafficLogo.tsx

@@ -0,0 +1,19 @@
+import './styles.scss';
+import { useIntl } from 'react-intl';
+import logo from './logo.png';
+import React from 'react';
+
+export const FintrafficLogo = () => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <div className="custom-logo-wrapper">
+      <img
+        className="logo"
+        src={logo}
+        alt={formatMessage({ id: 'navBarRootLinkLogoAltText' })}
+      />
+      <div>{formatMessage({ id: 'appLogoTitle' })}</div>
+    </div>
+  );
+};

src/ext/Fintraffic/CustomLogo/index.ts

@@ -0,0 +1,2 @@
+import { FintrafficLogo } from './FintrafficLogo';
+export default FintrafficLogo;

src/ext/Fintraffic/CustomLogo/styles.scss

@@ -0,0 +1,21 @@
+@import '@fintraffic/fds-coreui-css/dist/tokens';
+
+.custom-logo-wrapper {
+  cursor: pointer;
+  margin-top: 16px;
+  margin-bottom: 16px;
+  padding-left: 30px;
+  padding-right: 30px;
+  height: auto;
+}
+
+.custom-logo-wrapper > div {
+  color: #3388ff;
+  width: fit-content;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.logo {
+  width: 150px;
+}

src/ext/Fintraffic/CustomStyle/FintrafficStyle.tsx

@@ -0,0 +1,8 @@
+import './styles.scss';
+
+/**
+ * Main point in here is just to import the style overrides
+ */
+export const FintrafficStyle = () => {
+  return <></>;
+};

src/ext/Fintraffic/CustomStyle/index.ts

@@ -0,0 +1,2 @@
+import { FintrafficStyle } from './FintrafficStyle';
+export default FintrafficStyle;