Merge pull request #44 from mbta/dr-subscription-select-mode

Add first Create New Subscription page for Subway flow

apps/alert_processor/test/alert_processor/api/api_client_test.exs

@@ -12,7 +12,7 @@ defmodule AlertProcessor.ApiClientTest do
   end
 
   test "get_alerts/0 returns list of alerts if successful" do
-    use_cassette "get_alerts", clear_mock: true do
+    use_cassette "get_alerts", custom: true, clear_mock: true do
       assert {[_ | _], [_ | _]} = ApiClient.get_alerts
     end
   end

apps/concierge_site/assets/css/_colors.scss

@@ -0,0 +1,14 @@
+$cerulean: #0061cb;
+$gray-lightest: #e9eaed;
+$pale-blue: #cde0f5;
+
+$link-color: $cerulean;
+$link-hover-color: $pale-blue;
+$link-hover-decoration: none;
+$border-color: $gray-lightest;
+
+$brand-bus: #ffce0c;
+$brand-commuter-rail: #a00a78;
+$brand-ferry: #5da9e8;
+$brand-purple: #3324ae;
+$brand-subway: #494f5c;

apps/concierge_site/assets/css/_font-sizes.scss

@@ -0,0 +1,27 @@
+html {
+  @include media-breakpoint-up(xxl) {
+    font-size: $base-font-size-xxl;
+  }
+}
+
+h1,
+.h1 {
+  border-bottom-color: $brand-purple;
+  border-bottom-style: solid;
+  border-bottom-width: $base-spacing / 4;
+  font-family: $font-family-base;
+  font-weight: $headings-font-weight;
+  margin-bottom: 2.875rem;
+  padding: 1.75rem 0 0.5rem;
+
+  @include media-breakpoint-up(xxl) {
+    font-size: $font-size-h1-xxl;
+  }
+}
+
+h2,
+.h2 {
+  @include media-breakpoint-up(xxl) {
+    font-size: $font-size-h2-xxl;
+  }
+}

apps/concierge_site/assets/css/_subscription.scss

@@ -0,0 +1,92 @@
+.select-service {
+  @include make-col(8);
+  @include make-col-offset(2);
+
+  text-align: center;
+}
+
+.select-service-header {
+  font-weight: $headings-font-weight;
+  margin-bottom: 1rem;
+}
+
+.select-service-subheader {
+  margin-bottom: 2.25rem;
+}
+
+.service-options-container {
+  border: $border-width solid $gray-lightest;
+}
+
+.service-option {
+  display: block;
+  padding: 1rem 0;
+  position: relative;
+}
+
+.service-option:not(:last-child) {
+  border-bottom: $border-width solid $gray-lightest;
+}
+
+.service-option:hover {
+  color: $link-color;
+  background-color: $link-hover-color;
+}
+
+.subscription-icon {
+  border-radius: 100%;
+  height: 1.5rem;
+  left: 1.25rem;
+  position: absolute;
+  top: 1.125rem;
+  width: 1.5rem;
+
+  img {
+    position: relative;
+  }
+}
+
+.subway-icon {
+  background-color: $brand-subway;
+
+  img {
+    height: 1rem;
+  }
+}
+
+.commuter-rail-icon {
+  background-color: $brand-commuter-rail;
+
+  img {
+    bottom: .03125rem;
+    height: 1.125rem;
+  }
+}
+
+
+.bus-icon {
+  background-color: $brand-bus;
+
+  img {
+    height: 1rem;
+    left: .0625rem;
+  }
+}
+
+
+.ferry-icon {
+  background-color: $brand-ferry;
+
+  img {
+    bottom: .0625rem;
+    height: 1rem;
+  }
+}
+
+
+.mbta-icon {
+
+  img {
+    bottom: .1875rem;
+  }
+}

apps/concierge_site/assets/css/_variables.scss

@@ -1,3 +1,11 @@
 @import 'node_modules/bootstrap/scss/variables';
-$fa-font-path: "../fonts";
-$font-family-base: 'LatoLatinWeb', $font-family-sans-serif;
+@import "colors";
+
+$base-spacing: 1rem;
+$base-font-size: 16px;
+$base-font-size-xxl: 18px;
+$headings-font-weight: bold;
+$headings-line-height: 1.5;
+$font-size-h1-xxl: 1.875rem;
+$font-size-h2-xxl: 1.625rem;
+$font-family-base: 'LatoLatinWeb', sans-serif;

apps/concierge_site/assets/css/app.scss

@@ -1,5 +1,7 @@
 /* This file is for your main application css. */
 @import "variables";
-@import "font-awesome";
 @import "bootstrap";
+@import "font-sizes";
+@import "font-awesome";
 @import "lato";
+@import "subscription";

apps/concierge_site/lib/controllers/subscription_controller.ex

@@ -1,7 +1,12 @@
 defmodule ConciergeSite.SubscriptionController do
   use ConciergeSite.Web, :controller
+  use Guardian.Phoenix.Controller
 
-  def index(conn, _params) do
+  def index(conn, _params, _user, _claims) do
     render conn, "index.html"
   end
+
+  def new(conn, _params, _user, _claims) do
+    render conn, "new.html"
+  end
 end

apps/concierge_site/lib/controllers/subway_subscription_controller.ex

@@ -0,0 +1,8 @@
+defmodule ConciergeSite.SubwaySubscriptionController do
+  use ConciergeSite.Web, :controller
+  use Guardian.Phoenix.Controller
+
+  def new(conn, _params, _user, _claims) do
+    render conn, "new.html"
+  end
+end

apps/concierge_site/lib/router.ex

@@ -27,6 +27,12 @@ defmodule ConciergeSite.Router do
     pipe_through [:browser, :browser_auth]
     get "/my-subscriptions", SubscriptionController, :index
     get "/my-account", AccountController, :index
+    resources "/subscriptions", SubscriptionController, only: [:new]
+  end
+
+  scope "/subscriptions", ConciergeSite do
+    pipe_through [:browser, :browser_auth]
+    resources "/subway", SubwaySubscriptionController, only: [:new]
   end
 
   if Mix.env == :dev do

apps/concierge_site/lib/templates/subscription/_service_option.html.eex

@@ -0,0 +1,6 @@
+<%= link to: @link_to, class: "service-option" do %>
+  <div class="<%= @icon_class %> subscription-icon">
+    <img src="<%= @icon_src %>" />
+  </div>
+  <div><%= @name %></div>
+<% end %>

apps/concierge_site/lib/templates/subscription/new.html.eex

@@ -0,0 +1,37 @@
+<h1>Create New Subscription</h1>
+<div class="select-service">
+  <h2 class="select-service-header">Select a service:</h2>
+  <p class="select-service-subheader">What mode of transportation do you take?</p>
+
+  <div class="service-options-container">
+    <%= render "_service_option.html",
+               link_to: subway_subscription_path(@conn, :new),
+               icon_class: "subway-icon",
+               icon_src: static_url(@conn, "/images/subway.svg"),
+               name: "Subway" %>
+
+    <%= render "_service_option.html",
+               link_to: "#",
+               icon_class: "commuter-rail-icon",
+               icon_src: static_url(@conn, "/images/commuter-rail.svg"),
+               name: "Commuter Rail" %>
+
+    <%= render "_service_option.html",
+               link_to: "#",
+               icon_class: "bus-icon",
+               icon_src: static_url(@conn, "/images/bus.svg"),
+               name: "Bus" %>
+
+    <%= render "_service_option.html",
+               link_to: "#",
+               icon_class: "ferry-icon",
+               icon_src: static_url(@conn, "/images/ferry.svg"),
+               name: "Ferry" %>
+
+    <%= render "_service_option.html",
+               link_to: "#",
+               icon_class: "mbta-icon",
+               icon_src: static_url(@conn, "/images/m-b-t-a.svg"),
+               name: "Station Amenities (elevators, escalators, etc.)" %>
+  </div>
+</div>

apps/concierge_site/lib/templates/subway_subscription/new.html.eex

@@ -0,0 +1 @@
+Subway

apps/concierge_site/lib/views/subway_subscription_view.ex

@@ -0,0 +1,3 @@
+defmodule ConciergeSite.SubwaySubscriptionView do
+  use ConciergeSite.Web, :view
+end

apps/concierge_site/test/web/controllers/subscription_controller_test.exs

@@ -17,12 +17,28 @@ defmodule ConciergeSite.SubscriptionControllerTest do
 
       assert html_response(conn, 200) =~ "My Subscriptions"
     end
+
+    test "GET /subscriptions/new", %{conn: conn}  do
+      user = Repo.insert!(%User{email: "test@email.com",
+                                role: "user",
+                                encrypted_password: @encrypted_password})
+      conn = user
+      |> guardian_login(conn)
+      |> get("/subscriptions/new")
+
+      assert html_response(conn, 200) =~ "Create New Subscription"
+    end
   end
 
   describe "unauthorized" do
     test "GET /my-subscriptions", %{conn: conn} do
       conn = get(conn, "/my-subscriptions")
       assert html_response(conn, 302) =~ "/login"
     end
+
+    test "GET /subscriptions/new", %{conn: conn} do
+      conn = get(conn, "/subscriptions/new")
+      assert html_response(conn, 302) =~ "/login"
+    end
   end
 end

apps/concierge_site/test/web/controllers/subway_subscription_controller_test.exs

@@ -0,0 +1,28 @@
+defmodule ConciergeSite.SubwaySubscriptionControllerTest do
+  use ConciergeSite.ConnCase
+
+  @password "password1"
+  @encrypted_password Comeonin.Bcrypt.hashpwsalt(@password)
+
+  alias AlertProcessor.{Model.User, Repo}
+
+  describe "authorized" do
+    test "GET /subscriptions/subway/new", %{conn: conn}  do
+      user = Repo.insert!(%User{email: "test@email.com",
+                                role: "user",
+                                encrypted_password: @encrypted_password})
+      conn = user
+      |> guardian_login(conn)
+      |> get("/subscriptions/subway/new")
+
+      assert html_response(conn, 200) =~ "Subway"
+    end
+  end
+
+  describe "unauthorized" do
+    test "GET /subscriptions/subway/new", %{conn: conn} do
+      conn = get(conn, "/subscriptions/subway/new")
+      assert html_response(conn, 302) =~ "/login"
+    end
+  end
+end