Install it from npm yarn add @ksf-media/vetrina
and just import it into your project:
import ReactDOM from 'react-dom';
import { Vetrina } from '@ksf-media/vetrina';
var renderVetrina = function() {
ReactDOM.render(
<Vetrina products={[
{
id: "HBL",
description: <div>HBL is amazing!</div>,
descriptionPurchaseCompleted: <div>You can now read premium content of HBL.fi</div>,
priceCents: 990
}
]}/>
, document.getElementById('vetrina'));
};
The props/callbacks for Vetrina
are
- onClose
- this is called when the purchase is done and should be probably used for closing Vetrina
- if missing, the "completed" view is shown with out a button, as sometimes there is no need for a final action
() => { console.log("Purchase done!") }
- onLogin
- used for invoking whatever functionality the embedding part has for logging in users
() => { openLoginModal() }
- products
- an array of
Products
we want to be subscribeable, see type ofProduct
below products={[id: "HBL", description: <div>HBL is amazing!</div>, priceCents: 990, name: "HBL Premium" }]}
- if multiple products are given, a dropdown is shown listing the products (if
minimalLayout=true
, it will be shown even with one product)
- an array of
- unexpectedError
- a view to be rendered when an unexpected error occurs (for example, if vetrina fails to initialize entirely)
<div>Error!</div>
- accessEntitlements
- a list of entitlement names required to do the action the parent wants
- if at least one of the entitlements given matches with the user entitlements, vetrina will not proceed with the purchase
[ "hbl-web", "hbl-epaper" ]
- headline
- headline to show above Vetrina (JSX)
headline={<div className="vetrina--headline">Läs HBL digitalt för <span className="vetrina--price-headline">endast 1€</span></div>}
- paper
- name of the paper (brand) in question
paper
should belong to("HBL", "VN", "ON", "ÖN", "ÖNY", "KSF")
- if
paper
is missing or invalid, the brand neutral"KSF"
is used
- paymentMethods
- list of payment methods to choose from, supported methods currently are
"creditcard"
and"paperinvoice"
[ "creditcard", "paperinvoice" ]
- if missing,
"creditcard"
is used by default
- list of payment methods to choose from, supported methods currently are
- minimalLayout
- a boolean to switch minimal layout on or off
- this will leave most of the copy and product descriptions out
type Product =
{ id :: String -- The package id of the product
, name :: String -- Name of the product, e.g. "Hufvudstadsbladet Premium"
, priceCents :: Int -- The product price in cents
, description :: JSX -- Description is JSX and it's shown when selecting a product (optional)
, descriptionPurchaseCompleted :: JSX -- A description/guide to show when the purchase is completed (optional)
, campaign :: Maybe Campaign -- The campaign used for this product (optional). Note however that if the campaign is somehow defined, but faulty, error will be thrown
, contents :: Array ProductContent -- For describing the product in more detail (optional)
}
type Campaign =
{ no :: Int
, id :: String
, name :: String
, length :: Int
, lengthUnit :: String -- Should belong to `("day", "month", "week", "year")`
, priceEur :: Number
}
type ProductContent =
{ description :: String
, title :: String
}
Depending on the production environment we're in (dev, prod), the configuration settings for these features might differ.
Vetrina
expects the following configuration variables to be present:
PERSONA_URL
BOTTEGA_URL
dotenv is used for setting the variables in place.
Run npm publish
- this will run the end-to-end tests,
which you should fix before publishing.