feat(service): more updates

app/scripts/templates/connect_another_service.mustache

@@ -1,6 +1,15 @@
 <div id="main-content" class="card connect-another-service">
     <header id="fxa-connect-another-service-header"><h1>{{#t}}Connect another service{{/t}}</h1></header>
 
+    {{#showSuccessMessage}}
+        {{#isSignUp}}
+            <div class="success success-not-authenticated visible">{{#t}}Email verified{{/t}}</div>
+        {{/isSignUp}}
+        {{#isSignIn}}
+            <div class="success success-not-authenticated visible">{{#t}}Sign-in confirmed{{/t}}</div>
+        {{/isSignIn}}
+    {{/showSuccessMessage}}
+
     <p>Do more with your Firefox Account with these new services.</p>
 
     {{#connect-services}}
@@ -13,12 +22,10 @@
                 <div class="service-description">{{description}}</div>
             </div>
             <div class="service-links">
-                <a class="service-link" target="_blank" href="{{link}}">Connect</a>
+                <a class="service-link" target="_blank" href="{{link}}">
+                    <img src="/images/open_in_new.svg">
+                </a>
             </div>
         </div>
     {{/connect-services}}
-
-    <div class="links">
-        <a href="/connect_another_device">Not now</a>
-    </div>
 </div>

app/scripts/views/connect_another_service.js

@@ -5,48 +5,107 @@
 import Cocktail from 'cocktail';
 import BaseView from './base';
 import Template from 'templates/connect_another_service.mustache';
+import UserAgentMixin from '../lib/user-agent-mixin';
+import VerificationReasonMixin from './mixins/verification-reason-mixin';
+
+const SERVICES = [
+  {
+    description: 'A Secure Notepad App.',
+    image: 'notes',
+    links: {
+      android: 'https://play.google.com/store/apps/details?id=org.mozilla.testpilot.notes&hl=en',
+    },
+    name: 'Notes',
+  },
+  {
+    description: 'Save articles, videos and stories from any publication, page or app.',
+    image: 'pocket',
+    links: {
+      android: 'https://getpocket.com/ff_signin?s=pocket&t=login',
+      ios: 'https://getpocket.com/ff_signin?s=pocket&t=login'
+    },
+    name: 'Pocket',
+  },
+  {
+    description: 'Take your passwords everywhere with Firefox Lockbox.',
+    image: 'lockbox',
+    links: {
+      ios: 'https://itunes.apple.com/us/app/firefox-lockbox/id1314000270?mt=8',
+    },
+    name: 'Lockbox',
+  },
+  {
+    description: 'Detects threats against your online accounts.',
+    image: 'monitor',
+    links: {
+      website: 'https://monitor.firefox.com/',
+    },
+    name: 'Monitor',
+  },
+  {
+    description: 'Screenshots made simple.',
+    image: 'screenshots',
+    links: {
+      website: 'https://screenshots.firefox.com/',
+    },
+    name: 'Screenshots',
+  }
+];
+
 
 const View = BaseView.extend({
   className: 'connect-another-service',
   template: Template,
 
-  setInitialContext (context) {
-    const services = [
-      {
-        description: 'A Secure Notepad App.',
-        image: 'notes',
-        link: 'https://play.google.com/store/apps/details?id=org.mozilla.testpilot.notes&hl=en',
-        name: 'Notes',
-      },
-      {
-        description: 'Save articles, videos and stories from any publication, page or app.',
-        image: 'pocket',
-        link: 'https://getpocket.com/ff_signin?s=pocket&t=login',
-        name: 'Pocket',
-      },
-      {
-        description: 'Take your passwords everywhere with Firefox Lockbox.',
-        image: 'lockbox',
-        link: 'https://itunes.apple.com/us/app/firefox-lockbox/id1314000270?mt=8',
-        name: 'Lockbox',
-      },
-      {
-        description: 'Detects threats against your online accounts.',
-        image: 'monitor',
-        link: 'https://monitor.firefox.com/',
-        name: 'Monitor',
-      }
-    ];
+  setInitialContext(context) {
+    const services = this._filterServices();
+    const isSignIn = this.isSignIn();
+    const isSignUp = this.isSignUp();
+    const showSuccessMessage = this._showSuccessMessage();
 
     context.set({
-      'connect-services': services
+      'connect-services': services,
+      isSignIn,
+      isSignUp,
+      showSuccessMessage
     });
   },
+
+  _filterServices() {
+    const {
+      isFirefoxAndroid,
+      isFirefoxIos,
+      isOtherAndroid,
+      isOtherIos,
+    } = this.getContext();
+
+    const supportedServices = SERVICES.filter((service) => {
+      if (service.links.android && (isFirefoxAndroid || isOtherAndroid)) {
+        service.link = service.links.android;
+        return service;
+      } else if (service.links.ios && (isFirefoxIos || isOtherIos)) {
+        service.link = service.links.ios;
+        return service;
+      } else if (service.links.website) {
+        service.link = service.links.website;
+        return service;
+      }
+    });
+
+    return supportedServices;
+  },
+
+  _showSuccessMessage() {
+    return !! this.model.get('showSuccessMessage') ||
+      !! this.getSearchParam('showSuccessMessage');
+  }
 });
 
 
 Cocktail.mixin(
   View,
+  UserAgentMixin,
+  VerificationReasonMixin,
 );
 
 module.exports = View;

app/styles/modules/_connect-another-service.scss

@@ -29,6 +29,10 @@
         &[data='Monitor'] {
           background-image: url('/images/connect_another_service/monitor.png');
         }
+
+        &[data='Screenshots'] {
+          background-image: url('/images/connect_another_service/screenshots.png');
+        }
       }
     }
 
@@ -52,11 +56,6 @@
     .service-links {
       align-self: center;
       justify-content: flex-end;
-
-      .service-link {
-        color: #008000;
-        font-size: 12px;
-      }
     }
   }
 }