[Gravatar] - Add Gravatar info UI in user profile settings (#22563)

* Add Gravatar info cell

* Update font

* Disable drag interaction

* Update spacing

* Update link color

* Remove cardView

* Cleanup

* Replace some logos

* Add notice text

* Add notice message

* Revert Localizable.strings

* Remove Copyright comments

* Add an extra check to detect if the value has changed on the multiline text

* Revert irrelevant project file changes

* Add "adjustsFontForContentSizeCategory = true" and make the font calculated value in GravatarRowInfo

* Remove isUserInteractionEnabled

* Replace zPosition setting with bringSubviewToFront

* Fix typo (Rename GravatarInterceptingLogosView as GravatarIntersectingLogosView)

* Revert irrelevant project file changes

(Every time I rename a file I get these changes I don't know why)

---------

Co-authored-by: Pinar Olguc <pinar.olguc@automattic.com>

Author: pinarol

WordPress/Classes/ViewRelated/Me/My Profile/Gravatar/GravatarInfoRow.swift

@@ -0,0 +1,102 @@
+import Foundation
+import WordPressShared
+import DesignSystem
+
+struct GravatarInfoRow: ImmuTableRow {
+    var action: ImmuTableAction?
+
+    func configureCell(_ cell: UITableViewCell) {
+        guard let cell = cell as? GravatarInfoCell else { return }
+        cell.applyColors()
+        cell.selectionStyle = .none
+    }
+
+    static let cell = ImmuTableCell.class(GravatarInfoCell.self)
+}
+
+class GravatarInfoCell: WPTableViewCellDefault {
+
+    private enum Constants {
+        static let externalLinkLogo: UIImage? = UIImage(named: "icon-post-actionbar-view")?.withRenderingMode(.alwaysTemplate)
+        static let infoText = NSLocalizedString("Gravatar keeps your profile information safe and up to date, automatically syncing any updates made here with your Gravatar profile.", comment: "This text is shown in the profile editing page to let the user know about Gravatar.")
+        static let linkText = NSLocalizedString("Learn more on Gravatar.com", comment: "This is a link that takes the user to the external Gravatar website")
+        static var font: UIFont { TextStyle.caption.uiFont }
+        static let gravatarLink = "https://gravatar.com"
+    }
+
+    private var infoLabel: UILabel = {
+        let label = UILabel()
+        label.translatesAutoresizingMaskIntoConstraints = false
+        label.font = Constants.font
+        label.text = Constants.infoText
+        label.adjustsFontForContentSizeCategory = true
+        label.numberOfLines = 0
+        return label
+    }()
+
+    private var linkTextView: UITextView = {
+        let text = UITextView()
+        text.translatesAutoresizingMaskIntoConstraints = false
+        text.isEditable = false
+        text.isScrollEnabled = false
+        text.isSelectable = true
+        text.backgroundColor = .clear
+        text.textContainerInset = .zero
+        text.textContainer.lineFragmentPadding = 0
+        text.textDragInteraction?.isEnabled = false
+        text.adjustsFontForContentSizeCategory = true
+        return text
+    }()
+
+    private var logosView: GravatarIntersectingLogosView = {
+        let view = GravatarIntersectingLogosView(frame: .zero)
+        view.translatesAutoresizingMaskIntoConstraints = false
+        return view
+    }()
+
+    private lazy var verticalStackView: UIStackView = {
+        let stackView = UIStackView(arrangedSubviews: [logosView, infoLabel, linkTextView])
+        stackView.translatesAutoresizingMaskIntoConstraints = false
+        stackView.axis = .vertical
+        stackView.spacing = Length.Padding.split
+        stackView.alignment = .leading
+        return stackView
+    }()
+
+    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
+        super.init(style: style, reuseIdentifier: reuseIdentifier)
+        contentView.addSubview(verticalStackView)
+        NSLayoutConstraint.activate([
+            verticalStackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: Length.Padding.double),
+            verticalStackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -Length.Padding.double),
+            verticalStackView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: Length.Padding.double),
+            verticalStackView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -Length.Padding.double),
+        ])
+        applyColors()
+    }
+
+    required init?(coder aDecoder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    func applyColors() {
+        infoLabel.textColor = UIColor.DS.Foreground.primary
+        linkTextView.tintColor = UIColor.primary
+
+        let infoText = NSMutableAttributedString(string: Constants.linkText,
+                                                             attributes: [.underlineStyle: NSUnderlineStyle.single.rawValue,
+                                                                          .font: Constants.font])
+        if let linkImage = Constants.externalLinkLogo {
+            let imageAttachment = NSTextAttachment()
+            imageAttachment.image = linkImage
+            imageAttachment.bounds = CGRect(x: 0, y: (Constants.font.capHeight - linkImage.size.height).rounded() / 2, width: linkImage.size.width, height: linkImage.size.height)
+
+            let imageString = NSAttributedString(attachment: imageAttachment)
+            infoText.append(NSAttributedString(string: " "))
+            infoText.append(imageString)
+        }
+
+        infoText.addAttributes([.link: Constants.gravatarLink], range: NSRange(location: 0, length: infoText.length))
+        linkTextView.attributedText = infoText
+    }
+}

WordPress/Classes/ViewRelated/Me/My Profile/Gravatar/GravatarIntersectingLogosView.swift

@@ -0,0 +1,56 @@
+import Foundation
+
+class GravatarIntersectingLogosView: UIView {
+
+    private enum Constants {
+        static let wordpressLogo = UIImage(named: "wordpress-circular")
+        static let jetpackLogo = UIImage(named: "jetpack-circular")
+        static let gravatarLogo = UIImage(named: "gravatar-circular")
+        static let intersectionAmount: CGFloat = 12.0
+        static let logoSize: CGSize = .init(width: 30, height: 30)
+    }
+
+    private lazy var appLogoImageView: UIImageView = {
+        let imageView = UIImageView()
+        imageView.translatesAutoresizingMaskIntoConstraints = false
+        imageView.image = appLogo
+        imageView.contentMode = .scaleAspectFit
+        imageView.widthAnchor.constraint(equalToConstant: Constants.logoSize.width).isActive = true
+        imageView.heightAnchor.constraint(equalToConstant: Constants.logoSize.height).isActive = true
+        return imageView
+    }()
+
+    private lazy var gravatarLogoImageView: UIImageView = {
+        let imageView = UIImageView()
+        imageView.translatesAutoresizingMaskIntoConstraints = false
+        imageView.image = Constants.gravatarLogo
+        imageView.contentMode = .scaleAspectFit
+        imageView.widthAnchor.constraint(equalToConstant: Constants.logoSize.width).isActive = true
+        imageView.heightAnchor.constraint(equalToConstant: Constants.logoSize.height).isActive = true
+        return imageView
+    }()
+
+    private var appLogo: UIImage? {
+        return AppConfiguration.isJetpack ? Constants.jetpackLogo : Constants.wordpressLogo
+    }
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        addSubview(appLogoImageView)
+        addSubview(gravatarLogoImageView)
+        bringSubviewToFront(gravatarLogoImageView)
+        NSLayoutConstraint.activate([
+            appLogoImageView.leadingAnchor.constraint(equalTo: leadingAnchor),
+            appLogoImageView.topAnchor.constraint(equalTo: topAnchor),
+            appLogoImageView.bottomAnchor.constraint(equalTo: bottomAnchor),
+            gravatarLogoImageView.leadingAnchor.constraint(equalTo: appLogoImageView.trailingAnchor, constant: -Constants.intersectionAmount),
+            gravatarLogoImageView.topAnchor.constraint(equalTo: topAnchor),
+            gravatarLogoImageView.bottomAnchor.constraint(equalTo: bottomAnchor),
+            gravatarLogoImageView.trailingAnchor.constraint(equalTo: trailingAnchor)
+        ])
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+}

WordPress/Classes/ViewRelated/Me/My Profile/MyProfileViewController.swift

@@ -72,7 +72,8 @@ private class MyProfileController: SettingsController {
     let title = NSLocalizedString("My Profile", comment: "My Profile view title")
 
     var immuTableRows: [ImmuTableRow.Type] {
-        return [EditableTextRow.self]
+        return [EditableTextRow.self,
+                GravatarInfoRow.self]
     }
 
     // MARK: - Initialization
@@ -146,13 +147,16 @@ private class MyProfileController: SettingsController {
                 service: service)),
             fieldName: "about_me")
 
+        let gravatarInfoRow = GravatarInfoRow()
+
         return ImmuTable(sections: [
             ImmuTableSection(rows: [
                 firstNameRow,
                 lastNameRow,
                 displayNameRow,
                 aboutMeRow
-                ])
+            ]),
+            ImmuTableSection(rows: [gravatarInfoRow])
             ])
     }
 

WordPress/Classes/ViewRelated/Tools/SettingsCommon.swift

@@ -1,4 +1,5 @@
 import UIKit
+import WordPressFlux
 import WordPressKit
 import CocoaLumberjack
 
@@ -56,6 +57,9 @@ extension SettingsController {
 
             let change = changeType(value)
             service.saveChange(change)
+            if change.isGravatarField {
+                sendGravatarSyncNotice()
+            }
             DDLogDebug("\(title) changed: \(value)")
 
             trackChangeIfNeeded(row)
@@ -75,11 +79,14 @@ extension SettingsController {
 
         controller.title = title
         controller.onValueChanged = {
-            value in
-
-            let change = changeType(value)
+            newValue in
+            guard value != newValue else { return }
+            let change = changeType(newValue)
             service.saveChange(change)
-            DDLogDebug("\(title) changed: \(value)")
+            if change.isGravatarField {
+                sendGravatarSyncNotice()
+            }
+            DDLogDebug("\(title) changed: \(newValue)")
 
             trackChangeIfNeeded(row)
         }
@@ -95,4 +102,22 @@ extension SettingsController {
 
         WPAnalytics.trackSettingsChange(trackingKey, fieldName: fieldName)
     }
+
+    private func sendGravatarSyncNotice() {
+        let noticeMessage = NSLocalizedString("Updates might take some time to sync with your Gravatar profile.", comment: "A notice message that's shown after the user updates their profile information.")
+        ActionDispatcher.dispatch(NoticeAction.post(Notice(title: noticeMessage)))
+    }
+}
+
+extension AccountSettingsChange {
+
+    // These are the fields that are in sync with user's Gravatar account
+    var isGravatarField: Bool {
+        switch self {
+        case .firstName, .lastName, .aboutMe, .displayName:
+            return true
+        default:
+            return false
+        }
+    }
 }

WordPress/Jetpack/AppImages.xcassets/jetpack-circular.imageset/Contents.json

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "jetpack-circular.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

WordPress/Jetpack/AppImages.xcassets/jetpack-circular.imageset/jetpack-circular.pdf

@@ -0,0 +1,12 @@
+{
+  "images" : [
+    {
+      "filename" : "gravatar-logo.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

WordPress/Resources/AppImages.xcassets/gravatar-circular.imageset/Contents.json

@@ -0,0 +1,32 @@
+{
+  "images" : [
+    {
+      "filename" : "wordpress-logo-light 1.pdf",
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "light"
+        }
+      ],
+      "filename" : "wordpress-logo-light.pdf",
+      "idiom" : "universal"
+    },
+    {
+      "appearances" : [
+        {
+          "appearance" : "luminosity",
+          "value" : "dark"
+        }
+      ],
+      "filename" : "wordpress-logo-darkpdf.pdf",
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}