[Fixes: #14794] Use toast instead of old pin modal

Instead of using the old modal, we show a toast when the limit of 3
messages is reached.

src/status_im/ui2/screens/chat/pin_limit_popover/style.cljs

@@ -1,39 +0,0 @@
-(ns status-im.ui2.screens.chat.pin-limit-popover.style
-  (:require [quo2.foundations.colors :as colors]))
-
-(defn pin-popover
-  [width]
-  {:width            (- width 16)
-   :margin-left      8
-   :background-color (colors/theme-colors colors/neutral-80-opa-90 colors/white-opa-90)
-   :flex-direction   :row
-   :border-radius    16
-   :padding          12})
-
-(defn pin-alert-container
-  []
-  {:background-color (colors/theme-colors colors/neutral-80-opa-20 colors/white-opa-40)
-   :width            36
-   :height           36
-   :border-radius    18
-   :justify-content  :center
-   :align-items      :center})
-
-(def pin-alert-circle
-  {:width           18
-   :height          18
-   :border-radius   9
-   :border-color    colors/danger-50-opa-40
-   :border-width    1
-   :justify-content :center
-   :align-items     :center})
-
-(def view-pinned-messages
-  {:background-color   colors/primary-60
-   :border-radius      8
-   :justify-content    :center
-   :align-items        :center
-   :padding-horizontal 8
-   :padding-vertical   4
-   :align-self         :flex-start
-   :margin-top         10})

src/status_im/ui2/screens/chat/pin_limit_popover/view.cljs

@@ -1,63 +0,0 @@
-(ns status-im.ui2.screens.chat.pin-limit-popover.view
-  (:require [utils.i18n :as i18n]
-            [quo.react :as react]
-            [quo2.core :as quo]
-            [quo2.foundations.colors :as colors]
-            [react-native.core :as rn]
-            [react-native.reanimated :as reanimated]
-            [status-im.ui2.screens.chat.pin-limit-popover.style :as style]
-            [utils.re-frame :as rf]))
-
-;; TODO (flexsurfer) this should be an in-app notification component in quo2
-;; https://github.com/status-im/status-mobile/issues/14527
-(defn pin-limit-popover
-  [chat-id]
-  [:f>
-   (fn []
-     (let [width                 (rf/sub [:dimensions/window-width])
-           show-pin-limit-modal? (rf/sub [:chats/pin-modal chat-id])
-           opacity-animation     (reanimated/use-shared-value 0)
-           z-index-animation     (reanimated/use-shared-value -1)]
-       (react/effect!
-        #(do
-           (reanimated/set-shared-value opacity-animation
-                                        (reanimated/with-timing (if show-pin-limit-modal? 1 0)))
-           (reanimated/set-shared-value z-index-animation
-                                        (reanimated/with-timing (if show-pin-limit-modal? 10 -1)))))
-       (when show-pin-limit-modal?
-         [reanimated/view
-          {:style               (reanimated/apply-animations-to-style
-                                 {:opacity opacity-animation
-                                  :z-index z-index-animation}
-                                 (style/pin-popover width))
-           :accessibility-label :pin-limit-popover}
-          [rn/view {:style (style/pin-alert-container)}
-           [rn/view {:style style/pin-alert-circle}
-            [rn/text {:style {:color colors/danger-50}} "!"]]]
-          [rn/view {:style {:margin-left 8}}
-           [quo/text {:weight :semi-bold :color (colors/theme-colors colors/white colors/neutral-100)}
-            (i18n/label :t/cannot-pin-title)]
-           [quo/text {:size :paragraph-2 :color (colors/theme-colors colors/white colors/neutral-100)}
-            (i18n/label :t/cannot-pin-desc)]
-           [rn/touchable-opacity
-            {:accessibility-label :view-pinned-messages
-             :active-opacity      1
-             :on-press            (fn []
-                                    (rf/dispatch [:pin-message/hide-pin-limit-modal chat-id])
-                                    (rf/dispatch [:bottom-sheet/show-sheet :pinned-messages-list
-                                                  chat-id]))
-             :style               style/view-pinned-messages}
-            [quo/text {:size :paragraph-2 :weight :medium :color colors/white}
-             (i18n/label :t/view-pinned-messages)]]]
-          [rn/touchable-opacity
-           {:accessibility-label :close-pin-limit-popover
-            :active-opacity      1
-            :on-press            #(rf/dispatch [:pin-message/hide-pin-limit-modal chat-id])
-            :style               {:position :absolute
-                                  :top      16
-                                  :right    16}}
-           [quo/icon :i/close
-            {:color (colors/theme-colors colors/white colors/neutral-100)
-             :size  12}]]])))])
-
-

src/status_im2/common/home/actions/view.cljs

@@ -217,17 +217,6 @@
           :sub-label           nil
           :chevron?            true}))
 
-;; TODO(OmarBasem): Requires design input.
-(defn pinned-messages-entry
-  []
-  (entry {:icon                :i/pin
-          :label               (i18n/label :t/pinned-messages)
-          :on-press            #(js/alert "TODO: to be implemented, requires design input")
-          :danger?             false
-          :accessibility-label :pinned-messages
-          :sub-label           nil
-          :chevron?            true}))
-
 (defn remove-from-contacts-entry
   [contact]
   (entry {:icon                :i/remove-user
@@ -383,9 +372,8 @@
   [(mark-as-read-entry chat-id)
    (mute-chat-entry chat-id)
    (notifications-entry false)
-   (if inside-chat?
+   (when inside-chat?
-     (fetch-messages-entry)
+     (fetch-messages-entry))
-     (pinned-messages-entry))
    (when (or (not group-chat) public?)
      (show-qr-entry))
    (when-not group-chat

src/status_im2/contexts/chat/messages/pin/events.cljs

@@ -1,6 +1,9 @@
 (ns status-im2.contexts.chat.messages.pin.events
   (:require [re-frame.core :as re-frame]
+            [utils.i18n :as i18n]
+            [quo2.foundations.colors :as colors]
             [status-im2.contexts.chat.messages.list.events :as message-list]
+            [status-im2.common.toasts.events :as toasts]
             [status-im2.constants :as constants]
             [status-im.data-store.pin-messages :as data-store.pin-messages]
             [status-im.transport.message.protocol :as protocol]
@@ -99,10 +102,8 @@
 
 (rf/defn show-pin-limit-modal
   {:events [:pin-message/show-pin-limit-modal]}
-  [{:keys [db]} chat-id]
+  [cofx]
-  {:db (assoc-in db [:pin-modal chat-id] true)})
+  (toasts/upsert cofx
-
+                 {:icon       :alert
-(rf/defn hide-pin-limit-modal
+                  :icon-color colors/danger-50
-  {:events [:pin-message/hide-pin-limit-modal]}
+                  :text       (i18n/label :t/pin-limit-reached)}))
-  [{:keys [db]} chat-id]
-  {:db (assoc-in db [:pin-modal chat-id] false)})

src/status_im2/contexts/chat/messages/view.cljs

@@ -11,10 +11,8 @@
              contact-requests.bottom-drawer]
             [status-im2.contexts.chat.messages.pin.banner.view :as pin.banner]
             [status-im2.navigation.state :as navigation.state]
-            [status-im2.common.not-implemented :as not-implemented]
             [utils.debounce :as debounce]
-            [utils.re-frame :as rf]
+            [utils.re-frame :as rf]))
-            [status-im.ui2.screens.chat.pin-limit-popover.view :as pin-limit-popover]))
 
 (defn navigate-back-handler
   []
@@ -74,8 +72,6 @@
          :keyboardVerticalOffset (- (:bottom insets))}
         [page-nav]
         [pin.banner/banner chat-id]
-        [not-implemented/not-implemented
-         [pin-limit-popover/pin-limit-popover chat-id]]
         [messages.list/messages-list {:chat chat :show-input? show-input?}]
         (cond (and (not show-input?)
                    contact-request-state)