# @financial-times/n-newsletter-signup

Latest version **11.0.0** (published 2024-02-20) · ISC license · 0 weekly downloads

## Install

```sh
npm install @financial-times/n-newsletter-signup
pnpm add @financial-times/n-newsletter-signup
yarn add @financial-times/n-newsletter-signup
bun add @financial-times/n-newsletter-signup
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 11.0.0 |
| Published | 2024-02-20 |
| First published | 2022-05-19 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Node | 16.x \|\| 18.x |
| Dependencies | 4 |
| Unpacked size | 98 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | robertboulton, seraph2000, hamza.samih, notlee, emmalewis, aendra, the-ft, rowanmanning, chee, alexwilson |

## Links

- npm: https://www.npmjs.com/package/@financial-times/n-newsletter-signup
- Repository: https://github.com/Financial-Times/n-newsletter-signup
- Homepage: https://github.com/Financial-Times/n-newsletter-signup#readme
- Issues: https://github.com/Financial-Times/n-newsletter-signup/issues
- npm.io page: https://npm.io/package/@financial-times/n-newsletter-signup

## Dependencies (4)

- [handlebars](https://npm.io/package/handlebars.md) ^4.1.2
- [superstore-sync](https://npm.io/package/superstore-sync.md) ^2.1.1
- [@financial-times/n-myft-ui](https://npm.io/package/@financial-times/n-myft-ui.md) ^31.0.0
- [@financial-times/dotcom-server-handlebars](https://npm.io/package/@financial-times/dotcom-server-handlebars.md) 8.2.5

## Recent versions

- 11.0.0 (latest) — 2024-02-20
- 10.0.1 — 2023-08-22
- 10.0.0 — 2023-05-17
- 9.2.0 — 2022-12-06
- 9.1.0 — 2022-05-25
- 9.0.0 — 2022-05-19

## README

# n-newsletter-signup [![CircleCI](https://circleci.com/gh/Financial-Times/n-newsletter-signup.svg?style=svg)](https://circleci.com/gh/Financial-Times/n-newsletter-signup)

n-newsletter-signup is a component that displays one-click signup form to newsletters.

## Install

Add the component to package.json:

`npm install n-newsletter-signup --save`

Add the following line to your main sass file:

`@import "n-newsletter-signup/main";`


## Usage


```javascript
// Client-side
import { init as newsletterSignupInit } from 'n-newsletter-signup';
newsletterSignupInit();
```
---
:rotating_light:
**For the newsletter title, `<h2>` tag is used.**
**This may cause a problem on your app with the accessibility!!** :rotating_light:

---

#### n-newsletter-signup template requires the following data:
	* `id`
	* `name`
	* `isPremium`
	* `unsubscribeAction`: url to unsubscribe via myft api

		e.g. `/__myft/api/alerts/no-user-provided/newsletters/${newsletter.id}/unsubscribe`
	* `subscribeAction`: url to subscribe via myft api

		e.g. `/__myft/api/alerts/no-user-provided/newsletters/${newsletter.id}/subscribe`
	* `inactive`
	* `description`
	* `subscriptionLevel`
	* `frequency`
	* `userIsSubscribed`
	* `referenceId`: to jump to the newsletter
	* `imageUrl` - (Optional for newsletters with images)

:mag: Please view the source for more information.

## CustomEvent
`newsletter.subscribe` or `newsletter.unsubscribe` event is dispatched by the action when users click the button

## Local storage
Subscribed time is stored using `superstore-sync`
```js
// js/newsletter.js
store.set(`n-newsletter-signup.${this.newsletterId}.subscribedTime`, Date.now());
```

## Demo page
`$ npm run demo`: Serves examples of the component locally (`http://localhost:5005`), using dummy data and in isolation from an app.

This is done on a simple express app which renders a single demo page that calls the partials to exhibit, populating them with data from a fixture.

## Jest & Pa11y
`$ npm run test`: Runs the Jest test suite. This includes a [Pa11y](http://pa11y.org/) accessibility test against the html templates (errors flagging up accessibility infringements), which will also be run as part of the Continuous Integration (CI) process.

---
_Source: https://npm.io/package/@financial-times/n-newsletter-signup · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._