Merge pull request #519 from mysteriumnetwork/feature/payment_process…

…ing_banner Payment processing banner
mysteriumnetwork · Feb 8, 2022 · 5ba4b86 · 5ba4b86
2 parents 93a69f8 + 720a8f4
commit 5ba4b86
Show file tree

Hide file tree

Showing 9 changed files with 136 additions and 5 deletions.
diff --git a/...oid/app/src/main/java/updated/mysterium/vpn/ui/top/up/card/summary/CardSummaryActivity.kt b/...oid/app/src/main/java/updated/mysterium/vpn/ui/top/up/card/summary/CardSummaryActivity.kt
@@ -1,5 +1,6 @@
 package updated.mysterium.vpn.ui.top.up.card.summary
 
+import android.animation.ObjectAnimator
 import android.annotation.SuppressLint
 import android.content.Intent
 import android.os.Bundle
@@ -30,13 +31,15 @@ class CardSummaryActivity : BaseActivity() {
         private const val TAG = "CardSummaryActivity"
         private const val HTML_MIME_TYPE = "text/html"
         private const val ENCODING = "utf-8"
+        private const val paymentCallbackUrl = "https://checkout.cardinity.com/callback/"
     }
 
     private lateinit var binding: ActivityCardSummaryBinding
     private val viewModel: CardSummaryViewModel by inject()
     private val paymentViewModel: TopUpPaymentViewModel by inject()
     private val paymentStatusViewModel: PaymentStatusViewModel by inject()
     private var paymentHtml: String? = null
+    private var paymentProcessed = false
 
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
@@ -49,11 +52,11 @@ class CardSummaryActivity : BaseActivity() {
     }
 
     private fun subscribeViewModel() {
-        paymentStatusViewModel.paymentSuccessfully.observe(this, { paymentStatus ->
+        paymentStatusViewModel.paymentSuccessfully.observe(this) { paymentStatus ->
             if (paymentStatus == PaymentStatus.STATUS_PAID) {
                 paymentConfirmed()
             }
-        })
+        }
     }
 
     private fun bind() {
@@ -66,7 +69,13 @@ class CardSummaryActivity : BaseActivity() {
         binding.closeButton.setOnClickListener {
             binding.closeButton.visibility = View.GONE
             binding.webView.visibility = View.GONE
-            showPaymentPopUp()
+            if (paymentProcessed) {
+                showPaymentPopUp()
+                paymentProcessed = false
+            }
+        }
+        binding.paymentProcessingLayout.closeBannerButton.setOnClickListener {
+            binding.paymentProcessingLayout.root.visibility = View.GONE
         }
     }
 
@@ -75,10 +84,25 @@ class CardSummaryActivity : BaseActivity() {
         val dialog = createPopUp(bindingPopUp.root, false)
         bindingPopUp.okayButton.setOnClickListener {
             dialog.dismiss()
+            showPaymentProcessingBanner()
         }
         dialog.show()
     }
 
+    private fun showPaymentProcessingBanner() {
+        binding.paymentProcessingLayout.root.visibility = View.VISIBLE
+        val animationX =
+            (binding.titleTextView.x + binding.titleTextView.height + resources.getDimension(R.dimen.margin_padding_size_medium))
+        ObjectAnimator.ofFloat(
+            binding.paymentProcessingLayout.root,
+            "translationY",
+            animationX
+        ).apply {
+            duration = 2000
+            start()
+        }
+    }
+
     private fun getMystAmount() {
         val mystAmount = intent.extras?.getInt(CRYPTO_AMOUNT_EXTRA_KEY)
         binding.mystTextView.text = getString(
@@ -125,7 +149,9 @@ class CardSummaryActivity : BaseActivity() {
 
                 override fun onLoadResource(view: WebView?, url: String?) {
                     super.onLoadResource(view, url)
-                    Log.i(TAG, url.toString())
+                    if (url?.contains(paymentCallbackUrl) == true) {
+                        paymentProcessed = true
+                    }
                 }
             }
             binding.webView.loadDataWithBaseURL(null, htmlData, HTML_MIME_TYPE, ENCODING, null)

diff --git a/android/app/src/main/res/drawable/icon_clock_five.xml b/android/app/src/main/res/drawable/icon_clock_five.xml
@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="84dp"
+    android:height="84dp"
+    android:viewportWidth="84"
+    android:viewportHeight="84">
+    <path
+        android:fillColor="@color/payment_processing_icon_color"
+        android:pathData="M42,2C19.9444,2 2,19.9444 2,42C2,64.0556 19.9444,82 42,82C64.0556,82 82,64.0556 82,42C82,19.9444 64.0556,2 42,2ZM42,77C22.7007,77 7,61.2993 7,42C7,22.7007 22.7007,7 42,7C61.2993,7 77,22.7007 77,42C77,61.2993 61.2993,77 42,77Z"
+        android:strokeWidth="3"
+        android:strokeColor="@color/payment_processing_icon_color" />
+    <path
+        android:fillColor="@color/payment_processing_icon_color"
+        android:pathData="M44.4087,17.1111H39.334V43.1526L55.3015,58.8889L58.8895,55.3528L44.4087,41.0818V17.1111Z"
+        android:strokeWidth="3"
+        android:strokeColor="@color/payment_processing_icon_color" />
+</vector>
diff --git a/android/app/src/main/res/drawable/icon_close_payment_processing.xml b/android/app/src/main/res/drawable/icon_close_payment_processing.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="30dp"
+    android:height="30dp"
+    android:viewportWidth="30"
+    android:viewportHeight="30">
+  <path
+      android:pathData="M15,15m-15,0a15,15 0,1 1,30 0a15,15 0,1 1,-30 0"
+      android:fillColor="@color/onboarding_title_dark_blue"/>
+  <path
+      android:pathData="M20.5706,11.2752L18.7239,9.4285L14.9992,13.1532L11.2744,9.4285L9.4277,11.2752L13.1525,14.9999L9.4277,18.7246L11.2744,20.5713L14.9992,16.8466L18.7239,20.5713L20.5706,18.7246L16.8458,14.9999L20.5706,11.2752Z"
+      android:fillColor="#ffffff"/>
+</vector>
diff --git a/android/app/src/main/res/layout/activity_card_summary.xml b/android/app/src/main/res/layout/activity_card_summary.xml
@@ -52,6 +52,11 @@
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="parent" />
 
+    <include
+        android:id="@+id/paymentProcessingLayout"
+        layout="@layout/item_payment_processing_banner"
+        app:layout_constraintBottom_toTopOf="parent" />
+
     <com.airbnb.lottie.LottieAnimationView
         android:layout_width="wrap_content"
         android:layout_height="0dp"

diff --git a/android/app/src/main/res/layout/item_payment_processing_banner.xml b/android/app/src/main/res/layout/item_payment_processing_banner.xml
@@ -0,0 +1,56 @@
+<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    app:layout_constraintBottom_toTopOf="parent">
+
+    <com.google.android.material.card.MaterialCardView
+        android:id="@+id/paymentProcessingCard"
+        style="@style/Widget.PaymentProcessingCardView"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content"
+        android:layout_margin="@dimen/margin_padding_size_medium"
+        app:layout_constraintTop_toTopOf="parent">
+
+        <LinearLayout
+            android:layout_width="match_parent"
+            android:layout_height="match_parent"
+            android:orientation="horizontal"
+            android:padding="@dimen/margin_padding_size_medium"
+            tools:ignore="UseCompoundDrawables">
+
+            <ImageView
+                android:id="@+id/clockImageView"
+                android:layout_width="46dp"
+                android:layout_height="46dp"
+                android:src="@drawable/icon_clock_five"
+                tools:ignore="ContentDescription" />
+
+            <TextView
+                android:id="@+id/paymentProcessingTextView"
+                style="@style/TextAppearance.BodyMedium"
+                android:layout_width="wrap_content"
+                android:layout_height="wrap_content"
+                android:layout_gravity="center"
+                android:paddingStart="@dimen/margin_padding_size_medium_large"
+                android:text="@string/payment_processing_text"
+                android:textColor="@android:color/white"
+                tools:ignore="RtlSymmetry" />
+
+        </LinearLayout>
+
+    </com.google.android.material.card.MaterialCardView>
+
+    <ImageView
+        android:id="@+id/closeBannerButton"
+        android:layout_width="18dp"
+        android:layout_height="18dp"
+        android:contentDescription="@string/close"
+        android:src="@drawable/icon_close_payment_processing"
+        app:layout_constraintBottom_toTopOf="@+id/paymentProcessingCard"
+        app:layout_constraintEnd_toEndOf="@+id/paymentProcessingCard"
+        app:layout_constraintStart_toEndOf="@+id/paymentProcessingCard"
+        app:layout_constraintTop_toTopOf="@+id/paymentProcessingCard" />
+
+</androidx.constraintlayout.widget.ConstraintLayout>
diff --git a/android/app/src/main/res/values/colors.xml b/android/app/src/main/res/values/colors.xml
@@ -80,4 +80,8 @@
     <color name="pop_up_password_text">#3C3857</color>
     <color name="pop_up_password_hint">#503C3857</color>
     <color name="pop_up_negative_button_text">#703C3857</color>
+
+    <color name="payment_processing_card_shadow">#1A704C60</color>
+    <color name="payment_processing_icon_color">#FF8440</color>
+    <color name="payment_processing_card_color">#33FF8440</color>
 </resources>
diff --git a/android/app/src/main/res/values/strings.xml b/android/app/src/main/res/values/strings.xml
@@ -1,6 +1,9 @@
 <resources>
     <string name="app_name" translatable="false">MysteriumVPN</string>
 
+    <!--   Common   -->
+    <string name="close">Close</string>
+
     <!--  Onboarding  -->
     <string name="onboarding_main_title_1">Decentralized global node network</string>
     <string name="onboarding_description_title_1">Run by people, for people</string>
@@ -176,6 +179,7 @@
     <string name="top_up_usd_equivalent">USD equivalent ≈ $%.2f</string>
     <string name="top_up_currency_equivalent" translatable="false">%1$s %2$s</string>
     <string name="top_up_free_trial">Free Trial</string>
+    <string name="payment_processing_text">Warning: It takes a few minutes to process payments after topping up.</string>
 
     <!--  Settings  -->
     <string name="settings_title">Settings</string>

diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
@@ -432,6 +432,14 @@
         <item name="cardBackgroundColor">@color/manual_connect_filter_background_white</item>
     </style>
 
+    <style name="Widget.PaymentProcessingCardView" parent="Widget.MaterialComponents.CardView">
+        <item name="cardCornerRadius">10dp</item>
+        <item name="cardElevation">0dp</item>
+        <item name="android:shadowRadius">10</item>
+        <item name="android:shadowColor">@color/payment_processing_card_shadow</item>
+        <item name="cardBackgroundColor">@color/payment_processing_card_color</item>
+    </style>
+
     <!--  TabLayoutStyle -->
     <style name="FloatTabLayout" parent="Widget.Design.TabLayout">
         <item name="android:background">@android:color/transparent</item>

diff --git a/fastlane/android_version_code b/fastlane/android_version_code
@@ -1 +1 @@
-107123
+107124