Merge pull request #1083 from Vizzuality/hotfix/revert-home-insights

Hotfix: revert home insights

frontend/scripts/analytics/home.events.js

@@ -1,10 +1,35 @@
-import { HOME__PLAY_VIDEO } from 'react-components/home/home.actions';
+import {
+  HOME__PLAY_VIDEO,
+  HOME__CLICK_ENTRYPOINT,
+  HOME__CLICK_NEXT_ENTRYPOINT
+} from 'react-components/home/home.actions';
+import { TOOL_LAYOUT } from 'constants';
 
 export default [
   {
     type: HOME__PLAY_VIDEO,
     action: 'Click on video',
     category: 'homepage',
     getPayload: action => action.payload
+  },
+  {
+    type: HOME__CLICK_NEXT_ENTRYPOINT,
+    category: 'homepage',
+    action: 'Slide entry points'
+  },
+  {
+    type: HOME__CLICK_ENTRYPOINT,
+    category: 'homepage',
+    action: 'Click on entry points',
+    getPayload(action) {
+      const { payload } = action;
+      if (payload.type !== 'tool') {
+        return payload.type === 'profileRoot' ? 'profiles' : payload.type;
+      }
+      if (payload.payload?.serializerParams?.toolLayout === TOOL_LAYOUT.left) {
+        return 'Map';
+      }
+      return 'Supply Chain';
+    }
   }
 ];

frontend/scripts/react-components/home/entrypoints/entrypoints.component.jsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Siema from 'react-siema';
+import Link from 'redux-first-router-link';
+import debounce from 'lodash/debounce';
+import cx from 'classnames';
+import Heading from 'react-components/shared/heading/heading.component';
+import { ImgBackground } from 'react-components/shared/img';
+
+import './entrypoints.scss';
+import { TOOL_LAYOUT } from 'constants';
+
+class Entrypoints extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      currentSlide: 0,
+      isMobile: Entrypoints.getIsMobile()
+    };
+    this.entrypoints = [
+      {
+        link: { type: Entrypoints.getIsMobile() && ENABLE_REDESIGN_PAGES ? 'explore' : 'tool' },
+        subtitle: 'Supply Chain',
+        text:
+          'Follow trade flows to identify sourcing regions, profile supply chain risks and' +
+          ' assess opportunities for sustainable production.',
+        className: '-supply-chain',
+        src: '/images/backgrounds/entrypoint-2@2x.jpg'
+      },
+      {
+        link: { type: 'profileRoot' },
+        subtitle: 'Profile',
+        text:
+          'View the trade and sustainability profile of a particular' +
+          ' company or production region.',
+        className: '-profile',
+        src: '/images/backgrounds/entrypoint-1@2x.jpg'
+      },
+      {
+        link: { type: 'tool', payload: { serializerParams: { toolLayout: TOOL_LAYOUT.left } } },
+        subtitle: 'Map',
+        text:
+          'Explore the sustainability of different production regions and identify risks and' +
+          ' opportunities facing downstream buyers.',
+        className: '-map',
+        src: '/images/backgrounds/entrypoint-3@2x.jpg'
+      }
+    ];
+    if (DISABLE_PROFILES) {
+      this.entrypoints.splice(1, 1);
+    }
+    this.getSliderRef = this.getSliderRef.bind(this);
+    this.onClickPrev = this.onClickPrev.bind(this);
+    this.onClickNext = this.onClickNext.bind(this);
+    this.onSlideChange = this.onSlideChange.bind(this);
+    this.onResize = debounce(this.onResize.bind(this), 300);
+  }
+
+  componentDidMount() {
+    window.addEventListener('resize', this.onResize);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.onResize);
+  }
+
+  onClickPrev() {
+    this.slider.prev();
+  }
+
+  onClickNext() {
+    const { onClickNext } = this.props;
+    onClickNext();
+    this.slider.next();
+  }
+
+  onSlideChange() {
+    this.setState({ currentSlide: this.slider.currentSlide });
+  }
+
+  onResize() {
+    this.setState({ isMobile: Entrypoints.getIsMobile() });
+  }
+
+  static getIsMobile() {
+    return window.innerWidth <= 700; // value needs to match with entrypoints.scss variable
+  }
+
+  getSliderRef(el) {
+    this.slider = el;
+  }
+
+  renderEntrypoints(grid) {
+    const { onClick } = this.props;
+
+    return this.entrypoints.map(slide => (
+      <div key={slide.subtitle} className={grid}>
+        <ImgBackground
+          className={cx('entrypoint-slide', slide.className)}
+          onClick={() => onClick(slide.link)}
+          src={slide.src}
+        >
+          <Link to={slide.link}>
+            <div className="entrypoint-slide-content">
+              <Heading variant="mono" color="pink" size="sm">
+                {slide.subtitle}
+              </Heading>
+              <p className="entrypoint-text">{slide.text}</p>
+            </div>
+          </Link>
+        </ImgBackground>
+      </div>
+    ));
+  }
+
+  renderSlider() {
+    const { currentSlide } = this.state;
+    return (
+      <React.Fragment>
+        <Siema loop={false} perPage={2.15} ref={this.getSliderRef} onChange={this.onSlideChange}>
+          {this.renderEntrypoints('column small-6')}
+        </Siema>
+        {currentSlide > 0 && this.entrypoints.length > 2 && (
+          <button className="entrypoint-button -prev" onClick={this.onClickPrev} />
+        )}
+
+        {currentSlide === 0 && this.entrypoints.length > 2 && (
+          <button className="entrypoint-button -next" onClick={this.onClickNext} />
+        )}
+      </React.Fragment>
+    );
+  }
+
+  render() {
+    const { isMobile } = this.state;
+    return (
+      <div className="c-entrypoints">
+        <div className="row">
+          {isMobile ? this.renderEntrypoints('column small-12') : this.renderSlider()}
+        </div>
+      </div>
+    );
+  }
+}
+
+Entrypoints.propTypes = {
+  onClick: PropTypes.func.isRequired,
+  onClickNext: PropTypes.func.isRequired
+};
+
+export default Entrypoints;

frontend/scripts/react-components/home/entrypoints/entrypoints.scss

@@ -0,0 +1,147 @@
+@import 'styles/settings';
+$entrypoint-slide-height: 550px;
+$entrypoints-stacked-card-size: 360px;
+
+.c-entrypoints {
+  height: 100%;
+
+  .row {
+    position: relative;
+    > div {
+      height: $entrypoints-stacked-card-size;
+      width: 100%;
+      overflow: visible !important;
+
+      @media screen and (min-width: $home-entrypoint-breakpoint) {
+        height: $entrypoint-slide-height;
+      }
+    }
+  }
+
+  .column {
+    padding: 0;
+  }
+
+  .entrypoint-slide {
+    position: relative;
+    height: $entrypoints-stacked-card-size;
+    background-position: bottom right;
+    background-size: 75% auto;
+    background-repeat: no-repeat;
+    border-bottom: 1px solid $charcoal-grey-faded-a-lot;
+
+    &::after {
+      content: '';
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+
+    &.-profile {
+      &::after {
+        background-color: rgba($egg-shell, 0.15);
+      }
+    }
+
+    &.-supply-chain {
+      &::after {
+        background-color: rgba($light-gray, 0.15);
+      }
+    }
+
+    &.-map {
+      &::after {
+        background-color: rgba($light-gray, 0.15);
+      }
+    }
+
+    @media screen and (min-width: $breakpoint-mobile) {
+      background-size: 60% auto;
+    }
+
+    @media screen and (min-width: $home-entrypoint-breakpoint) {
+      height: $entrypoint-slide-height;
+      background-size: 100% auto;
+      border-right: 1px solid $charcoal-grey-faded-a-lot;
+      border-bottom: 0;
+
+      &::after {
+        content: none;
+      }
+    }
+  }
+
+  .entrypoint-slide-content {
+    position: relative;
+    padding: 45px 20px 0 20px;
+    height: 100%;
+    width: 100%;
+    z-index: $z-above;
+
+    @media screen and (min-width: $home-entrypoint-breakpoint) {
+      padding: 42px 20px 0 50px;
+    }
+  }
+
+  .entrypoint-text {
+    font-family: $font-family-2;
+    font-size: 18px;
+    font-weight: 300;
+    line-height: 1.75;
+    color: $charcoal-grey;
+
+    @media only screen and (min-width: 800px) {
+      font-size: 24px;
+    }
+  }
+
+  .entrypoint-button {
+    position: absolute;
+    top: 50%;
+    height: 40px;
+    width: 40px;
+    border-radius: 100%;
+    background-color: #f65e6e;
+    cursor: pointer;
+
+    &:hover {
+      background-color: darken($strong-pink, 4%);
+    }
+
+    &:active {
+      background-color: $strong-pink;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      background: transparent;
+      border-top: 1.5px solid white;
+      border-right: 1.5px solid white;
+      box-shadow: 0 0 0 lightgray;
+    }
+
+    &.-next {
+      left: calc((100% / 2.15) * 2);
+      transform: translate(-50%, -50%);
+      &::after {
+        transform: translate(-50%, -50%) rotate(45deg);
+        margin-left: -1px;
+      }
+    }
+
+    &.-prev {
+      right: calc((100% / 2.15) * 2);
+      transform: translate(50%, -50%);
+      &::after {
+        transform: translate(-50%, -50%) rotate(-135deg);
+        margin-left: 1px;
+      }
+    }
+  }
+}

frontend/scripts/react-components/home/home.actions.js

@@ -9,6 +9,8 @@ import { HOME_VIDEO } from 'constants';
 
 export const HOME__SET_CONTENT = 'HOME__SET_CONTENT';
 export const HOME__PLAY_VIDEO = 'HOME__PLAY_VIDEO';
+export const HOME__CLICK_ENTRYPOINT = 'HOME__CLICK_ENTRYPOINT';
+export const HOME__CLICK_NEXT_ENTRYPOINT = 'HOME__CLICK_NEXT_ENTRYPOINT';
 
 export const getHomeContent = (type, mock) => dispatch => {
   const content = {
@@ -36,3 +38,12 @@ export const playHomeVideo = videoId => {
     payload: lang
   };
 };
+
+export const clickEntrypoint = link => ({
+  type: HOME__CLICK_ENTRYPOINT,
+  payload: link
+});
+
+export const clickNextEntrypoint = () => ({
+  type: HOME__CLICK_NEXT_ENTRYPOINT
+});