feat: add qr and share qr components to quo2 (#15583)

feat: add qr and share qr components to quo2

src/quo2/components/share/qr_code/style.cljs

@@ -0,0 +1,12 @@
+(ns quo2.components.share.qr-code.style)
+
+(def container
+  {:flex-direction  :row
+   :justify-content :center})
+
+(defn image
+  [width height]
+  {:width         width
+   :height        height
+   :border-radius 12
+   :aspect-ratio  1})

src/quo2/components/share/qr_code/view.cljs

@@ -0,0 +1,11 @@
+(ns quo2.components.share.qr-code.view
+  (:require [quo2.components.share.qr-code.style :as style]
+            [react-native.core :as rn]))
+
+(defn qr-code
+  [{:keys [source width height]}]
+  [rn/view
+   {:style style/container}
+   [rn/image
+    {:source source
+     :style  (style/image width height)}]])

src/quo2/components/share/share_qr_code/component_spec.cljs

@@ -0,0 +1,33 @@
+(ns quo2.components.share.share-qr-code.component-spec
+  (:require [quo2.components.share.share-qr-code.view :as share-qr-code]
+            [test-helpers.component :as h]))
+
+(h/describe "Share QR Code component"
+  (h/test "renders share qr code component"
+    (h/render [share-qr-code/view
+               {:link-title " A test title"}])
+    (-> (js/expect (h/get-by-text "A test title"))
+        (.toBeTruthy)))
+
+  (h/test "renders share qr code url"
+    (h/render [share-qr-code/view
+               {:qr-url " A test url"}])
+    (-> (js/expect (h/get-by-text "A test url"))
+        (.toBeTruthy)))
+
+  (h/test "on press link event fires"
+    (let [event (h/mock-fn)]
+      (h/render [share-qr-code/view
+                 {:url-on-press event
+                  :qr-url       " A test url"}])
+      (h/fire-event :press (h/get-by-text "A test url"))
+      (-> (js/expect event)
+          (.toHaveBeenCalledTimes 1))))
+
+  (h/test "on press share event fires"
+    (let [event (h/mock-fn)]
+      (h/render [share-qr-code/view
+                 {:share-on-press event}])
+      (h/fire-event :press (h/get-by-label-text :share-profile))
+      (-> (js/expect event)
+          (.toHaveBeenCalledTimes 1)))))

src/quo2/components/share/share_qr_code/style.cljs

@@ -0,0 +1,44 @@
+(ns quo2.components.share.share-qr-code.style
+  (:require [quo2.foundations.colors :as colors]))
+
+(def qr-code-container
+  {:padding-top        12
+   :padding-horizontal 12
+   :padding-bottom     8
+   :border-radius      16
+   :background-color   colors/white-opa-5
+   :flex-direction     :column
+   :justify-content    :center
+   :align-items        :center})
+
+(def profile-address-column
+  {:margin-horizontal :auto
+   :flex              4})
+
+(def profile-address-container
+  {:flex-direction  :row
+   :justify-content :space-between
+   :margin-top      6})
+
+(def profile-address-content-container
+  {:padding-top 2
+   :align-self  :flex-start})
+
+(def profile-address-content
+  {:color colors/white})
+
+(def profile-address-label
+  {:color colors/white-opa-40})
+
+(def share-button-container
+  {:flex            1
+   :flex-direction  :column
+   :justify-content :center
+   :align-items     :flex-end})
+
+(def icon-container
+  {:height          36
+   :flex-direction  :row
+   :align-items     :center
+   :justify-content :space-between
+   :padding-bottom  12})

src/quo2/components/share/share_qr_code/view.cljs

@@ -0,0 +1,49 @@
+(ns quo2.components.share.share-qr-code.view
+  (:require [quo2.components.share.share-qr-code.style :as style]
+            [quo2.components.share.qr-code.view :as qr-code]
+            [react-native.blur :as blur]
+            [quo2.components.markdown.text :as text]
+            [quo2.foundations.colors :as colors]
+            [quo2.components.buttons.button :as button]
+            [react-native.core :as rn]))
+
+(defn view
+  [{:keys [source link-title
+           url-on-press url-on-long-press qr-url share-on-press]}]
+  [blur/ios-view
+   {:style     style/qr-code-container
+    :blur-type :light}
+   [qr-code/qr-code
+    {:source source
+     :width  "100%"
+     :height 311}]
+   [rn/view {:style style/profile-address-container}
+    [rn/view {:style style/profile-address-column}
+     [text/text
+      {:size   :paragraph-2
+       :weight :medium
+       :style  style/profile-address-label}
+      link-title]
+     [rn/touchable-highlight
+      {:active-opacity   1
+       :underlay-color   colors/neutral-80-opa-1-blur
+       :background-color :transparent
+       :on-press         url-on-press
+       :on-long-press    url-on-long-press
+       :style            style/profile-address-content-container}
+      [text/text
+       {:style           style/profile-address-content
+        :size            :paragraph-1
+        :weight          :medium
+        :ellipsize-mode  :middle
+        :number-of-lines 1}
+       qr-url]]]
+    [rn/view {:style style/share-button-container}
+     [button/button
+      {:icon                true
+       :type                :blur-bg
+       :size                32
+       :accessibility-label :share-profile
+       :override-theme      :dark
+       :on-press            share-on-press}
+      :i/share]]]])

src/quo2/core.cljs

@@ -60,6 +60,8 @@
     quo2.components.separator
     quo2.components.settings.accounts.view
     quo2.components.settings.privacy-option
+    quo2.components.share.qr-code.view
+    quo2.components.share.share-qr-code.view
     quo2.components.onboarding.small-option-card.view
     quo2.components.tabs.segmented-tab
     quo2.components.tabs.account-selector
@@ -92,9 +94,7 @@
 (def group-avatar-tag quo2.components.tags.context-tags/group-avatar-tag)
 (def audio-tag quo2.components.tags.context-tags/audio-tag)
 (def community-tag quo2.components.tags.context-tags/community-tag)
-(def tabs quo2.components.tabs.tabs/tabs)
+
-(def segmented-control quo2.components.tabs.segmented-tab/segmented-control)
-(def account-selector quo2.components.tabs.account-selector/account-selector)
 (def floating-shell-button quo2.components.navigation.floating-shell-button/floating-shell-button)
 (def page-nav quo2.components.navigation.page-nav/page-nav)
 (def disclaimer quo2.components.selectors.disclaimer.view/view)
@@ -177,6 +177,15 @@
 (def privacy-option quo2.components.settings.privacy-option/card)
 (def account quo2.components.settings.accounts.view/account)
 
+;;;; SHARE
+(def qr-code quo2.components.share.qr-code.view/qr-code)
+(def share-qr-code quo2.components.share.share-qr-code.view/view)
+
+;;;; TABS
+(def tabs quo2.components.tabs.tabs/tabs)
+(def segmented-control quo2.components.tabs.segmented-tab/segmented-control)
+(def account-selector quo2.components.tabs.account-selector/account-selector)
+
 ;;;; TAGS
 (def tag quo2.components.tags.tag/tag)
 (def tags quo2.components.tags.tags/tags)

src/quo2/core_spec.cljs

@@ -23,4 +23,5 @@
     [quo2.components.selectors.--tests--.selectors-component-spec]
     [quo2.components.selectors.disclaimer.component-spec]
     [quo2.components.selectors.filter.component-spec]
+    [quo2.components.share.share-qr-code.component-spec]
     [quo2.components.tags.--tests--.status-tags-component-spec]))

src/status_im2/common/resources.cljs

@@ -21,6 +21,7 @@
    :photo1               (js/require "../resources/images/mock2/photo1.png")
    :photo2               (js/require "../resources/images/mock2/photo2.png")
    :photo3               (js/require "../resources/images/mock2/photo3.png")
+   :qr-code              (js/require "../resources/images/mock2/qr-code.png")
    :small-opt-card-icon  (js/require "../resources/images/mock2/small_opt_card_icon.png")
    :small-opt-card-main  (js/require "../resources/images/mock2/small_opt_card_main.png")
    :status-logo          (js/require "../resources/images/mock2/status-logo.png")

src/status_im2/contexts/quo_preview/main.cljs

@@ -65,6 +65,8 @@
     [status-im2.contexts.quo-preview.selectors.selectors :as selectors]
     [status-im2.contexts.quo-preview.settings.accounts :as accounts]
     [status-im2.contexts.quo-preview.settings.privacy-option :as privacy-option]
+    [status-im2.contexts.quo-preview.share.qr-code :as qr-code]
+    [status-im2.contexts.quo-preview.share.share-qr-code :as share-qr-code]
     [status-im2.contexts.quo-preview.switcher.switcher-cards :as switcher-cards]
     [status-im2.contexts.quo-preview.tabs.account-selector :as account-selector]
     [status-im2.contexts.quo-preview.tabs.segmented-tab :as segmented]
@@ -262,6 +264,12 @@
                            {:name      :accounts
                             :insets    {:top false}
                             :component accounts/preview-accounts}]
+   :share                 [{:name      :qr-code
+                            :insets    {:top false}
+                            :component qr-code/preview-qr-code}
+                           {:name      :share-qr-code
+                            :insets    {:top false}
+                            :component share-qr-code/preview-share-qr-code}]
    :tabs                  [{:name      :segmented
                             :insets    {:top false}
                             :component segmented/preview-segmented}

src/status_im2/contexts/quo_preview/share/qr_code.cljs

@@ -0,0 +1,32 @@
+(ns status-im2.contexts.quo-preview.share.qr-code
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [quo2.core :as quo]
+            [status-im2.common.resources :as resources]))
+
+(defn cool-preview
+  []
+  (fn []
+    [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+     [rn/view {:style {:padding-bottom 150}}
+      [rn/view {:style {:flex 1}}]
+      [rn/view
+       {:style {:padding-vertical 60
+                :flex-direction   :row
+                :justify-content  :center}}
+       [quo/qr-code
+        {:source (resources/get-mock-image :qr-code)
+         :height 250
+         :width  250}]]]]))
+
+(defn preview-qr-code
+  []
+  [rn/view
+   {:style {:background-color (colors/theme-colors colors/white
+                                                   colors/neutral-90)
+            :flex             1}}
+   [rn/flat-list
+    {:flex                         1
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])

src/status_im2/contexts/quo_preview/share/share_qr_code.cljs

@@ -0,0 +1,54 @@
+(ns status-im2.contexts.quo-preview.share.share-qr-code
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.core :as rn]
+            [quo2.core :as quo]
+            [status-im2.contexts.quo-preview.preview :as preview]
+            [status-im2.common.resources :as resources]
+            [reagent.core :as reagent]))
+
+
+(def descriptor
+  [{:label "URL"
+    :key   :url
+    :type  :text}
+   {:label "Link title"
+    :key   :link-title
+    :type  :text}])
+
+(defn cool-preview
+  []
+  (let [state (reagent/atom {:info-button? true
+                             :link-title   "Link to profile"
+                             :url          "status.app/u/zQ34e1zlOdas0pKnvrweeedsasas12adjie8"})]
+    (fn []
+      [rn/touchable-without-feedback {:on-press rn/dismiss-keyboard!}
+       [rn/view {:style {:padding-bottom 150}}
+        [rn/view {:style {:flex 1}}]
+        [preview/customizer state descriptor]
+        [rn/view
+         {:style {:padding-vertical 60
+                  :justify-content  :center}}
+         [preview/blur-view
+          {:show-blur-background? true
+           :height                600
+           :blur-view-props       {:padding-top        20
+                                   :padding-horizontal 20}}
+          [quo/share-qr-code
+           {:source            (resources/get-mock-image :qr-code)
+            :link-title        (:link-title @state)
+            :url-on-press      #(js/alert "url pressed")
+            :url-on-long-press #(js/alert "url long pressed")
+            :share-on-press    #(js/alert "share pressed")
+            :qr-url            (:url @state)}]]]]])))
+
+(defn preview-share-qr-code
+  []
+  [rn/view
+   {:style {:background-color (colors/theme-colors colors/white
+                                                   colors/neutral-90)
+            :flex             1}}
+   [rn/flat-list
+    {:flex                         1
+     :keyboard-should-persist-taps :always
+     :header                       [cool-preview]
+     :key-fn                       str}]])