fix: ensure keycard pin error message is visible (#21691)

Primarily, this change fixes an issue related to the Keycard PIN error message not being visible displayed on some devices. Additionally, this change also clears the PIN entry state after failing to enter the correct Keycard PIN. And this change also allows for the PIN entry component to have two separate error modes: one for the entire component and another for just the info text.

src/quo/components/pin_input/view.cljs

@@ -6,7 +6,7 @@
             [react-native.core :as rn]))
 
 (defn view
-  [{:keys [number-of-pins number-of-filled-pins error? info]
+  [{:keys [number-of-pins number-of-filled-pins error? info info-error?]
     :or   {number-of-pins 6 number-of-filled-pins 0}}]
   (let [theme (quo.theme/use-theme)]
     [rn/view {:style {:align-items :center}}
@@ -20,7 +20,7 @@
                    (= i (inc number-of-filled-pins)) :active)}])]
      (when info
        [text/text
-        {:style {:color (if error?
+        {:style {:color (if (or error? info-error?)
                           (colors/theme-colors colors/danger-50 colors/danger-60 theme)
                           (colors/theme-colors colors/neutral-50 colors/neutral-40 theme))}
          :size  :paragraph-2}

src/status_im/contexts/keycard/events.cljs

@@ -45,6 +45,7 @@
      (when-not (or tag-was-lost? (nil? pin-retries-count))
        {:db (-> db
                 (assoc-in [:keycard :application-info :pin-retry-counter] pin-retries-count)
+                (assoc-in [:keycard :pin :text] "")
                 (assoc-in [:keycard :pin :status] :error))
         :fx [[:dispatch [:keycard/disconnect]]
              (when (zero? pin-retries-count)

src/status_im/contexts/keycard/pin/enter/view.cljs

@@ -14,5 +14,4 @@
       {:icon-name :i/close
        :on-press  events-helper/navigate-back}]
      [quo/page-top {:title (i18n/label :t/enter-keycard-pin)}]
-     [rn/view {:style {:flex 1}}]
      [keycard.pin/auth {:on-complete on-complete}]]))

src/status_im/contexts/keycard/pin/view.cljs

@@ -13,17 +13,20 @@
         pin-retry-counter              (rf/sub [:keycard/pin-retry-counter])
         error?                         (or error? (= status :error))]
     (rn/use-unmount #(rf/dispatch [:keycard.pin/clear]))
-    [rn/view {:padding-bottom 12 :flex 1}
-     [rn/view {:flex 1 :justify-content :center :align-items :center :padding 34}
+    [rn/view
+     {:style {:flex           1
+              :gap            34
+              :padding-bottom 12}}
+     [rn/view {:style {:flex 1 :justify-content :center :align-items :center}}
       [quo/pin-input
        {:blur?                 false
         :number-of-pins        constants/pincode-length
         :number-of-filled-pins (count text)
-        :error?                error?
+        :info-error?           error?
         :info                  (when error?
                                  (if (not (string/blank? error-message))
                                    error-message
-                                   (i18n/label :t/pin-retries-left {:number pin-retry-counter})))}]]
+                                   (i18n/label-pluralize pin-retry-counter :t/pin-retries-left)))}]]
      [quo/numbered-keyboard
       {:delete-key? true
        :on-delete   #(rf/dispatch [:keycard.pin/delete-pressed])

src/status_im/contexts/preview/quo/pin_input/pin_input.cljs

@@ -11,6 +11,8 @@
     :key  :number-of-filled-pins}
    {:type :boolean
     :key  :error?}
+   {:type :boolean
+    :key  :info-error?}
    {:type :text
     :key  :info}])
 

translations/en.json

@@ -1981,7 +1981,10 @@
   "pin-one-attempt-blocked-before": "Be careful, you have only",
   "pin-one-attempt-frozen-after": "before your Keycard gets frozen",
   "pin-one-attempt-frozen-before": "Be careful, you have only",
-  "pin-retries-left": "{{number}} attempts left",
+  "pin-retries-left": {
+    "one": "Wrong PIN, 1 attempt left",
+    "other": "Wrong PIN, {{count}} attempts left"
+  },
   "pin-to-channel": "Pin to the channel",
   "pin-to-chat": "Pin to the chat",
   "Pinned-a-message": "Pinned a message",