From 59c88461e3e4cb0fcafd0c83188b2b6aa97f1dc8 Mon Sep 17 00:00:00 2001
From: Gabriel Luong <gabriel.luong@gmail.com>
Date: Thu, 11 Apr 2024 16:02:25 +0000
Subject: [PATCH] Bug 1885602 - Part 2: Add a MozillaAccountMenuButton
 composable for the menu redesign r=007,android-reviewers

Source:
https://www.figma.com/file/RFz9fYtotQCQuinwcZujZt/Menu-Redesign?type=design&node-id=9751-50040&mode=dev
https://www.figma.com/file/RFz9fYtotQCQuinwcZujZt/Menu-Redesign?type=design&node-id=9940-23719&mode=dev

Differential Revision: https://phabricator.services.mozilla.com/D207053
---
 .../compose/header/MozillaAccountMenuButton.kt     | 214 +++++++++++++++++++++
 .../fenix/app/src/main/res/values/strings.xml      |  10 +-
 2 files changed, 221 insertions(+), 3 deletions(-)
 create mode 100644 mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/header/MozillaAccountMenuButton.kt

diff --git a/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/header/MozillaAccountMenuButton.kt b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/header/MozillaAccountMenuButton.kt
new file mode 100644
index 000000000000..9cf00e248ae6
--- /dev/null
+++ b/mobile/android/fenix/app/src/main/java/org/mozilla/fenix/components/menu/compose/header/MozillaAccountMenuButton.kt
@@ -0,0 +1,214 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+package org.mozilla.fenix.components.menu.compose.header
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.defaultMinSize
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Icon
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import mozilla.components.service.fxa.store.Account
+import org.mozilla.fenix.R
+import org.mozilla.fenix.components.accounts.AccountState
+import org.mozilla.fenix.components.accounts.AccountState.AUTHENTICATED
+import org.mozilla.fenix.components.accounts.AccountState.NEEDS_REAUTHENTICATION
+import org.mozilla.fenix.components.accounts.AccountState.NO_ACCOUNT
+import org.mozilla.fenix.compose.annotation.LightDarkPreview
+import org.mozilla.fenix.theme.FirefoxTheme
+import org.mozilla.fenix.theme.Theme
+
+private val BUTTON_HEIGHT = 56.dp
+private val BUTTON_SHAPE = RoundedCornerShape(size = 8.dp)
+
+@Composable
+internal fun MozillaAccountMenuButton(
+    account: Account?,
+    accountState: AccountState,
+    onSignInButtonClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier
+            .background(
+                color = FirefoxTheme.colors.layer3,
+                shape = BUTTON_SHAPE,
+            )
+            .clip(shape = BUTTON_SHAPE)
+            .clickable { onSignInButtonClick() }
+            .defaultMinSize(minHeight = BUTTON_HEIGHT),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Spacer(modifier = Modifier.width(4.dp))
+
+        AvatarIcon()
+
+        Column(
+            modifier = Modifier
+                .padding(horizontal = 8.dp)
+                .weight(1f),
+        ) {
+            when (accountState) {
+                NO_ACCOUNT -> {
+                    Text(
+                        text = stringResource(id = R.string.browser_menu_sign_in),
+                        color = FirefoxTheme.colors.textSecondary,
+                        maxLines = 1,
+                        style = FirefoxTheme.typography.headline7,
+                    )
+
+                    Text(
+                        text = stringResource(id = R.string.browser_menu_sign_in_caption),
+                        color = FirefoxTheme.colors.textSecondary,
+                        maxLines = 2,
+                        style = FirefoxTheme.typography.caption,
+                    )
+                }
+
+                NEEDS_REAUTHENTICATION -> {
+                    Text(
+                        text = stringResource(id = R.string.browser_menu_sign_back_in_to_sync),
+                        color = FirefoxTheme.colors.textSecondary,
+                        maxLines = 1,
+                        style = FirefoxTheme.typography.headline7,
+                    )
+
+                    Text(
+                        text = stringResource(id = R.string.browser_menu_syncing_paused_caption),
+                        color = FirefoxTheme.colors.textWarning,
+                        maxLines = 2,
+                        style = FirefoxTheme.typography.caption,
+                    )
+                }
+
+                AUTHENTICATED -> {
+                    Text(
+                        text = account?.displayName ?: account?.email
+                            ?: stringResource(id = R.string.browser_menu_account_settings),
+                        color = FirefoxTheme.colors.textSecondary,
+                        maxLines = 1,
+                        style = FirefoxTheme.typography.headline7,
+                    )
+                }
+            }
+        }
+
+        if (accountState == NEEDS_REAUTHENTICATION) {
+            Icon(
+                painter = painterResource(R.drawable.mozac_ic_warning_fill_24),
+                contentDescription = null,
+                tint = FirefoxTheme.colors.iconWarning,
+            )
+
+            Spacer(modifier = Modifier.width(8.dp))
+        }
+    }
+}
+
+@Composable
+private fun AvatarIcon() {
+    Icon(
+        painter = painterResource(id = R.drawable.mozac_ic_avatar_circle_24),
+        contentDescription = null,
+        modifier = Modifier
+            .background(
+                color = FirefoxTheme.colors.layer2,
+                shape = RoundedCornerShape(size = 24.dp),
+            )
+            .padding(all = 4.dp),
+        tint = FirefoxTheme.colors.iconSecondary,
+    )
+}
+
+@Composable
+private fun MenuHeaderPreviewContent() {
+    Column(
+        modifier = Modifier
+            .background(color = FirefoxTheme.colors.layer2)
+            .padding(all = 16.dp),
+        verticalArrangement = Arrangement.spacedBy(16.dp),
+    ) {
+        MozillaAccountMenuButton(
+            account = null,
+            accountState = NO_ACCOUNT,
+            onSignInButtonClick = {},
+        )
+
+        MozillaAccountMenuButton(
+            account = null,
+            accountState = NEEDS_REAUTHENTICATION,
+            onSignInButtonClick = {},
+        )
+
+        MozillaAccountMenuButton(
+            account = Account(
+                uid = "testUID",
+                avatar = null,
+                email = "test@example.com",
+                displayName = "test profile",
+                currentDeviceId = null,
+                sessionToken = null,
+            ),
+            accountState = AUTHENTICATED,
+            onSignInButtonClick = {},
+        )
+
+        MozillaAccountMenuButton(
+            account = Account(
+                uid = "testUID",
+                avatar = null,
+                email = "test@example.com",
+                displayName = null,
+                currentDeviceId = null,
+                sessionToken = null,
+            ),
+            accountState = AUTHENTICATED,
+            onSignInButtonClick = {},
+        )
+
+        MozillaAccountMenuButton(
+            account = Account(
+                uid = "testUID",
+                avatar = null,
+                email = null,
+                displayName = null,
+                currentDeviceId = null,
+                sessionToken = null,
+            ),
+            accountState = AUTHENTICATED,
+            onSignInButtonClick = {},
+        )
+    }
+}
+
+@LightDarkPreview
+@Composable
+private fun MenuHeaderPreview() {
+    FirefoxTheme {
+        MenuHeaderPreviewContent()
+    }
+}
+
+@Preview
+@Composable
+private fun MenuHeaderPrivatePreview() {
+    FirefoxTheme(theme = Theme.Private) {
+        MenuHeaderPreviewContent()
+    }
+}
diff --git a/mobile/android/fenix/app/src/main/res/values/strings.xml b/mobile/android/fenix/app/src/main/res/values/strings.xml
index e621bfb2c2a5..316afd71d97e 100644
--- a/mobile/android/fenix/app/src/main/res/values/strings.xml
+++ b/mobile/android/fenix/app/src/main/res/values/strings.xml
@@ -238,9 +238,13 @@
     <!-- Button shown on the home page that opens the Customize home settings -->
     <string name="browser_menu_customize_home_1">Customize homepage</string>
     <!-- Browser menu label to sign in to sync on the device using Mozilla accounts -->
-    <string name="browser_menu_sign_in" tools:ignore="UnusedResources">Sign in</string>
-    <!-- Browser menu caption label for the "Sign in" browser menu item described in browser_menu_sign_in -->
-    <string name="browser_menu_sign_in_caption" tools:ignore="UnusedResources">Sync passwords, tabs, and more</string>
+    <string name="browser_menu_sign_in">Sign in</string>
+    <!-- Browser menu caption label for the "Sign in" browser menu item described in `browser_menu_sign_in` -->
+    <string name="browser_menu_sign_in_caption">Sync passwords, tabs, and more</string>
+    <!-- Browser menu label to sign back in to sync on the device when the user's account needs to be reauthenticated -->
+    <string name="browser_menu_sign_back_in_to_sync">Sign back in to sync</string>
+    <!-- Browser menu caption label for the "Sign back in to sync" browser menu item described in `browser_menu_sign_back_in_to_sync` when there is an error in syncing -->
+    <string name="browser_menu_syncing_paused_caption">Syncing paused</string>
     <!-- Browser menu label that creates a private tab -->
     <string name="browser_menu_new_private_tab">New private tab</string>
 
-- 
2.11.4.GIT