Duplicate mobile trigger button behavior in featured experiment (mozi…

…lla#3681) * Duplicate mobile trigger button behavior in featured experiment - fixes mozilla#3670 * css tweak for jgruen
anuragdhingra · Jul 5, 2018 · 3d05f23 · 3d05f23
1 parent 55558d2
commit 3d05f23
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 25 deletions.
diff --git a/frontend/src/app/components/FeaturedExperiment/FeaturedButton.js b/frontend/src/app/components/FeaturedExperiment/FeaturedButton.js
@@ -4,15 +4,18 @@ import React from "react";
 import { Link } from "react-router-dom";
 import { Localized } from "fluent-react/compat";
 import LocalizedHtml from "../LocalizedHtml";
-import { buildSurveyURL, experimentL10nId } from "../../lib/utils";
+import { buildSurveyURL, experimentL10nId, isMobile } from "../../lib/utils";
 
 import Modal from "../Modal";
 import MeasurementSection from "../Measurements";
 import MainInstallButton from "../MainInstallButton";
 import MobileDialog from "../MobileDialog";
 import LayoutWrapper from "../LayoutWrapper";
 
-import iconMobileWhite from "../../../images/mobile-white.svg";
+import {
+  MobileTriggerButton,
+  MobileStoreButton
+} from "../../containers/ExperimentPage/ExperimentButtons";
 
 import type { InstalledExperiments } from "../../reducers/addon";
 
@@ -26,6 +29,7 @@ type FeaturedButtonProps = {
   hasAddon: any,
   installed: InstalledExperiments,
   sendToGA: Function,
+  userAgent: string
 }
 
 type FeaturedButtonState = {
@@ -136,11 +140,29 @@ export default class FeaturedButton extends React.Component {
 
   render() {
     const { experiment, installed, clientUUID,
-      hasAddon, enabled } = this.props;
-    const { slug, survey_url, title, platforms } = experiment;
+      hasAddon, enabled, userAgent } = this.props;
+    const { slug, survey_url, title, platforms, ios_url, android_url } = experiment;
 
     const { showMobileDialog } = this.state;
 
+    const mobileControls = () => {
+      if (!isMobile(userAgent)) {
+        return (
+          <React.Fragment>
+            <div className="main-install__spacer"></div>
+            <MobileTriggerButton optionalClass={"main-install__button"} doShowMobileAppDialog={this.doShowMobileAppDialog} color={"default"} />
+            { this.renderLegalLink() }
+          </React.Fragment>
+        );
+      }
+      return (
+        <React.Fragment>
+          {platforms.includes("ios") && <MobileStoreButton {...{ url: ios_url, platform: "ios" }} />}
+          {platforms.includes("android") && <MobileStoreButton {...{ url: android_url, platform: "android" }} />}
+        </React.Fragment>
+      );
+    };
+
     let Buttons;
 
     if (platforms.includes("ios") || platforms.includes("android")) {
@@ -152,18 +174,9 @@ export default class FeaturedButton extends React.Component {
            />}
           <LayoutWrapper flexModifier={"column-center-start-breaking"}
             helperClass="main-install">
-            <div className="main-install__spacer"></div>
-            <a
-              className="button primary icon-button main-install__button"
-              onClick={this.doShowMobileAppDialog}>
-              <img src={iconMobileWhite} />
-              <Localized id="mobileDialogTitle">
-                <span>Get the App</span>
-              </Localized>
-            </a>
-            { this.renderLegalLink() }
+            { mobileControls() }
           </LayoutWrapper>
-          {this.renderLegalModal()}
+          { this.renderLegalModal() }
         </div>
       );
     } else if (enabled && hasAddon) {
@@ -198,7 +211,7 @@ export default class FeaturedButton extends React.Component {
             experimentLegalLink={this.renderLegalLink()}
             eventCategory="HomePage Interactions"
             eventLabel="Install the Add-on" />
-          {this.renderLegalModal()}
+          { this.renderLegalModal() }
         </div>);
     }
 

diff --git a/frontend/src/app/components/FeaturedExperiment/index.js b/frontend/src/app/components/FeaturedExperiment/index.js
@@ -28,7 +28,8 @@ type FeaturedExperimentProps = {
   isExperimentEnabled: Function,
   isMinFirefox: boolean,
   installed: InstalledExperiments,
-  sendToGA: Function
+  sendToGA: Function,
+  userAgent: string
 }
 
 export default class FeaturedExperiment extends React.Component {

diff --git a/frontend/src/app/components/FeaturedExperiment/index.scss b/frontend/src/app/components/FeaturedExperiment/index.scss
@@ -1,4 +1,4 @@
-@import '~photon-colors/colors.scss';
+ @import '~photon-colors/colors.scss';
 @import '../../../styles/_utils';
 
 .featured-experiment {
@@ -24,11 +24,11 @@
     }
 
     .featured-experiment__actions {
-      order: 5;
+      order: 6;
     }
 
     .featured-experiment__details {
-      order: 6;
+      order: 5;
     }
   }
 
@@ -258,6 +258,22 @@
     }
   }
 
+  .featured-experiment__actions {
+    .button.mobile {
+      @include respond-to('small') {
+        margin: 20px auto 0;
+      }
+
+      border: 0;
+      margin: 0;
+
+      img {
+        height: 60px;
+        width: auto;
+      }
+    }
+  }
+
   .featured-experiment__video {
     @include flex-container(column, flex-start, stretch);
 

diff --git a/frontend/src/app/containers/ExperimentPage/ExperimentButtons.js b/frontend/src/app/containers/ExperimentPage/ExperimentButtons.js
@@ -74,11 +74,11 @@ export const FeedbackButton = ({
 };
 
 export const MobileTriggerButton = ({
-  doShowMobileAppDialog
+  doShowMobileAppDialog, optionalClass
 }: MobileTriggerButtonType) => {
   return (
     <a
-      className="button mobile-trigger default icon-button"
+      className={`button mobile-trigger default icon-button ${optionalClass}`}
       onClick={doShowMobileAppDialog}
     >
       <img src={iconExperimentTypeMobileWhite} />

diff --git a/frontend/src/app/containers/ExperimentPage/types.js b/frontend/src/app/containers/ExperimentPage/types.js
@@ -131,7 +131,8 @@ export type FeedbackButtonType = {
 };
 
 export type MobileTriggerButtonType = {
-  doShowMobileAppDialog: Function
+  doShowMobileAppDialog: Function,
+  optionalClass?: string
 };
 
 export type GraduatedButtonType = {

diff --git a/frontend/src/app/containers/HomePage/HomePageNoAddon.js b/frontend/src/app/containers/HomePage/HomePageNoAddon.js
@@ -27,7 +27,8 @@ type HomePageNoAddonProps = {
   isFirefox: boolean,
   isMinFirefox: boolean,
   installed: InstalledExperiments,
-  sendToGA: Function
+  sendToGA: Function,
+  userAgent: string
 }
 
 export default class HomePageNoAddon extends React.Component {

diff --git a/frontend/src/app/containers/HomePage/HomePageWithAddon.js b/frontend/src/app/containers/HomePage/HomePageWithAddon.js
@@ -39,7 +39,8 @@ type HomePageWithAddonProps = {
   removeCookie: Function,
   sendToGA: Function,
   setCookie: Function,
-  uninstallAddon: Function
+  uninstallAddon: Function,
+  userAgent: string
 }
 
 type HomePageWithAddonState = {