feat(MyKSuite-13): Dynamic dashboard

MykSuite/build.gradle.kts

@@ -48,6 +48,8 @@ android {
 
 dependencies {
 
+    implementation(project(":Core"))
+
     implementation(core.androidx.core.ktx)
     implementation(core.material)
     implementation(core.navigation.fragment.ktx)

MykSuite/src/main/java/com/infomaniak/core/myksuite/ui/components/TextWithIcon.kt

@@ -0,0 +1,113 @@
+/*
+ * Infomaniak Core - Android
+ * Copyright (C) 2025 Infomaniak Network SA
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+package com.infomaniak.core.myksuite.ui.components
+
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.graphics.drawscope.translate
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.vector.rememberVectorPainter
+import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.res.vectorResource
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.datasource.LoremIpsum
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.infomaniak.core.myksuite.R
+import com.infomaniak.core.myksuite.ui.theme.LocalMyKSuiteColors
+import com.infomaniak.core.myksuite.ui.theme.Margin
+import com.infomaniak.core.myksuite.ui.theme.MyKSuiteTheme
+import com.infomaniak.core.myksuite.ui.theme.Typography
+
+/** This component allows to put an icon on any line of the text, thanks to the [iconLine] parameter
+ *  This code comes from [here](https://stackoverflow.com/questions/70708056/how-to-centrally-align-icon-to-first-line-of-a-text-component-in-compose/71312465#71312465)
+ */
+@Composable
+internal fun TextWithIcon(
+    modifier: Modifier = Modifier,
+    text: String,
+    icon: ImageVector,
+    color: Color = Color.Unspecified,
+    style: TextStyle,
+    iconRightPadding: Dp = 0.dp,
+    iconLine: Int = 0,
+    iconTint: Color = Color.Black,
+) {
+    val painter = rememberVectorPainter(image = icon)
+    var lineTop = 0f
+    var lineBottom = 0f
+    var lineLeft = 0f
+    with(LocalDensity.current) {
+        val imageSize = Size(icon.defaultWidth.toPx(), icon.defaultHeight.toPx())
+        val rightPadding = iconRightPadding.toPx()
+        Text(
+            text = text,
+            color = color,
+            style = style,
+            onTextLayout = { layoutResult ->
+                val nbLines = layoutResult.lineCount
+                if (nbLines > iconLine) {
+                    lineTop = layoutResult.getLineTop(iconLine)
+                    lineBottom = layoutResult.getLineBottom(iconLine)
+                    lineLeft = layoutResult.getLineLeft(iconLine)
+                }
+            },
+            modifier = modifier
+                .padding(start = icon.defaultWidth + iconRightPadding)
+                .drawBehind {
+                    with(painter) {
+                        translate(
+                            left = lineLeft - imageSize.width - rightPadding,
+                            top = lineTop + (lineBottom - lineTop) / 2 - imageSize.height / 2,
+                        ) {
+                            draw(size = intrinsicSize, colorFilter = ColorFilter.tint(iconTint))
+                        }
+                    }
+                }
+        )
+    }
+}
+
+@Preview
+@Composable
+private fun Preview() {
+
+    fun getLoremText(words: Int) = LoremIpsum(words).values.joinToString(separator = " ")
+
+    MyKSuiteTheme {
+        val localColors = LocalMyKSuiteColors.current
+        Surface {
+            TextWithIcon(
+                text = getLoremText(35), icon = ImageVector.vectorResource(R.drawable.ic_circle_i),
+                color = localColors.primaryTextColor,
+                style = Typography.bodyRegular,
+                iconRightPadding = Margin.Small,
+                iconLine = 0,
+                iconTint = localColors.iconColor,
+            )
+        }
+    }
+}

MykSuite/src/main/java/com/infomaniak/core/myksuite/ui/data/MyKSuiteData.kt

@@ -24,6 +24,7 @@ import androidx.room.PrimaryKey
 import kotlinx.serialization.SerialName
 import kotlinx.serialization.Serializable
 import kotlinx.serialization.Transient
+import java.util.Date
 
 @Serializable
 @Entity
@@ -62,4 +63,6 @@ data class MyKSuiteData(
     val isMyKSuitePlus
         get() = kSuitePack.type == KSuitePack.KSuitePackType.MY_KSUITE_PLUS ||
                 kSuitePack.type == KSuitePack.KSuitePackType.MY_KSUITE_PLUS_DRIVE_SOLO
+
+    inline val trialExpiryDate get() = trialExpiryAt?.let { Date(it * 1_000) }
 }

MykSuite/src/main/java/com/infomaniak/core/myksuite/ui/network/ApiRoutes.kt

@@ -19,7 +19,10 @@ package com.infomaniak.core.myksuite.ui.network
 
 object ApiRoutes {
 
-    private const val BASE_URL = "https://api.staging-myksuite.dev.infomaniak.ch"
+    const val MANAGER_URL = "https://manager.infomaniak.com/v3/ng/home"
+
+    private const val BASE_URL = "https://api.infomaniak.com"
+
+    fun myKSuiteData() = "$BASE_URL/1/my_ksuite/current?with=drive,mail,pack,can_trial,has_auto_renew"
 
-    val myKSuiteData = "$BASE_URL/1/my_ksuite/current?with=*"
 }

MykSuite/src/main/java/com/infomaniak/core/myksuite/ui/screens/MyKSuiteDashboardScreen.kt

@@ -18,6 +18,7 @@
 package com.infomaniak.core.myksuite.ui.screens
 
 import android.content.res.Configuration
+import android.os.Parcelable
 import androidx.compose.foundation.*
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -28,24 +29,26 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import com.infomaniak.core.FORMAT_DATE_SIMPLE
+import com.infomaniak.core.extensions.openUrl
+import com.infomaniak.core.format
 import com.infomaniak.core.myksuite.R
 import com.infomaniak.core.myksuite.ui.components.*
+import com.infomaniak.core.myksuite.ui.network.ApiRoutes
 import com.infomaniak.core.myksuite.ui.screens.components.*
 import com.infomaniak.core.myksuite.ui.theme.*
 import com.infomaniak.core.myksuite.ui.theme.Typography
+import kotlinx.parcelize.Parcelize
+import java.util.Date
 
 @Composable
-fun MyKSuiteDashboardScreen(
-    userName: String,
-    avatarUri: String = "",
-    dailySendingLimit: String,
-    onClose: () -> Unit = {},
-) {
+fun MyKSuiteDashboardScreen(dashboardScreenData: () -> MyKSuiteDashboardScreenData, onClose: () -> Unit = {}) {
     MyKSuiteTheme {
         Scaffold(
             topBar = { TopAppBar(onClose) },
@@ -66,9 +69,14 @@ fun MyKSuiteDashboardScreen(
                 )
                 Column(Modifier.padding(paddingValues), verticalArrangement = Arrangement.spacedBy(Margin.Large)) {
                     val paddedModifier = Modifier.padding(horizontal = Margin.Medium)
-                    SubscriptionInfoCard(paddedModifier, avatarUri, userName, dailySendingLimit)
-                    // TODO: Add this line when we'll have In-app payments
-                    // MyKSuitePlusPromotionCard(paddedModifier) {}
+                    SubscriptionInfoCard(paddedModifier, dashboardScreenData)
+
+                    if (dashboardScreenData().myKSuiteTier == MyKSuiteTier.Free) {
+                        // TODO: Add this line when we'll have In-app payments
+                        // MyKSuitePlusPromotionCard(paddedModifier) {}
+                    } else {
+                        AdvantagesCard(paddedModifier)
+                    }
                 }
             }
         }
@@ -106,44 +114,70 @@ private fun TopAppBar(onClose: () -> Unit) {
 @Composable
 private fun SubscriptionInfoCard(
     paddedModifier: Modifier,
-    avatarUri: String,
-    userName: String,
-    dailySendingLimit: String,
+    dashboardScreenData: () -> MyKSuiteDashboardScreenData,
 ) {
+    val context = LocalContext.current
     val localColors = LocalMyKSuiteColors.current
 
     Card(
         modifier = paddedModifier.padding(top = Margin.Medium),
         shape = RoundedCornerShape(Dimens.largeCornerRadius),
         colors = CardDefaults.cardColors(containerColor = localColors.background),
         elevation = CardDefaults.elevatedCardElevation(defaultElevation = Dimens.cardElevation),
-        border = if (isSystemInDarkTheme()) BorderStroke(1.dp, localColors.cardBorderColor) else null,
+        border = cardBorder(),
     ) {
         Row(
             modifier = paddedModifier.padding(top = Margin.Medium),
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.spacedBy(Margin.Mini),
         ) {
-            UserAvatar(avatarUri)
+            UserAvatar(dashboardScreenData().avatarUri)
             Text(
                 modifier = Modifier.weight(1.0f),
                 style = Typography.bodyRegular,
                 color = localColors.primaryTextColor,
-                text = userName,
+                text = dashboardScreenData().email,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis,
             )
-            MyKSuiteChip(tier = MyKSuiteTier.Free)
+            MyKSuiteChip(tier = dashboardScreenData().myKSuiteTier)
         }
         PaddedDivider(paddedModifier)
-        AppStorageQuotas(paddedModifier)
-        PaddedDivider(paddedModifier)
-        ExpendableActionItem(iconRes = R.drawable.ic_envelope, textRes = R.string.myKSuiteDashboardFreeMailLabel)
-        ExpendableActionItem(
-            iconRes = R.drawable.ic_padlock,
-            textRes = R.string.myKSuiteDashboardLimitedFunctionalityLabel,
-            expendedView = { LimitedFunctionalities(paddedModifier, dailySendingLimit) },
+        ProductsStorageQuotas(
+            modifier = paddedModifier,
+            myKSuiteTier = dashboardScreenData().myKSuiteTier,
+            kSuiteProductsWithQuotas = { dashboardScreenData().kSuiteProductsWithQuotas },
         )
+        PaddedDivider(paddedModifier)
+
+        if (dashboardScreenData().myKSuiteTier == MyKSuiteTier.Free) {
+            ExpandableActionItem(iconRes = R.drawable.ic_envelope, textRes = R.string.myKSuiteDashboardFreeMailLabel)
+            ExpandableActionItem(
+                iconRes = R.drawable.ic_padlock,
+                textRes = R.string.myKSuiteDashboardLimitedFunctionalityLabel,
+                expandedView = {
+                    LimitedFunctionalities(
+                        modifier = paddedModifier,
+                        dailySendingLimit = { dashboardScreenData().dailySendingLimit },
+                    )
+                },
+            )
+        } else {
+            dashboardScreenData().trialExpiryDate?.let { expiryDate ->
+                MyKSuiteTextItem(
+                    modifier = paddedModifier.heightIn(min = Dimens.textItemMinHeight),
+                    title = stringResource(R.string.myKSuiteDashboardTrialPeriod),
+                    value = stringResource(R.string.myKSuiteDashboardUntil, expiryDate.format(FORMAT_DATE_SIMPLE)),
+                )
+            }
+            Spacer(Modifier.height(Margin.Large))
+            InformationBlock(
+                modifier = paddedModifier,
+                text = stringResource(R.string.myKSuiteManageSubscriptionDescription),
+                buttonText = stringResource(R.string.myKSuiteManageSubscriptionButton),
+                onClick = { context.openUrl(ApiRoutes.MANAGER_URL) },
+            )
+        }
         Spacer(Modifier.height(Margin.Medium))
     }
 }
@@ -210,11 +244,70 @@ private fun MyKSuitePlusPromotionCard(modifier: Modifier = Modifier, onButtonCli
     }
 }
 
+@Composable
+private fun AdvantagesCard(modifier: Modifier) {
+    val localColors = LocalMyKSuiteColors.current
+    Card(
+        modifier = modifier,
+        shape = RoundedCornerShape(Dimens.largeCornerRadius),
+        elevation = CardDefaults.elevatedCardElevation(defaultElevation = Dimens.cardElevation),
+        colors = CardDefaults.elevatedCardColors(containerColor = localColors.background),
+        border = cardBorder(),
+    ) {
+        Column(modifier = Modifier.padding(Margin.Medium), verticalArrangement = Arrangement.spacedBy(Margin.Large)) {
+            Text(
+                text = stringResource(R.string.myKSuiteUpgradeBenefitsTitle),
+                color = localColors.secondaryTextColor,
+                style = Typography.bodySmallRegular,
+            )
+
+            val upgradeFeatureModifier = Modifier.fillMaxWidth()
+            val iconSize = Dimens.smallIconSize
+            UpgradeFeature(upgradeFeatureModifier, MyKSuiteUpgradeFeatures.DriveStorageFeature, iconSize)
+            UpgradeFeature(upgradeFeatureModifier, MyKSuiteUpgradeFeatures.MailUnlimitedFeature, iconSize)
+            UpgradeFeature(upgradeFeatureModifier, MyKSuiteUpgradeFeatures.MoreFeatures, iconSize)
+        }
+    }
+}
+
+@Composable
+private fun cardBorder() = if (isSystemInDarkTheme()) BorderStroke(1.dp, LocalMyKSuiteColors.current.cardBorderColor) else null
+
+@Parcelize
+data class MyKSuiteDashboardScreenData(
+    val myKSuiteTier: MyKSuiteTier,
+    val email: String,
+    val dailySendingLimit: String,
+    val kSuiteProductsWithQuotas: List<KSuiteProductsWithQuotas>,
+    val trialExpiryDate: Date?,
+    val avatarUri: String = "",
+) : Parcelable
+
 @Preview(name = "(1) Light")
 @Preview(name = "(2) Dark", uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL)
 @Composable
 private fun Preview() {
+    val dashboardScreenData = MyKSuiteDashboardScreenData(
+        myKSuiteTier = MyKSuiteTier.Plus,
+        email = "Toto",
+        avatarUri = "",
+        dailySendingLimit = "500",
+        kSuiteProductsWithQuotas = listOf(
+            KSuiteProductsWithQuotas.Mail(
+                usedSize = "0.2 Go",
+                maxSize = "20 Go",
+                progress = 0.01f,
+            ),
+            KSuiteProductsWithQuotas.Drive(
+                usedSize = "6 Go",
+                maxSize = "15 Go",
+                progress = 0.4f,
+            ),
+        ),
+        trialExpiryDate = Date(),
+    )
+
     Surface(Modifier.fillMaxSize(), color = Color.White) {
-        MyKSuiteDashboardScreen(userName = "Toto", avatarUri = "", dailySendingLimit = "500")
+        MyKSuiteDashboardScreen(dashboardScreenData = { dashboardScreenData })
     }
 }

MykSuite/src/main/java/com/infomaniak/core/myksuite/ui/screens/MyKSuiteUpgradeBottomSheet.kt

@@ -112,13 +112,25 @@ private fun UpgradeBottomSheetContent(app: KSuiteApp, onButtonClicked: () -> Uni
 }
 
 @Composable
-private fun ColumnScope.UpgradeFeatures(app: KSuiteApp, modifier: Modifier) {
-    app.features.forEach { UpgradeFeature(it, modifier) }
-    UpgradeFeature(MyKSuiteUpgradeFeatures.MoreFeatures, modifier)
+private fun UpgradeFeatures(app: KSuiteApp, modifier: Modifier) {
+    val upgradeFeatureModifier = Modifier.fillMaxWidth()
+    val textColor = LocalMyKSuiteColors.current.secondaryTextColor
+
+    Column(modifier = modifier, verticalArrangement = Arrangement.spacedBy(Margin.Medium)) {
+        app.features.forEach { UpgradeFeature(modifier = upgradeFeatureModifier, customFeature = it, textColor = textColor) }
+        UpgradeFeature(
+            modifier = upgradeFeatureModifier,
+            customFeature = MyKSuiteUpgradeFeatures.MoreFeatures,
+            textColor = textColor,
+        )
+    }
 }
 
 @Parcelize
-enum class KSuiteApp(internal val features: List<MyKSuiteUpgradeFeatures>, internal val buttonStyle: MyKSuiteButtonType) : Parcelable {
+enum class KSuiteApp(
+    internal val features: List<MyKSuiteUpgradeFeatures>,
+    internal val buttonStyle: MyKSuiteButtonType,
+) : Parcelable {
     Mail(
         features = listOf(MyKSuiteUpgradeFeatures.MailUnlimitedFeature, MyKSuiteUpgradeFeatures.MailOtherFeature),
         buttonStyle = MyKSuiteButtonType.Mail,