Web 3474

[ThisIsRaghavGupta]

Changes

Describe the key changes in this PR with the Jira Issue reference

Changes to Public Facing API if any

Please list the impact on the public facing API if any

How Has This Been Tested?

Describe the testing approach and any relevant configurations (e.g., environment, platform)

Checklist

• Code compiles without errors
• Version Bump added to package.json & CHANGELOG.md
• All tests pass
• Build process is successful
• Documentation has been updated (if needed)

Summary by CodeRabbit

• New Features

  • Added support for custom HTML and JSON templates in display campaigns.
  • Introduced a Change Log in the Visual Builder and enabled dynamic element insertion.

• Bug Fixes

  • Resolved duplicate session issues on extremely slow networks.
  • Fixed unviewed badge display in single-page applications.

• Improvements

  • Enhanced offline event processing and refined push notification handling for a smoother user experience.

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

The pull request introduces the new version [1.12.1] documented in the CHANGELOG, along with a package version bump. It adds support for custom HTML and JSON handling in web native display campaigns by introducing new message types and functions. The changes refine offline state management, enhance error checking regarding ACCOUNT_ID in multiple modules (events, notifications, profile), and improve the visual builder with dynamic CSS updates and element insertion. Additional constants have been added for managing UI elements and session information.

Changes

File(s)	Change Summary
CHANGELOG.md, package.json	Updated documentation for version [1.12.1] and bumped package version from 1.12.0 to 1.12.1.
clevertap.js	Added support for custom HTML (msg type 5) and JSON (msg type 6) handling; introduced functions: renderCustomHtml, handleJson, findSiblingSelector, dispatchJsonData, and isValidUrl.
src/clevertap.js, src/modules/event.js, src/modules/notification.js, src/modules/profile.js	Integrated new ACCOUNT_ID validation with storage and error logging; modified offline state handling and refined push method checks across events, notifications, and profile processing.
src/modules/request.js	Added session handling for extremely slow networks using SCOOKIE_PREFIX to incorporate session identifiers in backup event requests.
src/modules/visualBuilder/dataUpdate.js, src/modules/visualBuilder/pageBuilder.js	Enhanced visual builder functionality with dynamic CSS update support, element insertion via new helper functions (e.g., findSiblingSelector), click tracking logic, and robust error handling.
src/modules/webPushPrompt/prompt.js	Replaced hardcoded soft prompt selector with NEW_SOFT_PROMPT_SELCTOR_ID imported from constants for improved maintainability.
src/util/campaignRender/nativeDisplay.js, src/util/constants.js, src/util/tr.js	Introduced renderCustomHtml and handleJson to process new message types; added new constants (ACCOUNT_ID, OLD_SOFT_PROMPT_SELCTOR_ID, NEW_SOFT_PROMPT_SELCTOR_ID, POPUP_LOADING); updated notification routing to handle new content types.

Sequence Diagram(s)

sequenceDiagram
    participant Browser
    participant CT_SDK as CleverTap SDK
    participant NativeDisplay as nativeDisplay Module
    participant DOM as Document Object Model

    Browser->>CT_SDK: Receives message (type 5 or 6)
    CT_SDK-->>NativeDisplay: Call renderCustomHtml() [if type 5]
    CT_SDK-->>NativeDisplay: Call handleJson() [if type 6]
    NativeDisplay->>DOM: Attempt to locate target element
    NativeDisplay->>DOM: Replace outer HTML / dispatch event (raiseViewed/CT_web_native_display_json)
    DOM-->>NativeDisplay: Acknowledgment of update

Loading

sequenceDiagram
    participant User
    participant VisualBuilder as renderVisualBuilder()
    participant Process as processElement & addNewEl
    participant DOM as Document Object Model

    User->>VisualBuilder: Initiate visual builder render
    VisualBuilder->>Process: Process element (check click tracking, CSS update)
    Process->>DOM: Query and update element (using updateElementCSS)
    Process->>Process: Use addNewEl for dynamic element insertion (with findSiblingSelector)
    DOM-->>VisualBuilder: DOM updated with new elements

Loading

Possibly related PRs

• Web 3474 #352: Introduces custom HTML and JSON rendering along with modifications to offline handling and ACCOUNT_ID checks, aligning closely with the main PR changes.
• [WEB-3309] Safari Web Push #340: Focused on improving web push notifications and integrating new constants and functions for handling browser-specific notification behavior, which relates to these updates.
• Web 3309 patch - Fixed hardcoded feature identification with API check based logic  #345: Addresses enhancements in notification processing and the use of new constants, directly connecting with the modifications applied in this PR.

Suggested reviewers

• kkyusuftk

Poem

I'm a little rabbit, hopping through code fields bright,
Carrots of custom HTML and JSON make my day light.
With ACCOUNT_ID and constants keeping everything tight,
Visual Builder dances and elements take flight.
A joyful hop of updates—code blooms in the night! 🐇

Tip

🌐 Web search-backed reviews and chat

• We have enabled web search-based reviews and chat for all users. This feature allows CodeRabbit to access the latest documentation and information on the web.
• You can disable this feature by setting web_search: false in the knowledge_base settings.
• Please share any feedback in the Discord discussion.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 28f9da7 and 4313f13.

⛔ Files ignored due to path filters (2)

• clevertap.js.map is excluded by !**/*.map
• clevertap.min.js is excluded by !**/*.min.js

📒 Files selected for processing (15)

• CHANGELOG.md (1 hunks)
• clevertap.js (25 hunks)
• package.json (1 hunks)
• src/clevertap.js (5 hunks)
• src/modules/event.js (2 hunks)
• src/modules/notification.js (6 hunks)
• src/modules/privacy.js (1 hunks)
• src/modules/profile.js (2 hunks)
• src/modules/request.js (2 hunks)
• src/modules/visualBuilder/dataUpdate.js (1 hunks)
• src/modules/visualBuilder/pageBuilder.js (4 hunks)
• src/modules/webPushPrompt/prompt.js (2 hunks)
• src/util/campaignRender/nativeDisplay.js (1 hunks)
• src/util/constants.js (2 hunks)
• src/util/tr.js (2 hunks)

✨ Finishing Touches

• 📝 Generate Docstrings (Beta)

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.