subs-fe-walls v1.0.0

Washington Post Walls Project

The walls project is a set of React packages which are used to create, customize and present paywalls (and other interfaces) to our readers.

Quick start for developers

• Install Node JS
• npm install
• npm run bootstrap

You can then cd into packages/<desired package> and run npm start to launch a dev server. Please see the individual README of those projects for more details about them.

All projects in this repository use TypeScript by default.

Contributing to this repo

• push & merge to qa as often as you want
• open PRs against preproduction
• when we release, we will just merge all of preproduction into production
• bug/hotfixes will go to production directly (as a PR) and then merged back into preproduction and qa

Packages

wall-ui

An npm package used by the washington post site to asynchronously load and display different templates. wall-ui takes as input the response from PWAPI and many different variables from the article itself (e.g. canonical_url, section, contentType) and calls paywall-service to get a template to render.

wall-builder

A package used to configure and build templates to be displayed by wall-ui. This is where new templates will be developed and also serves as a tool for Marketing to make modifications to the walls in a WYSIWYG manner.

wall-preview

A simple package used to display different templates configured by wall-builder, meant to be used as a means to share a template with Analytics, Marketing and others before making it live to confirm that everything is looking good. For developers you can use the bundle loaders below (one for each environment):

PROD: https://subscribe.washingtonpost.com/wall-preview/loader STAGE: https://subs-stage.washingtonpost.com/wall-preview/loader QA: https://subscribe.digitalink.com/wall-preview/loader

In the future this project will grow and adapt to be able to configure other subscriptions modules and offers shown throughout The Washington Post properties.

Deploying a new wall

There are a few steps involved in creating and publishing a new wall created w/ this project. Currently the process is as follows:

1. Create a template in wall-builder if needed (in packages/wall-builder/src/components/templates/).
2. Get it reviewed and publish a new version of @washingtonpost/wall-builder.
3. Trigger a build of subs-fe-lambda-dynamic-paywall in Jenkins so the lambda function gets the new template.
4. Configure a build using your new template in Digital Offers Tool (AKA DOT).
5. Run the lambda (see more info here) to generate the JS module consumed & rendered by @washingtonpost/wall-ui.

One of the goals of this project is to streamline this process and avoid steps 1 - 3 unless a very different template is needed and to remove the manual process of step 5 altogether by automating the lambda invocation.

Need a new wall?

How do I build a new template?

If you need a new template, or need to modify an existing one, visit the packages/wall-builder project. You can use the wall-builder tool to preview it as you build it by going to packages/wall-builder, running npm start and going to http://localhost:8080/wall-builder/configure/:campaignId/:configId.

Once you have tested it & merged it, you can publish it to npm w/ a new version number. It's important to remember that for this new template to be used, you must run a build in Jenkins for the subs-fe-lambda-dynamic-paywall project, this will ensure that the lambda function is using the latest template when it generates paywalls.

You will find more details in the wall-builder README.