The intention for this grant round project is to develop time-based pricing so Consumers can procure streaming data subscriptions in the Ocean Market.
The use case is a Publisher who needs to configure pricing for subscriptions of varying time lengths. In the workflow the Publisher has already filled in the first two subforms of the Ocean Market publishing form, Metadata and Access. This project and the mockups focus on parts 3 and 4, Pricing and Preview. In the Marketplace URL these are named /publish/3 and /publish/4.
Our intention with the Pricing subform is to offer the Publisher full flexibility in configuring subscription pricing. There are few restrictions and the Publisher can create as many or few options as desired.
When the form loads we present a default subscription schema with six options. Inputs have prefilled suggested values. All fields have placeholders that become visible if the value is deleted. This sets up an example and hopefully saves the Publisher time, eliminating the need to consult documentation.
Following Ocean Market practice, each section has a heading or subheading with explanatory help text. We try to follow the house style and will re-use some existing CSS styles. But we’ll need to create additional page elements and those will require a ‘datastreams.css’ stylesheet.
The Pricing subform has three sections: Price Ratio, Subscription Prices, and Fees.
This element duplicates the UI of the standard price setting for static file and algorithm assets. However it doesn’t set the price of the Streaming Asset, it just sets the value of the datatoken. Here the Publisher can decide how much OCEAN (or H2O) should be equivalent to the price of 1 datatoken. The value should not be less than 1 and the Ocean devs coded Javascript validation on the number field that warns the user if the value is less.
At the right a script converts the value to a Euro price using CoinGecko so the user has an idea of its worth.
This section is a table containing the suggested subscription schema. It has four columns: Amount, Unit of Time, Price/Units, and Conversion.
Amount: contains an input field with type=”number” that should only accept numeric values. All these fields contain a prefilled value=”1”, with placeholder="0" in case the user deletes the value. We should add Javascript validation (like what Ocean implemented on the price field above) so only integers can be entered.
Unit of Time: contains an input field with type=”text” that accepts any text. We prefill values of minute, hour, day, week, year, and forever, but the Publisher can input anything, e.g. moon, quarter, half-year, trimester, etc. The placeholder attributes contain the same content as the value attributes (minute, hour...). This field is an arbitrary input that must contain at least one character (e.g. M for month). No further validation is needed.
Price/Units: contains an input field with type=”number” for the price of a subscription based on the amount of units. This is a numeric field where decimals are accepted, including decimals smaller than 1. Zeros are also valid, in case the Publisher wants to create a freemium option. Each fields contains a prefilled value on a sliding scale with increasing discounts. We should put Javascript validation on this field.
Conversion: displays an approximation of the subscription value in Euros to help the Publisher grok the costs. Just like in the Price Ratio section above, it only renders when all fields in the row are filled in.
Add a row to the table: allows the Publisher to add rows. It’s a ‘+’ icon with a link that triggers a Javascript write to add a table row.