Add about page with feedback functionality

app/assets/javascripts/user/app/controllers/about_controller.js.coffee

@@ -0,0 +1,19 @@
+App.AboutController = Ember.Controller.extend
+  feedback_sending: false
+  feedback_received: false
+  feedback: ''
+  submission_error: ''
+
+  actions:
+    submitFeedback: ->
+      delay = (ms, func) => setTimeout func.bind(@), ms
+      unless @get('feedback')
+        @set 'submission_error', t('about.feedback.empty_content')
+        delay 2000, ->
+          @set 'submission_error', ''
+        return
+      @set 'feedback_sending', true
+      @send 'sendFeedback', @get('feedback'), (res)=>
+        @set 'feedback', false
+        @set 'feedback_sending', false
+        @set 'feedback_received', true

app/assets/javascripts/user/app/modifications/controller_modifications.js.coffee

@@ -8,11 +8,7 @@ ControllerExtensions = Ember.Mixin.create
       else
         callback.call(@, emberError)
     handler
-  showModal: (options={})->
+
-    $(document).foundation('reflow') # needed (stupid!!!)
-    @confirm_cancel = options.cancel
-    @set 'controllers.application.modal.title', options.title if options.title
-    @set 'controllers.application.modal.content', options.content if options.content
 Ember.ArrayController.reopen ControllerExtensions
 Ember.Controller.reopen ControllerExtensions
 Ember.ObjectController.reopen ControllerExtensions

app/assets/javascripts/user/app/router.js.coffee

@@ -15,4 +15,5 @@ App.Router.map ->
   @route 'settings'
   @route 'product_orders'
   @route 'error'
+  @route 'about'
   @route 'scanning'

app/assets/javascripts/user/app/routes/application_route.js.coffee.erb

@@ -31,6 +31,10 @@ App.ApplicationRoute = Ember.Route.extend
         body: options.body
         cancel: options.cancel
         ok: options.ok
+    sendFeedback: (feedback, callback)->
+      return unless feedback
+      $.post $user_feedback_path, feedback: feedback, callback
+      
     listNeedsPayment: ->
       @get('controller').secured ->
         @set 'list.needs_payment', true

app/assets/javascripts/user/app/routes/select_qrcode_route.js.coffee

@@ -1,7 +1,7 @@
 App.SelectQrcodeRoute = Ember.Route.extend
   setupController: (controller)->
     $.ajax
-      url: Routes.select_qrcode_path()
+      url: '/select_qrcode'
       type: "GET"
       dataType: 'json'
       async: false

app/assets/javascripts/user/app/templates/about.emblem

@@ -0,0 +1,17 @@
+.row: .large-12.columns
+  h2.title=t 'about.title'
+  p=t 'about.body'
+
+.feedback-container.row: .large-12.columns
+  h3= t 'about.feedback.title'
+  if feedback_sending
+    span.fa.fa-3x.fa-support.fa-spin
+  else
+    if feedback_received
+      .feedback-received=t 'about.feedback.received'
+    else
+      = textarea valueBinding="feedback" class="feedback-field"
+      if submission_error
+        .alert-box.alert= submission_error
+      else
+        button.submit-feedback-button.button{action "submitFeedback"}= t 'about.feedback.submit'

app/assets/javascripts/user/app/templates/application.emblem

@@ -57,6 +57,10 @@ aside.side-menu
       =link-to 'settings'
         span.settings-icon
         span= t 'settings.title'
+    li
+      =link-to 'about' class="side-menu-about"
+        span.about-mozo-icon
+        span=t 'about.title'
     li.hide
       a{action "openDebugger"}
         span.fa.fa-wrench.fa-lg

app/assets/javascripts/user/app/templates/list.emblem

@@ -1,5 +1,5 @@
 .row
-  h2=t 'models.list'
+  h2.title=t 'models.list'
   partial "list_content"
   link-to 'lists' class="button"
     span Go to lists

app/assets/javascripts/user/flat/application.js.coffee.erb

@@ -1,10 +1,8 @@
 #= require jquery
-#= require jquery_ujs
 #= require ../app/application
 #= require faye
 #= require moment
 #= require translations
-#= require js-routes
 #= require_directory .
 #= require_self
 #
@@ -14,7 +12,7 @@
 #  )(jQuery)
 
 @Qstorage = localStorage
- 
+
 $.extend($translations.en, <%= I18n.t('user', locale: :en).to_json %>);
 $.extend($translations.nl, <%= I18n.t('user', locale: :nl).to_json %>);
 

app/assets/stylesheets/user/foundation/components/_menu_side.css.sass

@@ -33,6 +33,10 @@ aside.side-menu
     margin-right: 18px
     @extend .fa
     @extend .fa-gears
+  .about-mozo-icon
+    margin-right: 18px
+    @extend .fa
+    @extend .fa-info-circle
   a.active
     color: $current-color
 

app/assets/stylesheets/user/foundation/pages/_about.css.sass

@@ -0,0 +1,5 @@
+.feedback-container
+  border-top: 1px solid #ccc
+  margin-top: 1em
+  .feedback-received
+    +alert($bg: $info-color)

app/controllers/user_controller.rb

@@ -197,6 +197,11 @@ class UserController < Users::ApplicationController
     end
   end
 
+  def feedback
+    UserFeedback.create(user_id: current_user.id, content: params[:feedback].to_s)
+    render json: {}
+  end
+
   # POST /user/needs_help.json
   def needs_help
     respond_to do |format|

app/models/user.rb

@@ -24,6 +24,7 @@ class User
   before_save :ensure_authentication_token
 
   has_many :error_logs
+  has_many :user_feedbacks
 
   view :by_authentication_token, key: :authentication_token
   view :by_email, key: :email

app/models/user_feedback.rb

@@ -0,0 +1,5 @@
+class UserFeedback
+  include SimplyStored::Couch
+  property :content
+  belongs_to :user
+end

app/views/layouts/user/foundation.html.slim

@@ -13,17 +13,32 @@ html lang="en"
         var $data_host = 'http://data.mozo.bar';
         var $event_host = '#{Qwaiter.event_host}';
         var $assets_path = './assets/';
+        var $user_feedback_path = 'http://feedback.mozo.bar/user_feedback';
         var Qstorage = window.localStorage;
         Qstorage.setItem('root_url', '##root_url##');
         var $platform = '##platform##';
         var $obtain_token_url = 'http://mozo.bar/user/obtain_token';
         var $log = function(params){$.post('http://log.mozo.bar/user_app', {log: params})};
+    - elsif Rails.env.production?
+      javascript:
+        var QMobile, Qwaiter, Quser;
+        var $data_host = null;
+        var $event_host = '#{Qwaiter.event_host}';
+        var $assets_path = '/assets/';
+        var $user_feedback_path = 'http://feedback.mozo.bar/user_feedback';
+        var Qstorage = window.localStorage;
+        #{user_dynamic_data_host};
+        #{user_dynamic_root_url};
+        #{user_dynamic_obtain_token_url};
+        var $platform = 'web'
+        var $log = function(params){console.log('App log:'); console.log(params);console.log('=======================================')};
     - else
       javascript:
         var QMobile, Qwaiter, Quser;
         var $data_host = null;
         var $event_host = '#{Qwaiter.event_host}';
         var $assets_path = '/assets/';
+        var $user_feedback_path = '/user_feedback';
         var Qstorage = window.localStorage;
         #{user_dynamic_data_host};
         #{user_dynamic_root_url};

config/locales/user.en.yml

@@ -105,3 +105,19 @@ en:
       title: Settings
       language: Language
       reload_application: Reload application
+    about:
+      title: About Mozo
+      body: |
+        Mozo is an app that allows you to simply order products using your phone.<br>
+        The process is as follows:
+        <ul>
+          <li>Scan the QR-code on the table</li>
+          <li>Select the products you want</li>
+          <li>Click the order products button</li>
+        </ul>
+        Now your order is sent behind the bar.
+      feedback:
+        title: Feedback
+        submit: Submit feedback
+        received: Thank you for your feedback. We appreciate your opinion!
+        empty_content: No feedback given

config/locales/user.nl.yml

@@ -105,3 +105,19 @@ nl:
       title: Settings
       language: Taal
       reload_application: Applicatie herstarten
+    about:
+      title: Over Mozo
+      body: |
+        Mozo is een app waarme je producten kan bestellen met je telefoon.<br>
+        Het proces is als volt:
+        <ul>
+          <li>Scan de QR-code op de tafel</li>
+          <li>Selecteer de producten die je wilt</li>
+          <li>Klik op de bestelknop</li>
+        </ul>
+        Nu komt je bestelling achter de bar binnen.
+      feedback:
+        title: Feedback
+        submit: Geef feedback
+        received: Dank je voor het meedenken!
+        empty_content: Geen feedback gegeven

config/routes.rb

@@ -20,6 +20,7 @@ Qwaiter::Application.routes.draw do
   end
 
   post '/user_app' => 'dashboard#user_app_log' #TODO: separate high speed app at log.mozo.bar
+  post '/user_feedback' => 'user#feedback'
 
   # SUPPLIER
   get '/supplier' => 'supplier#home', as: :supplier_root

spec/acceptance/users/feedback.feature

@@ -0,0 +1,12 @@
+Feature: A user can submit feedback
+
+  @javascript
+  Scenario: A user submits feedback
+    Given I am signed in as a user
+    And the user is on the homepage
+    When the user opens the side menu
+    And the user clicks on the about link in the side menu
+    And the user fills in the feedback field
+    And the user clicks on the submit feedback button
+    Then the user should see the feedback submitted message
+    And a user feedback should be created containing the feedback

spec/acceptance_steps/users/feedback_steps.rb

@@ -0,0 +1,15 @@
+step "the user fills in the feedback field" do
+  find('.feedback-field').set "Nice app!"
+end
+
+step "the user clicks on the submit feedback button" do
+  find(".submit-feedback-button").click
+end
+
+step "the user should see the feedback submitted message" do
+  page.should have_content I18n.t('user.about.feedback.received')
+end
+
+step "a user feedback should be created containing the feedback" do
+  expect( UserFeedback.find_all_by_user_id_and_content(@user.id, 'Nice app!').size ).to eq 1
+end

spec/acceptance_steps/users/side_menu_steps.rb

@@ -2,6 +2,7 @@ step "the user opens the side menu" do
   page.execute_script %|$('.toggle-side-menu').click()|
   sleep 1
 end
+
 step "the user opens the side menu again" do
   step "the user opens the side menu"
 end
@@ -10,6 +11,10 @@ step "the user clicks on the lists link in the side menu" do
   page.execute_script %|$('.side-menu-lists').click()|
 end
 
+step "the user clicks on the about link in the side menu" do
+  page.execute_script %|$('.side-menu-about').click()|
+end
+
 step "the user clicks on the active list link in the side menu" do
   page.execute_script %|$('.side-menu-active-list').click()|
 end

wip.md

@@ -52,6 +52,10 @@ General
 - search for class btn and replace with font awesome correct styling if needed, remove otherwize
 - Implement faye write security
 
+Promotion
+---------
+* Mention that it is free
+
 Supplier
 --------