diff --git a/src/status_im2/common/home/actions/view.cljs b/src/status_im2/common/home/actions/view.cljs index 950a7ccaf2..cc3c40b8a2 100644 --- a/src/status_im2/common/home/actions/view.cljs +++ b/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 diff --git a/src/status_im2/contexts/contacts/drawers/nickname_drawer/style.cljs b/src/status_im2/contexts/contacts/drawers/nickname_drawer/style.cljs new file mode 100644 index 0000000000..89a5bdc1b8 --- /dev/null +++ b/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}) diff --git a/src/status_im2/contexts/contacts/drawers/nickname_drawer/view.cljs b/src/status_im2/contexts/contacts/drawers/nickname_drawer/view.cljs new file mode 100644 index 0000000000..cbdd060b1e --- /dev/null +++ b/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]]]))) diff --git a/translations/en.json b/translations/en.json index d7e0feb9f7..11cf338002 100644 --- a/translations/en.json +++ b/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",