Features updates (kiwicom#866)

humayyani · Jun 3, 2019 · e3eb79c · e3eb79c
1 parent b1a4933
commit e3eb79c
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 58 deletions.
diff --git a/apps/landingPage/components/AccentedText.js b/apps/landingPage/components/AccentedText.js
@@ -7,8 +7,10 @@ export default styled.div`
   font-weight: 700;
   font-size: 19px;
   line-height: 30px;
+  transition: all 1s ease;
   @media (min-width: ${defaultTokens.widthBreakpointDesktop}px) {
     font-size: ${({ big }) => (big ? '33px' : '21px')};
     line-height: ${({ big }) => (big ? '45px' : '35px')};
+    ${({ isDisabled }) => (isDisabled ? 'color: #aaa' : null)};
   }
 `;
diff --git a/apps/landingPage/components/FloatedPhone.js b/apps/landingPage/components/FloatedPhone.js
@@ -7,83 +7,61 @@ import Phone from './Phone';
 import Config from '../config';
 
 type Props = {|
-  +scroll: number,
-  +featuresHeight: number,
-  +featuresTopPosition: number,
-  +featuresRef: ?Element,
+  +isFixed: boolean,
+  +scrolledOnFeature: ?number,
 |};
 
+const {
+  bookingScreen,
+  mmbScreen,
+  paymentsScreen,
+  searchScreen,
+} = Config.featuresOrderIndexes;
+
 const defaultScreenShot = {
   src: '/static/screens/search.jpg',
   srcSet:
     '/static/screens/search.jpg 1x,/static/screens/[email protected] 2x, /static/screens/[email protected] 3x',
 };
-const images = [
-  {
+
+const images = {
+  [paymentsScreen]: {
     src: '/static/screens/payments.jpg',
     srcSet:
       '/static/screens/payments.jpg 1x,/static/screens/[email protected] 2x, /static/screens/[email protected] 3x',
   },
-  {
+  [mmbScreen]: {
     src: '/static/screens/mmb.jpg',
     srcSet:
       '/static/screens/mmb.jpg 1x,/static/screens/[email protected] 2x, /static/screens/[email protected] 3x',
   },
-  {
+  [bookingScreen]: {
     src: '/static/screens/booking.jpg',
     srcSet:
       '/static/screens/booking.jpg 1x,/static/screens/[email protected] 2x, /static/screens/[email protected] 3x',
   },
-  {
+  [searchScreen]: {
     src: '/static/screens/results.jpg',
     srcSet:
       '/static/screens/results.jpg 1x,/static/screens/[email protected] 2x, /static/screens/[email protected] 3x',
   },
-];
-
-const buffer = 150;
+};
 
 const getProperScreenShot = imageIndex => {
-  if (imageIndex >= 0 || !imageIndex) {
-    if (imageIndex < images.length) {
+  if (!imageIndex || imageIndex >= 0) {
+    if (imageIndex != null && imageIndex < Object.keys(images).length) {
       return images[imageIndex];
     }
     return defaultScreenShot;
   }
   return images[0];
 };
 
-export default function FloatedPhone({
-  scroll,
-  featuresHeight,
-  featuresTopPosition,
-  featuresRef,
-}: Props) {
-  const isDimensionsDataKnown =
-    featuresHeight !== 0 && featuresTopPosition !== 0;
-  const imageIndex = isDimensionsDataKnown
-    ? Math.floor(
-        (featuresTopPosition +
-          featuresHeight -
-          scroll -
-          Config.phoneHeight -
-          Config.featuresMarginBottom +
-          buffer) /
-          Config.featureHeight,
-      )
-    : images.length;
-  const isFixed =
-    featuresTopPosition === 0 ||
-    featuresHeight === 0 ||
-    scroll <
-      featuresTopPosition +
-        featuresHeight -
-        Config.phoneHeight -
-        Config.phoneTopMargin;
-  const properScreenShot = getProperScreenShot(imageIndex);
+export default function FloatedPhone({ isFixed, scrolledOnFeature }: Props) {
+  const properScreenShot = getProperScreenShot(scrolledOnFeature);
   return (
     <PhoneImageWrapper isFixed={isFixed}>
-      {featuresRef !== null && <Phone {...properScreenShot} />}
+      <Phone {...properScreenShot} />
     </PhoneImageWrapper>
   );
 }

diff --git a/apps/landingPage/config/index.js b/apps/landingPage/config/index.js
@@ -13,4 +13,10 @@ export default {
     smooth: true,
     duration: 500,
   },
+  featuresOrderIndexes: {
+    searchScreen: 3,
+    bookingScreen: 2,
+    mmbScreen: 1,
+    paymentsScreen: 0,
+  },
 };
diff --git a/apps/landingPage/containers/Features.js b/apps/landingPage/containers/Features.js
@@ -22,8 +22,11 @@ type State = {|
   +featuresHeight: number,
   +featuresTopPosition: number,
   +featuresRef: ?Element,
+  +scrolledOnFeature: ?number,
 |};
 
+const buffer = 150;
+
 export default class Features extends React.Component<Props, State> {
   static findPosition = (ref: ?Element) => {
     const DOMNode = ReactDOM.findDOMNode(ref);
@@ -36,6 +39,7 @@ export default class Features extends React.Component<Props, State> {
     featuresHeight: 0,
     featuresTopPosition: 0,
     featuresRef: null,
+    scrolledOnFeature: null,
   };
 
   static getDerivedStateFromProps(props: Props, state: State) {
@@ -57,7 +61,49 @@ export default class Features extends React.Component<Props, State> {
   };
 
   render() {
-    const { featuresHeight, featuresTopPosition, featuresRef } = this.state;
+    const {
+      featuresRef,
+      featuresTopPosition,
+      featuresHeight,
+      scrolledOnFeature,
+    } = this.state;
+    const { scroll } = this.props;
+    const {
+      searchScreen,
+      bookingScreen,
+      mmbScreen,
+      paymentsScreen,
+    } = Config.featuresOrderIndexes;
+
+    const isDimensionsDataKnown = featuresHeight && featuresTopPosition;
+
+    const isFixed =
+      featuresTopPosition === 0 ||
+      featuresHeight === 0 ||
+      scroll <
+        featuresTopPosition +
+          featuresHeight -
+          Config.phoneHeight -
+          Config.phoneTopMargin;
+
+    const newScrollOnFeature = isDimensionsDataKnown
+      ? Math.floor(
+          (featuresTopPosition +
+            featuresHeight -
+            scroll -
+            Config.phoneHeight -
+            Config.featuresMarginBottom +
+            buffer) /
+            Config.featureHeight,
+        )
+      : null;
+    if (scrolledOnFeature !== newScrollOnFeature) {
+      this.setState({ scrolledOnFeature: newScrollOnFeature });
+    }
+    const isSearchScreenActive = searchScreen === scrolledOnFeature;
+    const isBookingScreenActive = bookingScreen === scrolledOnFeature;
+    const isMmbScreenActive = mmbScreen === scrolledOnFeature;
+    const isPaymentsScreenActive = paymentsScreen === scrolledOnFeature;
     return (
       <Content id="multiplatform" ref={this.setRef}>
         <MultiplatformWrapper>
@@ -94,45 +140,52 @@ export default class Features extends React.Component<Props, State> {
         <FeaturesContainer id="features">
           <Title>App features</Title>
           <Feature>
-            <AccentedText big>
+            <AccentedZoomedText big isDisabled={!isSearchScreenActive}>
               <Highlight>Search for flights.</Highlight> Get an access to the
               database of 15 billion connections virtually interlined by
               Kiwi.com
-            </AccentedText>
+            </AccentedZoomedText>
           </Feature>
           <Feature>
-            <AccentedText big>
+            <AccentedZoomedText big isDisabled={!isBookingScreenActive}>
               <Highlight>Booking.</Highlight> Use our powerful infrastructure to
               book the trips and gain your commission - the best one in the
               industry.
-            </AccentedText>
+            </AccentedZoomedText>
           </Feature>
           <Feature>
-            <AccentedText big>
+            <AccentedZoomedText big isDisabled={!isMmbScreenActive}>
               <Highlight>Manage my booking</Highlight> allows your customers to
               modify the trip, edit passenger’s details or purchase additional
               services.
-            </AccentedText>
+            </AccentedZoomedText>
           </Feature>
           <Feature>
-            <AccentedText big>
+            <AccentedZoomedText big isDisabled={!isPaymentsScreenActive}>
               <Highlight>Payments</Highlight> allow your users to pay instantly
               for their bookings, right within your app.
-            </AccentedText>
+            </AccentedZoomedText>
           </Feature>
         </FeaturesContainer>
 
-        <FloatedPhone
-          scroll={this.props.scroll}
-          featuresHeight={featuresHeight}
-          featuresTopPosition={featuresTopPosition}
-          featuresRef={featuresRef}
-        />
+        {featuresRef !== null && (
+          <FloatedPhone
+            isFixed={isFixed}
+            scrolledOnFeature={scrolledOnFeature}
+          />
+        )}
       </Content>
     );
   }
 }
 
+const AccentedZoomedText = styled(AccentedText)`
+  @media (min-width: ${defaultTokens.widthBreakpointDesktop}px) {
+    transition: all 0.3s ease;
+    ${({ isDisabled }) => (isDisabled ? null : 'transform: scale(1.05, 1.05);')}
+  }
+`;
+
 const MultiplatformWrapper = styled.div`
   padding-top: 100px;
   @media (min-width: ${defaultTokens.widthBreakpointDesktop}px) {

diff --git a/apps/landingPage/static/screens/[email protected] b/apps/landingPage/static/screens/[email protected]
diff --git a/apps/landingPage/static/screens/[email protected] b/apps/landingPage/static/screens/[email protected]