Refactor DeviceTypeView using jetpack compose (#464)

* Refactor DeviceTypeView using jetpack compose

* Refactor RetryCardView as composable

* Revert "Refactor RetryCardView as composable"

This reverts commit ebb4826.

* FE-1499 Refactor RetryCardView as composable (#468)

* Refactor RetryCardView as composable

* Feature/fe 1495 refactor headerview as a composable (#469)

* Refactor HeaderView as composable

* Enable previews in new composables

* Fix detekt

* Refactor InfoBannerCard as composable (#470)

* Refactor InfoBannerCard as composable

* Refactor RewardIssueCardView to composable. Fix ripple effect on buttons. (#472)

* FE-1564 Feature/fe 1498 refactor rangeselectorview as a composable (#474)

* [WIP] Range selector view as composable

* Fix issue of charts not loading properly when API replies very fast

app/build.gradle.kts

@@ -359,6 +359,7 @@ tasks.register("jacocoCoverageTestReport", type = JacocoReport::class) {
         "**/ui/**/*CardView*.*",
         "**/ui/common/Animation*.*",
         "**/ui/common/Views*.*",
+        "**/ui/components/compose/**",
         "**/ui/components/Base*.*",
         "**/ui/components/*View.*",
         "**/ui/components/ChartsView*.*",
@@ -422,6 +423,8 @@ dependencies {
     implementation(libs.androidx.collection.ktx)
     implementation(libs.androidx.compose.foundation)
     implementation(libs.androidx.compose.material3)
+    implementation(libs.androidx.compose.preview)
+    implementation(libs.androidx.compose.ui.tooling)
     implementation(libs.androidx.constraintlayout)
     implementation(libs.androidx.coordinatorlayout)
     implementation(libs.androidx.core.ktx)

app/src/main/java/com/weatherxm/ui/Navigator.kt

@@ -329,40 +329,19 @@ class Navigator(private val analytics: AnalyticsWrapper) {
         )
     }
 
-    fun showClaimWifiFlow(
+    fun showClaimFlow(
         activityResultLauncher: ActivityResultLauncher<Intent>?,
         context: Context,
         deviceType: DeviceType
     ) {
-        val intent = Intent(context, ClaimWifiActivity::class.java)
-            .addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP or Intent.FLAG_ACTIVITY_CLEAR_TOP)
-            .putExtra(ARG_DEVICE_TYPE, deviceType as Parcelable)
-        if (activityResultLauncher == null) {
-            context.startActivity(intent)
-        } else {
-            activityResultLauncher.launch(intent)
+        val activity = when (deviceType) {
+            DeviceType.M5_WIFI, DeviceType.D1_WIFI -> ClaimWifiActivity::class.java
+            DeviceType.PULSE_4G -> ClaimPulseActivity::class.java
+            DeviceType.HELIUM -> ClaimHeliumActivity::class.java
         }
-    }
-
-    fun showClaimHeliumFlow(
-        activityResultLauncher: ActivityResultLauncher<Intent>?,
-        context: Context
-    ) {
-        val intent = Intent(context, ClaimHeliumActivity::class.java)
-            .addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP or Intent.FLAG_ACTIVITY_CLEAR_TOP)
-        if (activityResultLauncher == null) {
-            context.startActivity(intent)
-        } else {
-            activityResultLauncher.launch(intent)
-        }
-    }
-
-    fun showClaimPulseFlow(
-        activityResultLauncher: ActivityResultLauncher<Intent>?,
-        context: Context
-    ) {
-        val intent = Intent(context, ClaimPulseActivity::class.java)
+        val intent = Intent(context, activity)
             .addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP or Intent.FLAG_ACTIVITY_CLEAR_TOP)
+            .putExtra(ARG_DEVICE_TYPE, deviceType as Parcelable)
         if (activityResultLauncher == null) {
             context.startActivity(intent)
         } else {

app/src/main/java/com/weatherxm/ui/claimdevice/selectstation/SelectStationTypeActivity.kt

@@ -3,11 +3,27 @@ package com.weatherxm.ui.claimdevice.selectstation
 import android.app.Activity
 import android.os.Bundle
 import androidx.activity.result.contract.ActivityResultContracts
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement.spacedBy
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.dimensionResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.tooling.preview.Preview
+import com.weatherxm.R
 import com.weatherxm.analytics.AnalyticsService
 import com.weatherxm.databinding.ActivityClaimSelectStationBinding
 import com.weatherxm.ui.common.DeviceType
 import com.weatherxm.ui.common.classSimpleName
 import com.weatherxm.ui.components.BaseActivity
+import com.weatherxm.ui.components.compose.CardViewClickable
+import com.weatherxm.ui.components.compose.MediumText
 
 class SelectStationTypeActivity : BaseActivity() {
     private lateinit var binding: ActivityClaimSelectStationBinding
@@ -29,20 +45,8 @@ class SelectStationTypeActivity : BaseActivity() {
             finish()
         }
 
-        binding.m5WifiCard.listener {
-            navigator.showClaimWifiFlow(claimingLauncher, this, DeviceType.M5_WIFI)
-        }
-
-        binding.d1WifiCard.listener {
-            navigator.showClaimWifiFlow(claimingLauncher, this, DeviceType.D1_WIFI)
-        }
-
-        binding.heliumCard.listener {
-            navigator.showClaimHeliumFlow(claimingLauncher, this)
-        }
-
-        binding.pulseCard.listener {
-            navigator.showClaimPulseFlow(claimingLauncher, this)
+        binding.deviceTypes.setContent {
+            DeviceTypes()
         }
     }
 
@@ -52,4 +56,67 @@ class SelectStationTypeActivity : BaseActivity() {
             AnalyticsService.Screen.CLAIM_DEVICE_TYPE_SELECTION, classSimpleName()
         )
     }
+
+    private fun startClaimingFlow(deviceType: DeviceType) {
+        navigator.showClaimFlow(claimingLauncher, this, deviceType)
+    }
+
+    @Suppress("FunctionNaming")
+    @Preview
+    @Composable
+    fun DeviceTypes() {
+        Column(
+            verticalArrangement = spacedBy(dimensionResource(R.dimen.margin_normal))
+        ) {
+            Row(
+                horizontalArrangement = spacedBy(dimensionResource(R.dimen.margin_normal))
+            ) {
+                Column(Modifier.weight(1F)) {
+                    CardViewClickable(
+                        onClickListener = { startClaimingFlow(DeviceType.M5_WIFI) }
+                    ) {
+                        TypeContent(stringResource(R.string.m5_wifi), R.drawable.device_type_m5)
+                    }
+                }
+                Column(Modifier.weight(1F)) {
+                    CardViewClickable(
+                        onClickListener = { startClaimingFlow(DeviceType.D1_WIFI) }
+                    ) {
+                        TypeContent(stringResource(R.string.d1_wifi), R.drawable.device_type_d1)
+                    }
+                }
+            }
+            Row(
+                horizontalArrangement = spacedBy(dimensionResource(R.dimen.margin_normal))
+            ) {
+                Column(Modifier.weight(1F)) {
+                    CardViewClickable(
+                        onClickListener = { startClaimingFlow(DeviceType.HELIUM) },
+                    ) {
+                        TypeContent(stringResource(R.string.helium), R.drawable.device_type_helium)
+                    }
+                }
+                Column(Modifier.weight(1F)) {
+                    CardViewClickable(
+                        onClickListener = { startClaimingFlow(DeviceType.PULSE_4G) },
+                    ) {
+                        TypeContent(stringResource(R.string.pulse_4g), R.drawable.device_type_pulse)
+                    }
+                }
+            }
+        }
+    }
+
+    @Suppress("FunctionNaming")
+    @Composable
+    fun TypeContent(name: String, imageResId: Int) {
+        Column(
+            modifier = Modifier.padding(dimensionResource(R.dimen.padding_normal)),
+            horizontalAlignment = Alignment.CenterHorizontally,
+            verticalArrangement = spacedBy(dimensionResource(R.dimen.margin_small))
+        ) {
+            Image(painter = painterResource(imageResId), contentDescription = null)
+            MediumText(text = name, fontWeight = FontWeight.Bold, colorRes = R.color.darkestBlue)
+        }
+    }
 }

app/src/main/java/com/weatherxm/ui/common/Contracts.kt

@@ -1,6 +1,7 @@
 package com.weatherxm.ui.common
 
 object Contracts {
+    const val LOADING_DELAY = 200L
     const val EMPTY_VALUE = "?"
     const val DEGREES_MARK = "°"
     const val NOT_AVAILABLE_VALUE = "N/A"