VPN-4691: Add location selection help sheet

src/constants.h

@@ -214,6 +214,10 @@ constexpr const char* MOZILLA_VPN_SUMO_URL =
 constexpr const char* SUMO_DNS =
     "https://support.mozilla.org/kb/how-do-i-change-my-dns-settings";
 
+constexpr const char* SUMO_MULTIHOP =
+    "https://support.mozilla.org/kb/"
+    "multi-hop-encrypt-your-data-twice-enhanced-security";
+
 PRODBETAEXPR(QString, contactSupportUrl, "https://accounts.firefox.com/support",
              "https://accounts.stage.mozaws.net/support")
 

src/mozillavpn.cpp

@@ -1384,6 +1384,9 @@ void MozillaVPN::registerUrlOpenerLabels() {
 
   uo->registerUrlLabel("sumoDns",
                        []() -> QString { return Constants::SUMO_DNS; });
+
+  uo->registerUrlLabel("sumoMultihop",
+                       []() -> QString { return Constants::SUMO_MULTIHOP; });
 }
 
 void MozillaVPN::errorHandled() {

src/translations/strings.yaml

@@ -966,6 +966,18 @@ helpSheets:
   dnsBody2:
     value: Mozilla VPN allows you to choose a custom DNS server if you prefer. If you use one, you won’t be able to use other privacy features in the VPN like tracker blocking.
     comment: Body text for the custom dns help sheet
+  locationTitle:
+    value: Location selection
+    comment: Title label for the location selection help sheet
+  locationHeader:
+    value: Single-hop vs multi-hop
+    comment: Header label for the location selection help sheet
+  locationBody1:
+    value: If you want maximum speed and reliability, choose one of the recommended locations in the “Single-hop” toggle. We’ve sorted them based on expected performance.
+    comment: Body label for the location selection help sheet
+  locationBody2:
+    value: If you want to add more privacy, switch to “Multi-hop” and add an additional server location. Multi-hop VPN routes your traffic through two server locations instead of one for extra security and privacy. This may also slow down your connection a bit.
+    comment: Body label for the location selection help sheet
 
 global:
   expand:

src/ui/screens/home/ViewMultiHop.qml

@@ -44,19 +44,6 @@ StackView {
             anchors.rightMargin: MZTheme.theme.windowMargin / 2
             spacing: MZTheme.theme.vSpacing
 
-            MZCollapsibleCard {
-                title: MZI18n.MultiHopFeatureMultiHopCardHeader
-
-                iconSrc: "qrc:/ui/resources/tip.svg"
-                contentItem: MZTextBlock {
-                    text: MZI18n.MultiHopFeatureMultiHopCardBody
-                    textFormat: Text.StyledText
-                    Layout.fillWidth: true
-                }
-                Layout.alignment: Qt.AlignHCenter
-                Layout.preferredWidth: parent.width - MZTheme.theme.windowMargin
-            }
-
             RecentConnections {
                 Layout.fillWidth: true
                 showMultiHopRecentConnections: true

src/ui/screens/home/ViewServers.qml

@@ -28,6 +28,24 @@ Item {
         title: defaultMenuTitle
         onActiveFocusChanged: if (focus) forceFocus = true
 
+        rightButtonComponent: Component {
+            Loader {
+                active: MZFeatureList.get("helpSheets").isSupported
+                sourceComponent: MZIconButton {
+                    onClicked: helpSheetLoader.active = true
+
+                    accessibleName: MZI18n.GlobalHelp
+
+                    Image {
+                        anchors.centerIn: parent
+
+                        source: "qrc:/nebula/resources/question.svg"
+                        fillMode: Image.PreserveAspectFit
+                    }
+                }
+            }
+        }
+
         _menuOnBackClicked: () => {
             if (multiHopStackView && multiHopStackView.depth > 1) {
                 // User clicked back from either the Multi-hop entry or exit server list
@@ -131,6 +149,27 @@ Item {
         }
     }
 
+    Loader {
+        id: helpSheetLoader
+
+        active: false
+
+        onActiveChanged: if (active) item.open()
+
+        sourceComponent: MZHelpSheet {
+            title: MZI18n.HelpSheetsLocationTitle
+
+            model: [
+                {type: MZHelpSheet.BlockType.Title, text: MZI18n.HelpSheetsLocationHeader},
+                {type: MZHelpSheet.BlockType.Text, text: MZI18n.HelpSheetsLocationBody1, margin: 8},
+                {type: MZHelpSheet.BlockType.Text, text:MZI18n.HelpSheetsLocationBody2, margin: 16},
+                {type: MZHelpSheet.BlockType.LinkButton, text: MZI18n.GlobalLearnMore, margin: 16, action: () => { MZUrlOpener.openUrlLabel("sumoMultihop") } },
+            ]
+
+            onClosed: helpSheetLoader.active = false
+        }
+    }
+
     Component.onCompleted: {
         if (!MZFeatureList.get("multiHop").isSupported) {
             return;

src/ui/screens/home/servers/ServerList.qml

@@ -156,19 +156,6 @@ FocusScope {
                         right: parent.right
                     }
 
-                    MZCollapsibleCard {
-                        anchors.horizontalCenter: parent.horizontalCenter
-
-                        iconSrc: "qrc:/ui/resources/tip.svg"
-                        contentItem: MZTextBlock {
-                            text: MZI18n.ServersViewRecommendedCardBody
-                            textFormat: Text.StyledText
-                            Layout.fillWidth: true
-                        }
-                        title: MZI18n.ServersViewRecommendedCardTitle
-                        width: parent.width - MZTheme.theme.windowMargin * 2
-                    }
-
                     // Status component
                     // TODO: Refresh server list and handle states
                     MZClickableRow {

tests/functional/queries.js

@@ -112,8 +112,6 @@ const screenHome = {
         '//segmentedNavToggle/segmentedToggleBtnLayout/tabMultiHop'),
     MULTIHOP_VIEW: new QmlQueryComposer('//multiHopStackView'),
     ALL_SERVERS_TAB: new QmlQueryComposer('//tabAllServers'),
-    VPN_MULTHOP_CHEVRON: new QmlQueryComposer('//vpnCollapsibleCardChevron'),
-    VPN_COLLAPSIBLE_CARD: new QmlQueryComposer('//vpnCollapsibleCard'),
   }
 };
 

tests/functional/testMultihop.js

@@ -55,24 +55,12 @@ describe('Server list', function() {
   it('opening the entry and exit server list', async () => {
     await vpn.waitForQueryAndClick(
         queries.screenHome.serverListView.MULTIHOP_SELECTOR_TAB.visible());
-    await vpn.waitForQuery(
-        queries.screenHome.serverListView.VPN_COLLAPSIBLE_CARD.visible());
-
-    assert(
-        await vpn.getQueryProperty(
-            queries.screenHome.serverListView.VPN_COLLAPSIBLE_CARD,
-            'expanded') === 'false');
 
     await vpn.waitForQuery(
         queries.screenHome.serverListView.ENTRY_BUTTON.visible());
 
     await vpn.waitForQuery(
         queries.screenHome.serverListView.EXIT_BUTTON.visible());
-
-    await vpn.waitForQueryAndClick(
-        queries.screenHome.serverListView.VPN_MULTHOP_CHEVRON.visible())
-    assert(await vpn.getQueryProperty(
-        queries.screenHome.serverListView.VPN_COLLAPSIBLE_CARD, 'expanded'))
   });
 
   it('check the countries and cities for multihop entries', async () => {