Feature/news feed copy (#22626)

* [#22404] [News Feed] Implement News AC component

* QA

* Incoming rss feed sanitized from html tags.

* test fix

* test

* use fast-image instead of rn image to avoid problem on android

* uncomment marking as read

---------

Co-authored-by: andrey <[email protected]>

Author: vkjr

resources/images/icons2/20x20/[email protected] renamed to resources/images/icons2/20x20/[email protected]

@@ -1,6 +1,7 @@
 (ns legacy.status-im.data-store.activities
   (:require
     [clojure.set :as set]
+    [clojure.string :as string]
     [legacy.status-im.data-store.messages :as messages]
     [status-im.constants :as constants]
     [status-im.contexts.shell.activity-center.notification-types :as notification-types]))
@@ -53,6 +54,23 @@
 
     chat))
 
+(defn strip-html
+  [html]
+  (-> html
+      ;; Replace block-level tags with newlines
+      (clojure.string/replace #"</?(h[1-6]|p|div|br|li|ul|ol|section|article|blockquote)[^>]*>" "\n")
+      ;; Remove all remaining tags
+      (clojure.string/replace #"<[^>]+>" "")
+      ;; Decode common HTML entities
+      (clojure.string/replace #"&nbsp;" " ")
+      (clojure.string/replace #"&amp;" "&")
+      ;; Collapse multiple newlines into one
+      (clojure.string/replace #"\n+" "\n")
+      ;; Trim spaces at start/end of lines
+      (clojure.string/replace #"[ \t]+\n" "\n")
+      (clojure.string/replace #"\n[ \t]+" "\n")
+      clojure.string/trim))
+
 (defn <-rpc
   [item]
   (-> item
@@ -64,10 +82,19 @@
                         :communityId               :community-id
                         :installationId            :installation-id
                         :membershipStatus          :membership-status
-                        :albumMessages             :album-messages})
+                        :albumMessages             :album-messages
+                        :newsImageUrl              :news-image-url
+                        :newsTitle                 :news-title
+                        :newsDescription           :news-description
+                        :newsContent               :news-content
+                        :newsLink                  :news-link
+                        :newsLinkLabel             :news-link-label})
       (update :last-message #(when % (messages/<-rpc %)))
       (update :message #(when % (messages/<-rpc %)))
       (update :reply-message #(when % (messages/<-rpc %)))
+      (update :news-description #(when % (strip-html %)))
+      (update :news-title #(when % (strip-html %)))
+      (update :news-content #(when % (strip-html %)))
       (dissoc :chatId)))
 
 (defn <-rpc-seen-state

resources/images/icons2/20x20/[email protected] renamed to resources/images/icons2/20x20/[email protected]

@@ -20,12 +20,14 @@
 
 (deftest <-rpc-test
   (testing "renames keys"
-    (is (= {:name                        chat-name
-            :chat-id                     chat-id
-            :contact-verification-status constants/contact-verification-status-pending}
-           (-> raw-notification
-               store/<-rpc
-               (dissoc :last-message :message :reply-message)))))
+    (is
+     (= {:name                        chat-name
+         :chat-id                     chat-id
+         :contact-verification-status constants/contact-verification-status-pending}
+        (->
+          raw-notification
+          store/<-rpc
+          (dissoc :last-message :message :reply-message :news-title :news-content :news-description)))))
 
   (testing "transforms messages from RPC response"
     (is

src/legacy/status_im/data_store/activities.cljs

@@ -42,6 +42,7 @@
   (let [customization-color (rf/sub [:profile/customization-color])
         privacy-mode-enabled? (rf/sub [:privacy-mode/privacy-mode-enabled?])
         preview-privacy? (rf/sub [:profile/preview-privacy?])
+        news-feed-enabled? (rf/sub [:profile/news-feed-enabled?])
         see-profile-pictures-from (rf/sub [:profile/pictures-visibility])
         show-profile-pictures-to (rf/sub [:multiaccount/profile-pictures-show-to])
 
@@ -51,6 +52,14 @@
                                          (not preview-privacy?)]))
                          [preview-privacy?])
 
+        toggle-news-feed
+        (rn/use-callback (fn []
+                           (rf/dispatch [:profile.settings/profile-update :news-feed-enabled?
+                                         (not news-feed-enabled?)])
+                           (rf/dispatch [:profile.settings/profile-update :news-rss-enabled?
+                                         (not news-feed-enabled?)]))
+                         [news-feed-enabled?])
+
         open-see-profile-pictures-from-options
         (rn/use-callback (fn []
                            (rf/dispatch
@@ -104,6 +113,15 @@
                     :blur?             true
                     :action            :arrow
                     :action-props      {:on-change #(rf/dispatch [:open-modal
-                                                                  :screen/settings.share-usage-data])}}]
+                                                                  :screen/settings.share-usage-data])}}
+                   {:title             (i18n/label :t/status-news-rss)
+                    :description       :text
+                    :description-props {:text (i18n/label :t/rss-privacy-warning)}
+                    :blur?             true
+                    :action            :selector
+                    :action-props      {:on-change           toggle-news-feed
+                                        :checked?            news-feed-enabled?
+                                        :id                  :news-feed
+                                        :customization-color customization-color}}]
        :blur?     true
        :list-type :settings}]]))

src/legacy/status_im/data_store/activities_test.cljs

@@ -0,0 +1,90 @@
+(ns status-im.contexts.shell.activity-center.notification.news.view
+  (:require [clojure.string :as string]
+            [promesa.core :as promesa]
+            [quo.core :as quo]
+            [react-native.core :as rn]
+            [react-native.fast-image :as fast-image]
+            [react-native.gesture :as gesture]
+            [status-im.contexts.shell.activity-center.notification.common.view :as common]
+            [utils.datetime :as datetime]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn auto-resized-image
+  [url]
+  (let [[height set-height] (rn/use-state nil)
+        window-width        (- (:width (rn/get-window)) 40)]
+    (rn/use-effect #(-> (rn/image-get-size url)
+                        (promesa/then (fn [[w h]]
+                                        (let [scale      (/ window-width w)
+                                              new-height (* h scale)]
+                                          (set-height new-height))))))
+    (if height
+      [fast-image/fast-image
+       {:source url
+        :style  {:width         window-width
+                 :height        height
+                 :align-self    :center
+                 :border-radius 12}}]
+      [rn/view {:style {:height 200 :align-items :center :justify-content :center}}
+       [rn/activity-indicator]])))
+
+(defn news-sheet
+  [{:keys [news-image-url news-title news-content news-link news-link-label]} timestamp]
+  (let [customization-color (rf/sub [:profile/customization-color])]
+    [:<>
+     [quo/drawer-top {:title news-title :description timestamp}]
+     [rn/scroll-view {:style {:flex 1}}
+      (when (not (string/blank? news-image-url))
+        [auto-resized-image news-image-url])
+      [quo/text
+       {:style {:padding-horizontal 20
+                :padding-vertical   8}}
+       news-content]]
+     (when (and (not (string/blank? news-link)) (not (string/blank? news-link-label)))
+       [quo/bottom-actions
+        {:button-one-label news-link-label
+         :button-one-props {:customization-color customization-color
+                            :icon-right          :i/external
+                            :on-press            (fn []
+                                                   (rf/dispatch [:browser.ui/open-url news-link])
+                                                   (rf/dispatch [:hide-bottom-sheet]))}}])]))
+
+(defn view
+  [{:keys [notification extra-fn]}]
+  (let [customization-color (rf/sub [:profile/customization-color])
+        {:keys [news-title
+                news-description
+                timestamp
+                read
+                id]}        notification
+        timestamp           (datetime/timestamp->relative timestamp)
+        show-bottom-preview (rn/use-callback
+                             (fn []
+                               (rf/dispatch [:activity-center.notifications/mark-as-read id])
+                               (rf/dispatch [:show-bottom-sheet
+                                             {:theme   :dark
+                                              :content (fn []
+                                                         [news-sheet notification timestamp])}])))]
+    [common/swipeable
+     {:left-button    common/swipe-button-read-or-unread
+      :left-on-press  common/swipe-on-press-toggle-read
+      :right-button   common/swipe-button-delete
+      :right-on-press common/swipe-on-press-delete
+      :extra-fn       extra-fn}
+     [gesture/touchable-without-feedback
+      {:on-press show-bottom-preview}
+      [quo/activity-log
+       {:title               news-title
+        :customization-color customization-color
+        :icon                :i/status-logo-bw
+        :timestamp           timestamp
+        :unread?             (not read)
+        :context             [[quo/text {} news-description]]
+        :items               [{:type                :button
+                               :subtype             :primary
+                               :key                 :button-reply
+                               :customization-color customization-color
+                               :label               (i18n/label :t/read-more)
+                               :accessibility-label :read-more
+                               :on-press            show-bottom-preview}]}]]]))

src/status_im/contexts/settings/privacy_and_security/view.cljs

@@ -12,6 +12,7 @@
 (def ^:const contact-verification 10)
 (def ^:const new-installation-received 23)
 (def ^:const new-installation-created 24)
+(def ^:const news-feed 29)
 
 (def ^:const all-supported
   #{one-to-one-chat
@@ -24,7 +25,8 @@
     community-kicked
     contact-verification
     new-installation-received
-    new-installation-created})
+    new-installation-created
+    news-feed})
 
 ;; TODO: Replace with correct enum values once status-go implements them.
 (def ^:const tx 66612)

src/status_im/contexts/shell/activity_center/notification/news/view.cljs

@@ -29,6 +29,11 @@
       :default-active      filter-type
       :data                [{:id    types/no-type
                              :label (i18n/label :t/all)}
+                            {:id                  types/news-feed
+                             :label               (i18n/label :t/news)
+                             :accessibility-label :tab-news
+                             :notification-dot?   (when-not is-mark-all-as-read-undoable?
+                                                    (contains? types-with-unread types/news-feed))}
                             {:id                  types/admin
                              :label               (i18n/label :t/admin)
                              :accessibility-label :tab-admin

src/status_im/contexts/shell/activity_center/notification_types.cljs

@@ -18,6 +18,7 @@
      contact-verification]
     [status-im.contexts.shell.activity-center.notification.membership.view :as membership]
     [status-im.contexts.shell.activity-center.notification.mentions.view :as mentions]
+    [status-im.contexts.shell.activity-center.notification.news.view :as news]
     [status-im.contexts.shell.activity-center.notification.reply.view :as reply]
     [status-im.contexts.shell.activity-center.notification.syncing.view :as syncing]
     [status-im.contexts.shell.activity-center.style :as style]
@@ -55,6 +56,9 @@
        (= notification-type types/new-installation-created)
        [syncing/installation-created-view props]
 
+       (= notification-type types/news-feed)
+       [news/view props]
+
        (types/membership notification-type)
        (condp = notification-type
          types/private-group-chat [membership/view props]
@@ -69,7 +73,6 @@
 (defn view
   []
   (let [notifications    (rf/sub [:activity-center/notifications])
-
         ;; We globally control the active swipeable for all notifications
         ;; because when a swipe left/right gesture initiates, the previously
         ;; active swiped notification (if any) must be removed & closed with

src/status_im/contexts/shell/activity_center/tabs/view.cljs

@@ -234,6 +234,11 @@
  (fn [{:keys [preview-privacy?]}]
    (boolean preview-privacy?)))
 
+(re-frame/reg-sub :profile/news-feed-enabled?
+ :<- [:profile/profile]
+ (fn [{:keys [news-feed-enabled?]}]
+   (boolean news-feed-enabled?)))
+
 (defn- replace-multiaccount-image-uri
   [profile port font-file avatar-opts theme]
   (let [{:keys [key-uid images