Merge branch 'v2-mst-aptd-at-lcz-sty' into lighthouse-integration

# Conflicts:
#	.github/workflows/deploy-zeit-staging.yml

.gitignore

@@ -147,3 +147,5 @@ _site
 
 # Tmp files (cache, etc.)
 *.cache
+
+.vercel

package.json

@@ -18,7 +18,8 @@
     "deploy:customer2:all": "yarn deploy:customer2 && yarn deploy:customer2:production",
     "deploy:customer2": "yarn now:cleanup && now --confirm --local-config=now.customer2.staging.json --debug",
     "deploy:customer2:production": "yarn now:cleanup && now --confirm --local-config=now.customer2.production.json --prod --debug",
-    "now:cleanup": "npx del-cli .now/",
+    "deploy:fake": "git commit --allow-empty -m \"Fake empty commit (force CI trigger)\"",
+    "now:cleanup": "npx del-cli .now/ && npx del-cli .vercel/",
     "e2e": "yarn e2e:run",
     "e2e:all:production": "yarn e2e:customer1:production && yarn e2e:customer2:production",
     "e2e:customer1:production": "CYPRESS_STAGE=customer1 yarn e2e:run",

src/components/doc/ExternalFeaturesSection.tsx

@@ -50,6 +50,11 @@ const ExternalFeaturesSection: React.FunctionComponent<Props> = (props): JSX.Ele
                     Impersonate <b>Customer {process.env.NEXT_PUBLIC_CUSTOMER_REF === 'customer1' ? '1' : '2'} Admin</b> and play with this demo
                   </Button>
                 </ExternalLink>
+                <ExternalLink href={'https://airtable.com/shrnxN46JDBkQV9u1'}>
+                  <Button color={'link'}>
+                    See Airtable base (where data are stored)
+                  </Button>
+                </ExternalLink>
                 <ExternalLink href={'https://stacker.app?ref=unly-nrn'}>
                   <Button color={'link'}>
                     Learn more about Stacker

src/components/pageLayouts/DefaultLayout.tsx

@@ -3,6 +3,7 @@ import { Amplitude, LogOnMount } from '@amplitude/react-amplitude';
 import { jsx } from '@emotion/core';
 import { createLogger } from '@unly/utils-simple-logger';
 import classnames from 'classnames';
+import { NextRouter, useRouter } from 'next/router';
 import React, { useState } from 'react';
 import ErrorPage from '../../pages/_error';
 import { SoftPageProps } from '../../types/pageProps/SoftPageProps';
@@ -51,6 +52,8 @@ const DefaultLayout: React.FunctionComponent<Props> = (props): JSX.Element => {
     Sidebar,
   } = props;
   const [isSidebarOpen, setIsSidebarOpen] = useState<boolean>(true); // Todo make default value depend on viewport size
+  const router: NextRouter = useRouter();
+  const isIframeWithFullPagePreview = router?.query?.fullPagePreview === '1';
 
   Sentry.addBreadcrumb({ // See https://docs.sentry.io/enriching-error-data/breadcrumbs
     category: fileLabel,
@@ -85,7 +88,7 @@ const DefaultLayout: React.FunctionComponent<Props> = (props): JSX.Element => {
       }
 
       {
-        !isInIframe && (
+        (!isInIframe || isIframeWithFullPagePreview) && (
           <Nav />
         )
       }
@@ -119,7 +122,7 @@ const DefaultLayout: React.FunctionComponent<Props> = (props): JSX.Element => {
       </div>
 
       {
-        !isInIframe && (
+        (!isInIframe || isIframeWithFullPagePreview) && (
           <Footer />
         )
       }

src/components/pageLayouts/PreviewModeBanner.tsx

@@ -1,21 +1,23 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { NextRouter, useRouter } from 'next/router';
 import React from 'react';
+import { Button } from 'reactstrap';
 import Alert from 'reactstrap/lib/Alert';
 import usePreviewMode from '../../hooks/usePreviewMode';
+import { stringifyQueryParameters } from '../../utils/app/router';
 import ExternalLink from '../utils/ExternalLink';
 import Tooltip from '../utils/Tooltip';
-import { Button } from 'reactstrap';
 
 type Props = {}
 
-const stopPreviewMode = async (): Promise<void> => {
-  window.location.href = `/api/preview?stop=true&redirectTo=${window.location.pathname}`;
+const stopPreviewMode = (queryParameters: string): void => {
+  window.location.href = `/api/preview?stop=true&redirectTo=${window.location.pathname}${queryParameters}`;
 };
 
-const startPreviewMode = async (): Promise<void> => {
-  window.location.href = `/api/preview?redirectTo=${window.location.pathname}`;
+const startPreviewMode = (queryParameters: string): void => {
+  window.location.href = `/api/preview?redirectTo=${window.location.pathname}${queryParameters}`;
 };
 
 const ExplanationTooltipOverlay: React.FunctionComponent = (): JSX.Element => {
@@ -42,6 +44,8 @@ const ExplanationTooltipOverlay: React.FunctionComponent = (): JSX.Element => {
  */
 const PreviewModeBanner: React.FunctionComponent<Props> = (props): JSX.Element => {
   const { preview } = usePreviewMode();
+  const router: NextRouter = useRouter();
+  const queryParameters: string = stringifyQueryParameters(router);
 
   return (
     <Alert
@@ -88,8 +92,8 @@ const PreviewModeBanner: React.FunctionComponent<Props> = (props): JSX.Element =
             <span className={'right'}>
               <Button
                 color={'link'}
-                onClick={stopPreviewMode}
-                onKeyPress={stopPreviewMode}
+                onClick={(): void => stopPreviewMode(queryParameters)}
+                onKeyPress={(): void => stopPreviewMode(queryParameters)}
               >
                 Leave preview mode
               </Button>
@@ -109,8 +113,8 @@ const PreviewModeBanner: React.FunctionComponent<Props> = (props): JSX.Element =
             <span className={'right'}>
               <Button
                 color={'link'}
-                onClick={startPreviewMode}
-                onKeyPress={startPreviewMode}
+                onClick={(): void => startPreviewMode(queryParameters)}
+                onKeyPress={(): void => startPreviewMode(queryParameters)}
               >
                 Start preview mode
               </Button>