Content card UI for iOS

gatsby-config.js

@@ -254,6 +254,98 @@ module.exports = {
                                     }
                                 ]
                             },
+                            {
+                                title: "Content cards with UI",
+                                path: "/edge/adobe-journey-optimizer/content-card-ui/iOS",
+                                pages: [
+                                    {
+                                        title: "iOS",
+                                        path: "/edge/adobe-journey-optimizer/content-card-ui/iOS",
+                                        pages: [
+                                            {
+                                                title: "API Reference",
+                                                path: "/edge/adobe-journey-optimizer/content-card-ui/iOS/api-usage.md"
+                                            },
+                                            {
+                                                title: "Public Classes and Protocol",
+                                                path: "/edge/adobe-journey-optimizer/content-card-ui/iOS/public-classes/contentcardui",
+                                                pages: [
+                                                    {
+                                                        title: "ContentCardUI",
+                                                        path: "/edge/adobe-journey-optimizer/content-card-ui/iOS/public-classes/contentcardui",
+                                                    },
+                                                    {
+                                                        title: "ContenCardCustomizing",
+                                                        path: "/edge/adobe-journey-optimizer/content-card-ui/iOS/public-classes/contentcardcustomizing",
+                                                    },
+                                                    {
+                                                        title: "ContentCardUIEventListening",
+                                                        path: "/edge/adobe-journey-optimizer/content-card-ui/iOS/public-classes/contentcarduieventlistening",
+                                                    },
+                                                    {
+                                                        title: "ContentCardTemplateType",
+                                                        path: "/edge/adobe-journey-optimizer/content-card-ui/iOS/public-classes/contentcardtemplatetype",
+                                                    }
+                                                ]
+                                            },
+                                            {
+                                                title: "Templates",
+                                                path: "/edge/adobe-journey-optimizer/content-card-ui/iOS/templates/smallimage-template",
+                                                pages: [
+                                                    {
+                                                        title: "Small Image",
+                                                        path: "/edge/adobe-journey-optimizer/content-card-ui/iOS/templates/smallimage-template",
+                                                    }
+                                                ]
+                                            },
+                                            {
+                                                title: "UIElements",
+                                                path: "/edge/adobe-journey-optimizer/content-card-ui/iOS/ui-elements/",
+                                                pages: [
+                                                    {
+                                                        title: "AEPText",
+                                                        path: "/edge/adobe-journey-optimizer/content-card-ui/iOS/ui-elements/aeptext"
+                                                    },
+                                                    {
+                                                        title: "AEPButton",
+                                                        path: "/edge/adobe-journey-optimizer/content-card-ui/iOS/ui-elements/aepbutton"
+                                                    },
+                                                    {
+                                                        title: "AEPImage",
+                                                        path: "/edge/adobe-journey-optimizer/content-card-ui/iOS/ui-elements/aepimage"
+                                                    },
+                                                    {
+                                                        title: "AEPStack",
+                                                        path: "/edge/adobe-journey-optimizer/content-card-ui/iOS/ui-elements/aepstack"
+                                                    },
+                                                    {
+                                                        title: "AEPDismissButton",
+                                                        path: "/edge/adobe-journey-optimizer/content-card-ui/iOS/ui-elements/aepdismissbutton"
+                                                    }
+                                                ]
+                                            },
+                                            {
+                                                title: "Tutorials",
+                                                path: "/edge/adobe-journey-optimizer/content-card-ui/iOS/tutorial/displaying-content-cards",
+                                                pages: [
+                                                    {
+                                                        title: "Fetch and Display Content Cards",
+                                                        path: "/edge/adobe-journey-optimizer/content-card-ui/iOS/tutorial/displaying-content-cards",
+                                                    },
+                                                    {
+                                                        title: "Customizing Content Cards",
+                                                        path: "/edge/adobe-journey-optimizer/content-card-ui/iOS/tutorial/customizing-content-card-templates",
+                                                    },
+                                                    {
+                                                        title: "Listening to Content Card Events",
+                                                        path: "/edge/adobe-journey-optimizer/content-card-ui/iOS/tutorial/listening-content-card-events",
+                                                    }
+                                                ]
+                                            }
+                                        ]                                        
+                                    }
+                                ]
+                            },
                             {
                                 title: "Code-based Experiences & Content Cards",
                                 path: "/edge/adobe-journey-optimizer/code-based",

src/pages/edge/adobe-journey-optimizer/content-card-ui/iOS/api-usage.md

@@ -0,0 +1,69 @@
+---
+title: Content Card UI API Usage
+description: Learn how to use the Messaging extension APIs to implement content card with UI.
+keywords:
+- Adobe Journey Optimizer
+- Guide
+- Content Card
+- Messaging
+- Customizing UI
+- Card Templates
+- Content Card Templates
+- Small Image Template
+---
+
+# API Reference
+
+This document lists the public APIs available in the Messaging extension for implementing content card with UI.
+
+## getContentCardsUI
+
+The `getContentCardsUI` method retrieves an array of [ContentCardUI](./public-classes/contentcardui.md) objects for the provided surface. These ContentCardUI objects provide the user interface for templated content cards to your application.
+
+#### Parameters:
+
+* _surface_ - The [Surface](../../public-classes/surface.md) for which the content cards should be retrieved.
+* _customizer_ - An optional [ContentCardCustomizing](./public-classes/contentcardcustomizing.md) object to customize the appearance of the content card template. If you do not need to customize the appearance of the content card template, this parameter can be omitted.
+* _listener_ - An optional [ContentCardUIEventListening](./public-classes/contentcarduieventlistening.md) object to listen to UI events from the content card. If you do not need to listen to UI events from the content card, this parameter can be omitted.
+* _completion_ - A completion handler that is called with a `Result` containing either:
+    * _success_ - An array of [ContentCardUI](./public-classes/contentcardui.md) objects representing the content cards to be displayed.
+    * _failure_ - An `Error` object indicating the reason for the failure, if any.
+
+<InlineAlert variant="info" slots="text"/>
+
+Calling this API will not download content cards from Adobe Journey Optimizer; it will only retrieve the content cards that are already downloaded and cached by the Messaging extension. You **must** call [`updatePropositionsForSurfaces`](../../code-based/api-reference.md#updatepropositionsforsurfaces) API with the desired surfaces prior to calling this API.
+
+#### Syntax
+
+<CodeBlock slots="heading, code" repeat="1" languages="Swift" />
+
+#### Swift
+
+```swift
+public static func getContentCardsUI(for surface: Surface,
+                                     customizer: ContentCardCustomizing? = nil,
+                                     listener: ContentCardUIEventListening? = nil,
+                                     _ completion: @escaping (Result<[ContentCardUI], Error>) -> Void)
+```
+
+#### Example
+
+<CodeBlock slots="heading, code" repeat="1" languages="Swift" />
+
+#### Swift
+
+```swift
+// Download the content cards for homepage surface using Messaging extension
+let homePageSurface = Surface(path: "homepage")
+Messaging.updatePropositionsForSurfaces([homePageSurface])
+
+// Get the content card UI for the homepage surface
+Messaging.getContentCardsUI(for: homePageSurface) { result in
+    switch result {
+    case .success(let contentCards):
+        // Use the contentCards array to display UI for templated content cards in your application
+    case .failure(let error):
+        // Handle the error
+    }
+}
+```

src/pages/edge/adobe-journey-optimizer/content-card-ui/iOS/index.md

@@ -0,0 +1,48 @@
+---
+title: Content Card UI 
+description: This document guides you to integrating content card.
+keywords:
+- Adobe Journey Optimizer
+- Guide
+- Messaging
+- Tutorial
+- Content Card
+- UI
+---
+
+# Content Card UI
+
+## Requirements
+
+* iOS 15 (or newer)
+* Xcode 15 (or newer)
+* Swift 5.1 (or newer)
+
+## API Reference
+
+* [Content Card API's](./api-usage.md)
+
+## Public Classes, Enums, and Protocols
+
+* [Class - ContentCardUI](./public-classes/contentcardui.md)
+* [Protocol - ContentCardCustomizing](./public-classes/contentcardcustomizing.md)
+* [Protocol - ContentCardUIEventListening](./public-classes/contentcarduieventlistening.md)
+* [Enum - ContentCardTemplateType](./public-classes/contentcardtemplatetype.md)
+
+## Templates
+
+* [SmallImageTemplate](./templates/smallimage-template.md)
+
+## UI Elements
+
+* [AEPText](./ui-elements/aeptext.md)
+* [AEPButton](./ui-elements/aepbutton.md)
+* [AEPImage](./ui-elements/aepimage.md)
+* [AEPStack](./ui-elements/aepstack.md)
+* [AEPDismissButton](./ui-elements/aepdismissbutton.md)
+
+## Tutorials
+
+* [Fetch and Display Content Cards](./tutorial/displaying-content-cards.md)
+* [Customizing Content Card Templates](./tutorial/customizing-content-card-templates.md)
+* [Listening to Content Card Events](./tutorial/listening-content-card-events.md)

src/pages/edge/adobe-journey-optimizer/content-card-ui/iOS/public-classes/contentcardcustomizing.md

@@ -0,0 +1,49 @@
+---
+title: ContentCardCustomizing
+description: A protocol to be implemented for customizing content cards based on the template type.
+keywords:
+- Adobe Journey Optimizer
+- Guide
+- Content Card
+- Messaging
+- Tutorial
+- Customizing UI
+- UI
+- Card Templates
+---
+
+# ContentCardCustomizing
+
+Protocol defining methodology for customizing content cards based on the template type.
+
+## Protocol Definition
+
+<CodeBlock slots="heading, code" repeat="1" languages="Swift" />
+
+#### Swift
+
+```swift
+protocol ContentCardCustomizing {
+    func customize(template: SmallImageTemplate)
+}
+```
+
+## Methods
+
+### customize
+
+Customize content cards with [SmallImageTemplate](../PublicClasses/Template/smallimage-template.md).
+
+#### Parameters
+
+* _template_ - The `SmallImageTemplate` instance to be customized.
+
+#### Syntax
+
+<CodeBlock slots="heading, code" repeat="1" languages="Swift" />
+
+#### Swift
+
+``` swift
+func customize(template: SmallImageTemplate)
+```

src/pages/edge/adobe-journey-optimizer/content-card-ui/iOS/public-classes/contentcardtemplatetype.md

@@ -0,0 +1,25 @@
+---
+title: ContentCardTemplateType
+description: An enum representing the different types of content card templates supported by the Messaging extension.
+keywords:
+- Adobe Journey Optimizer
+- Guide
+- Content Card
+- Messaging
+- ContentCardTemplateType
+- UI
+- Card Templates
+---
+
+# ContentCardTemplateType
+
+An enumeration of the different types of content card templates supported by the AEPSwiftUI framework.
+
+Each case corresponds to a specific template type, identified by its JSON string value.
+
+## Enumeration Cases
+
+| Case         | Raw Value      | Description                                                                 |
+| ------------ | -------------- | --------------------------------------------------------------------------- |
+| smallImage   | `SmallImage`   | Represents [SmallImageTemplate](../PublicClasses/Template/smallimage-template.md).                            |
+| unknown      | `Unknown`      | Represents an unknown template type, used as a fallback when a string does not match any known template types. |

src/pages/edge/adobe-journey-optimizer/content-card-ui/iOS/public-classes/contentcardui.md

@@ -0,0 +1,23 @@
+---
+title: ContentCardUI
+description: Class representing a content card and providing a SwiftUI view representation of that content.
+keywords:
+- Adobe Journey Optimizer
+- Content Card
+- Messaging
+- ContentCardTemplateType
+- UI
+- Card Templates
+- ContentCardUI
+---
+
+# ContentCardUI
+
+The ContentCardUI class is responsible for holding data for a content card and providing a SwiftUI view representation of that content.
+
+## Public Properties
+
+| Property | Type | Description |
+| --- | --- | --- |
+| view | [View](https://developer.apple.com/documentation/swiftui/view) | The SwiftUI view representing the content card. |
+| meta | [String: Any] | The metadata associated with the content card. |