Add 'How to scan' syncing screens (#15710)

src/status_im2/common/resources.cljs

@@ -2,6 +2,11 @@
 
 (def ui
   {:add-new-contact               (js/require "../resources/images/ui2/add-contact.png")
+   :desktop-how-to-pair-sign-in   (js/require "../resources/images/ui2/desktop-how-to-pair-sign-in.png")
+   :desktop-how-to-pair-logged-in (js/require
+                                   "../resources/images/ui2/desktop-how-to-pair-logged-in.png")
+   :mobile-how-to-pair-sign-in    (js/require "../resources/images/ui2/mobile-how-to-pair-sign-in.png")
+   :mobile-how-to-pair-logged-in  (js/require "../resources/images/ui2/mobile-how-to-pair-logged-in.png")
    :lifestyle                     (js/require "../resources/images/ui2/lifestyle.png")
    :music                         (js/require "../resources/images/ui2/music.png")
    :podcasts                      (js/require "../resources/images/ui2/podcasts.png")

src/status_im2/contexts/syncing/how_to_pair/style.cljs

@@ -0,0 +1,72 @@
+(ns status-im2.contexts.syncing.how-to-pair.style
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.platform :as platform]))
+
+(def container-outer
+  {:flex               (if platform/ios? 4.5 5)
+   :padding-top        20
+   :padding-bottom     8
+   :padding-horizontal 16
+   :background-color   colors/neutral-95})
+
+(def heading
+  {:margin-bottom 12
+   :color         colors/white})
+
+(def tabs-container
+  {:margin-top    8
+   :margin-bottom 12})
+
+(def paragraph
+  {:margin-vertical 8
+   :color           colors/white})
+
+(def hr
+  {:margin-top          12
+   :margin-bottom       6
+   :border-bottom-color colors/white-opa-10
+   :border-bottom-width 1})
+
+(def image
+  {:border-radius 16})
+
+(def container-image
+  {:flex-direction   :row
+   :aspect-ratio     1
+   :justify-content  :flex-end
+   :align-items      :flex-end
+   :overflow         :hidden
+   :background-color colors/white-opa-5
+   :border-radius    16})
+
+(def list-text
+  {:margin-horizontal 2
+   :color             colors/white})
+
+(def list-icon
+  {:height          18
+   :width           18
+   :border-radius   6
+   :border-width    1
+   :border-color    colors/white-opa-10
+   :align-items     :center
+   :justify-content :center})
+
+(def list-icon-text
+  {:color colors/white})
+
+(def button-grey
+  {:margin-horizontal 2})
+
+(def button-grey-placeholder
+  {:margin-horizontal 2})
+
+(def button-primary
+  {:margin-horizontal 2})
+
+(def numbered-list
+  {:margin-top 12})
+
+(def numbered-list-item
+  {:flex-direction :row
+   :align-items    :center})

src/status_im2/contexts/syncing/how_to_pair/view.cljs

@@ -0,0 +1,160 @@
+(ns status-im2.contexts.syncing.how-to-pair.view
+  (:require
+    [react-native.gesture :as gesture]
+    [status-im2.contexts.syncing.how-to-pair.style :as style]
+    [status-im2.common.resources :as resources]
+    [utils.i18n :as i18n]
+    [quo2.core :as quo]
+    [quo2.foundations.colors :as colors]
+    [react-native.core :as rn]
+    [reagent.core :as reagent]))
+
+(defn render-element
+  [[type value]]
+  (case type
+    :text
+    [quo/text
+     {:size   :paragraph-2
+      :weight :regular
+      :style  style/list-text} (i18n/label value)]
+
+    :button-primary
+    [quo/button
+     {:type  :primary
+      :size  24
+      :style style/button-primary} (i18n/label value)]
+
+    :button-grey
+    [quo/button
+     {:type           :grey
+      :override-theme :dark
+      :size           24
+      :style          style/button-grey}
+     (i18n/label value)]
+
+    :button-grey-placeholder
+    [quo/button
+     {:type           :grey
+      :override-theme :dark
+      :size           24
+      :before         :i/placeholder
+      :style          style/button-grey-placeholder}
+     (i18n/label value)]
+
+    :context-tag
+    [quo/context-tag
+     {:override-theme :dark
+      :text-style     {:color colors/white}}
+     (resources/get-mock-image (:source value))
+     (i18n/label (:label value))]))
+
+(defn render-item
+  [i item]
+  [rn/view
+   {:margin-vertical 6
+    :style           style/numbered-list-item}
+   [rn/view
+    {:margin-right 6
+     :style        style/list-icon}
+    [quo/text
+     {:size   :label
+      :weight :medium
+      :style  style/list-icon-text} i]]
+   (map #(render-element %) item)])
+
+(defn render-list
+  [{:keys [title image list]}]
+  [rn/view
+   [quo/text
+    {:size   :paragraph-1
+     :weight :semi-bold
+     :style  style/paragraph} (i18n/label title)]
+   (case (:type image)
+     :container-image [rn/view {:style style/container-image}
+                       [rn/image
+                        {:source (resources/get-image
+                                  (:source image))}]]
+     :image           [rn/image
+                       {:source (resources/get-image (:source image))
+                        :style  style/image}])
+   [rn/view {:style style/numbered-list}
+    (map-indexed (fn [i item] (render-item (inc i) item)) list)]])
+
+(def platforms
+  {:mobile
+   [gesture/scroll-view
+    (render-list {:title :t/signing-in-from-another-device
+                  :image {:source :mobile-how-to-pair-sign-in
+                          :type   :image}
+                  :list  [[[:text :t/open-status-on-your-other-device]]
+                          [[:text :t/tap-on]
+                           [:button-grey :t/im-new]]
+                          [[:button-primary :t/enable-camera]
+                           [:text :t/or-tap]
+                           [:button-grey :t/enter-sync-code]]
+                          [[:text :t/scan-or-enter-sync-code-seen-on-this-device]]]})
+    [rn/view {:style style/hr}]
+    (render-list {:title :t/already-logged-in-on-the-other-device
+                  :image {:source :mobile-how-to-pair-logged-in
+                          :type   :image}
+                  :list  [[[:text :t/tap-on]
+                           [:context-tag
+                            {:label  :t/profile
+                             :source :user-picture-male5}]
+                           [:text :t/and]
+                           [:button-grey-placeholder :t/syncing]]
+                          [[:text :t/press]
+                           [:button-grey :t/scan-or-enter-sync-code]]
+                          [[:button-primary :t/enable-camera]
+                           [:text :t/or-tap]
+                           [:button-grey :t/enter-sync-code]]
+                          [[:text :t/scan-or-enter-sync-code-seen-on-this-device]]]})]
+   :desktop
+   [gesture/scroll-view
+    (render-list {:title :t/signing-in-from-another-device
+                  :image {:source :desktop-how-to-pair-sign-in
+                          :type   :image}
+                  :list  [[[:text :t/open-status-on-your-other-device]]
+                          [[:text :t/open]
+                           [:button-grey :t/settings]
+                           [:text :t/and-go-to]
+                           [:button-grey :t/syncing]]
+                          [[:text :t/tap]
+                           [:button-grey :t/scan-or-enter-a-sync-code]]
+                          [[:text :t/scan-the-qr-code-or-copy-the-sync-code]]]})
+    [rn/view {:style style/hr}]
+    (render-list {:title :t/already-logged-in-on-the-other-device
+                  :image {:source :desktop-how-to-pair-logged-in
+                          :type   :container-image}
+                  :list  [[[:text :t/open-status-on-your-other-device]]
+                          [[:text :t/tap-on]
+                           [:button-grey :t/im-new]]
+                          [[:button-primary :t/enable-camera]
+                           [:text :t/or-tap]
+                           [:button-grey :t/enter-sync-code]]
+                          [[:text :t/scan-or-enter-sync-code-seen-on-this-device]]]})]})
+
+(defn instructions
+  []
+  (let [platform      (reagent/atom :mobile)
+        platform-data (map (fn [platform]
+                             {:id    platform
+                              :label (i18n/label
+                                      (keyword (str "t/" (name platform))))})
+                           (keys platforms))]
+    (fn []
+      [rn/view {:style style/container-outer}
+       [quo/text
+        {:size   :heading-1
+         :weight :semi-bold
+         :style  style/heading} (i18n/label :t/how-to-pair)]
+       [rn/view {:style style/tabs-container}
+        [quo/segmented-control
+         {:size           28
+          :override-theme :dark
+          :blur?          true
+          :default-active :mobile
+          :data           platform-data
+          :on-change      #(reset! platform %)}]]
+       (@platform platforms)])))
+

src/status_im2/contexts/syncing/setup_syncing/view.cljs

@@ -33,7 +33,7 @@
                               :label               (i18n/label :t/how-to-scan)
                               :icon                :i/info
                               :icon-override-theme :dark
-                              :on-press            #(js/alert "to be implemented")}]}]])
+                              :on-press            #(rf/dispatch [:open-modal :how-to-pair])}]}]])
 
 (defn valid-cs?
   [connection-string]
@@ -145,4 +145,4 @@
           [[{:icon           :i/scan
              :override-theme :dark
              :on-press       #(js/alert "to be implemented")
-             :label          (i18n/label :t/Scan-or-enter-sync-code)}]]]]]])))
+             :label          (i18n/label :t/scan-or-enter-sync-code)}]]]]]])))

src/status_im2/navigation/screens.cljs

@@ -25,6 +25,7 @@
     [status-im2.contexts.quo-preview.main :as quo.preview]
     [status-im2.contexts.shell.view :as shell]
     [status-im2.contexts.syncing.syncing-devices-list.view :as settings-syncing]
+    [status-im2.contexts.syncing.how-to-pair.view :as how-to-pair]
     [status-im2.navigation.options :as options]
     [status-im2.contexts.chat.group-details.view :as group-details]
     [status-im.ui.screens.screens :as old-screens]
@@ -74,6 +75,10 @@
      :options   {:sheet? true}
      :component add-new-contact/new-contact}
 
+    {:name      :how-to-pair
+     :options   {:sheet? true}
+     :component how-to-pair/instructions}
+
     {:name      :discover-communities
      :component communities.discover/discover}
 

translations/en.json

@@ -1219,7 +1219,7 @@
     "save-password": "Save password",
     "save-password-unavailable": "Set device passcode to save password",
     "save-password-unavailable-android": "Save password is unavailable: your device may be rooted or lacks necessary security features.",
-    "Scan-or-enter-sync-code": "Scan or enter sync code",
+    "scan-or-enter-sync-code": "Scan or enter sync code",
     "scan-qr": "Scan QR code",
     "scan-qr-code": "Scan a QR code with a wallet address",
     "search": "Search",
@@ -2108,6 +2108,21 @@
     "community-request-pending-body-text": "You requested to join",
     "community-kicked-heading": "Kicked from community",
     "community-kicked-body": "You were kicked from",
+    "signing-in-from-another-device": "Signing in from the other device",
+    "open-status-on-your-other-device": "Open Status on your other device",
+    "im-new": "I'm new",
+    "scan-or-enter-sync-code-seen-on-this-device": "Scan or enter sync code seen on this device",
+    "press": "Press",
+    "tap": "Tap",
+    "or-tap": "or tap",
+    "tap-on": "Tap on",
+    "and-go-to": "and go to",
+    "scan-or-enter-a-sync-code": "Scan or enter a sync code",
+    "scan-the-qr-code-or-copy-the-sync-code": "Scan the QR code or copy the sync code",
+    "already-logged-in-on-the-other-device": "Already logged in on the other device",
+    "how-to-pair": "How to pair",
+    "mobile": "Mobile",
+    "desktop": "Desktop",
     "error-loading-audio": "Error while loading audio",
     "you-colon": "You:",
     "you-replied": "You replied",