From 5a04c14f84756646568f7f4fec98b73964cc4c5c Mon Sep 17 00:00:00 2001 From: Vadorequest Date: Sun, 20 Dec 2020 22:52:27 +0100 Subject: [PATCH] Small fixes following #229 (#230) --- .../LOGO_Powered_by_UNLY_BLACK_BLUE.svg | 1 + .../LOGO_Powered_by_UNLY_monochrome_WHITE.svg | 54 ---- src/airtableSchema.ts | 13 +- .../appBootstrap/MultiversalAppBootstrap.tsx | 17 +- src/components/pageLayouts/Footer.tsx | 231 ++++++++++-------- src/constants.ts | 2 +- src/pages/404.tsx | 2 +- src/types/data/Customer.ts | 11 +- src/types/data/CustomerTheme.ts | 11 +- src/types/data/Theme.ts | 1 + src/utils/icons/font-awesome.ts | 4 + 11 files changed, 180 insertions(+), 167 deletions(-) create mode 100644 public/static/images/LOGO_Powered_by_UNLY_BLACK_BLUE.svg delete mode 100644 public/static/images/LOGO_Powered_by_UNLY_monochrome_WHITE.svg diff --git a/public/static/images/LOGO_Powered_by_UNLY_BLACK_BLUE.svg b/public/static/images/LOGO_Powered_by_UNLY_BLACK_BLUE.svg new file mode 100644 index 000000000..ef9c944ad --- /dev/null +++ b/public/static/images/LOGO_Powered_by_UNLY_BLACK_BLUE.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/static/images/LOGO_Powered_by_UNLY_monochrome_WHITE.svg b/public/static/images/LOGO_Powered_by_UNLY_monochrome_WHITE.svg deleted file mode 100644 index 8bc2f018e..000000000 --- a/public/static/images/LOGO_Powered_by_UNLY_monochrome_WHITE.svg +++ /dev/null @@ -1,54 +0,0 @@ - - - - - - - - - - - - diff --git a/src/airtableSchema.ts b/src/airtableSchema.ts index 85927f17c..161e4dc30 100644 --- a/src/airtableSchema.ts +++ b/src/airtableSchema.ts @@ -1,6 +1,5 @@ import { AirtableSchema } from './types/airtableDataset/AirtableSchema'; import { GenericPostConsolidationTransformationValueInputProps } from './types/airtableDataset/FieldSchema'; -import { Product } from './types/data/Product'; type Props = {} @@ -53,7 +52,12 @@ export const getAirtableSchema = (props?: Props): AirtableSchema => { }, }, serviceLabel: {}, - privacyDescription: {}, + termsDescription: { + isI18n: true, + }, + privacyDescription: { + isI18n: true, + }, }, }, Product: { @@ -71,7 +75,7 @@ export const getAirtableSchema = (props?: Props): AirtableSchema => { const { sanitizedRecord: product } = props; return product?.imagesTitle?.split(', ') || []; }, - } + }, }, description: { isI18n: true, @@ -95,10 +99,11 @@ export const getAirtableSchema = (props?: Props): AirtableSchema => { onSurfaceColor: {}, errorColor: {}, onErrorColor: {}, + fonts: {}, logo: { transformations: { asSingleRecord: true, - } + }, }, logoTitle: {}, }, diff --git a/src/components/appBootstrap/MultiversalAppBootstrap.tsx b/src/components/appBootstrap/MultiversalAppBootstrap.tsx index 7f405f2ba..d627d2621 100644 --- a/src/components/appBootstrap/MultiversalAppBootstrap.tsx +++ b/src/components/appBootstrap/MultiversalAppBootstrap.tsx @@ -38,6 +38,7 @@ import { detectLightHouse } from '../../utils/quality/lighthouse'; import { detectCypress } from '../../utils/testing/cypress'; import Loader from '../animations/Loader'; import DefaultErrorLayout from '../errors/DefaultErrorLayout'; +import ErrorDebug from '../errors/ErrorDebug'; import BrowserPageBootstrap, { BrowserPageBootstrapProps } from './BrowserPageBootstrap'; import MultiversalGlobalStyles from './MultiversalGlobalStyles'; import ServerPageBootstrap, { ServerPageBootstrapProps } from './ServerPageBootstrap'; @@ -95,12 +96,26 @@ const MultiversalAppBootstrap: React.FunctionComponent = (props): JSX.Ele }: SSGPageProps | SSRPageProps = pageProps; configureSentryI18n(lang, locale); + if (typeof serializedDataset !== 'string') { + return ( + + ); + } + if (process.env.NEXT_PUBLIC_APP_STAGE !== 'production') { // XXX It's too cumbersome to do proper typings when type changes // The "customer" was forwarded as a JSON-ish string (using Flatten) in order to avoid circular dependencies issues (SSG/SSR) // It now being converted back into an object to be actually usable on all pages // eslint-disable-next-line no-console - console.debug('pageProps.serializedDataset length (bytes)', (serializedDataset as unknown as string).length); + console.debug('pageProps.serializedDataset length (bytes)', (serializedDataset as unknown as string)?.length); // console.debug('serializedDataset', serializedDataset); } diff --git a/src/components/pageLayouts/Footer.tsx b/src/components/pageLayouts/Footer.tsx index 4398775b9..630b647c1 100644 --- a/src/components/pageLayouts/Footer.tsx +++ b/src/components/pageLayouts/Footer.tsx @@ -2,14 +2,11 @@ import { css } from '@emotion/core'; import { useTheme } from 'emotion-theming'; import React from 'react'; import { useTranslation } from 'react-i18next'; -import { - Col, - Row, -} from 'reactstrap'; -import { NRN_CO_BRANDING_LOGO_URL } from '../../constants'; +import { NRN_CO_BRANDING_LOGO_URL } from '../../constants'; import useCustomer from '../../hooks/useCustomer'; import useUserSession, { UserSession } from '../../hooks/useUserSession'; +import { CSSStyles } from '../../types/CSSStyles'; import { AirtableRecord } from '../../types/data/AirtableRecord'; import { Asset } from '../../types/data/Asset'; import { Customer } from '../../types/data/Customer'; @@ -21,135 +18,177 @@ import I18nBtnChangeLocale from '../i18n/I18nBtnChangeLocale'; import I18nLink from '../i18n/I18nLink'; import DisplayOnBrowserMount from '../rehydration/DisplayOnBrowserMount'; -type Props = {}; +type Props = { + style?: CSSStyles; +}; -const Footer: React.FunctionComponent = () => { +const Footer: React.FunctionComponent = (props) => { + const { + style, + } = props; const { t } = useTranslation(); const { deviceId }: UserSession = useUserSession(); const customer: Customer = useCustomer(); + const { availableLanguages } = customer; + const shouldDisplayI18nButton = availableLanguages?.length > 1; const theme = useTheme(); - const { primaryColor, logo: logoAirtable } = theme; - const logo = logoAirtable as AirtableRecord; + const { backgroundColor, onBackgroundColor, logo } = theme; const logoSizesMultipliers = [ { size: SIZE_XS, multiplier: 1, // We wanna keep the logos in the footer big and visible even on small devices, we've got enough space }, ]; - - // Resolve values, handle multiple fallback levels const copyrightOwner = customer?.label; const currentYear = (new Date()).getFullYear(); return ( ); }; diff --git a/src/constants.ts b/src/constants.ts index 40b18bf43..020a7fd83 100644 --- a/src/constants.ts +++ b/src/constants.ts @@ -6,7 +6,7 @@ export const NRN_DEFAULT_SERVICE_LABEL = process.env.NEXT_PUBLIC_APP_STAGE === ' /** * Co-branding logo displayed in the footer ("powered by Unly") */ -export const NRN_CO_BRANDING_LOGO_URL = '/static/images/LOGO_Powered_by_UNLY_monochrome_WHITE.svg'; +export const NRN_CO_BRANDING_LOGO_URL = '/static/images/LOGO_Powered_by_UNLY_BLACK_BLUE.svg'; /** * Fallback fonts used until our own fonts have been loaded by the browser. diff --git a/src/pages/404.tsx b/src/pages/404.tsx index 46f02234a..5a944b797 100644 --- a/src/pages/404.tsx +++ b/src/pages/404.tsx @@ -119,7 +119,7 @@ const NotFound404Page: NextPage = (props): JSX.Element => { text-align: center; `} > - + {content} []; theme: AirtableRecord; - terms?: I18nMarkdown; - termsEN?: Markdown; - termsFR?: Markdown; serviceLabel?: string; - termsDescription?: Markdown; - privacyDescription?: Markdown; + termsDescription?: I18nMarkdown; + termsDescriptionEN?: Markdown; + termsDescriptionFR?: Markdown; + privacyDescription?: I18nMarkdown; + privacyDescriptionEN?: Markdown; + privacyDescriptionFR?: Markdown; }; diff --git a/src/types/data/CustomerTheme.ts b/src/types/data/CustomerTheme.ts index 419a07851..fc150b76e 100644 --- a/src/types/data/CustomerTheme.ts +++ b/src/types/data/CustomerTheme.ts @@ -1,12 +1,13 @@ -import { AirtableAttachment } from './AirtableAttachment'; import { Theme } from './Theme'; /** * Simplified version of the Theme. * * CustomerTheme is what's really used for theming, and doesn't include useless properties from the Theme entity. + * Also, all properties defined in Theme will be set in CustomerTheme, because fallback values will have been applied. + * + * Inspired by MaterialUI Design system. + * + * @see https://material.io/design/color/the-color-system.html#color-theme-creation */ -export type CustomerTheme = Omit & { - logo: AirtableAttachment; - fonts: string; -}; +export type CustomerTheme = Required> & {}; diff --git a/src/types/data/Theme.ts b/src/types/data/Theme.ts index 58a0d0776..45b9cdf47 100644 --- a/src/types/data/Theme.ts +++ b/src/types/data/Theme.ts @@ -24,4 +24,5 @@ export type Theme = { errorColor?: string; onErrorColor?: string; logo?: AirtableAttachment; + fonts?: string; } & AirtableRecordBaseFields; diff --git a/src/utils/icons/font-awesome.ts b/src/utils/icons/font-awesome.ts index 1f58c611b..d242f8a79 100644 --- a/src/utils/icons/font-awesome.ts +++ b/src/utils/icons/font-awesome.ts @@ -8,12 +8,14 @@ import { faTimesCircle } from '@fortawesome/free-regular-svg-icons'; import { faArrowCircleLeft, faArrowCircleRight, + faArrowRight, faBook, faBookReader, faCoffee, faHome, faQuestionCircle, faUserCog, + faExclamationTriangle, } from '@fortawesome/free-solid-svg-icons'; // See https://github.com/FortAwesome/react-fontawesome#integrating-with-other-tools-and-frameworks @@ -46,10 +48,12 @@ library.add( library.add( faArrowCircleLeft, faArrowCircleRight, + faArrowRight, faBook, faBookReader, faCoffee, faHome, faQuestionCircle, faUserCog, + faExclamationTriangle, );