Intro text and images

Intro wizard

src/status_im/accounts/create/core.cljs

@@ -144,6 +144,34 @@
                               (dissoc :password :password-confirm :name :error)))}
             (navigation/navigate-to-cofx :create-account nil)))
 
+(fx/defn intro-wizard [{:keys [db] :as cofx}]
+  (fx/merge {:db (assoc db :intro-wizard {:step 1})}
+            (navigation/navigate-to-cofx :intro-wizard nil)))
+
+(fx/defn intro-step-back [{:keys [db] :as cofx}]
+  (let  [step (get-in db [:intro-wizard :step])]
+
+    (if (< 1 step)
+      (fx/merge {:db (assoc db :intro-wizard {:step (dec step)})}
+                (navigation/navigate-to-cofx :intro-wizard nil))
+
+      (fx/merge {:db (dissoc db :intro-wizard)}
+                (navigation/navigate-to-clean :intro nil)))))
+
+(fx/defn intro-step-forward [{:keys [db] :as cofx}]
+  (let  [step (get-in db [:intro-wizard :step])]
+
+    (if (= step 7)
+      (fx/merge {:db (dissoc db :intro-wizard)}
+                (navigation/navigate-to-cofx :welcome nil))
+      (fx/merge {:db (assoc db :intro-wizard {:step (inc step)})}
+                (navigation/navigate-to-cofx :intro-wizard nil)))))
+
+(defn get-new-key-code [current-code digit]
+  (str current-code digit))
+
+(fx/defn code-digit-pressed [{:keys [db] :as cofx} digit]
+  {:db (update-in db [:intro-wizard :key-code] get-new-key-code digit)})
 ;;;; COFX
 
 (re-frame/reg-cofx

src/status_im/events.cljs

@@ -250,6 +250,26 @@
  (fn [cofx _]
    (hardwallet/navigate-to-authentication-method cofx)))
 
+(handlers/register-handler-fx
+ :accounts.create.ui/intro-wizard
+ (fn [cofx _]
+   (accounts.create/intro-wizard cofx)))
+
+(handlers/register-handler-fx
+ :intro-wizard/step-back-pressed
+ (fn [cofx _]
+   (accounts.create/intro-step-back cofx)))
+
+(handlers/register-handler-fx
+ :intro-wizard/step-forward-pressed
+ (fn [cofx _]
+   (accounts.create/intro-step-forward cofx)))
+
+(handlers/register-handler-fx
+ :intro-wizard/code-digit-pressed
+ (fn [cofx [_ digit]]
+   (accounts.create/code-digit-pressed cofx digit)))
+
 ;; accounts recover module
 
 (handlers/register-handler-fx

src/status_im/init/core.cljs

@@ -139,22 +139,22 @@
 (fx/defn initialize-views
   [cofx]
   (let [{{:accounts/keys [accounts] :as db} :db} cofx]
-    (if (empty? accounts)
-      (navigation/navigate-to-cofx cofx :intro nil)
-      (let [account-with-notification
-            (when-not platform/desktop?
-              (notifications/lookup-contact-pubkey-from-hash
-               cofx
-               (first (keys (:push-notifications/stored db)))))
-            selection-fn
-            (if (not-empty account-with-notification)
-              #(filter (fn [account]
-                         (= account-with-notification
-                            (:public-key account)))
-                       %)
-              #(sort-by :last-sign-in > %))
-            {:keys [address photo-path name]} (first (selection-fn (vals accounts)))]
-        (accounts.login/open-login cofx address photo-path name)))))
+    (if true #_(empty? accounts)
+        (navigation/navigate-to-cofx cofx :intro nil)
+        (let [account-with-notification
+              (when-not platform/desktop?
+                (notifications/lookup-contact-pubkey-from-hash
+                 cofx
+                 (first (keys (:push-notifications/stored db)))))
+              selection-fn
+              (if (not-empty account-with-notification)
+                #(filter (fn [account]
+                           (= account-with-notification
+                              (:public-key account)))
+                         %)
+                #(sort-by :last-sign-in > %))
+              {:keys [address photo-path name]} (first (selection-fn (vals accounts)))]
+          (accounts.login/open-login cofx address photo-path name)))))
 
 (fx/defn load-accounts-and-initialize-views
   "DB has been decrypted, load accounts and initialize-view"

src/status_im/react_native/resources.cljs

@@ -5,6 +5,10 @@
    :empty-recent        (js/require "./resources/images/ui/empty-recent.png")
    :analytics-image     (js/require "./resources/images/ui/analytics-image.png")
    :welcome-image       (js/require "./resources/images/ui/welcome-image.png")
+   :intro1              (js/require "./resources/images/ui/intro1.png")
+   :intro2              (js/require "./resources/images/ui/intro2.png")
+   :intro3              (js/require "./resources/images/ui/intro3.png")
+   :sample-key          (js/require "./resources/images/ui/sample-key.png")
    :lock                (js/require "./resources/images/ui/lock.png")
    :tribute-to-talk     (js/require "./resources/images/ui/tribute-to-talk.png")
    :wallet-welcome      (js/require "./resources/images/ui/wallet-welcome.png")

src/status_im/subs.cljs

@@ -1631,3 +1631,10 @@
  :<- [:search/filter]
  (fn [[chats search-filter]]
    (apply-filter search-filter chats extract-chat-attributes)))
+
+;; INTRO WIZARD
+(re-frame/reg-sub
+ :intro-wizard
+ (fn [db]
+   (:intro-wizard db)))
+

src/status_im/ui/components/numpad/styles.cljs

@@ -21,7 +21,7 @@
   {:flex-direction :row})
 
 (def number-pad
-  {:flex          1
+  {;:flex          1
    :align-items   :center
    :margin-bottom 24
    :min-height    292

src/status_im/ui/screens/home/styles.cljs

@@ -167,6 +167,13 @@
 (def welcome-view
   {:flex 1})
 
+(def action-button-container
+  {:position    :absolute
+   :align-items :center
+   :bottom      (+ tabs.styles/tabs-diff 6)
+   :width       40
+   :height      40})
+
 (def welcome-image-container
   {:align-items :center
    :margin-top  42})
@@ -182,13 +189,6 @@
    :margin-horizontal 32
    :color             colors/gray})
 
-(def action-button-container
-  {:position    :absolute
-   :align-items :center
-   :bottom      (+ tabs.styles/tabs-diff 6)
-   :width       40
-   :height      40})
-
 (def action-button
   {:width            40
    :height           40

src/status_im/ui/screens/intro/styles.cljs

@@ -7,9 +7,59 @@
    :padding-horizontal 30})
 
 (def intro-logo-container
-  {:flex            1
+  {;:flex            1
    :align-items     :center
-   :justify-content :center})
+   :justify-content :center
+   ;:margin-bottom 110
+})
+
+(def welcome-image-container
+  {:align-items :center
+   :margin-top  42})
+
+(def intro-button
+  {:margin-vertical    8
+   :padding-horizontal 32
+   :align-self         :center
+   :justify-content    :center
+   :align-items        :center})
+
+(def wizard-title
+  {:font-size 22
+   :line-height 28
+   :text-align :center
+   :font-weight "600"
+   :margin-bottom 16})
+
+(def wizard-text
+  {:font-size 15
+   :line-height 22
+   :color colors/gray
+   :text-align :center})
+
+(def welcome-text
+  {:typography  :header
+   :margin-top  32
+   :text-align  :center})
+
+(def welcome-text-bottom-note
+  {:font-size   12
+   :line-height 14
+   :color       colors/gray
+   :text-align  :center})
+
+(def wizard-bottom-note
+  {:font-size 15
+   :line-height 22
+   :margin-top 20
+   :color colors/gray
+   :text-align :center})
+
+(def welcome-text-description
+  {:margin-top        8
+   :text-align        :center
+   :margin-horizontal 32
+   :color             colors/gray})
 
 (def intro-logo
   {:size      111
@@ -31,4 +81,4 @@
 
 (def bottom-button-container
   {:margin-bottom 6
-   :margin-top    38})
+   :margin-top    16})

src/status_im/ui/screens/intro/views.cljs

@@ -2,28 +2,147 @@
   (:require-macros [status-im.utils.views :refer [defview letsubs]])
   (:require [status-im.ui.components.react :as react]
             [re-frame.core :as re-frame]
+            [status-im.react-native.resources :as resources]
+            [taoensso.timbre :as log]
+            [status-im.ui.components.colors :as colors]
+            [reagent.core :as r]
+            [status-im.ui.components.toolbar.actions :as actions]
             [status-im.ui.components.common.common :as components.common]
+            [status-im.ui.components.numpad.views :as numpad]
             [status-im.ui.screens.intro.styles :as styles]
+            [status-im.ui.components.toolbar.view :as toolbar]
             [status-im.i18n :as i18n]
             [status-im.ui.components.status-bar.view :as status-bar]
             [status-im.ui.screens.privacy-policy.views :as privacy-policy]))
 
+(def margin 24)
+
+(defn intro-viewer [slides window-width]
+  (let [view-width  (- window-width (* 2 margin))
+        scroll-x (r/atom 0)
+        scroll-view-ref (atom nil)
+        max-width (* view-width (dec (count slides)))]
+    (fn []
+      [react/view {:style {:margin-horizontal 32
+                           :align-items :center}}
+       [react/scroll-view {:horizontal true
+                           :paging-enabled true
+                           :ref #(reset! scroll-view-ref %)
+                           :shows-vertical-scroll-indicator false
+                           :shows-horizontal-scroll-indicator false
+                           :pinch-gesture-enabled false
+                           :on-scroll #(let [x (.-nativeEvent.contentOffset.x %)
+                                             _ (log/info "#scroll" x view-width)]
+                                         (cond (> x max-width)
+                                               (.scrollTo @scroll-view-ref (clj->js {:x 0}))
+                                               (< x 0)
+                                               (.scrollTo @scroll-view-ref (clj->js {:x max-width}))
+                                               :else (reset! scroll-x x)))
+                           :style {:width view-width
+                                   :margin-vertical 32}}
+        (for [s slides]
+          ^{:key (:title s)}
+          [react/view {:style {:width view-width}}
+           [react/view {:style styles/intro-logo-container}
+            [components.common/image-contain
+             {:container-style {}}
+             {:image (:image s) :width view-width  :height view-width}]]
+           [react/i18n-text {:style styles/wizard-title :key (:title s)}]
+           [react/i18n-text {:style styles/wizard-text
+                             :key   (:text s)}]])]
+       [react/view {:style {:flex-direction :row
+                            :justify-content :space-between
+                            :align-items :center
+                            :height 6
+                            :width (+ 6 (* (+ 6 10) (dec (count slides))))}}
+        (doall
+         (for [i (range (count slides))]
+           ^{:key i}
+           [react/view {:style {:background-color
+                                (if (= i (/ @scroll-x view-width)) colors/blue (colors/alpha colors/blue 0.2))
+                                :width 6 :height 6
+                                :border-radius 3}}]))]])))
+
 (defview intro []
-  [react/view {:style styles/intro-view}
-   [status-bar/status-bar {:flat? true}]
-   [react/view {:style styles/intro-logo-container}
-    [components.common/logo styles/intro-logo]]
-   [react/i18n-text {:style styles/intro-text
-                     :key   :intro-text}]
-   [react/view
-    [react/i18n-text {:style styles/intro-text-description
-                      :key   :intro-text-description}]]
-   [react/view styles/buttons-container
-    [components.common/button {:button-style {:flex-direction :row}
-                               :on-press     #(re-frame/dispatch [:accounts.create.ui/create-new-account-button-pressed])
-                               :label        (i18n/label :t/create-account)}]
-    [react/view styles/bottom-button-container
-     [components.common/button {:on-press    #(re-frame/dispatch [:accounts.recover.ui/recover-account-button-pressed])
-                                :label       (i18n/label :t/already-have-account)
-                                :background? false}]]
-    [privacy-policy/privacy-policy-button]]])
+  (letsubs [;{window-width :width window-height :height} [:dimensions/window]
+            window-width [:dimensions/window-width]]
+    [react/view {:style styles/intro-view}
+     [status-bar/status-bar {:flat? true}]
+     [intro-viewer [{:image (:intro1 resources/ui)
+                     :title :intro-title1
+                     :text :intro-text1}
+                    {:image (:intro2 resources/ui)
+                     :title :intro-title2
+                     :text :intro-text2}
+                    {:image (:intro3 resources/ui)
+                     :title :intro-title3
+                     :text :intro-text3}] window-width]
+     [react/view {:flex 1}]
+     [react/view styles/buttons-container
+      [components.common/button {:button-style {:flex-direction :row}
+                                 :on-press     #(re-frame/dispatch [:accounts.create.ui/intro-wizard])
+                                 :label        (i18n/label :t/get-started)}]
+      [react/view styles/bottom-button-container
+       [components.common/button {:on-press    #(re-frame/dispatch [:accounts.recover.ui/recover-account-button-pressed])
+                                  :label       (i18n/label :t/access-key)
+                                  :background? false}]]
+      [react/i18n-text {:style styles/welcome-text-bottom-note :key :intro-privacy-policy-note}]
+      #_[privacy-policy/privacy-policy-button]]]))
+
+(defn generate-key []
+  [components.common/image-contain
+   {:container-style {}}
+   {:image (:sample-key resources/ui)
+    :width 154 :height 140}])
+
+(defn choose-key [])
+
+(defn select-key-storage [])
+
+(defn create-code []
+  [react/view
+   [numpad/number-pad {:on-press #(re-frame/dispatch [:intro-wizard/code-digit-pressed %])}]
+   [react/text {:style styles/wizard-bottom-note} (i18n/label :t/you-will-need-this-code)]])
+
+(defn confirm-code []
+  [react/view
+   [numpad/number-pad {:on-press #(re-frame/dispatch [:intro-wizard/code-digit-pressed %])}]
+   [react/text {:style styles/wizard-bottom-note} (i18n/label :t/you-will-need-this-code)]])
+
+(defn enable-fingerprint [])
+
+(defn enable-notifications [])
+
+(defview wizard []
+  (letsubs [{:keys [step]} [:intro-wizard]]
+    [react/view {:style {:flex 1}}
+     [toolbar/toolbar
+      nil
+      (when-not (= :finish step)
+        (toolbar/nav-button
+         (actions/back #(re-frame/dispatch
+                         [:intro-wizard/step-back-pressed]))))
+      nil]
+     [react/view {:style {:flex 1
+                          :margin-horizontal 32
+                          :justify-content :space-between}}
+      [react/view {:style {:margin-top   16}}
+
+       [react/text {:style styles/wizard-title} (i18n/label (keyword (str "intro-wizard-title" step)))]
+       [react/text {:style styles/wizard-text} (i18n/label (keyword (str "intro-wizard-text" step)))]]
+      (case step
+        1 [generate-key]
+        2 [choose-key]
+        3 [select-key-storage]
+        4 [create-code]
+        5 [confirm-code]
+        6 [enable-fingerprint]
+        7 [enable-notifications])
+      [react/view {:style {:margin-bottom 32}}
+       [components.common/button {:button-style styles/intro-button
+                                  ;:disabled?    disable-button?
+                                  :on-press     #(re-frame/dispatch
+                                                  [:intro-wizard/step-forward-pressed])
+                                  :label        (i18n/label :generate-a-key)}]
+       [react/text {:style styles/wizard-bottom-note}
+        (i18n/label :t/this-will-take-few-seconds)]]]]))