Show BottomSheet with Gravatar info before continuing with avatar change

We want the user to notice that if they modify their avatar in the app, they are modifying their avatar in Gravatar. For that reason, we'll show a bottom sheet with Gravatar information.
wordpress-mobile · Feb 15, 2024 · 0d31b06 · 0d31b06
1 parent 2271079
commit 0d31b06
Show file tree

Hide file tree

Showing 7 changed files with 326 additions and 3 deletions.
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/gravatar/GravatarBottomSheet.kt b/WordPress/src/main/java/org/wordpress/android/ui/gravatar/GravatarBottomSheet.kt
@@ -0,0 +1,235 @@
+package org.wordpress.android.ui.gravatar
+
+import android.annotation.SuppressLint
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.Icon
+import androidx.compose.material3.Button
+import androidx.compose.material3.ButtonDefaults
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.LocalMinimumInteractiveComponentEnforcement
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.Text
+import androidx.compose.material3.rememberModalBottomSheetState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.res.colorResource
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import kotlinx.coroutines.launch
+import org.wordpress.android.R
+import org.wordpress.android.ui.compose.theme.AppColor
+import org.wordpress.android.ui.compose.theme.AppTheme
+
+@SuppressLint("CoroutineCreationDuringComposition")
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun GravatarBottomSheet(
+    openBottomSheet: Boolean,
+    onBottomSheetDismiss: () -> Unit,
+    onContinueClicked: () -> Unit,
+    onLearnMoreClicked: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val scope = rememberCoroutineScope()
+    val bottomSheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true)
+    scope.launch {
+        if (openBottomSheet) {
+            bottomSheetState.expand()
+        } else {
+            bottomSheetState.hide()
+        }
+    }
+
+    if (!openBottomSheet) return
+    ModalBottomSheet(
+        sheetState = bottomSheetState,
+        onDismissRequest = onBottomSheetDismiss,
+        containerColor = AppColor.White,
+        modifier = modifier,
+    ) {
+        Box(Modifier.navigationBarsPadding()) {
+            Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
+                GravatarBottomSheetContent(
+                    onContinueClicked,
+                    Modifier.padding(start = 24.dp, end = 24.dp),
+                )
+                LearnMoreAboutGravatarProfiles(
+                    onLearnMoreClicked,
+                    Modifier
+                        .padding(top = 16.dp)
+                        .background(AppColor.Gray10.copy(alpha = 0.2f))
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun GravatarCharacteristicRow(
+    iconPainter: Painter,
+    title: String,
+    description: String,
+    modifier: Modifier = Modifier,
+) {
+    Row(modifier = modifier) {
+        Column {
+            Image(
+                painter = iconPainter,
+                contentDescription = stringResource(R.string.icon_desc),
+                modifier = Modifier.clearAndSetSemantics {})
+        }
+        Column(modifier = Modifier.padding(start = 8.dp, top = 4.dp)) {
+            Text(text = title, fontWeight = FontWeight.Bold, fontSize = 13.sp)
+            Text(text = description, fontSize = 13.sp)
+        }
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+fun GravatarCharacteristicRowPreview() {
+    GravatarCharacteristicRow(
+        iconPainter = painterResource(R.drawable.gravatar_update_once_icon),
+        title = stringResource(R.string.gravatar_bottom_sheet_update_once_title),
+        description = stringResource(R.string.gravatar_bottom_sheet_update_once_description),
+    )
+}
+
+@Composable
+private fun GravatarBottomSheetContent(onContinueClicked: () -> Unit, modifier: Modifier = Modifier) {
+    Column(modifier = modifier) {
+        Row(verticalAlignment = Alignment.CenterVertically) {
+            Image(
+                painter = painterResource(R.drawable.gravatar_logo),
+                contentDescription = "",
+                modifier = Modifier.clearAndSetSemantics {})
+            Text("Gravatar", fontSize = 18.sp, modifier = Modifier.padding(horizontal = 8.dp))
+        }
+        Text(
+            stringResource(R.string.gravatar_bottom_sheet_security_info),
+            modifier = Modifier.padding(top = 24.dp),
+        )
+        GravatarCharacteristicRow(
+            iconPainter = painterResource(R.drawable.gravatar_update_once_icon),
+            title = stringResource(R.string.gravatar_bottom_sheet_update_once_title),
+            description = stringResource(R.string.gravatar_bottom_sheet_update_once_description),
+            modifier = Modifier.padding(top = 24.dp),
+        )
+        GravatarCharacteristicRow(
+            iconPainter = painterResource(R.drawable.gravatar_digital_identity_icon),
+            title = stringResource(R.string.gravatar_bottom_sheet_digital_identity_title),
+            description = stringResource(R.string.gravatar_bottom_sheet_digital_identity_description),
+            modifier = Modifier.padding(top = 24.dp),
+        )
+        Button(
+            onClick = onContinueClicked,
+            colors = ButtonDefaults.buttonColors(
+                containerColor = colorResource(R.color.simplenote_blue_60),
+                contentColor = AppColor.White,
+            ),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(top = 24.dp),
+        ) {
+            Text(stringResource(R.string.gravatar_continue_label))
+        }
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+fun GravatarBottomSheetContentPreview() {
+    AppTheme {
+        GravatarBottomSheetContent({ })
+    }
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+private fun LearnMoreAboutGravatarProfiles(onLearnMoreClicked: () -> Unit, modifier: Modifier = Modifier) {
+    Box(
+        modifier = modifier
+            .fillMaxWidth(),
+    ) {
+        // This is a workaround to avoid the minimum touch target size enforcement
+        CompositionLocalProvider(LocalMinimumInteractiveComponentEnforcement provides false) {
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+                horizontalArrangement = Arrangement.Center,
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(8.dp),
+            ) {
+                Image(
+                    painter = painterResource(R.drawable.gravatar_logo),
+                    contentDescription = "",
+                    modifier = Modifier
+                        .size(20.dp)
+                        .clearAndSetSemantics {},
+                )
+                Text(
+                    stringResource(R.string.gravatar_profiles_info_label),
+                    fontSize = 13.sp,
+                    color = Color.Black.copy(alpha = 0.8f),
+                    overflow = TextOverflow.Ellipsis,
+                    modifier = Modifier
+                        .padding(start = 8.dp)
+                        .weight(1f, fill = false)
+                )
+                Button(
+                    onLearnMoreClicked,
+                    colors = ButtonDefaults.buttonColors(
+                        containerColor = Color.Transparent,
+                        contentColor = colorResource(R.color.simplenote_blue_60),
+                    ),
+                    contentPadding = PaddingValues(horizontal = 4.dp),
+                    modifier = Modifier.defaultMinSize(minHeight = 1.dp)
+                ) {
+                    Text(
+                        stringResource(R.string.gravatar_learn_more),
+                        fontSize = 13.sp,
+                    )
+                    Icon(
+                        painterResource(R.drawable.ic_external_v2),
+                        stringResource(R.string.icon_desc),
+                        tint = colorResource(R.color.simplenote_blue_60),
+                        modifier = Modifier
+                            .padding(start = 4.dp)
+                            .size(12.dp)
+                            .clearAndSetSemantics {},
+                    )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+@Preview(showBackground = true)
+private fun LearnMoreAboutGravatarProfilesPreview() {
+    LearnMoreAboutGravatarProfiles({})
+}
diff --git a/WordPress/src/main/java/org/wordpress/android/ui/main/MeFragment.kt b/WordPress/src/main/java/org/wordpress/android/ui/main/MeFragment.kt
@@ -14,9 +14,12 @@ import android.text.TextUtils
 import android.view.View
 import android.view.View.OnClickListener
 import androidx.appcompat.app.AppCompatActivity
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.livedata.observeAsState
 import androidx.core.view.isVisible
 import androidx.fragment.app.Fragment
 import androidx.fragment.app.viewModels
+import androidx.lifecycle.MutableLiveData
 import androidx.lifecycle.ViewModelProvider
 import com.google.android.material.dialog.MaterialAlertDialogBuilder
 import com.google.android.material.snackbar.Snackbar
@@ -50,8 +53,10 @@ import org.wordpress.android.ui.ActivityLauncher
 import org.wordpress.android.ui.RequestCodes
 import org.wordpress.android.ui.about.UnifiedAboutActivity
 import org.wordpress.android.ui.accounts.HelpActivity.Origin.ME_SCREEN_HELP
+import org.wordpress.android.ui.compose.theme.AppTheme
 import org.wordpress.android.ui.debug.DebugSettingsActivity
 import org.wordpress.android.ui.deeplinks.DeepLinkOpenWebLinksWithJetpackHelper
+import org.wordpress.android.ui.gravatar.GravatarBottomSheet
 import org.wordpress.android.ui.jetpackoverlay.JetpackFeatureRemovalOverlayUtil
 import org.wordpress.android.ui.main.MeViewModel.RecommendAppUiState
 import org.wordpress.android.ui.main.WPMainActivity.OnScrollToTopListener
@@ -147,8 +152,11 @@ class MeFragment : Fragment(R.layout.me_fragment), OnScrollToTopListener {
 
     private val viewModel: MeViewModel by viewModels()
 
+    private var bottomSheetIsVisible = MutableLiveData(false)
+
     private val shouldShowDomainButton
         get() = BuildConfig.IS_JETPACK_APP && domainManagementFeatureConfig.isEnabled() && accountStore.hasAccessToken()
+
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         (requireActivity().application as WordPress).component().inject(this)
@@ -162,9 +170,31 @@ class MeFragment : Fragment(R.layout.me_fragment), OnScrollToTopListener {
         binding = MeFragmentBinding.bind(view).apply {
             setupViews()
             setupObservers(savedInstanceState)
+            setupGravatarBottomSheet()
+        }
+    }
+
+    private fun MeFragmentBinding.setupGravatarBottomSheet() {
+        composeView.setContent {
+            AppTheme {
+                val openBottomSheet by bottomSheetIsVisible.observeAsState(false)
+                GravatarBottomSheet(
+                    openBottomSheet = openBottomSheet,
+                    onBottomSheetDismiss = { bottomSheetIsVisible.postValue(false) },
+                    onContinueClicked = {
+                        bottomSheetIsVisible.postValue(false)
+                        AnalyticsTracker.track(ME_GRAVATAR_TAPPED)
+                        showPhotoPickerForGravatar()
+                    },
+                    onLearnMoreClicked = {
+                        ActivityLauncher.openUrlExternal(activity, GRAVATAR_URL)
+                    },
+                )
+            }
         }
     }
 
+
     @Suppress("LongMethod")
     private fun MeFragmentBinding.setupViews() {
         if (!BuildConfig.IS_JETPACK_APP && jetpackFeatureRemovalUtils.shouldHideJetpackFeatures()) {
@@ -184,8 +214,7 @@ class MeFragment : Fragment(R.layout.me_fragment), OnScrollToTopListener {
         addJetpackBadgeIfNeeded()
 
         val showPickerListener = OnClickListener {
-            AnalyticsTracker.track(ME_GRAVATAR_TAPPED)
-            showPhotoPickerForGravatar()
+            bottomSheetIsVisible.postValue(true)
         }
         avatarContainer.setOnClickListener(showPickerListener)
         rowMyProfile.setOnClickListener {
@@ -709,6 +738,8 @@ class MeFragment : Fragment(R.layout.me_fragment), OnScrollToTopListener {
     companion object {
         private const val IS_DISCONNECTING = "IS_DISCONNECTING"
         private const val IS_UPDATING_GRAVATAR = "IS_UPDATING_GRAVATAR"
+        private const val GRAVATAR_URL = "https://www.gravatar.com"
+
         fun newInstance(): MeFragment {
             return MeFragment()
         }

diff --git a/WordPress/src/main/res/drawable/gravatar_digital_identity_icon.xml b/WordPress/src/main/res/drawable/gravatar_digital_identity_icon.xml
@@ -0,0 +1,15 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="40dp"
+    android:height="40dp"
+    android:viewportWidth="40"
+    android:viewportHeight="40">
+  <path
+      android:pathData="M20,20m-19.25,0a19.25,19.25 0,1 1,38.5 0a19.25,19.25 0,1 1,-38.5 0"
+      android:strokeWidth="1.5"
+      android:fillColor="#ffffff"
+      android:strokeColor="#1D4FC4"/>
+  <path
+      android:pathData="M20,11.25C17.929,11.25 16.25,12.929 16.25,15V18H15C14.448,18 14,18.448 14,19V27C14,27.552 14.448,28 15,28H25C25.552,28 26,27.552 26,27V19C26,18.448 25.552,18 25,18H23.75V15C23.75,12.929 22.071,11.25 20,11.25ZM22.25,18V15C22.25,13.757 21.243,12.75 20,12.75C18.757,12.75 17.75,13.757 17.75,15V18H22.25ZM15.5,26.5V19.5H24.5V26.5H15.5Z"
+      android:fillColor="#1D4FC4"
+      android:fillType="evenOdd"/>
+</vector>
diff --git a/WordPress/src/main/res/drawable/gravatar_logo.xml b/WordPress/src/main/res/drawable/gravatar_logo.xml
@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
+    android:width="27dp"
+    android:height="28dp"
+    android:viewportWidth="27"
+    android:viewportHeight="28">
+  <path
+      android:pathData="M10.8,3.199V12.649C10.8,13.365 11.085,14.051 11.591,14.557C12.097,15.064 12.783,15.348 13.499,15.348C14.215,15.348 14.901,15.064 15.408,14.557C15.914,14.051 16.198,13.365 16.198,12.649V6.362C17.855,6.946 19.277,8.053 20.249,9.515C21.222,10.978 21.694,12.717 21.592,14.47C21.491,16.224 20.822,17.897 19.687,19.237C18.552,20.578 17.012,21.513 15.299,21.902C13.586,22.291 11.793,22.113 10.19,21.394C8.587,20.675 7.262,19.455 6.413,17.918C5.564,16.38 5.238,14.608 5.483,12.869C5.729,11.13 6.533,9.517 7.775,8.275C8.273,7.767 8.55,7.082 8.547,6.37C8.543,5.659 8.259,4.977 7.755,4.474C7.252,3.97 6.571,3.686 5.859,3.682C5.147,3.679 4.463,3.956 3.954,4.454C1.746,6.663 0.371,9.569 0.065,12.677C-0.241,15.785 0.54,18.903 2.275,21.5C4.011,24.097 6.593,26.012 9.581,26.919C12.57,27.825 15.781,27.668 18.667,26.472C21.552,25.277 23.934,23.118 25.406,20.363C26.878,17.609 27.35,14.429 26.74,11.366C26.131,8.302 24.478,5.545 22.064,3.564C19.649,1.583 16.622,0.5 13.499,0.5C12.783,0.5 12.097,0.784 11.591,1.291C11.085,1.797 10.8,2.483 10.8,3.199Z"
+      android:fillColor="#1D4FC4"
+      tools:ignore="VectorPath" />
+</vector>
diff --git a/WordPress/src/main/res/drawable/gravatar_update_once_icon.xml b/WordPress/src/main/res/drawable/gravatar_update_once_icon.xml
@@ -0,0 +1,18 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="40dp"
+    android:height="40dp"
+    android:viewportWidth="40"
+    android:viewportHeight="40">
+  <path
+      android:pathData="M20,20m-19.25,0a19.25,19.25 0,1 1,38.5 0a19.25,19.25 0,1 1,-38.5 0"
+      android:strokeWidth="1.5"
+      android:fillColor="#ffffff"
+      android:strokeColor="#1D4FC4"/>
+  <path
+      android:pathData="M24,17C24,19.209 22.209,21 20,21C17.791,21 16,19.209 16,17C16,14.791 17.791,13 20,13C22.209,13 24,14.791 24,17ZM22.5,17C22.5,18.381 21.381,19.5 20,19.5C18.619,19.5 17.5,18.381 17.5,17C17.5,15.619 18.619,14.5 20,14.5C21.381,14.5 22.5,15.619 22.5,17Z"
+      android:fillColor="#1D4FC4"
+      android:fillType="evenOdd"/>
+  <path
+      android:pathData="M26.75,28V26C26.75,24.481 25.519,23.25 24,23.25L16,23.25C14.481,23.25 13.25,24.481 13.25,26V28H14.75L14.75,26C14.75,25.31 15.31,24.75 16,24.75L24,24.75C24.69,24.75 25.25,25.31 25.25,26V28H26.75Z"
+      android:fillColor="#1D4FC4"/>
+</vector>
diff --git a/WordPress/src/main/res/layout/me_fragment.xml b/WordPress/src/main/res/layout/me_fragment.xml
@@ -238,7 +238,7 @@
                     android:id="@+id/me_design_system_settings"
                     style="@style/MeListRowTextView"
                     android:text="@string/preference_design_system" />
-                
+
             </LinearLayout>
 
             <View
@@ -398,4 +398,9 @@
                 tools:visibility="visible" />
         </LinearLayout>
     </androidx.core.widget.NestedScrollView>
+
+    <androidx.compose.ui.platform.ComposeView
+        android:id="@+id/compose_view"
+        android:layout_width="match_parent"
+        android:layout_height="wrap_content" />
 </androidx.coordinatorlayout.widget.CoordinatorLayout>