Onboarding Brand Design Update: Update visit-site-options dialog

[mikescamell]

Task/Issue URL: https://app.asana.com/1/137249556945/project/1207908166761516/task/1214072694520134?focus=true

Description

Adds the brand design update variant of the DaxIntroVisitSiteOptionsCta dialog. This follows the same pattern as the DaxTryASearchBrandDesignUpdateBubbleCta — an options-style dialog using the existing optionsContent include layout.

When the brand design update feature toggle is enabled, the new DaxVisitSiteOptionsBrandDesignUpdateBubbleCta is shown instead of the legacy DaxIntroVisitSiteOptionsCta.

Background image is not yet included (TODO added).

Steps to test this PR

Designs

Apply patch

Index: app/src/main/java/com/duckduckgo/app/onboardingbranddesignupdate/OnboardingBrandDesignUpdateToggles.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/src/main/java/com/duckduckgo/app/onboardingbranddesignupdate/OnboardingBrandDesignUpdateToggles.kt b/app/src/main/java/com/duckduckgo/app/onboardingbranddesignupdate/OnboardingBrandDesignUpdateToggles.kt
--- a/app/src/main/java/com/duckduckgo/app/onboardingbranddesignupdate/OnboardingBrandDesignUpdateToggles.kt	(revision 510fa21c4b4c6b25dfccb6c48e9c0d1e0a2ad9c1)
+++ b/app/src/main/java/com/duckduckgo/app/onboardingbranddesignupdate/OnboardingBrandDesignUpdateToggles.kt	(date 1776188767358)
@@ -34,13 +34,13 @@
      * Main toggle for the onboarding brand design update feature.
      * Default value: false (disabled).
      */
-    @Toggle.DefaultValue(DefaultFeatureValue.FALSE)
+    @Toggle.DefaultValue(DefaultFeatureValue.TRUE)
     fun self(): Toggle
 
     /**
      * Toggle for the brand design update variant.
      * Default value: false (disabled).
      */
-    @Toggle.DefaultValue(DefaultFeatureValue.FALSE)
+    @Toggle.DefaultValue(DefaultFeatureValue.TRUE)
     fun brandDesignUpdate(): Toggle
 }
Index: app/src/main/java/com/duckduckgo/app/onboarding/ui/OnboardingViewModel.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/src/main/java/com/duckduckgo/app/onboarding/ui/OnboardingViewModel.kt b/app/src/main/java/com/duckduckgo/app/onboarding/ui/OnboardingViewModel.kt
--- a/app/src/main/java/com/duckduckgo/app/onboarding/ui/OnboardingViewModel.kt	(revision 510fa21c4b4c6b25dfccb6c48e9c0d1e0a2ad9c1)
+++ b/app/src/main/java/com/duckduckgo/app/onboarding/ui/OnboardingViewModel.kt	(date 1776188767352)
@@ -45,7 +45,7 @@
     val viewState = _viewState.asStateFlow()
 
     fun initializePages() {
-        pageLayoutManager.buildPageBlueprints()
+        pageLayoutManager.buildBrandDesignUpdatePageBlueprints()
     }
 
     fun pageCount(): Int {
@@ -70,7 +70,7 @@
     }
 
     fun initializeOnboardingSkipper() {
-        if (!appBuildConfig.canSkipOnboarding) return
+        return
 
         // delay showing skip button until privacy config downloaded
         viewModelScope.launch {

Note if you want to see the dialog consistently from app close and open then apply this patch to force the dialog

Index: app/src/main/java/com/duckduckgo/app/cta/ui/CtaViewModel.kt
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/app/src/main/java/com/duckduckgo/app/cta/ui/CtaViewModel.kt b/app/src/main/java/com/duckduckgo/app/cta/ui/CtaViewModel.kt
--- a/app/src/main/java/com/duckduckgo/app/cta/ui/CtaViewModel.kt	(revision 1607ffb57272432b496011cb79a3c6ee2d5a15da)
+++ b/app/src/main/java/com/duckduckgo/app/cta/ui/CtaViewModel.kt	(date 1776325964635)
@@ -250,6 +250,10 @@
     }
 
     private suspend fun getHomeCta(): Cta? {
+        // TODO: REMOVE — temp hack to always show brand design update search dialog for testing
+        return DaxVisitSiteOptionsBrandDesignUpdateBubbleCta(onboardingStore, appInstallStore, appTheme.isLightModeEnabled())
+        // TODO: REMOVE — end temp hack
+
         return when {
             // Onboarding disabled
             canShowDaxIntroCta() && extendedOnboardingFeatureToggles.noBrowserCtas().isEnabled() -> {

Brand design update visit site options dialog

• Launch the app with a fresh install / clear data to trigger the onboarding flow
• Go through onboarding and get to the try a search dialog
• Close try a search dialog
• Open tab switcher
• Click new tab button
• Verify the visit site options dialog appears with the new brand design update layout
• Rotate and check in landscape
• Verify all site option buttons are displayed and clickable
• Verify the dismiss button appears and works
• Verify the typing animation plays correctly
• Verify tap-to-skip works during animation
• Repeat on a tablet
• Disable the brand design update toggle and verify the legacy dialog appears instead

UI changes

See here for screenshots

---

Note

Low Risk
Low risk: scoped to onboarding CTA selection and UI wiring, with behavior gated behind the brand design update toggle and covered by updated unit tests.

Overview
Adds a brand design update variant of the onboarding “visit site options” bubble (DaxVisitSiteOptionsBrandDesignUpdateBubbleCta) and switches CtaViewModel to serve it when the brand design update toggle is enabled (otherwise falling back to the legacy DaxIntroVisitSiteOptionsCta).

Introduces OptionsBubbleCta to centralize the shared option-button binding/click handling for brand-design option-style bubbles, and refactors DaxTryASearchBrandDesignUpdateBubbleCta to use this new base. Pixel firing for custom visit-site entries is updated in BrowserTabViewModel, and CtaViewModelTest adds coverage for the new toggle-driven visit-site CTA selection.

^{Reviewed by Cursor Bugbot for commit e416b21. Bugbot is set up for automated code reviews on this repo. Configure here.}

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit dbfbbe3. Configure here.}

[mikescamell]

• Onboarding Brand Design Update: Fix in-context dialog click handling #8341
• Onboarding Brand Design Update: Update subscription dialog #8293
• Onboarding Brand Design Update: Update end dialog #8292
• Onboarding Brand Design Update: Update visit-site-options dialog #8291 👈 (View in Graphite)
• Onboarding Brand Design Update: Update try-a-search dialog #8277
• develop

This stack of pull requests is managed by Graphite. Learn more about stacking.

[LukasPaczos]

@mikescamell when I reach the "visit a site step", I just get an empty background:

Looking through the layout inspector, includeOnboardingDaxDialogBubble is gone.

[mikescamell]

@mikescamell when I reach the "visit a site step", I just get an empty background: Looking through the layout inspector, includeOnboardingDaxDialogBubble is gone.

Thanks Lukasz, this was a bug in the try-a-search intial implementation and is now fixed 👍

[LukasPaczos]

The "try search" and "try site" classes have identical body. Might be worth considering squashing that down to:

  // Inside DaxBubbleCta.BrandDesignUpdateBubbleCta                                                                                                                              
  abstract class OptionsBubbleCta(                                     
      ctaId: CtaId,                                                                                                                                                              
      @StringRes title: Int,
      @StringRes description: Int,                                                                                                                                               
      options: List<DaxDialogIntroOption>?,                            
      @DrawableRes backgroundRes: Int,                                                                                                                                           
      ctaPixelParam: String,                                                                                                                                                     
      onboardingStore: OnboardingStore,                                                                                                                                          
      appInstallStore: AppInstallStore,                                                                                                                                          
      isLightTheme: Boolean,                                           
  ) : BrandDesignUpdateBubbleCta(...) {                                                                                                                                          
      override val activeIncludeId = R.id.optionsContent                                                                                                                         
      override fun configureContentViews(view: View) { /* the shared body */ }
      override fun setOnOptionClicked(...) { /* the shared body */ }                                                                                                             
  }                                                                    
                                                                                                                                                                                 
  data class DaxTryASearchBrandDesignUpdateBubbleCta(...) : OptionsBubbleCta(                                                                                                    
      ctaId = CtaId.DAX_INTRO,
      title = R.string.onboardingSearchDaxDialogTitle,                                                                                                                           
      // ...differing values only                                                                                                                                                
  )                                                                                                                                                                              
                                                                                                                                                                                 
  data class DaxVisitSiteOptionsBrandDesignUpdateBubbleCta(...) : OptionsBubbleCta(                                                                                              
      ctaId = CtaId.DAX_INTRO_VISIT_SITE,                              
      // ...differing values only                                                                                                                                                
  )