Refactor FXIOS-7337 [v120] update copy and layout for the fakespot re…

…liability card (#16577) * Refactor FXIOS-7337 [v119] update copy and layout for the fakespot reliability card (#16267) * updated FakespotReliabilityCardView as well * addressed PR comments * updated to semibolds in the FakespotReliabilityCardView * updated collapsible card title font weight * fix merge issue * moved PartnerWebsites and added the bold strings to localizations * updated bolded strings * renamed the MarkupAttributeUtility instance and moved the attributedString attribution to the view configuration method * removed redundant lines * replaced the font with the one added in the UX struct * Fix warning * Fix unit tests --------- Co-authored-by: Stefan Vladut <[email protected]> Co-authored-by: Winnie Teichmann <[email protected]>
mozilla-mobile · Oct 9, 2023 · 0f76c19 · 0f76c19
1 parent 3078011
commit 0f76c19
Show file tree

Hide file tree

Showing 10 changed files with 93 additions and 78 deletions.
diff --git a/BrowserKit/Sources/ComponentLibrary/CollapsibleCardView.swift b/BrowserKit/Sources/ComponentLibrary/CollapsibleCardView.swift
@@ -101,7 +101,9 @@ public class CollapsibleCardView: ShadowCardView, UIGestureRecognizerDelegate {
 
     lazy var titleLabel: UILabel = .build { label in
         label.adjustsFontForContentSizeCategory = true
-        label.font = DefaultDynamicFontHelper.preferredBoldFont(withTextStyle: .subheadline, size: 15.0)
+        label.font = DefaultDynamicFontHelper.preferredFont(withTextStyle: .subheadline,
+                                                            size: 15.0,
+                                                            weight: .semibold)
         label.numberOfLines = 0
     }
 

diff --git a/Client.xcodeproj/project.pbxproj b/Client.xcodeproj/project.pbxproj
@@ -841,6 +841,7 @@
 		AB52ED3B2A0E8873001067F5 /* UserConversionMetrics.swift in Sources */ = {isa = PBXBuildFile; fileRef = AB52ED3A2A0E8873001067F5 /* UserConversionMetrics.swift */; };
 		AB7D4C3129ACAED100626427 /* Tab+ChangeUserAgentTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = AB7D4C3029ACAED100626427 /* Tab+ChangeUserAgentTests.swift */; };
 		ABB507CF2A136FB2009CAA67 /* UserConversionMetricsTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = ABB507CD2A136FB2009CAA67 /* UserConversionMetricsTests.swift */; };
+		ABE4393E2AC432040074FFE1 /* PartnerWebsites.swift in Sources */ = {isa = PBXBuildFile; fileRef = ABE4393D2AC432040074FFE1 /* PartnerWebsites.swift */; };
 		ABEF80D12A24D2BE003F52C4 /* CreditCardBottomSheetViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = ABEF80D02A24D2BE003F52C4 /* CreditCardBottomSheetViewModel.swift */; };
 		ABEF80D52A254185003F52C4 /* CreditCardBottomSheetFooterView.swift in Sources */ = {isa = PBXBuildFile; fileRef = ABEF80D42A254185003F52C4 /* CreditCardBottomSheetFooterView.swift */; };
 		ABEF80D92A2F283E003F52C4 /* CreditCardBottomSheetViewModelTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = ABEF80D82A2F283D003F52C4 /* CreditCardBottomSheetViewModelTests.swift */; };
@@ -5457,6 +5458,7 @@
 		AB7C4D658AB44D577390B61F /* an */ = {isa = PBXFileReference; lastKnownFileType = text.plist.strings; name = an; path = an.lproj/Menu.strings; sourceTree = "<group>"; };
 		AB7D4C3029ACAED100626427 /* Tab+ChangeUserAgentTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Tab+ChangeUserAgentTests.swift"; sourceTree = "<group>"; };
 		ABB507CD2A136FB2009CAA67 /* UserConversionMetricsTests.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = UserConversionMetricsTests.swift; sourceTree = "<group>"; };
+		ABE4393D2AC432040074FFE1 /* PartnerWebsites.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PartnerWebsites.swift; sourceTree = "<group>"; };
 		ABEF80D02A24D2BE003F52C4 /* CreditCardBottomSheetViewModel.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = CreditCardBottomSheetViewModel.swift; sourceTree = "<group>"; };
 		ABEF80D42A254185003F52C4 /* CreditCardBottomSheetFooterView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CreditCardBottomSheetFooterView.swift; sourceTree = "<group>"; };
 		ABEF80D82A2F283D003F52C4 /* CreditCardBottomSheetViewModelTests.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = CreditCardBottomSheetViewModelTests.swift; sourceTree = "<group>"; };
@@ -8751,6 +8753,7 @@
 				8C92DE902A7128CB0090BD28 /* ProductAnalysisData.swift */,
 				E1516A3D2A7BC07E007819A4 /* ReliabilityGrade.swift */,
 				E18F44062A951C330056160F /* FakespotHighlightGroup.swift */,
+				ABE4393D2AC432040074FFE1 /* PartnerWebsites.swift */,
 			);
 			path = Client;
 			sourceTree = "<group>";
@@ -12763,6 +12766,7 @@
 				EBC486992195F46B00CDA48D /* InternalSchemeHandler.swift in Sources */,
 				E18BAAFD28E4A44500098AE2 /* TopTabFader.swift in Sources */,
 				C8656D79270F866700E199EA /* CustomizeHomepageSectionCell.swift in Sources */,
+				ABE4393E2AC432040074FFE1 /* PartnerWebsites.swift in Sources */,
 				C84655FB28879FC600861B4A /* WallpaperStorageUtility.swift in Sources */,
 				4347B39A298DA5BB0045F677 /* CreditCardInputViewModel.swift in Sources */,
 				6025B10D267B6C5400F59F6B /* LoginRecordExtension.swift in Sources */,

diff --git a/Client/Frontend/Fakespot/Client/PartnerWebsites.swift b/Client/Frontend/Fakespot/Client/PartnerWebsites.swift
@@ -0,0 +1,36 @@
+// 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/
+
+import Foundation
+
+public enum PartnerWebsite: String, CaseIterable {
+    case amazon
+    case walmart
+    case bestbuy
+
+    var title: String {
+        switch self {
+        case .bestbuy: return "Best Buy"
+        default: return self.rawValue.capitalized
+        }
+    }
+
+    var orderWebsites: [String] {
+        let currentPartnerWebsites = PartnerWebsite.allCases.map { $0.title }
+
+        // make sure current website is first
+        var websitesOrder = currentPartnerWebsites.filter { $0 != self.title }
+        websitesOrder.insert(self.title, at: 0)
+
+        return websitesOrder
+    }
+
+    init?(for siteName: String?) {
+        guard let siteName = siteName, let partner = PartnerWebsite(rawValue: siteName) else {
+            return nil
+        }
+
+        self = partner
+    }
+}
diff --git a/Client/Frontend/Fakespot/FakespotOptInCardViewModel.swift b/Client/Frontend/Fakespot/FakespotOptInCardViewModel.swift
@@ -14,37 +14,6 @@ struct FakespotOptInCardViewModel {
         static let bodyFirstParagraphLabelFontSize: CGFloat = 15
     }
 
-    public enum PartnerWebsite: String, CaseIterable {
-        case amazon
-        case walmart
-        case bestbuy
-
-        var title: String {
-            switch self {
-            case .bestbuy: return "Best Buy"
-            default: return self.rawValue.capitalized
-            }
-        }
-
-        var orderWebsites: [String] {
-            let currentPartnerWebsites = PartnerWebsite.allCases.map { $0.title }
-
-            // make sure current website is first
-            var websitesOrder = currentPartnerWebsites.filter { $0 != self.title }
-            websitesOrder.insert(self.title, at: 0)
-
-            return websitesOrder
-        }
-
-        init?(for siteName: String?) {
-            guard let siteName = siteName, let partner = PartnerWebsite(rawValue: siteName) else {
-                return nil
-            }
-
-            self = partner
-        }
-    }
-
     private let tabManager: TabManager
     private let prefs: Prefs
     let cardA11yId: String = AccessibilityIdentifiers.Shopping.OptInCard.card

diff --git a/Client/Frontend/Fakespot/FakespotViewModel.swift b/Client/Frontend/Fakespot/FakespotViewModel.swift
@@ -231,6 +231,7 @@ class FakespotViewModel {
          profile: Profile = AppContainer.shared.resolve()) {
         self.shoppingProduct = shoppingProduct
         optInCardViewModel.productSitename = shoppingProduct.product?.sitename
+        reviewQualityCardViewModel.productSitename = shoppingProduct.product?.sitename
         self.prefs = profile.prefs
     }
 

diff --git a/Client/Frontend/Fakespot/Views/FakespotReliabilityCardView.swift b/Client/Frontend/Fakespot/Views/FakespotReliabilityCardView.swift
@@ -24,7 +24,7 @@ class FakespotReliabilityCardView: UIView, ThemeApplicable {
         static let letterHorizontalPadding: CGFloat = 4
         static let descriptionVerticalPadding: CGFloat = 6
         static let descriptionHorizontalPadding: CGFloat = 8
-        static let titleFontSize: CGFloat = 17
+        static let titleFontSize: CGFloat = 15
         static let letterFontSize: CGFloat = 13
         static let descriptionFontSize: CGFloat = 13
         static let descriptionBackgroundAlpha: CGFloat = 0.15
@@ -35,8 +35,9 @@ class FakespotReliabilityCardView: UIView, ThemeApplicable {
 
     private lazy var titleLabel: UILabel = .build { view in
         view.adjustsFontForContentSizeCategory = true
-        view.font = DefaultDynamicFontHelper.preferredFont(withTextStyle: .headline,
-                                                           size: UX.titleFontSize)
+        view.font = DefaultDynamicFontHelper.preferredFont(withTextStyle: .subheadline,
+                                                           size: UX.titleFontSize,
+                                                           weight: .semibold)
         view.numberOfLines = 0
     }
 
@@ -51,14 +52,14 @@ class FakespotReliabilityCardView: UIView, ThemeApplicable {
 
     private lazy var reliabilityLetterLabel: UILabel = .build { view in
         view.adjustsFontForContentSizeCategory = true
-        view.font = DefaultDynamicFontHelper.preferredFont(withTextStyle: .body,
+        view.font = DefaultDynamicFontHelper.preferredFont(withTextStyle: .footnote,
                                                            size: UX.letterFontSize,
                                                            weight: .semibold)
     }
 
     private lazy var reliabilityDescriptionLabel: UILabel = .build { view in
         view.adjustsFontForContentSizeCategory = true
-        view.font = DefaultDynamicFontHelper.preferredFont(withTextStyle: .caption1, size: UX.descriptionFontSize)
+        view.font = DefaultDynamicFontHelper.preferredFont(withTextStyle: .footnote, size: UX.descriptionFontSize)
         view.numberOfLines = 0
     }
 
@@ -90,6 +91,7 @@ class FakespotReliabilityCardView: UIView, ThemeApplicable {
         cardContainer.configure(cardModel)
     }
 
+    // MARK: Theming System
     func applyTheme(theme: Theme) {
         cardContainer.applyTheme(theme: theme)
         reliabilityScoreView.layer.backgroundColor = UIColor(red: 1, green: 1, blue: 1, alpha: 1).cgColor
@@ -103,6 +105,7 @@ class FakespotReliabilityCardView: UIView, ThemeApplicable {
         }
     }
 
+    // MARK: Layout Setup
     private func setupLayout() {
         addSubview(cardContainer)
 

diff --git a/Client/Frontend/Fakespot/Views/FakespotReviewQualityCardView.swift b/Client/Frontend/Fakespot/Views/FakespotReviewQualityCardView.swift
@@ -9,9 +9,25 @@ import ComponentLibrary
 
 // MARK: View Model
 final class FakespotReviewQualityCardViewModel {
+    private struct UX {
+        static let labelFontSize: CGFloat = 15
+        static let baseFont = DefaultDynamicFontHelper.preferredFont(withTextStyle: .subheadline,
+                                                                     size: UX.labelFontSize)
+    }
+
+    let markupUtility = MarkupAttributeUtility(baseFont: UX.baseFont)
     private let tabManager: TabManager
     let fakespotLearnMoreLink = FakespotUtils.learnMoreUrl
     var dismissViewController: (() -> Void)?
+    var productSitename: String?
+    var highlightsText: NSAttributedString {
+        let currentPartner = PartnerWebsite(for: productSitename?.lowercased()) ?? .amazon
+        let highlightedWebsite = currentPartner.title
+        let plainText = String.localizedStringWithFormat(String.Shopping.ReviewQualityCardHighlightsLabel, highlightedWebsite)
+        let result = markupUtility.addAttributesTo(text: plainText)
+
+        return result
+    }
 
     // MARK: Init
     init(tabManager: TabManager = AppContainer.shared.resolve()) {
@@ -38,6 +54,8 @@ final class FakespotReviewQualityCardView: UIView, Notifiable, ThemeApplicable {
         static let labelFontSize: CGFloat = 15
         static let ratingsFooterStackViewInsets = UIEdgeInsets(top: 8, left: 0, bottom: 8, right: 0)
         static let contentStackViewInsets = UIEdgeInsets(top: 8, left: 8, bottom: 0, right: 8)
+        static let baseFont = DefaultDynamicFontHelper.preferredFont(withTextStyle: .subheadline,
+                                                                     size: UX.labelFontSize)
     }
 
     private var viewModel: FakespotReviewQualityCardViewModel?
@@ -69,18 +87,14 @@ final class FakespotReviewQualityCardView: UIView, Notifiable, ThemeApplicable {
         label.numberOfLines = 0
         label.adjustsFontForContentSizeCategory = true
         label.clipsToBounds = true
-        label.font = DefaultDynamicFontHelper.preferredFont(withTextStyle: .body,
-                                                            size: UX.labelFontSize)
+        label.font = UX.baseFont
     }
 
     private lazy var subHeadlineLabel: UILabel = .build { label in
-        label.text = .Shopping.ReviewQualityCardSubHeadlineLabel
         label.accessibilityIdentifier = AccessibilityIdentifiers.Shopping.ReviewQualityCard.subHeadlineLabel
         label.numberOfLines = 0
         label.adjustsFontForContentSizeCategory = true
         label.clipsToBounds = true
-        label.font = DefaultDynamicFontHelper.preferredFont(withTextStyle: .body,
-                                                            size: UX.labelFontSize)
     }
 
     private lazy var ratingsStackView: UIStackView = .build { stackView in
@@ -126,8 +140,7 @@ final class FakespotReviewQualityCardView: UIView, Notifiable, ThemeApplicable {
         label.numberOfLines = 0
         label.adjustsFontForContentSizeCategory = true
         label.clipsToBounds = true
-        label.font = DefaultDynamicFontHelper.preferredFont(withTextStyle: .body,
-                                                            size: UX.labelFontSize)
+        label.font = UX.baseFont
     }
 
     private lazy var mixReliableReviewsLabel: UILabel = .build { label in
@@ -136,8 +149,7 @@ final class FakespotReviewQualityCardView: UIView, Notifiable, ThemeApplicable {
         label.numberOfLines = 0
         label.adjustsFontForContentSizeCategory = true
         label.clipsToBounds = true
-        label.font = DefaultDynamicFontHelper.preferredFont(withTextStyle: .body,
-                                                            size: UX.labelFontSize)
+        label.font = UX.baseFont
     }
 
     private lazy var unreliableReviewsLabel: UILabel = .build { label in
@@ -146,8 +158,7 @@ final class FakespotReviewQualityCardView: UIView, Notifiable, ThemeApplicable {
         label.numberOfLines = 0
         label.adjustsFontForContentSizeCategory = true
         label.clipsToBounds = true
-        label.font = DefaultDynamicFontHelper.preferredFont(withTextStyle: .body,
-                                                            size: UX.labelFontSize)
+        label.font = UX.baseFont
     }
 
     private lazy var footerStackView: UIStackView = .build { stackView in
@@ -159,27 +170,13 @@ final class FakespotReviewQualityCardView: UIView, Notifiable, ThemeApplicable {
     }
 
     private lazy var adjustedRatingLabel: UILabel = .build { label in
-        let text = String.Shopping.ReviewQualityCardAdjustedRatingLabel
-        let normalFont = DefaultDynamicFontHelper.preferredFont(withTextStyle: .body,
-                                                                size: UX.labelFontSize)
-        let boldFont = DefaultDynamicFontHelper.preferredBoldFont(withTextStyle: .body, size: UX.labelFontSize)
-        label.attributedText = text.attributedText(boldPartsOfString: ["adjusted rating"],
-                                                   initialFont: normalFont,
-                                                   boldFont: boldFont)
         label.accessibilityIdentifier = AccessibilityIdentifiers.Shopping.ReviewQualityCard.adjustedRatingLabel
         label.numberOfLines = 0
         label.adjustsFontForContentSizeCategory = true
         label.clipsToBounds = true
     }
 
     private lazy var highlightsLabel: UILabel = .build { label in
-        let text = String.Shopping.ReviewQualityCardHighlightsLabel
-        let normalFont = DefaultDynamicFontHelper.preferredFont(withTextStyle: .body,
-                                                                size: UX.labelFontSize)
-        let boldFont = DefaultDynamicFontHelper.preferredBoldFont(withTextStyle: .body, size: UX.labelFontSize)
-        label.attributedText = text.attributedText(boldPartsOfString: ["Highlights"],
-                                                   initialFont: normalFont,
-                                                   boldFont: boldFont)
         label.accessibilityIdentifier = AccessibilityIdentifiers.Shopping.ReviewQualityCard.highlightsLabel
         label.numberOfLines = 0
         label.adjustsFontForContentSizeCategory = true
@@ -194,8 +191,7 @@ final class FakespotReviewQualityCardView: UIView, Notifiable, ThemeApplicable {
         button.buttonEdgeSpacing = 0
         button.titleLabel?.numberOfLines = 0
         button.addTarget(self, action: #selector(self.didTapLearnMore), for: .touchUpInside)
-        button.titleLabel?.font = DefaultDynamicFontHelper.preferredFont(withTextStyle: .body,
-                                                                         size: UX.labelFontSize)
+        button.titleLabel?.font = UX.baseFont
     }
 
     override init(frame: CGRect) {
@@ -268,6 +264,10 @@ final class FakespotReviewQualityCardView: UIView, Notifiable, ThemeApplicable {
 
     func configure(_ viewModel: FakespotReviewQualityCardViewModel) {
         self.viewModel = viewModel
+        highlightsLabel.attributedText = viewModel.highlightsText
+        subHeadlineLabel.attributedText = viewModel.markupUtility.addAttributesTo(text: String.Shopping.ReviewQualityCardSubHeadlineLabel)
+        adjustedRatingLabel.attributedText = viewModel.markupUtility.addAttributesTo(text: String.Shopping.ReviewQualityCardAdjustedRatingLabel)
+
         let viewModel = CollapsibleCardViewModel(
             contentView: contentStackView,
             cardViewA11yId: AccessibilityIdentifiers.Shopping.ReviewQualityCard.card,