From f0c5d9758902be12bd71710bdb685bf44392edf5 Mon Sep 17 00:00:00 2001 From: Levi Bostian Date: Mon, 20 May 2024 09:13:45 -0500 Subject: [PATCH] chore: get WebView for inline message and add to Inline View to display Part of: https://linear.app/customerio/issue/MBL-310/create-a-uikit-uiview-that-displays-an-inline-in-app-message-sent-from Create a WebView to display inline in-app message and display in the Inline UIView. To do this, we can re-use a lot of the same logic that Modal messages use to create WebViews and display them. Testing: There are some automated tests added in this commit. Reviewer notes: This commit will not show an in-app message if you were to add it to a sample app. Autolayout constraints need to be added to have Views resize and that will come in a future commit. commit-id:025c7bf5 --- Sources/MessagingInApp/Gist/Gist.swift | 23 ++-- .../Gist/Managers/InlineMessageManager.swift | 53 ++++++++ .../Gist/Managers/MessageManager.swift | 117 +++++++----------- .../Gist/Managers/ModalMessageManager.swift | 62 ++++++++++ .../Gist/Managers/Models/Message.swift | 4 - .../Views/InAppMessageView.swift | 34 ++++- .../AutoMockable.generated.swift | 70 +++++++---- .../Views/InAppMessageViewTest.swift | 33 +++++ 8 files changed, 285 insertions(+), 111 deletions(-) create mode 100644 Sources/MessagingInApp/Gist/Managers/InlineMessageManager.swift create mode 100644 Sources/MessagingInApp/Gist/Managers/ModalMessageManager.swift diff --git a/Sources/MessagingInApp/Gist/Gist.swift b/Sources/MessagingInApp/Gist/Gist.swift index 9f11521c0..ada5053af 100644 --- a/Sources/MessagingInApp/Gist/Gist.swift +++ b/Sources/MessagingInApp/Gist/Gist.swift @@ -3,13 +3,14 @@ import Foundation import UIKit protocol GistInstance: AutoMockable { + var siteId: String { get } func showMessage(_ message: Message, position: MessagePosition) -> Bool } public class Gist: GistInstance, GistDelegate { var messageQueueManager: MessageQueueManager = DIGraphShared.shared.messageQueueManager var shownModalMessageQueueIds: Set = [] // all modal messages that have been shown in the app already. - private var messageManagers: [MessageManager] = [] + private var messageManagers: [ModalMessageManager] = [] public var siteId: String = "" public var dataCenter: String = "" @@ -29,8 +30,9 @@ public class Gist: GistInstance, GistDelegate { Logger.instance.enabled = logging messageQueueManager.setup(skipQueueCheck: false) - // Initialising Gist web with an empty message to fetch fonts and other assets. - _ = Gist.shared.getMessageView(Message(messageId: "")) + // To finish initializing of Gist, we want to fetch fonts and other assets for HTML in-app messages. + // To do that, we try to display a message with an empty message id. + _ = InlineMessageManager(siteId: self.siteId, message: Message(messageId: "")) } // MARK: User @@ -76,11 +78,6 @@ public class Gist: GistInstance, GistDelegate { showMessage(message, position: .center) } - public func getMessageView(_ message: Message) -> GistView { - let messageManager = createMessageManager(siteId: siteId, message: message) - return messageManager.getMessageView() - } - public func dismissMessage(instanceId: String? = nil, completionHandler: (() -> Void)? = nil) { if let id = instanceId, let messageManager = messageManager(instanceId: id) { messageManager.removePersistentMessage() @@ -144,18 +141,18 @@ public class Gist: GistInstance, GistDelegate { // Message Manager - private func createMessageManager(siteId: String, message: Message) -> MessageManager { - let messageManager = MessageManager(siteId: siteId, message: message) + private func createMessageManager(siteId: String, message: Message) -> ModalMessageManager { + let messageManager = ModalMessageManager(siteId: siteId, message: message) messageManager.delegate = self messageManagers.append(messageManager) return messageManager } - private func getModalMessageManager() -> MessageManager? { - messageManagers.first(where: { !$0.isMessageEmbed }) + private func getModalMessageManager() -> ModalMessageManager? { + messageManagers.first } - func messageManager(instanceId: String) -> MessageManager? { + func messageManager(instanceId: String) -> ModalMessageManager? { messageManagers.first(where: { $0.currentMessage.instanceId == instanceId }) } diff --git a/Sources/MessagingInApp/Gist/Managers/InlineMessageManager.swift b/Sources/MessagingInApp/Gist/Managers/InlineMessageManager.swift new file mode 100644 index 000000000..552647189 --- /dev/null +++ b/Sources/MessagingInApp/Gist/Managers/InlineMessageManager.swift @@ -0,0 +1,53 @@ +import Foundation + +// Callbacks specific to inline message events. +protocol InlineMessageManagerDelegate: AnyObject { + func sizeChanged(width: CGFloat, height: CGFloat) +} + +/** + Class that implements the business logic for a inline message being displayed. Handle when action buttons are clicked, render the HTML message, and get callbacks for inline message events. + + Usage: + ``` + let inlineMessageManager = InlineMessageManager(siteId: "", message: message) + inlineMessageManager.inlineMessageDelegate = self // Get callbacks for inline message events. + inlineMessageManager.inlineMessageView // View that displays the in-app web message + ``` + */ +class InlineMessageManager: MessageManager { + var inlineMessageView: GistView? { + let view = super.gistView + view?.delegate = self + return view + } + + weak var inlineMessageDelegate: InlineMessageManagerDelegate? + + override func onReplaceMessage(newMessageToShow: Message) { + // Not yet implemented. Planned in future update. + } + + override func onDoneLoadingMessage(routeLoaded: String, onComplete: @escaping () -> Void) { + // The Inline View is responsible for making the in-app message visible in the UI. No logic needed in the manager. + onComplete() + } + + override func onDeepLinkOpened() { + // Do not do anything. Continue showing the in-app message. + } + + override func onCloseAction() { + // Not yet implemented. Planned in future update. + } +} + +extension InlineMessageManager: GistViewDelegate { + func sizeChanged(message: Message, width: CGFloat, height: CGFloat) { + inlineMessageDelegate?.sizeChanged(width: width, height: height) + } + + func action(message: Message, currentRoute: String, action: String, name: String) { + // Action button handling is processed by the superclass. Ignore this callback and instead use one of the superclass event callback functions. + } +} diff --git a/Sources/MessagingInApp/Gist/Managers/MessageManager.swift b/Sources/MessagingInApp/Gist/Managers/MessageManager.swift index 9de96ca75..156d740b0 100644 --- a/Sources/MessagingInApp/Gist/Managers/MessageManager.swift +++ b/Sources/MessagingInApp/Gist/Managers/MessageManager.swift @@ -5,13 +5,18 @@ public enum GistMessageActions: String { case close = "gist://close" } -class MessageManager: EngineWebDelegate { +/** + Handles business logic for in-app message events such as loading messages and handling when action buttons are clicked. + + This class is meant to be extended and not constructed directly. It holds the common logic between all in-app message types. + + Usage: + * Extend class. + * Override any of the abstract functions in class to implement custom logic for when certain events happen. Depending on the type of message you are displaying, you may want to handle events differently. + */ +class MessageManager { private var engine: EngineWeb? private let siteId: String - private var messagePosition: MessagePosition = .top - private var messageLoaded = false - private var modalViewManager: ModalViewManager? - var isMessageEmbed = false let currentMessage: Message var gistView: GistView! private var currentRoute: String @@ -32,51 +37,49 @@ class MessageManager: EngineWebDelegate { properties: message.toEngineRoute().properties ) + // When EngineWeb instance is constructed, it will begin the rendering process for the in-app message. + // This means that the message begins the process of loading. + // Start a timer that helps us determine how long a message took to load/render. + elapsedTimer.start(title: "Loading message with id: \(currentMessage.messageId)") self.engine = EngineWeb(configuration: engineWebConfiguration) + if let engine = engine { engine.delegate = self self.gistView = GistView(message: currentMessage, engineView: engine.view) } } - func showMessage(position: MessagePosition) { - elapsedTimer.start(title: "Displaying modal for message: \(currentMessage.messageId)") - messagePosition = position + deinit { + engine?.cleanEngineWeb() + engine = nil } - func getMessageView() -> GistView { - isMessageEmbed = true - return gistView + // MARK: event listeners that subclasses override to handle events. + + // Called when close action button pressed. + func onCloseAction() { + // Expect subclass implements this. } - private func loadModalMessage() { - if messageLoaded { - modalViewManager = ModalViewManager(gistView: gistView, position: messagePosition) - modalViewManager?.showModalView { [weak self] in - guard let self = self else { return } - self.delegate?.messageShown(message: self.currentMessage) - self.elapsedTimer.end() - } - } + // Called when a deep link action button was clicked in a message and the SDK opened the deep link. + func onDeepLinkOpened() { + // expect subclass implements this. } - func dismissMessage(completionHandler: (() -> Void)? = nil) { - if let modalViewManager = modalViewManager { - modalViewManager.dismissModalView { [weak self] in - guard let self = self else { return } - self.delegate?.messageDismissed(message: self.currentMessage) - completionHandler?() - } - } + // Called when the message has finished loading and the WebView is ready to display the message. + func onDoneLoadingMessage(routeLoaded: String, onComplete: @escaping () -> Void) { + // expect subclass implements this. } - func removePersistentMessage() { - if currentMessage.gistProperties.persistent == true { - Logger.instance.debug(message: "Persistent message dismissed, logging view") - Gist.shared.logMessageView(message: currentMessage) - } + // Called when an action button is clicked and the action is to show a different in-app message. + func onReplaceMessage(newMessageToShow: Message) { + // subclass should implement } +} +// The main logic of this class is being the delegate for the EngineWeb instance. +// This class's delegate responsibilities are to run the logic that's common to all types of in-app messages and call the event listeners that subclasses override. +extension MessageManager: EngineWebDelegate { func bootstrapped() { Logger.instance.debug(message: "Bourbon Engine bootstrapped") @@ -86,7 +89,6 @@ class MessageManager: EngineWebDelegate { } } - // swiftlint:disable cyclomatic_complexity func tap(name: String, action: String, system: Bool) { Logger.instance.info(message: "Action triggered: \(action) with name: \(name)") delegate?.action(message: currentMessage, currentRoute: currentRoute, action: action, name: name) @@ -96,8 +98,7 @@ class MessageManager: EngineWebDelegate { switch url.host { case "close": Logger.instance.info(message: "Dismissing from action: \(action)") - removePersistentMessage() - dismissMessage() + onCloseAction() case "loadPage": if let page = url.queryParameters?["url"], let pageUrl = URL(string: page), @@ -105,13 +106,7 @@ class MessageManager: EngineWebDelegate { UIApplication.shared.open(pageUrl) } case "showMessage": - if currentMessage.isEmbedded { - showNewMessage(url: url) - } else { - dismissMessage { - self.showNewMessage(url: url) - } - } + showNewMessage(url: url) default: break } } else { @@ -140,24 +135,22 @@ class MessageManager: EngineWebDelegate { UIApplication.shared.open(url) { handled in if handled { Logger.instance.info(message: "Dismissing from system action: \(action)") - self.dismissMessage() + self.onDeepLinkOpened() } else { Logger.instance.info(message: "System action not handled") } } } else { Logger.instance.info(message: "Handled by NSUserActivity") - dismissMessage() + onDeepLinkOpened() } } } } } - // swiftlint:enable cyclomatic_complexity - - // Check if - func continueNSUserActivity(webpageURL: URL) -> Bool { + // Check if deep link can be handled in the host app. By using NSUserActivity, our SDK can handle Universal Links. + private func continueNSUserActivity(webpageURL: URL) -> Bool { guard #available(iOS 10.0, *) else { return false } @@ -174,7 +167,7 @@ class MessageManager: EngineWebDelegate { } // The NSUserActivity.webpageURL property permits only specific URL schemes. This function exists to validate the scheme and prevent potential exceptions due to incompatible URL formats. - func isLinkValidNSUserActivityLink(_ url: URL) -> Bool { + private func isLinkValidNSUserActivityLink(_ url: URL) -> Bool { guard let schemeOfUrl = url.scheme else { return false } @@ -206,25 +199,12 @@ class MessageManager: EngineWebDelegate { func routeLoaded(route: String) { Logger.instance.info(message: "Message loaded with route: \(route)") - currentRoute = route - if route == currentMessage.messageId, !messageLoaded { - messageLoaded = true - if isMessageEmbed { - delegate?.messageShown(message: currentMessage) - } else { - if UIApplication.shared.applicationState == .active { - loadModalMessage() - } else { - Gist.shared.removeMessageManager(instanceId: currentMessage.instanceId) - } - } - } - } - deinit { - engine?.cleanEngineWeb() - engine = nil + onDoneLoadingMessage(routeLoaded: currentRoute) { + self.delegate?.messageShown(message: self.currentMessage) + self.elapsedTimer.end() + } } private func showNewMessage(url: URL) { @@ -236,9 +216,8 @@ class MessageManager: EngineWebDelegate { let convertedProps = convertToDictionary(text: decodedString) { properties = convertedProps } - if let messageId = url.queryParameters?["messageId"] { - _ = Gist.shared.showMessage(Message(messageId: messageId, properties: properties)) + onReplaceMessage(newMessageToShow: Message(messageId: messageId, properties: properties)) } } diff --git a/Sources/MessagingInApp/Gist/Managers/ModalMessageManager.swift b/Sources/MessagingInApp/Gist/Managers/ModalMessageManager.swift new file mode 100644 index 000000000..d8333ebfc --- /dev/null +++ b/Sources/MessagingInApp/Gist/Managers/ModalMessageManager.swift @@ -0,0 +1,62 @@ +import Foundation +import UIKit + +/** + Class that implements the business logic for a modal message being displayed. Handle when action buttons are clicked, render the HTML message, and get callbacks for modal message events. + */ +class ModalMessageManager: MessageManager { + private var messageLoaded = false + private var modalViewManager: ModalViewManager? + var messagePosition: MessagePosition = .top + + func showMessage(position: MessagePosition) { + messagePosition = position + } + + override func onDoneLoadingMessage(routeLoaded: String, onComplete: @escaping () -> Void) { + if routeLoaded == currentMessage.messageId, !messageLoaded { + messageLoaded = true + + if UIApplication.shared.applicationState == .active { + modalViewManager = ModalViewManager(gistView: gistView, position: messagePosition) + modalViewManager?.showModalView { + onComplete() + } + } else { + Gist.shared.removeMessageManager(instanceId: currentMessage.instanceId) + } + } + } + + override func onDeepLinkOpened() { + dismissMessage() + } + + override func onCloseAction() { + removePersistentMessage() + dismissMessage() + } + + func removePersistentMessage() { + if currentMessage.gistProperties.persistent == true { + Logger.instance.debug(message: "Persistent message dismissed, logging view") + Gist.shared.logMessageView(message: currentMessage) + } + } + + func dismissMessage(completionHandler: (() -> Void)? = nil) { + if let modalViewManager = modalViewManager { + modalViewManager.dismissModalView { [weak self] in + guard let self = self else { return } + self.delegate?.messageDismissed(message: self.currentMessage) + completionHandler?() + } + } + } + + override func onReplaceMessage(newMessageToShow: Message) { + dismissMessage { + _ = Gist.shared.showMessage(newMessageToShow) + } + } +} diff --git a/Sources/MessagingInApp/Gist/Managers/Models/Message.swift b/Sources/MessagingInApp/Gist/Managers/Models/Message.swift index c05cb8602..0d4f5b401 100644 --- a/Sources/MessagingInApp/Gist/Managers/Models/Message.swift +++ b/Sources/MessagingInApp/Gist/Managers/Models/Message.swift @@ -25,10 +25,6 @@ public class Message { var properties = [String: Any]() - public var isEmbedded: Bool { - Gist.shared.messageManager(instanceId: instanceId)?.isMessageEmbed ?? false - } - public init(messageId: String) { self.queueId = nil self.priority = nil diff --git a/Sources/MessagingInApp/Views/InAppMessageView.swift b/Sources/MessagingInApp/Views/InAppMessageView.swift index a98a169ab..324702b85 100644 --- a/Sources/MessagingInApp/Views/InAppMessageView.swift +++ b/Sources/MessagingInApp/Views/InAppMessageView.swift @@ -23,6 +23,10 @@ public class InAppMessageView: UIView { DIGraphShared.shared.messageQueueManager } + private var gist: GistInstance { + DIGraphShared.shared.gist + } + // Can set in the constructor or can set later (like if you use Storyboards) public var elementId: String? { didSet { @@ -30,6 +34,8 @@ public class InAppMessageView: UIView { } } + private var inlineMessageManager: InlineMessageManager? + public init(elementId: String) { super.init(frame: .zero) self.elementId = elementId @@ -63,6 +69,32 @@ public class InAppMessageView: UIView { return // no messages to display, exit early. In the future we will dismiss the View. } - // next, display the message + displayInAppMessage(messageToDisplay) + } + + private func displayInAppMessage(_ message: Message) { + guard inlineMessageManager == nil else { + // We are already displaying a messsage. In the future, we are planning on swapping the web content if there is another message in the local queue to display + // and an inline message is dismissed. Until we add this feature, exit early. + return + } + + // Create a new manager for this new message to display and then display the manager's WebView. + let newInlineMessageManager = InlineMessageManager(siteId: gist.siteId, message: message) + newInlineMessageManager.inlineMessageDelegate = self + + guard let inlineView = newInlineMessageManager.inlineMessageView else { + return // we dont expect this to happen, but better to handle it gracefully instead of force unwrapping + } + addSubview(inlineView) + + inlineMessageManager = newInlineMessageManager + } +} + +extension InAppMessageView: InlineMessageManagerDelegate { + // This function is called by WebView when the content's size changes. + public func sizeChanged(width: CGFloat, height: CGFloat) { + // In a future commit, we will change the height of the View to display the web content. } } diff --git a/Sources/MessagingInApp/autogenerated/AutoMockable.generated.swift b/Sources/MessagingInApp/autogenerated/AutoMockable.generated.swift index 4369abbfd..4b68305a6 100644 --- a/Sources/MessagingInApp/autogenerated/AutoMockable.generated.swift +++ b/Sources/MessagingInApp/autogenerated/AutoMockable.generated.swift @@ -95,7 +95,45 @@ class GistInstanceMock: GistInstance, Mock { Mocks.shared.add(mock: self) } + /** + When setter of the property called, the value given to setter is set here. + When the getter of the property called, the value set here will be returned. Your chance to mock the property. + */ + var underlyingSiteId: String! + /// `true` if the getter or setter of property is called at least once. + var siteIdCalled: Bool { + siteIdGetCalled || siteIdSetCalled + } + + /// `true` if the getter called on the property at least once. + var siteIdGetCalled: Bool { + siteIdGetCallsCount > 0 + } + + var siteIdGetCallsCount = 0 + /// `true` if the setter called on the property at least once. + var siteIdSetCalled: Bool { + siteIdSetCallsCount > 0 + } + + var siteIdSetCallsCount = 0 + /// The mocked property with a getter and setter. + var siteId: String { + get { + mockCalled = true + siteIdGetCallsCount += 1 + return underlyingSiteId + } + set(value) { + mockCalled = true + siteIdSetCallsCount += 1 + underlyingSiteId = value + } + } + public func resetMock() { + siteIdGetCallsCount = 0 + siteIdSetCallsCount = 0 showMessageCallsCount = 0 showMessageReceivedArguments = nil showMessageReceivedInvocations = [] @@ -500,10 +538,8 @@ class MessageQueueManagerMock: MessageQueueManager, Mock { intervalGetCallsCount = 0 intervalSetCallsCount = 0 setupCallsCount = 0 - - mockCalled = false // do last as resetting properties above can make this true - setupSkipQueueCheckReceivedArguments = nil - setupSkipQueueCheckReceivedInvocations = [] + setupReceivedArguments = nil + setupReceivedInvocations = [] mockCalled = false // do last as resetting properties above can make this true fetchUserMessagesFromLocalStoreCallsCount = 0 @@ -533,36 +569,22 @@ class MessageQueueManagerMock: MessageQueueManager, Mock { setupCallsCount > 0 } - /** - Set closure to get called when function gets called. Great way to test logic or return a value for the function. - */ - var setupClosure: (() -> Void)? - - /// Mocked function for `setup()`. Your opportunity to return a mocked value and check result of mock in test code. - func setup() { - mockCalled = true - setupCallsCount += 1 - setupClosure?() - } - - // MARK: - setup - /// The arguments from the *last* time the function was called. - @Atomic private(set) var setupSkipQueueCheckReceivedArguments: Bool? + @Atomic private(set) var setupReceivedArguments: Bool? /// Arguments from *all* of the times that the function was called. - @Atomic private(set) var setupSkipQueueCheckReceivedInvocations: [Bool] = [] + @Atomic private(set) var setupReceivedInvocations: [Bool] = [] /** Set closure to get called when function gets called. Great way to test logic or return a value for the function. */ - var setupSkipQueueCheckClosure: ((Bool) -> Void)? + var setupClosure: ((Bool) -> Void)? /// Mocked function for `setup(skipQueueCheck: Bool)`. Your opportunity to return a mocked value and check result of mock in test code. func setup(skipQueueCheck: Bool) { mockCalled = true setupCallsCount += 1 - setupSkipQueueCheckReceivedArguments = skipQueueCheck - setupSkipQueueCheckReceivedInvocations.append(skipQueueCheck) - setupSkipQueueCheckClosure?(skipQueueCheck) + setupReceivedArguments = skipQueueCheck + setupReceivedInvocations.append(skipQueueCheck) + setupClosure?(skipQueueCheck) } // MARK: - fetchUserMessagesFromLocalStore diff --git a/Tests/MessagingInApp/Views/InAppMessageViewTest.swift b/Tests/MessagingInApp/Views/InAppMessageViewTest.swift index 5887e5a2b..98297f5aa 100644 --- a/Tests/MessagingInApp/Views/InAppMessageViewTest.swift +++ b/Tests/MessagingInApp/Views/InAppMessageViewTest.swift @@ -43,4 +43,37 @@ class InAppMessageViewTest: UnitTest { let actualElementId = queueMock.getInlineMessagesReceivedArguments XCTAssertEqual(actualElementId, givenElementId) } + + // MARK: Display in-app message + + func test_displayInAppMessage_givenNoMessageAvailable_expectDoNotDisplayAMessage() { + queueMock.getInlineMessagesReturnValue = [] + + let inlineView = InAppMessageView(elementId: .random) + + XCTAssertNil(getInAppMessageWebView(fromInlineView: inlineView)) + } + + func test_displayInAppMessage_givenMessageAvailable_expectDisplayMessage() { + let givenInlineMessage = Message.randomInline + queueMock.getInlineMessagesReturnValue = [givenInlineMessage] + + let inlineView = InAppMessageView(elementId: givenInlineMessage.elementId!) + + XCTAssertNotNil(getInAppMessageWebView(fromInlineView: inlineView)) + } +} + +extension InAppMessageViewTest { + func getInAppMessageWebView(fromInlineView view: InAppMessageView) -> GistView? { + let gistViews: [GistView] = view.subviews.map { $0 as? GistView }.mapNonNil() + + if gistViews.isEmpty { + return nil + } + + XCTAssertEqual(gistViews.count, 1) + + return gistViews.first + } }