feat(wizard): implement story embed, disable option based on page

i18n/de.json

@@ -76,6 +76,7 @@
   "copyEmbedLink": "Einbettungslink kopieren",
   "preview": "Vorschau",
   "previewTitle": "Link kopieren, damit jeder eine Vorschau sehen kann",
+  "story": "Geschichte",
   "tags.sea-surface-temperature": "Meeresoberflächentemperatur",
   "tags.sea-ice": "Meereis",
   "tags.ocean-colour": "Ozean Farbe",

i18n/en.json

@@ -76,6 +76,7 @@
   "copyEmbedLink": "Copy embed link",
   "preview": "Preview",
   "previewTitle": "Copy link to allow anyone to preview",
+  "story": "Story",
   "tags.sea-surface-temperature": "Sea Surface Temperature",
   "tags.sea-ice": "Sea Ice",
   "tags.ocean-colour": "Ocean Colour",

i18n/es.json

@@ -76,6 +76,7 @@
   "copyEmbedLink": "Copiar enlace embed",
   "preview": "previsualizar",
   "previewTitle": "Copiar enlace para que cualquiera pueda previsualizar",
+  "story": "Historia",
   "tags.sea-surface-temperature": "Temperatura de la superficie del mar",
   "tags.sea-ice": "Hielo marino",
   "tags.ocean-colour": "Color del océano",

i18n/fr.json

@@ -76,6 +76,7 @@
   "copyEmbedLink": "Copier le lien d'intégration",
   "preview": "aperçu",
   "previewTitle": "Copier le lien pour permettre à n'importe qui de prévisualiser",
+  "story": "Histoire",
   "tags.sea-surface-temperature": "Température de surface de la mer",
   "tags.sea-ice": "Glace de mer",
   "tags.ocean-colour": "Couleur des océans",

i18n/nl.json

@@ -76,6 +76,7 @@
   "copyEmbedLink": "Kopieer embed link",
   "preview": "voorbeeld",
   "previewTitle": "Link kopiëren zodat iedereen een voorbeeld kan bekijken",
+  "story": "Verhaal",
   "tags.sea-surface-temperature": "Zeewateroppervlaktetemperatuur",
   "tags.sea-ice": "Zee-ijs",
   "tags.ocean-colour": "Oceaankleur",

src/scripts/components/main/embed-checkbox-list/embed-checkbox-list.module.styl

@@ -6,7 +6,11 @@
   gap: emCalc(16px)
 
 .checkboxList.app
-  grid-area: 1 / 1 / 3 / 2
+  grid-area: 1 / 1 / 4 / 2
+
+.checkboxList.disabledEmbed
+  opacity: 0.5
+  pointer-events: none
 
 .listTitle
   margin: 0

src/scripts/components/main/embed-checkbox-list/embed-checkbox-list.tsx

@@ -1,5 +1,6 @@
 import React, {FunctionComponent} from 'react';
 import {FormattedMessage} from 'react-intl';
+import {useLocation} from 'react-router-dom';
 import cx from 'classnames';
 
 import {ElementOptions, UiEmbedElement} from '../../../types/embed-elements';
@@ -17,15 +18,29 @@ const EmbedCheckboxList: FunctionComponent<Props> = ({
   elementsChecked,
   handleChange
 }) => {
+  const {pathname} = useLocation();
+  const isDataPath = pathname === '/';
+  const isStoriesPath = pathname === '/stories';
+  const isStoryPath = pathname.startsWith('/stories/story-');
+  const isStoriesList = elementList.title === 'stories';
+  const isStory = elementList.title === 'story';
+  const disabledEmbed =
+    (isDataPath && (isStoriesList || isStory)) ||
+    (isStoriesPath && !isStoriesList) ||
+    (isStoryPath && !isStory);
+
   const checkboxListClasses = cx(
     styles.checkboxList,
+    disabledEmbed ? styles.disabledEmbed : null,
     styles[elementList.title]
   );
+
   const convertToTitleCase = (inputString: string) =>
     inputString
       .split('_')
       .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-      .join(' ');
+      .join(' ')
+      .replace(/Story/g, '');
 
   return (
     <div className={checkboxListClasses}>

src/scripts/components/main/embed-result/embed-result.tsx

@@ -3,6 +3,7 @@ import {FormattedMessage} from 'react-intl';
 
 import Button from '../button/button';
 import {CopyTextIcon} from '../icons/copy-text-icon';
+import {createEmbedUrl} from '../../../libs/create-embed-url';
 
 import styles from './embed-result.module.styl';
 
@@ -12,26 +13,11 @@ interface Props {
 const EmbedResult: FunctionComponent<Props> = ({paramsString}) => {
   const iFrameRef = useRef<HTMLTextAreaElement>(null);
   const linkRef = useRef<HTMLTextAreaElement>(null);
-  const currentUrl = window.location.href;
-
-  const createEmbedUrl = () => {
-    if (paramsString.length) {
-      return currentUrl.includes('?')
-        ? `${currentUrl}&${paramsString}`
-        : `${currentUrl}?${paramsString}`;
-    }
-    return '';
-  };
 
   const createiFrameCode = () => {
-    if (paramsString.length) {
-      const embedUrl = currentUrl.includes('?')
-        ? `${currentUrl}&${paramsString}`
-        : `${currentUrl}?${paramsString}`;
+    const embedUrl = createEmbedUrl(paramsString);
 
-      return `<iframe width="560" height="315" src="${embedUrl}" title="Climate from Space"></iframe>`;
-    }
-    return '';
+    return `<iframe width="560" height="315" src="${embedUrl}" title="Climate from Space"></iframe>`;
   };
 
   const copyUrl = (copyValue: string) => {
@@ -69,7 +55,7 @@ const EmbedResult: FunctionComponent<Props> = ({paramsString}) => {
         <textarea
           ref={linkRef}
           className={styles.embedLinkTextArea}
-          value={createEmbedUrl()}
+          value={createEmbedUrl(paramsString)}
           wrap="off"
           readOnly
         />

src/scripts/components/main/embed-settings/embed-settings.module.styl

@@ -4,7 +4,7 @@
   display: grid
   column-gap: emCalc(24px)
   grid-template-columns: repeat(2, auto)
-  grid-template-rows: repeat(3, auto)
+  grid-template-rows: repeat(4, auto)
   row-gap: emCalc(24px)
 
 .title
@@ -17,7 +17,7 @@
 .languageSelect
   display: flex
   flex-direction: column
-  grid-area: 3 / 1 / 4 / 3
+  grid-area: 4 / 1 / 5 / 3
   gap: emCalc(8px)
 
   label

src/scripts/components/main/embed-wizard/embed-wizard.tsx

@@ -6,6 +6,7 @@ import {embedElementsSelector} from '../../../selectors/embed-elements-selector'
 import {ElementOptions} from '../../../types/embed-elements';
 import EmbedResult from '../embed-result/embed-result';
 import EmbedSettings from '../embed-settings/embed-settings';
+import {createEmbedUrl} from '../../../libs/create-embed-url';
 
 import styles from './embed-wizard.module.styl';
 
@@ -24,17 +25,6 @@ const EmbedWizard: FunctionComponent = () => {
     .map(key => `${key[0]}=${key[1]}`)
     .join('&');
 
-  const currentUrl = window.location.href;
-
-  const createEmbedUrl = () => {
-    if (disabledParamsString.length) {
-      return currentUrl.includes('?')
-        ? `${currentUrl}&${disabledParamsString}`
-        : `${currentUrl}?${disabledParamsString}`;
-    }
-    return '';
-  };
-
   return (
     <div className={styles.embedWizard}>
       <div className={styles.contentContainer}>
@@ -60,14 +50,14 @@ const EmbedWizard: FunctionComponent = () => {
           <div className={styles.resultLink}>
             <textarea
               className={styles.embedPreviewArea}
-              value={createEmbedUrl()}
+              value={createEmbedUrl(disabledParamsString)}
               wrap="off"
               readOnly
             />
 
             <a
               className={styles.previewButton}
-              href={createEmbedUrl()}
+              href={createEmbedUrl(disabledParamsString)}
               target={'_blank'}
               rel="noopener noreferrer">
               <button>

src/scripts/components/stories/header/header.module.styl

@@ -1,6 +1,7 @@
 @require '../../../../variables.styl'
 
 .header
+  position: relative
   display: flex
   flex-shrink: 0
   justify-content: space-between
@@ -21,13 +22,15 @@
   font-size: emCalc(18px)
 
 .title
-  flex-grow: 1
+  position: absolute
+  left: 50%
   margin-bottom: 0
   color: $textWhite
   text-align: center
   text-transform: uppercase
   white-space: nowrap
   font-size: emCalc(18px)
+  transform: translateX(-50%)
 
 @media screen and (max-width: 480px)
   .title

src/scripts/components/stories/header/header.tsx

@@ -1,8 +1,12 @@
+/* eslint-disable camelcase */
 import React, {FunctionComponent} from 'react';
+import {useSelector} from 'react-redux';
+import {useLocation} from 'react-router-dom';
 
 import Button from '../../main/button/button';
 import {ArrowBackIcon} from '../../main/icons/arrow-back-icon';
 import {EsaLogoShort} from '../../main/icons/esa-logo-short';
+import {embedElementsSelector} from '../../../selectors/embed-elements-selector';
 
 import styles from './header.module.styl';
 
@@ -18,21 +22,32 @@ const Header: FunctionComponent<Props> = ({
   title,
   backButtonId,
   children
-}) => (
-  <div className={styles.header}>
-    <div className={styles.logo}>
-      <EsaLogoShort />
+}) => {
+  const {pathname} = useLocation();
+  const {back_link, story_back_link} = useSelector(embedElementsSelector);
+  const isStoriesPath = pathname === '/stories';
+  const isStoryPath = pathname.startsWith('/stories/story-');
+  const disabledEmbedLink =
+    (isStoriesPath && back_link) || (isStoryPath && story_back_link);
+
+  return (
+    <div className={styles.header}>
+      <div className={styles.logo}>
+        <EsaLogoShort />
+      </div>
+      {disabledEmbedLink && (
+        <Button
+          className={styles.backButton}
+          icon={ArrowBackIcon}
+          label={backButtonId}
+          link={backLink}
+          hideLabelOnMobile
+        />
+      )}
+      {title && <h1 className={styles.title}>{title}</h1>}
+      <div className={styles.rightContent}>{children}</div>
     </div>
-    <Button
-      className={styles.backButton}
-      icon={ArrowBackIcon}
-      label={backButtonId}
-      link={backLink}
-      hideLabelOnMobile
-    />
-    {title && <h1 className={styles.title}>{title}</h1>}
-    <div className={styles.rightContent}>{children}</div>
-  </div>
-);
+  );
+};
 
 export default Header;

src/scripts/components/stories/presentation-selector/presentation-selector.tsx

@@ -1,25 +1,30 @@
 import React, {FunctionComponent} from 'react';
 import {useIntl} from 'react-intl';
+import {useSelector} from 'react-redux';
 
 import StoryList from '../story-list/story-list';
 import Header from '../header/header';
 import Share from '../../main/share/share';
+import {embedElementsSelector} from '../../../selectors/embed-elements-selector';
 
 import {StoryMode} from '../../../types/story-mode';
 
 import styles from './presentation-selector.module.styl';
 
 const PresentationSelector: FunctionComponent = () => {
   const intl = useIntl();
+  const {header} = useSelector(embedElementsSelector);
 
   return (
     <div className={styles.presentationSelector}>
-      <Header
-        backLink="/"
-        backButtonId="backToDataMode"
-        title={intl.formatMessage({id: 'presenter'})}>
-        <Share />
-      </Header>
+      {header && (
+        <Header
+          backLink="/"
+          backButtonId="backToDataMode"
+          title={intl.formatMessage({id: 'presenter'})}>
+          <Share />
+        </Header>
+      )}
       <StoryList mode={StoryMode.Present} />
     </div>
   );

src/scripts/components/stories/showcase-selector/showcase-selector.tsx

@@ -1,11 +1,13 @@
 import React, {FunctionComponent} from 'react';
 import {useHistory, useParams} from 'react-router-dom';
 import {useIntl, FormattedMessage} from 'react-intl';
+import {useSelector} from 'react-redux';
 
 import StoryList from '../story-list/story-list';
 import Header from '../header/header';
 import {PlayIcon} from '../../main/icons/play-icon';
 import Button from '../../main/button/button';
+import {embedElementsSelector} from '../../../selectors/embed-elements-selector';
 
 import {StoryMode} from '../../../types/story-mode';
 
@@ -17,6 +19,7 @@ const ShowcaseSelector: FunctionComponent = () => {
   const intl = useIntl();
   const storyIds = params.storyIds?.split('&');
   const selectedIds = storyIds || [];
+  const {header} = useSelector(embedElementsSelector);
 
   const onSelectStory = (id: string) => {
     const isInList = selectedIds.includes(id);
@@ -29,21 +32,23 @@ const ShowcaseSelector: FunctionComponent = () => {
 
   return (
     <div className={styles.showcaseSelector}>
-      <Header
-        backLink="/"
-        backButtonId="backToDataMode"
-        title={intl.formatMessage({id: 'showcase'})}>
-        <FormattedMessage
-          id="storiesSelected"
-          values={{numberSelected: selectedIds.length}}
-        />
-        <Button
-          disabled={isDisabled}
-          label={'play'}
-          link={`/showcase/${selectedIds.join('&')}/0/0`}
-          icon={PlayIcon}
-        />
-      </Header>
+      {header && (
+        <Header
+          backLink="/"
+          backButtonId="backToDataMode"
+          title={intl.formatMessage({id: 'showcase'})}>
+          <FormattedMessage
+            id="storiesSelected"
+            values={{numberSelected: selectedIds.length}}
+          />
+          <Button
+            disabled={isDisabled}
+            label={'play'}
+            link={`/showcase/${selectedIds.join('&')}/0/0`}
+            icon={PlayIcon}
+          />
+        </Header>
+      )}
       <StoryList
         mode={StoryMode.Showcase}
         onSelectStory={id => onSelectStory(id)}