[#22579] Add modal with help to create a community (#22582)

* Refactor of common components

* Add modal to help users to create a community

Author: ulisesmac

src/status_im/common/home/title_column/style.cljs

@@ -8,6 +8,13 @@
    :padding-horizontal 20
    :background-color   :transparent})
 
+(def title
+  {:flex           1
+   :align-items    :center
+   :flex-direction :row})
+
+(def beta-label {:padding-top 6 :padding-bottom 2})
+
 (def title-column-text
   {:accessibility-label :communities-screen-title
    :margin-right        6

src/status_im/common/home/title_column/view.cljs

@@ -9,24 +9,18 @@
 (defn view
   [{:keys [beta? label handler accessibility-label customization-color]}]
   [rn/view style/title-column
-   [rn/view
-    {:style {:flex           1
-             :align-items    :center
-             :flex-direction :row}}
+   [rn/view {:style style/title}
     [quo/text style/title-column-text
      label]
     (when beta?
-      [rn/view
-       {:style {:padding-top    6
-                :padding-bottom 2}}
+      [rn/view {:style style/beta-label}
        [quo/tag
         {:accessibility-label :communities-chat-beta-tag
          :size                24
          :type                :label
          :label               (i18n/label :t/beta)
          :labelled?           true
          :blurred?            false}]])]
-
    (when handler
      [plus-button/plus-button
       {:on-press            handler

src/status_im/constants.cljs

@@ -491,3 +491,7 @@
 
 (def ^:const pre-login-log-level-key "pre-login-log-level")
 (def ^:const report-email "[email protected]")
+
+;; Community help links
+(def ^:const create-community-help-url
+  "https://status.app/help/communities/create-a-status-community#create-a-status-community")

src/status_im/contexts/chat/home/view.cljs

@@ -133,6 +133,10 @@
       :title       (i18n/label :t/invite-friends-to-status)
       :description (i18n/label :t/share-invite-link)}}))
 
+(defn- on-tab-change
+  [tab]
+  (rf/dispatch [:messages-home/select-tab tab]))
+
 (defn view
   []
   (let [theme                           (quo.context/use-theme)
@@ -170,5 +174,5 @@
                               :accessibility-label :tab-contacts
                               :notification-dot?   (pos? (count pending-contact-requests))}]
        :selected-tab        selected-tab
-       :on-tab-change       (fn [tab] (rf/dispatch [:messages-home/select-tab tab]))
+       :on-tab-change       on-tab-change
        :scroll-shared-value scroll-shared-value}]]))

src/status_im/contexts/communities/actions/home_plus/view.cljs

@@ -10,8 +10,8 @@
     [status-im.common.home.header-spacing.view :as common.header-spacing]
     [status-im.common.resources :as resources]
     [status-im.config :as config]
+    [status-im.constants :as constants]
     [status-im.contexts.communities.actions.community-options.view :as options]
-    [status-im.contexts.communities.actions.home-plus.view :as actions.home-plus]
     [status-im.contexts.shell.constants :as shell.constants]
     [utils.debounce :as debounce]
     [utils.i18n :as i18n]
@@ -26,9 +26,9 @@
     [quo/communities-membership-list-item
      {:customization-color customization-color
       :style               {:padding-horizontal 20}
-      :on-press            #(debounce/throttle-and-dispatch [:communities/navigate-to-community-overview
-                                                             id]
-                                                            500)
+      :on-press            #(debounce/throttle-and-dispatch
+                             [:communities/navigate-to-community-overview id]
+                             500)
       :on-long-press       #(rf/dispatch
                              [:show-bottom-sheet
                               {:content       (fn []
@@ -43,6 +43,56 @@
    {:id :pending :label (i18n/label :t/pending) :accessibility-label :pending-tab}
    {:id :opened :label (i18n/label :t/opened) :accessibility-label :opened-tab}])
 
+(defn- community-creation-options-testing
+  []
+  [rn/view {:style {:padding-vertical 12 :row-gap 12}}
+   [quo/divider-line]
+   [rn/view
+    [quo/action-drawer
+     [[{:icon                :i/communities
+        :accessibility-label :create-closed-community
+        :label               "Create closed community (only for testing)"
+        :on-press            #(rf/dispatch [:fast-create-community/create-closed-community])}
+       {:icon                :i/communities
+        :accessibility-label :create-open-community
+        :label               "Create open community (only for testing)"
+        :on-press            #(rf/dispatch [:fast-create-community/create-open-community])}
+       {:icon                :i/communities
+        :accessibility-label :create-token-gated-community
+        :label               "Create token-gated community (only for testing)"
+        :on-press            #(rf/dispatch
+                               [:fast-create-community/create-token-gated-community])}]]]]])
+
+(defn- open-learn-more-link
+  []
+  (rf/dispatch [:hide-bottom-sheet])
+  (rf/dispatch
+   [:browser.ui/open-url constants/create-community-help-url]))
+
+(defn- hide-bottom-sheet
+  []
+  (rf/dispatch [:hide-bottom-sheet]))
+
+(defn- create-community-sheet
+  []
+  (let [customization-color (rf/sub [:profile/customization-color])]
+    [:<>
+     [quo/drawer-top {:title (i18n/label :t/want-to-create-community)}]
+     [quo/text {:style {:padding-horizontal 20 :padding-bottom 12}}
+      (i18n/label :t/communities-only-available-in-desktop)]
+     [quo/bottom-actions
+      {:actions          :two-actions
+       :button-one-label (i18n/label :t/learn-more)
+       :button-one-props {:disabled?           false
+                          :customization-color customization-color
+                          :on-press            open-learn-more-link
+                          :icon-right          :i/external}
+       :button-two-label (i18n/label :t/maybe-later)
+       :button-two-props {:type     :grey
+                          :on-press hide-bottom-sheet}}]
+     (when config/fast-create-community-enabled?
+       [community-creation-options-testing])]))
+
 (defn empty-state-content
   [theme]
   {:joined
@@ -66,8 +116,7 @@
   {:title-props
    {:beta?               true
     :label               (i18n/label :t/communities)
-    :handler             (when config/fast-create-community-enabled?
-                           #(rf/dispatch [:show-bottom-sheet {:content actions.home-plus/view}]))
+    :handler             #(rf/dispatch [:show-bottom-sheet {:content create-community-sheet}])
     :accessibility-label :new-communities-button}
    :card-props
    {:on-press            #(rf/dispatch [:navigate-to :screen/discover-communities])

src/status_im/contexts/communities/home/view.cljs

@@ -1,19 +1,17 @@
 (ns status-im.contexts.shell.home-stack.style
-  (:require
-    [quo.foundations.colors :as colors]
-    [react-native.reanimated :as reanimated]))
+  (:require [quo.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [status-im.contexts.shell.constants :as shell.constants]))
 
 (defn stack-view
-  [stack-id {:keys [opacity z-index]}]
-  (reanimated/apply-animations-to-style
-   {:opacity opacity
-    :z-index z-index}
-   {:top                 0
-    :left                0
-    :right               0
-    :bottom              0
-    :position            :absolute
-    :accessibility-label stack-id}))
+  [shared-values stack-id]
+  [{:opacity (->> stack-id
+                  (get shell.constants/stacks-opacity-keywords)
+                  (get shared-values))
+    :z-index (->> stack-id
+                  (get shell.constants/stacks-z-index-keywords)
+                  (get shared-values))}
+   rn/stylesheet-absolute-fill])
 
 (defn home-stack
   [theme]

src/status_im/contexts/shell/home_stack/style.cljs

@@ -7,7 +7,6 @@
     [status-im.contexts.chat.home.view :as chat]
     [status-im.contexts.communities.home.view :as communities]
     [status-im.contexts.market.view :as market]
-    [status-im.contexts.shell.constants :as shell.constants]
     [status-im.contexts.shell.home-stack.style :as style]
     [status-im.contexts.shell.state :as state]
     [status-im.contexts.wallet.home.view :as wallet]))
@@ -21,15 +20,11 @@
     :screen/wallet-stack      @state/load-wallet-stack?
     :screen/market-stack      @state/load-market-stack?))
 
-(defn- f-stack-view
+(defn- stack-view
   [stack-id shared-values]
   [reanimated/view
-   {:style (style/stack-view
-            stack-id
-            {:opacity (get shared-values
-                           (get shell.constants/stacks-opacity-keywords stack-id))
-             :z-index (get shared-values
-                           (get shell.constants/stacks-z-index-keywords stack-id))})}
+   {:style               (style/stack-view shared-values stack-id)
+    :accessibility-label stack-id}
    (case stack-id
      :screen/communities-stack [communities/view]
      :screen/chats-stack       [chat/view]
@@ -42,7 +37,7 @@
   [stack-id shared-values theme]
   (when (load-stack? stack-id)
     [quo.context/provider {:theme theme :screen-id stack-id}
-     [f-stack-view stack-id shared-values]]))
+     [stack-view stack-id shared-values]]))
 
 (defn view
   [shared-values]

src/status_im/contexts/shell/home_stack/view.cljs

@@ -427,6 +427,7 @@
   "communities": "Communities",
   "communities-alpha": "Communities (alpha)",
   "communities-enabled": "Communities enabled",
+  "communities-only-available-in-desktop": "For now, you can only create communities on the Status desktop app.",
   "communities-verified": "✓ Verified Status Community",
   "community": "Community",
   "community-channel": "Community channel",
@@ -2976,6 +2977,7 @@
   "wallet-total-value": "Total value",
   "wallet-transaction-total-fee": "Total Fee",
   "wallet-updated-at": "Updated {{at}}",
+  "want-to-create-community": "Want to create your own community?",
   "wants-to-access-profile": "wants to access to your profile",
   "wants-to-join": "wants to join",
   "warning": "Warning",