Doodle Paywall

Preview - Proposed paywall library

TODOs

• Scope functions in an app specific way
• Manage translations in lib

Publishing

This library is published to the registry using https://github.com/DoodleScheduling/lib-tagflow.

• Publish release candidate:

  git tag pub.1.0.0-rc.0
  git push origin pub.1.0.0-rc.0
  

• Publish release

  git tag pub.1.0.0
  git push origin pub.1.0.0
  

Purpose

Library provides wrapper component of Paywall, Paywall statuses and process types, functions (actions that should be covered by paywall) used to send requests to the backend. It includes different modals according to user premium segments.

Used technologies

• React
• Redux
• PostCSS
• Doodle libraries

Architecture

Library use vanilla Fetch API interface for API calls.

Every API call returns Promise. Could be resolved with one of these statuses:

1. REDIRECT - user clicks on business plan

2. REJECT - user closes paywall modal

3. PASS - success flow of paywall

4. ERROR - error occured

Development

Install the dependencies

yarn

Development mode for testing different paywall modal views

yarn start

Build

yarn build

Create a link for lib-paywall

cd build
yarn link

Use the link in your project

yarn link "@doodle/lib-paywall"

Alternative solution

Copy all files from dist folder to the lib-paywall folder in your node_modules/@doodle/.

Example of usage

Import Paywall wrapper to your container.

import { PaywallWrapper } from '@doodle/lib-paywall';

Pass to wrapper 5 properties:

1. host string
2. onReject function
3. onSubscribe function
4. onModalOpen function
5. messages object

Use exported actions in your handlers.

import { duplicateCalendar, createCalendar, unarchiveCalendar } from '@doodle/lib-paywall';

...

createCalendar({ token, captchaToken, trackingEventPrefix }).then(payloadResult => ()); 
// payloadResult: { payload: {externalId: ""}, status: "PASS" }

...

duplicateCalendar({ token, id, captchaToken, trackingEventPrefix }).then(payloadResult => ()); ;
// payloadResult: { status: "REJECT" }

...

unarchiveCalendar({ token, id, trackingEventPrefix }).then(payloadResult => ()); ;
// payloadResult: { status: "ERROR", code: 'GET_USER_DATA_FAILED' }

1. token user token
2. captchaToken generated captcha token
3. id id of the calendar
4. trackingEventPrefix prefix user for tracking