Custom In-App Templates #427

vasct · 2024-10-16T09:29:23Z

Custom Templates

Adds Custom code templates API to CleverTap React Native JS interface
Adds Custom code templates registration through CleverTap React Native native code
Adds CustomCodeTemplates.md docs

Updates CT Android SDK to 7.0.2 and CT iOS SDK to 7.0.2

Implementation

Uses the JSON Template Producer added in the CT iOS SDK CleverTap/clevertap-ios-sdk#376. and CT Android SDK CleverTap/clevertap-android-sdk#653

Added methods in the native CleverTap RN code for both iOS and Android:
registerCustomTemplates methods - The registration of custom templates must happen in the native parts of the application and before CleverTap native SDK are initialized.

All templates are registered with a common presenter which raises events to notify the JS code for presenting/closing of templates.

Added methods in the CleverTap React Native API:
customTemplate* methods for bridging the CustomTemplateContext methods to the JS. All of the methods expect the template name provided when the template present events are raised.
syncCustomTemplates and syncCustomTemplates: (inProd) - for syncing templates

Uses react-native-assets in the Example app for the template.json (Example/assets/template.json) so it is automatically copied and added to the iOS and Android projects. It is automatically updated as well if the file changes.

Example app improvements

Improvements to the Example app. Restructuring of the code to enable easier extension for new features. Keeps the already implemented functionalities.

The App.js is split into several files - App, ExpandableListView, app-utils, and constants.
The ExpandableListView holds the component used for the App categories and sub-categories (actions).
The sub-categories no longer use integer ids - they now use action names, which enables the easy addition of new actions. The constants define the action identifiers.
The app-utils holds the functions executed when tapping on the sub-category actions.
The App defines the list of categories and sub-categories and executes the corresponding action.

New 'DynamicForm' component is used to enable pushing events and profile properties defined by the user. The user can input the event name and add the parameters needed to do a pushEvent. The same component is used to update the user props and identity. If the identity is set, an OnUserLogin is done, otherwise a ProfilePush with the input properties.

Components can now be wrapped in an ExpandableListView to support expand/collapse and look the same to the current UI.

Implementation

Refactor App.js - Use constants instead of ids, move functions to a separate file.
- Naming improvements, refactoring, formatting.
- Organize the categories.
Extract the Expandable_ListView component from App.js into a separate file.
- Rename it to ExpandableListView.
- Remove the external image url which was producing 404 and use text for the collapse/expand icon.
- Expand the categories only using the component state. Remove the expanded property of the items.
- Add children views to render.
Add DynamicForm component to enable the addition of multiple key values.
- Add forms in App to push events with parameters and update the user properties.
- Wrap the forms inside an ExpandableListView to support expand/collapse and the same look.
Add react-native-toast-message.
- Use it instead of alerts and ToastAndroid since it is supported on both Android and iOS.
- Queue toasts so all messages are shown.
Cleanup, format and order the functions in app-utils.js based on the functionalities.
- Structure the files into folders.

Custom code templates in example app

Adds Custom Templates and UI in the Example app.

Implementation

Adds an InAppMessagePopup to display a modal for Custom Templates and standalone App Functions.
Adds a FunctionPopup to display a modal for isVisual:false App Functions triggered from a Custom Template action.
Adds CustomTemplate to control the modals and presentation. It adds listeners to the CleverTap Custom template events.
Adds customTemplateContextToString which gets the TemplateContext.toString on Android and TemplateContext.debugDescription on iOS.

Add code comments and formatting.

See react-native-webview/react-native-webview#656 (comment)

* Refactor App.js Use constants instead of ids, move functions to separate file. * Extract the Expandable_ListView * Refactor ExpandableListView * Naming improvements in App.js * Remove not found image url and use text for icon, formatting * Expand only using the state of ExpandableListView * Add forms for record events with props and profile updates * Style changes and cleanup * Use react-native-toast-message * Format and cleanup utils * Reorder functions * Show toasts instead of alerts. Queue toasts. * Reorder App categories * Rename category props * Rename utils to app-utils * Move to folders

Revert android Example test setup

android/gradlew

src/index.d.ts

docs/CustomCodeTemplates.md

Anush-Shand · 2024-10-18T06:35:12Z

android/src/oldarch/CleverTapModule.kt

+
+    @ReactMethod
+    fun syncCustomTemplatesInProd(isProduction: Boolean) {
+        cleverTapModuleImpl.syncCustomTemplates()


isProduction flag is not used here
Is that intentional?

Yes, this methods is only used in iOS for Test Flight builds, but it has to be implemented in the Android module as well. On Android it would do the same as syncCustomTemplates.

android/src/main/java/com/clevertap/react/CleverTapEvent.kt

Anush-Shand · 2024-10-18T06:51:48Z

android/src/main/java/com/clevertap/react/CleverTapCustomTemplates.kt

+        }
+    }
+
+    private fun readAsset(context: Context, asset: String): String {


Will this throw a strict mode violation as to disk operation on the main thread?

That is a good point. The file reading indeed happens on the main thread, but there is currently no easy way to do this work in another thread. This file must be parsed and templates mush be registered before the CleverTap SDK is initialized, which happens right after again on the main thread.

I enabled the StrictMode on the Example app and there were a lot of DiskRead violations happening, both originating in CleverTapSDK and in React Native's code itself. Interestingly registerCustomTemplates/readAsset were not reported, but it is possible that it was hidden by some other violation.

StrictMode violations are not burning can can be ignored for now I guess provided that we are sure these won't lead to ANRs

Anush-Shand

Approved with a few minor comments

Fix grammar and typos Add more detailed examples

* Custom In-App Templates (#427) * Integrate custom inapp templates * Add custom code templates for Android * Add custom code templates for iOS * Add custom template events to be observed. * Add custom code templates documentation * Add syncTemplates * Add register templates with bundle * Add custom templates in Example app * Use react-native-asset for templates.json in Example App * Example App improvements (#424) * Refactor App.js * Extract the Expandable_ListView * Refactor ExpandableListView * Add forms for record events with props and profile updates * Style changes and cleanup * Use react-native-toast-message. Show toasts instead of alerts. Queue toasts. * Reorder App categories * Rename category props * Rename utils to app-utils * Update iOS SDK version to 7.0.2 * Set Android CleverTapSDK version to 7.0.2 --------- Co-authored-by: Nikola Zagorchev <[email protected]> * Added public API for Define File Var * feat(file_vars): add defineFileVariable API SDK-4096 * Added File Variable callbacks * feat(file_vars): add onFileValueChanged and onVariablesChangedAndNoDownloadsPending callback APIs SDK-4096 * feat(file_vars): add onceVariablesChangedAndNoDownloadsPending callback API SDK-4096 * feat(file_vars): add onOneTimeVariablesChanged callback API SDK-4096 * feat(file_vars): bump clevertap-react-native to 3.1.0 and core sdk to 7.0.2 SDK-4096 * feat(file_vars): comment handshake domain in example manifest SDK-4096 * feat(file_vars): update Variables.md with new APIs SDK-4096 * Updated iOS side changes for File Type Variables * Bumped iOS dependency to 7.0.2 and updated the react-native version support * Refactored the file variable method * Resolved PR comments * Updated react native support version * Added Variables once changed and file value callbacks * Added changes for `filevariable` argument been passed * Updated the fileVariable argument changes * Added Changelog * Removed test creds * Code cleaning and refactoring, updating the changelog release date * chore(3.1.0) - Resolves comments - Adds package-lock.json * chore(3.1.0) - Resolves comments - Adds package-lock.json for root folder * Resolved iOS comments * Resolved iOS comments * Resolved iOS comments * Added the templates.json file --------- Co-authored-by: Vassil Angelov <[email protected]> Co-authored-by: Nikola Zagorchev <[email protected]> Co-authored-by: Kushagra <[email protected]> Co-authored-by: piyush-kukadiya <[email protected]> Co-authored-by: anush <[email protected]> Co-authored-by: Kushagra Mishra <[email protected]>

vasct and others added 22 commits October 16, 2024 11:48

Integrate custom inapp templates with the Android SDK

6be5d76

Add Custom Code templates for iOS

b4843a2

Export methods

cb6e880

Remove comment

32de20c

Use react-native-asset for templates.json

6d61c71

Add custom template events to be observed.

3b1ae7b

Add code comments and formatting.

Add documentation

4ed70c3

Add syncTemplates

a150fef

Use react-native-asset to link the templates.json on postinstall

ec5ff7c

Link assets on run and gitignore

874ee3a

Add syncTemplates method to Android native module

92b3b5a

Add register templates with bundle

172df59

Add Custom Templates example

5ab2571

Fix isVisual:false actions

c6bb4f0

Reuse styles

0d85c04

Add TemplateContext toString and debugDescription

88a1f72

Use customTemplateContextToString

850b991

Update inapp popup button texts

0e3a64a

Fix webview access_denied error on android

811f81d

See react-native-webview/react-native-webview#656 (comment)

Update iOS SDK version

3f6fc67

Set Android CleverTapSDK version to 7.0.2

c20b06f

Revert android Example test setup

vasct requested a review from nzagorchev October 16, 2024 09:29

nzagorchev and others added 2 commits October 16, 2024 15:37

Remove ios assets manifest

a9779f8

Add documentation for custom code templates

29bf4cc

vasct force-pushed the feature/custom-inapp-templates-rebased branch from d64a181 to 29bf4cc Compare October 16, 2024 15:36

nzagorchev added 2 commits October 17, 2024 19:20

Return NSNull if argument does not exist or value is nil

5c01554

Dismiss template when component unmounts

caadfe8

vasct requested review from akashvercetti and piyush-kukadiya October 17, 2024 16:30

vasct requested review from Anush-Shand and CTLalit October 17, 2024 16:30

vasct marked this pull request as ready for review October 17, 2024 16:30