Request-info view

src/status_im/chat/handlers.cljs

@@ -70,7 +70,7 @@
   (update-input-text db text))
 
 (defn update-command [db [_ text]]
-  (if (not (commands/get-chat-command db))
+  (if-not (commands/get-chat-command db)
     (let [{:keys [command]} (suggestions/check-suggestion db text)]
       (if command
         (commands/set-chat-command db command)

src/status_im/chat/styles/response.cljs

@@ -0,0 +1,78 @@
+(ns status-im.chat.styles.response
+  (:require [status-im.components.styles :refer [font
+                                                 color-white
+                                                 color-blue
+                                                 text1-color
+                                                 text2-color
+                                                 chat-background
+                                                 color-black]]))
+
+(def drag-touchable
+  {:height     16
+   :alignItems :center})
+
+(def drag-down-icon
+  {:width   16
+   :height  16
+   :opacity 0.4})
+
+(def command-icon-container
+  {:marginTop       1
+   :marginLeft      12
+   :width           32
+   :height          32
+   :alignItems      :center
+   :justifyContent  :center
+   :borderRadius    50
+   :backgroundColor color-white})
+
+(def command-icon
+  {:width  9
+   :height 15})
+
+(def info-container
+  {:flex       1
+   :marginLeft 12})
+
+(def command-name
+  {:marginTop  0
+   :fontSize   12
+   :fontFamily font
+   :color      color-white})
+
+(def message-info
+  {:marginTop  1
+   :fontSize   12
+   :fontFamily font
+   :opacity    0.69
+   :color      color-white})
+
+(defn request-info [color]
+  {:flexDirection   :column
+   :height          61
+   :backgroundColor color})
+
+(def inner-container
+  {:flexDirection :row
+   :height        45})
+
+(def cancel-container
+  {:marginTop   2.5
+   :marginRight 16
+   :width       24
+   :height      24})
+
+(def cancel-icon
+  {:marginTop  6
+   :marginLeft 6
+   :width      12
+   :height     12})
+
+(def command-input
+  {:flex       1
+   :marginLeft 16
+   :marginTop  -2
+   :padding    0
+   :fontSize   14
+   :fontFamily font
+   :color      text1-color})

src/status_im/chat/subs.cljs

@@ -70,6 +70,10 @@
   (fn [db _]
     (reaction (commands/get-chat-command-content @db))))
 
+(register-sub :get-chat-command-to-msg-id
+  (fn [db _]
+    (reaction (commands/get-chat-command-to-msg-id @db))))
+
 (register-sub :chat-command-request
   (fn [db _]
     (reaction (commands/get-chat-command-request @db))))

src/status_im/chat/views/new_message.cljs

@@ -18,7 +18,6 @@
 
 (defn show-input [command]
   [plain-message-input-view
-   (merge {:command command}
    (case (:command command)
      :phone {:input-options {:keyboardType :phone-pad}
              :validator     valid-mobile-number?}
@@ -26,7 +25,7 @@
      :confirmation-code {:input-options {:keyboardType :numeric}}
      :money {:input-options {:keyboardType :numeric}}
      :request {:input-options {:keyboardType :numeric}}
-            nil))])
+     nil)])
 
 (defn chat-message-new []
   (let [command-atom (subscribe [:get-chat-command])

src/status_im/chat/views/plain_input.cljs

@@ -9,8 +9,10 @@
             [status-im.chat.views.suggestions :refer [suggestions-view]]
             [status-im.chat.views.content-suggestions :refer [content-suggestions-view]]
             [status-im.chat.views.command :as command]
+            [status-im.chat.views.response :as response]
             [status-im.chat.styles.plain-input :as st]
-            [status-im.chat.styles.input :as st-command]))
+            [status-im.chat.styles.input :as st-command]
+            [status-im.chat.styles.response :as st-response]))
 
 (defn set-input-message [message]
   (dispatch [:set-chat-input-text message]))
@@ -29,27 +31,36 @@
   (when (message-valid? staged-commands message)
     (send dismiss-keyboard)))
 
-(defn plain-message-input-view [{:keys [command input-options validator]}]
+(defn plain-message-input-view [{:keys [input-options validator]}]
   (let [input-message (subscribe [:get-chat-input-text])
+        command (subscribe [:get-chat-command])
+        to-msg-id (subscribe [:get-chat-command-to-msg-id])
         input-command (subscribe [:get-chat-command-content])
         staged-commands (subscribe [:get-chat-staged-commands])
         typing-command? (subscribe [:typing-command?])]
-    (fn [{:keys [command input-options validator]}]
-      (let [dismiss-keyboard (not (or command @typing-command?))]
+    (fn [{:keys [input-options validator]}]
+      (let [dismiss-keyboard (not (or command @typing-command?))
+            command @command
+            response? (and command @to-msg-id)]
         [view st/input-container
+         (if response? [response/request-info command])
          (if command
            [content-suggestions-view]
            [suggestions-view])
          [view st/input-view
           (if command
-            [command/command-icon command]
+            (when-not response?
+              [command/command-icon command response?])
             [touchable-highlight {:on-press #(dispatch [:switch-command-suggestions])
                                   :style    st/switch-commands-touchable}
              [view nil
               (if @typing-command?
                 [icon :close-gray st/close-icon]
                 [icon :list st/list-icon])]])
-          [text-input (merge {:style           (if command st-command/command-input st/message-input) ;; st-command/command-input
+          [text-input (merge {:style           (cond
+                                                 response? st-response/command-input
+                                                 command st-command/command-input
+                                                 :else st/message-input)
                               :autoFocus       false
                               :blurOnSubmit    dismiss-keyboard
                               :onChangeText    (fn [text]
@@ -74,9 +85,10 @@
             (if (command/valid? @input-command validator)
               [touchable-highlight {:on-press command/send-command}
                [view st/send-container [icon :send st/send-icon]]]
+              (when-not response?
                 [touchable-highlight {:on-press command/cancel-command-input}
                  [view st-command/cancel-container
-                [icon :close-gray st-command/cancel-icon]]])
+                  [icon :close-gray st-command/cancel-icon]]]))
             (when (message-valid? @staged-commands @input-message)
               [touchable-highlight {:on-press #(try-send @staged-commands
                                                          @input-message

src/status_im/chat/views/response.cljs

@@ -0,0 +1,41 @@
+(ns status-im.chat.views.response
+  (:require [re-frame.core :refer [subscribe dispatch]]
+            [status-im.components.react :refer [view
+                                                icon
+                                                image
+                                                text
+                                                text-input
+                                                touchable-highlight]]
+            [status-im.chat.views.command :as command]
+            [status-im.chat.styles.response :as st]))
+
+(defn drag-touchable []
+  [touchable-highlight {:style   st/drag-touchable
+                        :onPress (fn []
+                                   ;; TODO drag up/down
+                                   )}
+   [view nil
+    [icon :drag-white st/drag-down-icon]]])
+
+(defn command-icon []
+  [view st/command-icon-container
+   ;; TODO stub data: command icon
+   [icon :dollar-green st/command-icon]])
+
+(defn info-container [command]
+  [view st/info-container
+   [text {:style st/command-name}
+    (:description command)]
+   [text {:style st/message-info}
+    ;; TODO stub data: request message info
+    "By ???, MMM 1st at HH:mm"]])
+
+(defn request-info [command]
+  [view (st/request-info (:color command))
+   [drag-touchable]
+   [view st/inner-container
+    [command-icon nil]
+    [info-container command]
+    [touchable-highlight {:on-press command/cancel-command-input}
+     [view st/cancel-container
+      [icon :close-white st/cancel-icon]]]]])