Skip to content

Conversation

jsoningram
Copy link

@jsoningram jsoningram commented Oct 15, 2025

Asana Task/Github Issue: https://app.asana.com/1/137249556945/project/1211050482669423/task/1211622723586657?focus=true

Figma: https://www.figma.com/design/tnk4CZcOZ5feYM20N57Tgs/Subscription-Win-Back-Offer?node-id=211-27666&m=dev

Description

Add a new Subscription Win-back Banner component (SubscriptionWinBackBanner) to the New Tab Page, allowing the native application to display resubscribe messages to users with lapsed subscriptions. This new component used the Freemium PIR banner component as a base and functions the same way. Notable differences are:

  • Different copy
  • Different icon
  • Button color

I’ve also moved the convertMarkdownToHTMLForStrongTags utility function to the shared utils directory since both this new component and the Freemium PIR banner both make use of it. I’ve updated the unit tests and references to the function to support this change.

Additionally I’ve updated stylelintrc.json to allow for CSS module composition and avoid duplication of the entire Freemium PIR banner styles and still be able to easily support future changes.

MacOS Windows
image image
Live preview (MacOS) Live preview (Windows)

Testing Steps

  • An integration test has been included
  • Further testing will be covered by the the native app team
  • NOTE the Figma provided only shows how the Windows version of the banner should look. Also we’re not changing the background color of the banner at this time. See these task comments for discussion around this.

Checklist

Please tick all that apply:

  • I have tested this change locally
  • I have tested this change locally in all supported browsers
  • This change will be visible to users
  • I have added automated tests that cover this change
  • I have ensured the change is gated by config
  • This change was covered by a ship review
  • This change was covered by a tech design
  • Any dependent config has been merged

Copy link

netlify bot commented Oct 15, 2025

Deploy Preview for content-scope-scripts ready!

Name Link
🔨 Latest commit ef8193c
🔍 Latest deploy log https://app.netlify.com/projects/content-scope-scripts/deploys/68f276e3dbfbc00008946f4c
😎 Deploy Preview https://deploy-preview-2014--content-scope-scripts.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link

github-actions bot commented Oct 15, 2025

Temporary Branch Update

The temporary branch has been updated with the latest changes. Below are the details:

Please use the above install command to update to the latest version.

Copy link

github-actions bot commented Oct 15, 2025

[Beta] Generated file diff

Time updated: Fri, 17 Oct 2025 17:04:28 GMT

Apple
    - apple/pages/new-tab/dist/index.css
  • apple/pages/new-tab/dist/index.js
  • apple/pages/release-notes/dist/index.css
  • apple/pages/special-error/dist/index.css
  • apple/pages/special-error/index.html

File has changed

Integration
    - integration/pages/new-tab/dist/index.css
  • integration/pages/new-tab/dist/index.js
  • integration/pages/release-notes/dist/index.css
  • integration/pages/special-error/dist/index.css

File has changed

Windows
    - windows/pages/new-tab/dist/index.css
  • windows/pages/new-tab/dist/index.js
  • windows/pages/release-notes/dist/index.css
  • windows/pages/special-error/dist/index.css
  • windows/pages/special-error/index.html

File has changed

New Files
    - apple/pages/new-tab/icons/Subscription-Clock-96.svg
  • integration/pages/new-tab/icons/Subscription-Clock-96.svg
  • windows/pages/new-tab/icons/Subscription-Clock-96.svg

❌ File only exists in new changeset

@jsoningram jsoningram force-pushed the jingram/subscription-win-back-banner branch 3 times, most recently from 9a8d0a7 to 5ac27c9 Compare October 17, 2025 05:00
@jsoningram jsoningram force-pushed the jingram/subscription-win-back-banner branch from 5ac27c9 to 2016065 Compare October 17, 2025 14:42
@jsoningram jsoningram marked this pull request as ready for review October 17, 2025 15:38
@jsoningram jsoningram requested review from a team, mgurgel and shakyShane as code owners October 17, 2025 15:38
test('renders a title, descriptionText an action button, and dismiss button', async ({ page }, workerInfo) => {
const ntp = NewtabPage.create(page, workerInfo);
await ntp.reducedMotion();
await ntp.openPage({ winback: 'true' });
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bug: Test Fails Due to Mismatched Parameter Handling

The integration test passes winback='true' in the URL, but the mock transport expects this parameter to be a key in subscriptionWinBackBannerDataExamples. Since subscriptionWinBackBannerDataExamples only contains 'winback_last_day', the banner data isn't loaded, which causes the integration test to fail.

Additional Locations (2)

Fix in Cursor Fix in Web

@@ -0,0 +1,41 @@
/**
* Using CSS Modules 'composes' to import styles from FreemiumPIRBanner.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

very cool! today i learned. 🙌

Copy link
Contributor

@vkraucunas vkraucunas left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good work! Thank you for getting this sorted for me / O-O.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants