[15504, 15408] Nickname flow (#15557)

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

@@ -3,7 +3,10 @@
             [quo2.core :as quo]
             [status-im2.common.confirmation-drawer.view :as confirmation-drawer]
             [status-im2.constants :as constants]
-            [utils.re-frame :as rf]))
+            [utils.re-frame :as rf]
+            [status-im2.contexts.contacts.drawers.nickname-drawer.view :as nickname-drawer]
+            [clojure.string :as string]
+            [quo2.foundations.colors :as colors]))
 
 (defn- entry
   [{:keys [icon label on-press danger? sub-label chevron? add-divider? accessibility-label]}]
@@ -36,8 +39,15 @@
   (hide-sheet-and-dispatch [:chat/mark-all-as-read chat-id]))
 
 (defn edit-nickname-action
-  [chat-id]
-  (hide-sheet-and-dispatch [:chat.ui/edit-nickname chat-id]))
+  [contact]
+  (hide-sheet-and-dispatch
+   [:show-bottom-sheet
+    {:content (fn []
+                [nickname-drawer/nickname-drawer
+                 {:title               (i18n/label :t/add-nickname-title)
+                  :description         (i18n/label :t/nickname-visible-to-you)
+                  :contact             contact
+                  :accessibility-label :edit-nickname}])}]))
 
 (defn mute-chat-action
   [chat-id]
@@ -175,13 +185,35 @@
 
 (defn edit-nickname-entry
   [chat-id]
-  (entry {:icon                :i/edit
-          :label               (i18n/label :t/edit-nickname)
-          :on-press            #(edit-nickname-action chat-id)
-          :danger?             false
-          :accessibility-label :edit-nickname
-          :sub-label           nil
-          :chevron?            false}))
+  (let [{:keys [nickname public-key secondary-name]
+         :as   contact} (select-keys (rf/sub [:contacts/contact-by-address chat-id])
+                                     [:primary-name :nickname :public-key :secondary-name])
+        no-nickname?    (string/blank? nickname)]
+    (entry
+     {:icon                (if no-nickname?
+                             :i/edit
+                             :i/delete)
+      :label               (i18n/label (if no-nickname?
+                                         :t/add-nickname-title
+                                         :t/remove-nickname))
+      :on-press            (fn []
+                             (if no-nickname?
+                               (edit-nickname-action contact)
+                               (do
+                                 (rf/dispatch [:hide-bottom-sheet])
+                                 (rf/dispatch [:toasts/upsert
+                                               {:id         :remove-nickname
+                                                :icon       :correct
+                                                :icon-color (colors/theme-colors colors/success-60
+                                                                                 colors/success-50)
+                                                :text       (i18n/label
+                                                             :t/remove-nickname-toast
+                                                             {:secondary-name secondary-name})}])
+                                 (rf/dispatch [:contacts/update-nickname public-key ""]))))
+      :danger?             false
+      :accessibility-label :add-nickname
+      :sub-label           nil
+      :chevron?            false})))
 
 ;; TODO(OmarBasem): Requires design input.
 (defn edit-name-image-entry

src/status_im2/contexts/contacts/drawers/nickname_drawer/style.cljs

@@ -0,0 +1,32 @@
+(ns status-im2.contexts.contacts.drawers.nickname-drawer.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(defn context-container
+  []
+  {:flex-direction   :row
+   :background-color (colors/theme-colors colors/neutral-10 colors/neutral-80)
+   :border-radius    20
+   :align-items      :center
+   :align-self       :flex-start
+   :padding          4
+   :margin-top       8
+   :margin-left      -4
+   :margin-bottom    16})
+
+(def buttons-container
+  {:flex-direction  :row
+   :justify-content :space-between
+   :margin-top      20})
+
+(def nickname-container
+  {:margin-horizontal 20})
+
+(defn nickname-description
+  []
+  {:margin-left 4
+   :color       (colors/theme-colors colors/neutral-50 colors/neutral-40)})
+
+(def nickname-description-container
+  {:flex-direction :row
+   :align-items    :center
+   :margin-top     8})

src/status_im2/contexts/contacts/drawers/nickname_drawer/view.cljs

@@ -0,0 +1,81 @@
+(ns status-im2.contexts.contacts.drawers.nickname-drawer.view
+  (:require [clojure.string :as string]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.icon :as icons]
+            [quo2.core :as quo]
+            [react-native.core :as rn]
+            [reagent.core :as reagent]
+            [status-im2.contexts.contacts.drawers.nickname-drawer.style :as style]
+            [utils.i18n :as i18n]
+            [utils.re-frame :as rf]))
+
+(defn add-nickname-and-show-toast
+  [primary-name entered-nickname public-key]
+  (when-not (string/blank? entered-nickname)
+    (rf/dispatch [:hide-bottom-sheet])
+    (rf/dispatch [:toasts/upsert
+                  {:id         :add-nickname
+                   :icon       :i/correct
+                   :icon-color (colors/theme-colors colors/success-60 colors/success-50)
+                   :text       (i18n/label
+                                :t/set-nickname-toast
+                                {:primary-name primary-name
+                                 :nickname     (string/trim entered-nickname)})}])
+    (rf/dispatch [:contacts/update-nickname public-key (string/trim entered-nickname)])))
+
+(defn nickname-drawer
+  [{:keys [contact]}]
+  (let [{:keys [primary-name nickname public-key]} contact
+        entered-nickname                           (reagent/atom (or nickname ""))
+        photo-path                                 (when-not (empty? (:images contact))
+                                                     (rf/sub [:chats/photo-path public-key]))]
+    (fn [{:keys [title description accessibility-label
+                 close-button-text]}]
+      [rn/view
+       {:style               style/nickname-container
+        :accessibility-label accessibility-label}
+       [quo/text
+        {:weight :semi-bold
+         :size   :heading-1} title]
+       [rn/view {:style (style/context-container)}
+        [quo/user-avatar
+         {:full-name        primary-name
+          :profile-picture  photo-path
+          :size             :xxs
+          :status-indicator false}]
+        [quo/text
+         {:weight :medium
+          :size   :paragraph-2
+          :style  {:margin-left 4}} primary-name]]
+       [quo/input
+        {:type              :text
+         :blur?             true
+         :placeholder       (i18n/label :t/type-nickname)
+         :auto-focus        true
+         :max-length        32
+         :on-change-text    (fn [nickname]
+                              (reset! entered-nickname nickname))
+         :on-submit-editing #(add-nickname-and-show-toast primary-name @entered-nickname public-key)}]
+       [rn/view
+        {:style style/nickname-description-container}
+        [icons/icon :i/info
+         {:size  16
+          :color (colors/theme-colors colors/black colors/white)}]
+        [quo/text
+         {:weight :regular
+          :size   :paragraph-2
+          :style  (style/nickname-description)}
+         description]]
+       [rn/view {:style style/buttons-container}
+        [quo/button
+         {:type     :grey
+          :style    {:flex 0.48}
+          :on-press #(rf/dispatch [:hide-bottom-sheet])}
+         (or close-button-text (i18n/label :t/cancel))]
+
+        [quo/button
+         {:type     :primary
+          :disabled (string/blank? @entered-nickname)
+          :style    {:flex 0.48}
+          :on-press #(add-nickname-and-show-toast primary-name @entered-nickname public-key)}
+         title]]])))

translations/en.json

@@ -1580,6 +1580,12 @@
     "nickname": "Nickname",
     "add-nickname": "Add a nickname (optional)",
     "edit-nickname": "Edit nickname",
+    "add-nickname-title": "Add nickname",
+    "nickname-visible-to-you": "Nickname will only be visible to you",
+    "type-nickname": "Type nickname",
+    "remove-nickname": "Remove nickname",
+    "set-nickname-toast": "You have renamed {{primary-name}} as {{nickname}}",
+    "remove-nickname-toast": "You have removed {{secondary-name}}'s nickname",
     "nickname-description": "Nicknames help you identify others in Status.\nOnly you can see the nicknames you’ve added",
     "accept": "Accept",
     "group-invite": "Group invite",