From 5690ab7860ddebb9d7a70d82cbbb3968b0aeff53 Mon Sep 17 00:00:00 2001 From: Yansong Yang Date: Tue, 29 Jul 2025 11:42:01 -0500 Subject: [PATCH 1/5] Content card (#4) add content card support to RN --- .cursorignore | 1 + apps/AEPSampleAppNewArchEnabled/app.json | 6 +- .../app/ContentCardView.tsx | 973 +++++ .../app/MessagingView.tsx | 86 +- .../app/_layout.tsx | 87 +- apps/AEPSampleAppNewArchEnabled/app/index.tsx | 29 +- apps/AEPSampleAppNewArchEnabled/package.json | 1 + jest.config.js | 2 +- packages/authoring-ui/README.md | 11 + .../__tests__/convertImageOnlyContent.test.ts | 336 ++ .../convertLargeImageContent.test.ts | 395 ++ .../convertSmallImageContent.test.ts | 328 ++ .../__ui_tests__/ContentView.test.tsx | 448 +++ packages/authoring-ui/__ui_tests__/setup.ts | 33 + packages/authoring-ui/jest.config.js | 28 + packages/authoring-ui/package.json | 53 + packages/authoring-ui/src/ImageOnlyCard.tsx | 36 + packages/authoring-ui/src/ImageOnlyTypes.ts | 31 + packages/authoring-ui/src/LargeImageCard.tsx | 39 + packages/authoring-ui/src/LargeImageTypes.ts | 53 + packages/authoring-ui/src/SmallImageCard.tsx | 44 + packages/authoring-ui/src/SmallImageTypes.ts | 56 + packages/authoring-ui/src/common/Component.ts | 51 + .../authoring-ui/src/common/ContentView.tsx | 368 ++ .../src/common/ContentViewEvent.ts | 23 + packages/authoring-ui/src/common/Theme.ts | 39 + .../authoring-ui/src/common/ThemeProvider.tsx | 123 + .../src/convertImageOnlyContent.ts | 109 + .../src/convertLargeImageContent.ts | 182 + .../src/convertSmallImageContent.ts | 193 + packages/authoring-ui/src/index.ts | 21 + packages/authoring-ui/tsconfig.json | 39 + packages/messaging/README.md | 34 +- .../ContentCardMappingManagerTests.ts | 504 +++ .../__tests__/ContentProviderTests.ts | 325 ++ packages/messaging/package.json | 2 + .../src/ContentCardMappingManager.ts | 104 + packages/messaging/src/ContentProvider.ts | 91 + packages/messaging/src/ContentView.tsx | 123 + packages/messaging/src/index.ts | 5 + yarn.lock | 3443 +++++++++-------- 41 files changed, 7059 insertions(+), 1796 deletions(-) create mode 100644 .cursorignore create mode 100644 apps/AEPSampleAppNewArchEnabled/app/ContentCardView.tsx create mode 100644 packages/authoring-ui/README.md create mode 100644 packages/authoring-ui/__tests__/convertImageOnlyContent.test.ts create mode 100644 packages/authoring-ui/__tests__/convertLargeImageContent.test.ts create mode 100644 packages/authoring-ui/__tests__/convertSmallImageContent.test.ts create mode 100644 packages/authoring-ui/__ui_tests__/ContentView.test.tsx create mode 100644 packages/authoring-ui/__ui_tests__/setup.ts create mode 100644 packages/authoring-ui/jest.config.js create mode 100644 packages/authoring-ui/package.json create mode 100644 packages/authoring-ui/src/ImageOnlyCard.tsx create mode 100644 packages/authoring-ui/src/ImageOnlyTypes.ts create mode 100644 packages/authoring-ui/src/LargeImageCard.tsx create mode 100644 packages/authoring-ui/src/LargeImageTypes.ts create mode 100644 packages/authoring-ui/src/SmallImageCard.tsx create mode 100644 packages/authoring-ui/src/SmallImageTypes.ts create mode 100644 packages/authoring-ui/src/common/Component.ts create mode 100644 packages/authoring-ui/src/common/ContentView.tsx create mode 100644 packages/authoring-ui/src/common/ContentViewEvent.ts create mode 100644 packages/authoring-ui/src/common/Theme.ts create mode 100644 packages/authoring-ui/src/common/ThemeProvider.tsx create mode 100644 packages/authoring-ui/src/convertImageOnlyContent.ts create mode 100644 packages/authoring-ui/src/convertLargeImageContent.ts create mode 100644 packages/authoring-ui/src/convertSmallImageContent.ts create mode 100644 packages/authoring-ui/src/index.ts create mode 100644 packages/authoring-ui/tsconfig.json create mode 100644 packages/messaging/__tests__/ContentCardMappingManagerTests.ts create mode 100644 packages/messaging/__tests__/ContentProviderTests.ts create mode 100644 packages/messaging/src/ContentCardMappingManager.ts create mode 100644 packages/messaging/src/ContentProvider.ts create mode 100644 packages/messaging/src/ContentView.tsx diff --git a/.cursorignore b/.cursorignore new file mode 100644 index 000000000..0dda499a5 --- /dev/null +++ b/.cursorignore @@ -0,0 +1 @@ +apps/AEPSampleApp \ No newline at end of file diff --git a/apps/AEPSampleAppNewArchEnabled/app.json b/apps/AEPSampleAppNewArchEnabled/app.json index 94ea742e7..dbd61862f 100644 --- a/apps/AEPSampleAppNewArchEnabled/app.json +++ b/apps/AEPSampleAppNewArchEnabled/app.json @@ -14,14 +14,14 @@ }, "ios": { "supportsTablet": true, - "bundleIdentifier": "com.AEPSampleAppNewArchEnabled" + "bundleIdentifier": "com.adobe.MessagingDemoAppSwiftUI" }, "android": { "adaptiveIcon": { "foregroundImage": "./assets/images/adaptive-icon.png", "backgroundColor": "#ffffff" }, - "package": "com.AEPSampleAppNewArchEnabled" + "package": "com.adobe.marketing.mobile.messagingsample" }, "web": { "bundler": "metro", @@ -34,7 +34,7 @@ "expo-build-properties", { "ios": { - "newArchEnabled": true, + "newArchEnabled": true, "useFrameworks": "static" }, "android": { diff --git a/apps/AEPSampleAppNewArchEnabled/app/ContentCardView.tsx b/apps/AEPSampleAppNewArchEnabled/app/ContentCardView.tsx new file mode 100644 index 000000000..2197b6b5d --- /dev/null +++ b/apps/AEPSampleAppNewArchEnabled/app/ContentCardView.tsx @@ -0,0 +1,973 @@ +/* +Copyright 2025 Adobe. All rights reserved. +This file is licensed to you under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. You may obtain a copy +of the License at http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software distributed under +the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS +OF ANY KIND, either express or implied. See the License for the specific language +governing permissions and limitations under the License. +*/ + +import React, { useState } from "react"; +import { + View, + ScrollView, + TouchableOpacity, + Text, + Modal, + Appearance, + ColorSchemeName, +} from "react-native"; +import { + ContentProvider, + ContentTemplate, + ContentView, +} from "@adobe/react-native-aepmessaging"; +import { useEffect } from "react"; +import { + TemplateType, + ThemeProvider, + Themes, +} from "@adobe/react-native-aepmessaging"; +import { useColorScheme } from "../hooks/useColorScheme"; + +const ContentCardView = () => { + const [content, setContent] = useState(null); + const [selectedView, setSelectedView] = useState("SmallImage"); + const [showPicker, setShowPicker] = useState(false); + const [selectedTheme, setSelectedTheme] = useState("System"); + const colorScheme = useColorScheme(); + + const viewOptions = ["SmallImage", "LargeImage", "ImageOnly"]; + const themeOptions: Array<{ + label: string; + value: ColorSchemeName; + }> = [ + { label: "Light", value: "light" }, + { label: "Dark", value: "dark" }, + { label: "System", value: null }, + ]; + + const handleThemeChange = (theme: string, value: ColorSchemeName) => { + setSelectedTheme(theme); + Appearance.setColorScheme(value); + }; + + const renderStyledText = (text: string) => { + return ( + + {text} + + ); + }; + + useEffect(() => { + // Messaging.updatePropositionsForSurfaces(['someSurface']); + // Note: + // - Call above to update the propositions and cache the content locally + // - Customers may call this function when launching the app + + // const provider = new ContentProvider("card/ms"); + const provider = new ContentProvider("cardstab"); + provider + .getContent() + .then(setContent) + .catch((err) => console.error(err.message)) + .finally(() => console.log("Content loaded")); + }, []); + + return ( + + {/* Theme Switcher */} + + + {themeOptions.map((option) => ( + handleThemeChange(option.label, option.value)} + > + + {option.label} + + + ))} + + + + {/* View Selector */} + + setShowPicker(true)} + > + {selectedView} + + + + + + {viewOptions.map((option) => ( + { + setSelectedView(option); + setShowPicker(false); + }} + > + + {option} + + + ))} + setShowPicker(false)} + > + Cancel + + + + + + + + {selectedView === "SmallImage" && ( + + + {renderStyledText("[Basic] all fields")} + { + console.log("Event triggered:", event, identifier); + }} + /> + {renderStyledText("[dark/light]Custom theme")} + + { + console.log("Event triggered:", event, identifier); + }} + /> + + + {renderStyledText("[dismiss button] NO ")} + + {renderStyledText("[dismiss button] Simple")} + + {renderStyledText("[image] Invalid")} + + {renderStyledText("[dark/light] darkUrl")} + + {renderStyledText("[style]title (2 lines), body (4 lines)")} + { + console.log("Event triggered:", event, identifier); + }} + /> + {renderStyledText("[button] 3")} + + {renderStyledText( + "[style] height (150) title (1 line), body (1 line)" + )} + + + + {renderStyledText("image width (50%)")} + + + + + {renderStyledText( + "No button, image width (40%), title (2 lines), body (6 lines), height (180)" + )} + + + + {renderStyledText("No button, image (right aligned)")} + + + + + + + + )} + + {selectedView === "LargeImage" && ( + + {renderStyledText("[basic] all fields")} + + {renderStyledText("[button] 3")} + + + {renderStyledText("[dismiss button] NO ")} + + + {renderStyledText("[image] Invalid")} + + {renderStyledText("[dark/light] darkUrl")} + + {renderStyledText( + "[style]title (2 lines), body (2 lines), image (1:1)" + )} + { + console.log("Event triggered:", event, identifier); + }} + /> + {renderStyledText("[dark/light]Custom theme")} + + { + console.log("Event triggered:", event, identifier); + }} + /> + + + + + )} + + {selectedView === "ImageOnly" && ( + + {renderStyledText("basic")} + + + )} + + + ); +}; + +export default ContentCardView; + +const SMALL_IMAGE_CONTENT_ALL_FIELDS: ContentTemplate = { + id: "small-image-all-fields", + type: TemplateType.SMALL_IMAGE, + smallImageData: { + image: { + alt: "", + url: "https://cdn-icons-png.flaticon.com/256/3303/3303838.png", + darkUrl: "https://cdn-icons-png.flaticon.com/256/3303/3303838.png", + }, + buttons: [ + { + interactId: "downloadClicked", + actionUrl: "https://nba.com", + id: "5b4d53f5-45bd-4e5c-a5cb-6e650b1993f6", + text: { + content: "Download App", + }, + }, + { + interactId: "OK", + id: "5b4d53f5-45bd-4e5c-a5cb-6e650b1993f6", + text: { + content: "OK", + }, + }, + ], + dismissBtn: { + style: "circle", + }, + actionUrl: "", + body: { + content: + "Get live scores, real-time updates, and exclusive content right at your fingertips.", + }, + title: { + content: "Stay connected to all the action", + }, + }, +}; +const SMALL_IMAGE_CONTENT_NO_DISMISS_BUTTON: ContentTemplate = { + id: "small-image-all-fields", + type: TemplateType.SMALL_IMAGE, + smallImageData: { + image: { + alt: "", + url: "https://cdn-icons-png.flaticon.com/256/3303/3303838.png", + darkUrl: "https://cdn-icons-png.flaticon.com/256/3303/3303838.png", + }, + buttons: [ + { + interactId: "downloadClicked", + actionUrl: "https://nba.com", + id: "5b4d53f5-45bd-4e5c-a5cb-6e650b1993f6", + text: { + content: "Download App", + }, + }, + ], + actionUrl: "", + body: { + content: + "Get live scores, real-time updates, and exclusive content right at your fingertips.", + }, + title: { + content: "Stay connected to all the action", + }, + }, +}; + +const SMALL_IMAGE_CONTENT_DISMISS_BUTTON_SIMPLE: ContentTemplate = { + id: "small-image-dismiss-button-simple", + type: TemplateType.SMALL_IMAGE, + smallImageData: { + image: { + alt: "", + url: "https://cdn-icons-png.flaticon.com/256/3303/3303838.png", + darkUrl: "https://cdn-icons-png.flaticon.com/256/3303/3303838.png", + }, + buttons: [ + { + interactId: "downloadClicked", + actionUrl: "https://nba.com", + id: "5b4d53f5-45bd-4e5c-a5cb-6e650b1993f6", + text: { + content: "Download App", + }, + }, + { + interactId: "OK", + id: "5b4d53f5-45bd-4e5c-a5cb-6e650b1993f6", + text: { + content: "OK", + }, + }, + ], + dismissBtn: { + style: "simple", + }, + actionUrl: "", + body: { + content: + "Get live scores, real-time updates, and exclusive content right at your fingertips.", + }, + title: { + content: "Stay connected to all the action", + }, + }, +}; + +const SMALL_IMAGE_CONTENT_INVALID_IMAGE: ContentTemplate = { + id: "small-image-invalid-image", + type: TemplateType.SMALL_IMAGE, + smallImageData: { + body: { + content: + "Tickets are on sale now! Don’t miss out on securing your seat to witness the high-flying action from the best players in the game", + }, + title: { + content: "Get Ready for the Basketball Season Kickoff!", + }, + buttons: [ + { + interactId: "buy", + id: "5b4d53f5-45bd-4e5c-a5cb-6e650b1993f6", + actionUrl: "https://nba.com", + text: { + content: "Get Season Pass", + }, + }, + ], + actionUrl: "", + dismissBtn: { + style: "circle", + }, + image: { + darkUrl: + "https://static-00.iconduck.com/assets.00/basketball-icon-256x256-vydm63md.png", + alt: "", + url: "https://static-00.iconduck.com/assets.00/basketball-icon-256x256-vydm63md.png", + }, + }, +}; + +const SMALL_IMAGE_CONTENT_IMAGE_DARK_URL: ContentTemplate = { + id: "small-image-invalid-image", + type: TemplateType.SMALL_IMAGE, + smallImageData: { + body: { + content: + "🎟️ Tickets are on sale now! Don’t miss out on securing your seat to witness the high-flying action from the best players in the game", + }, + title: { + content: "Get Ready for the Basketball Season Kickoff!", + }, + buttons: [ + { + interactId: "buy", + id: "5b4d53f5-45bd-4e5c-a5cb-6e650b1993f6", + actionUrl: "https://nba.com", + text: { + content: "Get Season Pass", + }, + }, + ], + actionUrl: "", + dismissBtn: { + style: "circle", + }, + image: { + darkUrl: + "https://hips.hearstapps.com/hmg-prod/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg?crop=0.760xw:1.00xh;0.204xw,0&resize=980:*", + alt: "", + url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRT8gAa1wUx9Ox2M6cZNwUJe32xE-l_4oqPVA&s", + }, + }, +}; +const SMALL_IMAGE_CONTENT_3_BUTTONS: ContentTemplate = { + id: "small-image-invalid-image", + type: TemplateType.SMALL_IMAGE, + smallImageData: { + body: { + content: + "Tickets are on sale now! Don’t miss out on securing your seat to witness the high-flying action from the best players in the game", + }, + title: { + content: "Get Ready for the Basketball Season Kickoff!", + }, + buttons: [ + { + interactId: "buy", + id: "5b4d53f5-45bd-4e5c-a5cb-6e650b1993f6", + actionUrl: "https://nba.com", + text: { + content: "Buyyyyy", + }, + }, + { + interactId: "ok", + id: "5b4d53f5-45bd-4e5c-a5cb-6e650b1993f6", + actionUrl: "https://nba.com", + text: { + content: "OK", + }, + }, + { + interactId: "more", + id: "5b4d53f5-45bd-4e5c-a5cb-6e650b1993f6", + actionUrl: "https://nba.com", + text: { + content: "More", + }, + }, + ], + actionUrl: "", + dismissBtn: { + style: "circle", + }, + image: { + alt: "", + url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRT8gAa1wUx9Ox2M6cZNwUJe32xE-l_4oqPVA&s", + }, + }, +}; +const SMALL_IMAGE_CONTENT_NO_BUTTON: ContentTemplate = { + id: "small-image-invalid-image", + type: TemplateType.SMALL_IMAGE, + smallImageData: { + body: { + content: + "🎟️ Tickets are on sale now! Don’t miss out on securing your seat to witness the high-flying action from the best players in the game", + }, + title: { + content: "Get Ready for the Basketball Season Kickoff!", + }, + buttons: [], + actionUrl: "", + dismissBtn: { + style: "circle", + }, + image: { + alt: "", + url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRT8gAa1wUx9Ox2M6cZNwUJe32xE-l_4oqPVA&s", + }, + }, +}; + +const LARGE_IMAGE_CONTENT_ALL_FIELDS: ContentTemplate = { + id: "large-image-all-fields", + type: TemplateType.LARGE_IMAGE, + largeImageData: { + actionUrl: "https://cardaction.com", + body: { + content: + "🎟️ Tickets are on sale now! Don’t miss out on securing your seat to witness the high-flying action from the best players in the game", + }, + buttons: [ + { + id: "a41d1bff-2797-4958-a6d7-2b367e055795", + actionUrl: "https://buttonone.com/action", + interactId: "buttonOneClicked", + text: { + content: "ButtonTextOne", + }, + }, + ], + image: { + alt: "", + url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRT8gAa1wUx9Ox2M6cZNwUJe32xE-l_4oqPVA&s", + darkUrl: "", + }, + dismissBtn: { + style: "simple", + }, + title: { + content: "This is large image title", + }, + }, +}; + +const LARGE_IMAGE_CONTENT_NO_DISMISS_BUTTON: ContentTemplate = { + id: "large-image-all-fields", + type: TemplateType.LARGE_IMAGE, + largeImageData: { + actionUrl: "https://cardaction.com", + body: { + content: + "🎟️ Tickets are on sale now! Don’t miss out on securing your seat to witness the high-flying action from the best players in the game", + }, + buttons: [ + { + id: "a41d1bff-2797-4958-a6d7-2b367e055795", + actionUrl: "https://buttonone.com/action", + interactId: "buttonOneClicked", + text: { + content: "ButtonTextOne", + }, + }, + ], + image: { + alt: "", + url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRT8gAa1wUx9Ox2M6cZNwUJe32xE-l_4oqPVA&s", + }, + dismissBtn: { + style: "none", + }, + title: { + content: "This is large image title", + }, + }, +}; + +const LARGE_IMAGE_CONTENT_INVALID_IMAGE: ContentTemplate = { + id: "large-image-all-fields", + type: TemplateType.LARGE_IMAGE, + largeImageData: { + actionUrl: "https://cardaction.com", + body: { + content: + "🎟️ Tickets are on sale now! Don’t miss out on securing your seat to witness the high-flying action from the best players in the game", + }, + buttons: [ + { + id: "a41d1bff-2797-4958-a6d7-2b367e055795", + actionUrl: "https://buttonone.com/action", + interactId: "buttonOneClicked", + text: { + content: "ButtonTextOne", + }, + }, + ], + image: { + alt: "", + url: "https://xxx", + darkUrl: "https://imageurl.com/dark", + }, + dismissBtn: { + style: "none", + }, + title: { + content: "This is large image title", + }, + }, +}; + +const LARGE_IMAGE_CONTENT_DARK_URL: ContentTemplate = { + id: "large-image-all-fields", + type: TemplateType.LARGE_IMAGE, + largeImageData: { + actionUrl: "https://cardaction.com", + body: { + content: + "🎟️ Tickets are on sale now! Don’t miss out on securing your seat to witness the high-flying action from the best players in the game", + }, + buttons: [ + { + id: "a41d1bff-2797-4958-a6d7-2b367e055795", + actionUrl: "https://buttonone.com/action", + interactId: "buttonOneClicked", + text: { + content: "ButtonTextOne", + }, + }, + ], + image: { + alt: "", + url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRT8gAa1wUx9Ox2M6cZNwUJe32xE-l_4oqPVA&s", + darkUrl: + "https://hips.hearstapps.com/hmg-prod/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg?crop=0.760xw:1.00xh;0.204xw,0&resize=980:*", + }, + dismissBtn: { + style: "none", + }, + title: { + content: "This is large image title", + }, + }, +}; + +const LARGE_IMAGE_CONTENT_LONG_TITLE: ContentTemplate = { + id: "large-image-all-fields", + type: TemplateType.LARGE_IMAGE, + largeImageData: { + actionUrl: "https://cardaction.com", + body: { + content: + "🎟️ Tickets are on sale now! Don’t miss out on securing your seat to witness the high-flying action from the best players in the game", + }, + buttons: [ + { + id: "a41d1bff-2797-4958-a6d7-2b367e055795", + actionUrl: "https://buttonone.com/action", + interactId: "buttonOneClicked", + text: { + content: "ButtonTextOne", + }, + }, + ], + image: { + alt: "", + url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRT8gAa1wUx9Ox2M6cZNwUJe32xE-l_4oqPVA&s", + darkUrl: + "https://hips.hearstapps.com/hmg-prod/images/golden-retriever-dog-royalty-free-image-505534037-1565105327.jpg?crop=0.760xw:1.00xh;0.204xw,0&resize=980:*", + }, + dismissBtn: { + style: "none", + }, + title: { + content: + "This is large image title, it's very long very long very long very long", + }, + }, +}; +const LARGE_IMAGE_CONTENT_3_BUTTONS: ContentTemplate = { + id: "large-image-all-fields", + type: TemplateType.LARGE_IMAGE, + largeImageData: { + actionUrl: "https://cardaction.com", + body: { + content: + "🎟️ Tickets are on sale now! Don’t miss out on securing your seat to witness the high-flying action from the best players in the game", + }, + buttons: [ + { + id: "a41d1bff-2797-4958-a6d7-2b367e055795", + actionUrl: "https://buttonone.com/action", + interactId: "buttonOneClicked_1", + text: { + content: "ButtonOne", + }, + }, + { + id: "a41d1bff-2797-4958-a6d7-2b367e055795", + interactId: "buttonOneClicked_2", + text: { + content: "ButtonTwo", + }, + }, + { + id: "a41d1bff-2797-4958-a6d7-2b367e055795", + interactId: "buttonOneClicked_3", + text: { + content: "ButtonThreeeeeeeee", + }, + }, + ], + image: { + alt: "", + url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRT8gAa1wUx9Ox2M6cZNwUJe32xE-l_4oqPVA&s", + }, + dismissBtn: { + style: "simple", + }, + title: { + content: "This is large image title", + }, + }, +}; + +const IMAGE_ONLY_CONTENT_ALL_FIELDS: ContentTemplate = { + id: "image-only-all-fields", + type: TemplateType.IMAGE_ONLY, + imageOnlyData: { + actionUrl: "https://google.com", + image: { + url: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRT8gAa1wUx9Ox2M6cZNwUJe32xE-l_4oqPVA&s", + darkUrl: "https://imagetoDownload.com/darkimage", + alt: "flight offer", + }, + dismissBtn: { + style: "simple", + }, + }, +}; diff --git a/apps/AEPSampleAppNewArchEnabled/app/MessagingView.tsx b/apps/AEPSampleAppNewArchEnabled/app/MessagingView.tsx index c513e79e4..b7ff9e1e3 100644 --- a/apps/AEPSampleAppNewArchEnabled/app/MessagingView.tsx +++ b/apps/AEPSampleAppNewArchEnabled/app/MessagingView.tsx @@ -10,15 +10,18 @@ OF ANY KIND, either express or implied. See the License for the specific languag governing permissions and limitations under the License. */ -import React from 'react'; -import {Button, Text, View, ScrollView} from 'react-native'; -import {MobileCore} from '@adobe/react-native-aepcore'; -import {Messaging, PersonalizationSchema} from '@adobe/react-native-aepmessaging' -import styles from '../styles/styles'; -import { useRouter } from 'expo-router'; - -const SURFACES = ['android-cbe-preview', 'cbe/json', 'android-cc']; -const SURFACES_WITH_CONTENT_CARDS = ['android-cc']; +import React from "react"; +import { Button, Text, View, ScrollView } from "react-native"; +import { MobileCore } from "@adobe/react-native-aepcore"; +import { + Messaging, + PersonalizationSchema, +} from "@adobe/react-native-aepmessaging"; +import styles from "../styles/styles"; +import { useRouter } from "expo-router"; + +const SURFACES = ["android-cbe-preview", "cbe/json", "android-cc"]; +const SURFACES_WITH_CONTENT_CARDS = ["android-cc"]; const messagingExtensionVersion = async () => { const version = await Messaging.extensionVersion(); @@ -27,19 +30,19 @@ const messagingExtensionVersion = async () => { const refreshInAppMessages = () => { Messaging.refreshInAppMessages(); - console.log('messages refreshed'); + console.log("messages refreshed"); }; const setMessagingDelegate = () => { Messaging.setMessagingDelegate({ - onDismiss: msg => console.log('dismissed!', msg), - onShow: msg => { - console.log('show', msg); + onDismiss: (msg) => console.log("dismissed!", msg), + onShow: (msg) => { + console.log("show", msg); Messaging.handleJavascriptMessage( msg.id, - 'myInappCallback', + "myInappCallback", (content) => { - console.log('Received webview content:', content); + console.log("Received webview content:", content); } ); }, @@ -47,7 +50,7 @@ const setMessagingDelegate = () => { shouldSaveMessage: () => true, urlLoaded: (url, message) => console.log(url, message), }); - console.log('messaging delegate set'); + console.log("messaging delegate set"); }; const getPropositionsForSurfaces = async () => { @@ -56,69 +59,80 @@ const getPropositionsForSurfaces = async () => { }; const trackAction = async () => { - MobileCore.trackAction('tuesday', {full: true}); + MobileCore.trackAction("tuesday", { full: true }); }; const updatePropositionsForSurfaces = async () => { Messaging.updatePropositionsForSurfaces(SURFACES); - console.log('Updated Propositions'); + console.log("Updated Propositions"); }; const getCachedMessages = async () => { const messages = await Messaging.getCachedMessages(); - console.log('Cached messages:', messages); + console.log("Cached messages:", messages); }; const getLatestMessage = async () => { const message = await Messaging.getLatestMessage(); - console.log('Latest Message:', message); + console.log("Latest Message:", message); }; // this method can be used to track click interactions with content cards const trackContentCardInteraction = async () => { - const messages = await Messaging.getPropositionsForSurfaces(SURFACES_WITH_CONTENT_CARDS); - - for (const surface of SURFACES_WITH_CONTENT_CARDS) { + const messages = await Messaging.getPropositionsForSurfaces( + SURFACES_WITH_CONTENT_CARDS + ); + + for (const surface of SURFACES_WITH_CONTENT_CARDS) { const propositions = messages[surface] || []; for (const proposition of propositions) { for (const propositionItem of proposition.items) { if (propositionItem.schema === PersonalizationSchema.CONTENT_CARD) { Messaging.trackContentCardInteraction(proposition, propositionItem); - console.log('trackContentCardInteraction', proposition, propositionItem); + console.log( + "trackContentCardInteraction", + proposition, + propositionItem + ); } } } } -} +}; // this method can be used to track display interactions with content cards const trackContentCardDisplay = async () => { - const messages = await Messaging.getPropositionsForSurfaces(SURFACES_WITH_CONTENT_CARDS); + const messages = await Messaging.getPropositionsForSurfaces( + SURFACES_WITH_CONTENT_CARDS + ); - for (const surface of SURFACES_WITH_CONTENT_CARDS) { + for (const surface of SURFACES_WITH_CONTENT_CARDS) { const propositions = messages[surface] || []; for (const proposition of propositions) { for (const propositionItem of proposition.items) { if (propositionItem.schema === PersonalizationSchema.CONTENT_CARD) { Messaging.trackContentCardDisplay(proposition, propositionItem); - console.log('trackContentCardDisplay', proposition, propositionItem); + console.log("trackContentCardDisplay", proposition, propositionItem); } } } } -} +}; function MessagingView() { const router = useRouter(); return ( - +