welcome banner for first 48 hours

[amartya-dev]

Proposed changes

This PR implements a transient-based system for the WelcomeBanner component that shows it only for first-time visitors or if 48 hours have passed since it was last shown. The banner can also be manually dismissed by users. Additionally, the banner width has been increased from lg to xl to better utilize the available space and provide a more prominent welcome experience.

Type of Change

Production

• New feature (non-breaking change which adds functionality)
• Refactoring / housekeeping (changes to files not directly related to functionality)

Development

• Documentation Update

Video

Checklist

• I have read the CONTRIBUTING doc
• I have viewed my change in a web-browser
• Linting and tests pass locally with my changes
• I have added tests that prove my fix is effective or that my feature works
• I have added necessary documentation (if appropriate)

Further comments

Welcome Banner Width Decision

Initially, the entire width of the container was lg. There were three possible iterations for the welcome banner width:

1. Extract the card out and make it occupy xl width - This would create an inconsistent layout with the welcome banner being wider than other components

2. **Make this card also occupy `lg` width** - This would maintain consistency but not utilize the available space effectively 3. **Increase everything to `xl` width** - This provides better space utilization and a more prominent welcome experience

I chose the third option as it provides the best user experience by making better use of the available screen real estate while maintaining visual hierarchy. The welcome banner is a key component that users see first, so giving it more prominence makes sense from a UX perspective.

Technical Implementation

The transient system uses WordPress's built-in transient API with a 48-hour expiration period. The banner automatically shows for first-time visitors and reappears after 48 hours if not manually dismissed. Users can manually close the banner using the X button in the top-right corner, which sets the transient and immediately hides the banner.

The implementation includes:

• Backend transient management in SettingsController.php
• Frontend conditional rendering in WelcomeBanner.js
• Helper functions for testing and management
• Proper CSS styling for the close button
• Clean, maintainable code structure

Testing

To test the functionality:

1. Reset banner: Call window.testWelcomeBanner() in browser console
2. Manual close: Click the X button in the top-right corner
3. Verify persistence: Refresh page to confirm banner stays hidden
4. Test expiration: Manually delete transient from database to simulate 48-hour expiration

The system creates minimal database impact with WordPress automatically cleaning up expired transients.

[circlecube]

This PR looks to also add a new workflow related to auto translations. Is that meant to be here? I imagine it should either be in its own PR or it was accidentally included here.

Can we also get a cypress test or two written for this welcome banner? Ideally when adding features we should add tests to ensure, 1 the content renders as expected and 2, that it is does not render when not expected. Thanks @amartya-dev otherwise this looks pretty good!

[circlecube]

With unresolved issues (no new test, existing tests failing, and the extra code changes mentioned earlier that are included in this PR), punting this to the next milestone.

Looking at the relevant ticket: https://jira.newfold.com/browse/PRESS0-2629 I see it also mentions that we don't yet have urls for these links, so I'll mark this as draft so it isn't accidentally merged without links.

[amartya-dev]

@circlecube I have been waiting on links for the cards, since we don't have them yet, I had to put this on hold

[circlecube]

Closing this as it never was wrapped up and we've built a redesign of the app since.