[Feature] Implement replies notification in Activity Center (#14656)

* [Feature][#14550] Added Replies UI in Activity Center

* [Fix][#14550] Removed underlay color from touchables in Replies UI in Activity Center

* [Fix][#14550] Comments from review

* [Fix][#14550] Comments from review

* [Feature][#14550] Added community support on tags in AC

* [Feature][#14550] Date utils test

src/quo2/components/notifications/activity_log/view.cljs

@@ -81,19 +81,21 @@
            context))))
 
 (defn- activity-message
-  [{:keys [title body]}]
+  [{:keys [title body title-number-of-lines body-number-of-lines]}]
   [rn/view {:style style/message-container}
    (when title
      [text/text
       {:size                :paragraph-2
        :accessibility-label :activity-message-title
-       :style               style/message-title}
+       :style               style/message-title
+       :number-of-lines     title-number-of-lines}
       title])
    (if (string? body)
      [text/text
       {:style               style/message-body
        :accessibility-label :activity-message-body
-       :size                :paragraph-1}
+       :size                :paragraph-1
+       :number-of-lines     body-number-of-lines}
       body]
      body)])
 

src/status_im2/contexts/activity_center/notification/contact_request/view.cljs

@@ -17,7 +17,7 @@
                     ;; `:chat.ui/navigate-to-chat`, otherwise the chat screen
                     ;; looks completely broken if it has never been opened
                     ;; before for the accepted contact.
-                    [rn/touchable-without-feedback
+                    [rn/touchable-opacity
                      {:on-press (fn []
                                   (rf/dispatch [:hide-popover])
                                   (rf/dispatch [:contact.ui/send-message-pressed

src/status_im2/contexts/activity_center/notification/mentions/view.cljs

@@ -9,12 +9,19 @@
             [status-im2.contexts.activity-center.notification.mentions.style :as style]
             [utils.re-frame :as rf]))
 
+(def tag-params
+  {:size           :small
+   :override-theme :dark
+   :color          colors/primary-50
+   :style          style/tag
+   :text-style     style/tag-text})
+
 (defn message-body
   [message]
   (let [parsed-text          (get-in message [:content :parsed-text])
         parsed-text-children (:children (first parsed-text))]
     (into [quo/text
-           {:number-of-lines     2
+           {:number-of-lines     1
             :style               style/tag-text
             :accessibility-label :activity-message-body
             :size                :paragraph-1}]
@@ -29,25 +36,25 @@
                        parsed-text-children))))
 
 (defn view
-  [{:keys [author chat-name chat-id message] :as notification}]
+  [{:keys [author chat-name chat-id message read timestamp]}]
-  [rn/touchable-without-feedback
+  (let [chat                    (rf/sub [:chats/chat chat-id])
+        community-id            (:community-id chat)
+        is-chat-from-community? (not (nil? community-id))
+        community               (rf/sub [:communities/community community-id])
+        community-name          (:name community)
+        community-image         (get-in community [:images :thumbnail :uri])]
+    [rn/touchable-opacity
      {:on-press (fn []
                   (rf/dispatch [:hide-popover])
                   (rf/dispatch [:chat.ui/navigate-to-chat chat-id]))}
      [quo/activity-log
       {:title     (i18n/label :t/mention)
        :icon      :i/mention
-     :timestamp (datetime/timestamp->relative (:timestamp notification))
+       :timestamp (datetime/timestamp->relative timestamp)
-     :unread?   (not (:read notification))
+       :unread?   (not read)
        :context   [[common/user-avatar-tag author]
                    [quo/text {:style style/tag-text} (string/lower-case (i18n/label :t/on))]
-                 ;; TODO (@smohamedjavid): The `group-avatar-tag` component
+                   (if is-chat-from-community?
-                 ;; does NOT support displaying channel name along with community/chat name.
+                     [quo/context-tag tag-params {:uri community-image} community-name chat-name]
-                 ;; Need to update the component to support it.
+                     [quo/group-avatar-tag chat-name tag-params])]
-                 [quo/group-avatar-tag chat-name
+       :message   {:body (message-body message)}}]]))
-                  {:size           :small
-                   :override-theme :dark
-                   :color          colors/primary-50
-                   :style          style/tag
-                   :text-style     style/tag-text}]]
-     :message   {:body (message-body message)}}]])

src/status_im2/contexts/activity_center/notification/reply/style.cljs

@@ -0,0 +1,12 @@
+(ns status-im2.contexts.activity-center.notification.reply.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def tag
+  {:background-color colors/white-opa-10})
+
+(def tag-text
+  {:color colors/white})
+
+(def lowercase-text
+  {:color          colors/white
+   :text-transform :lowercase})

src/status_im2/contexts/activity_center/notification/reply/view.cljs

@@ -0,0 +1,53 @@
+(ns status-im2.contexts.activity-center.notification.reply.view
+  (:require [i18n.i18n :as i18n]
+            [quo2.core :as quo]
+            [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [status-im.ui2.screens.chat.messages.message :as old-message]
+            [status-im2.common.constants :as constants]
+            [status-im2.contexts.activity-center.notification.common.view :as common]
+            [status-im2.contexts.activity-center.notification.reply.style :as style]
+            [utils.datetime :as datetime]
+            [utils.re-frame :as rf]))
+
+(def tag-params
+  {:size           :small
+   :override-theme :dark
+   :color          colors/primary-50
+   :style          style/tag
+   :text-style     style/tag-text})
+
+;; NOTE: Replies support text, image and stickers only.
+(defn get-message-content
+  [{:keys [content-type] :as message}]
+  (case content-type
+    constants/content-type-text    (get-in message [:content :text])
+
+    constants/content-type-image   [old-message/message-content-image message]
+
+    constants/content-type-sticker [old-message/sticker message]))
+
+(defn view
+  [{:keys [author chat-name chat-id message read timestamp]}]
+  (let [chat                    (rf/sub [:chats/chat chat-id])
+        community-id            (:community-id chat)
+        is-chat-from-community? (not (nil? community-id))
+        community               (rf/sub [:communities/community community-id])
+        community-name          (:name community)
+        community-image         (get-in community [:images :thumbnail :uri])]
+    [rn/touchable-opacity
+     {:on-press (fn []
+                  (rf/dispatch [:hide-popover])
+                  (rf/dispatch [:chat.ui/navigate-to-chat chat-id]))}
+     [quo/activity-log
+      {:title     (i18n/label :t/message-reply)
+       :icon      :i/reply
+       :timestamp (datetime/timestamp->relative timestamp)
+       :unread?   (not read)
+       :context   [[common/user-avatar-tag author]
+                   [quo/text {:style style/lowercase-text} (i18n/label :t/on)]
+                   (if is-chat-from-community?
+                     [quo/context-tag tag-params {:uri community-image} community-name chat-name]
+                     [quo/group-avatar-tag chat-name tag-params])]
+       :message   {:body-number-of-lines 1
+                   :body                 (get-message-content message)}}]]))

src/status_im2/contexts/activity_center/view.cljs

@@ -9,6 +9,7 @@
             [status-im2.contexts.activity-center.notification.contact-verification.view :as
              contact-verification]
             [status-im2.contexts.activity-center.notification.mentions.view :as mentions]
+            [status-im2.contexts.activity-center.notification.reply.view :as reply]
             [status-im2.contexts.activity-center.style :as style]
             [utils.re-frame :as rf]))
 
@@ -107,6 +108,9 @@
      types/mention
      [mentions/view notification]
 
+     types/reply
+     [reply/view notification]
+
      nil)])
 
 (defn view

src/utils/datetime.cljs

@@ -57,6 +57,7 @@
 
 ;;;; Date formats
 (defn- short-date-format [_] "dd MMM")
+(defn- short-date-format-with-time [_] "dd MMM h:mm a")
 
 (defn- datetime-within-one-week-format
   [^js locsym]
@@ -86,6 +87,7 @@
 (def date-fmt (get-formatter-fn medium-date-format))
 (def time-fmt (get-formatter-fn short-time-format))
 (def short-date-fmt (get-formatter-fn short-date-format))
+(def short-date-with-time-fmt (get-formatter-fn short-date-format-with-time))
 (def datetime-within-one-week-fmt (get-formatter-fn datetime-within-one-week-format))
 
 ;;;; Utilities
@@ -142,10 +144,14 @@
 
 (defn timestamp->relative
   [ms]
-  (let [datetime (t.coerce/from-long ms)]
+  (let [datetime (-> ms
+                     t.coerce/from-long
+                     (t/plus time-zone-offset))]
     (cond
       (today? datetime)
-      (.format ^js (time-fmt) datetime)
+      (str (string/capitalize (i18n/label :t/datetime-today))
+           " "
+           (.format ^js (time-fmt) datetime))
 
       (within-last-n-days? datetime 1)
       (str (string/capitalize (i18n/label :t/datetime-yesterday))
@@ -156,7 +162,7 @@
       (.format ^js (datetime-within-one-week-fmt) datetime)
 
       (current-year? datetime)
-      (.format ^js (short-date-fmt) datetime)
+      (.format ^js (short-date-with-time-fmt) datetime)
 
       (previous-years? datetime)
       (.format ^js (date-fmt) datetime))))

src/utils/datetime_test.cljs

@@ -152,9 +152,9 @@
       (is (= "Jan 1, 1973" (datetime/timestamp->relative 94694400000))))
 
     (testing "formats 7 days ago or older, but in the current year"
-      (is (= "03 Mar" (datetime/timestamp->relative 163091745000)))
+      (is (= "03 Mar 3:15 PM" (datetime/timestamp->relative 163091745000)))
-      (is (= "02 Mar" (datetime/timestamp->relative 163004400000)))
+      (is (= "02 Mar 3:00 PM" (datetime/timestamp->relative 163004400000)))
-      (is (= "01 Jan" (datetime/timestamp->relative 157820400000))))
+      (is (= "01 Jan 3:00 PM" (datetime/timestamp->relative 157820400000))))
 
     (testing "formats dates within the last 6 days"
       (is (= "Sat 3:15 PM" (datetime/timestamp->relative 163523745000)))
@@ -168,9 +168,9 @@
       (is (= "Yesterday 11:59 PM" (datetime/timestamp->relative 163641599000))))
 
     (testing "formats today, at various timestamps"
-      (is (= "3:15 PM" (datetime/timestamp->relative 163696545000)))
+      (is (= "Today 3:15 PM" (datetime/timestamp->relative 163696545000)))
-      (is (= "12:00 PM" (datetime/timestamp->relative 163684800000)))
+      (is (= "Today 12:00 PM" (datetime/timestamp->relative 163684800000)))
-      (is (= "12:00 AM" (datetime/timestamp->relative 163641600000))))))
+      (is (= "Today 12:00 AM" (datetime/timestamp->relative 163641600000))))))
 
 #_((deftest day-relative-before-yesterday-force-24H-test
      (with-redefs [t/*ms-fn*                 (constantly epoch-plus-3d)