Publisher Portal UX Requirements for Beta

# Publisher Portal UX Requirements for Beta ###### tags: `requirements` `Holo` `design doc` ## Use Cases **These represent at a high level the actions a Publisher should be able to take or the questions they should be able to answer within the Publisher Portal at Beta.** 1. First time login to Publisher Portal * Assuming this is a hosted hApp it will use the standard login screen and will have had the settings for requiring a joining code configured before publishing. 2. View Default Publisher Dashboard This is where publisher lands at login. Similar to the Host Dashboard, this will show a bit of information about everything and allow user to visually link to other parts of the app. 2. View hApps (Card View of all draft, published and paused hApps) *Note: this will only be needed when the user has more than 3 hApps and will be accessible from the dashboard in the card)* * Eventually, there should be a filter/sort option on this page by app status but it's not likely important in the short term * Removed hApps or Pause hApp should not display here. 3. Setup a hApp (hApp Bundle) for hosting (add new and change existing) * Status (draft, published, live or generally available, paused) * Basic Info * Matching to Host details * Maximum Amount I want to pay 4. Remove a hApp from being hosted 1. Suspend/Pause (On/Off - but does not get rid of all the storage costs) 2. Terminate and Remove (Deletes user data / source chains) 5. Review hApp(s) Summary Usage and Cost Info Questions This View Answers: * How much are my hApps being used? * How much is this costing me for this hApp? for all hApps? * NOTE - this is not the invoice list - that can be found in the payments section 6. Billing and Payments Use Cases 1. Connect HoloFuel account to Publisher Portal 2. Configure AutoPay settings for hosting payment * Set time cycle to clear payments (instant, hourly, daily, weekly) 2. Review Exception Report (unpaid invoices that don't meet the AutoPay requirements) 3. View Invoices * Highlight Invoices not paid because of insufficient balance of HF * with filter/sort by hApp, by invoice date, by payment status (paid/unpaid) * default to display recent unpaid invoices **Note: Removed hApps may still have billing that needs to be handled and that history should not ever go away.** ## Not In Scope ### Not in Scope, but related use cases via Holo.host * Publisher completes KYC to enable hApp publishing * Standard HoloFuel Transactions are not embedded in the Portal ## Upstream Dependencies * hAppStore DNA/account * hApps in the hAppStore that are available for publishing * HoloFuel DNA/account * Verifiable Claims DNA/account * Holo Hosting hApp DNA * Service Logger Capability Tokens from hosts to have access to logs ### Provided by Developer hAppStore * Default details * Name * Summary Description * Icon * Images of the hApp * Public Only Flag * Initial performance details (to help establish host minimum requirements) ## Detailed Use Cases ### First Time Login to Portal Standard Holo Login screens should include a hidden variable * This will future proof the login function so that in the future we can use other signatures for verifications to log in... for using multiple types of credential sets, for example: - email / password (the default) - ETH key / proof of control of that key - BTC key / proof of control... - etc. anything we may want to enable Holo to provide side-chain functionality for. 1. Publishers will register at the register.Holo.host site to get joining code. 2. Navigate to Publisher Portal URL 3. Using standard hosted hApp login that is configured to require a joining code, the user will enter the following: * create new user name * create new password * enter joining code received in email After the user has created credentials and has logged in, they should perform the following as part of the first time hApp setup 4. Create/connect to hAppStore (when it is available) 5. Create/connect to HoloFuel account for Publisher Account (used for billing) NOTES: If the user is doing a first time login for the hApp locally, DeepKey will be needed ### View Publisher Dashboard 1. Navigate to the Publisher Portal and Login 2. Icon/Button for Setup a New hApp for Publishing 3. View HoloFuel Balance & Low Balance Icon (link to buy HoloFuel) 4. View KYC verified badge/text/checkmark 5. View KYC Action Needed Banner (if not verified) 6. View Hosting / hApps section * ICON/Badge to setup a new hApp for publishing (plus sign?) * View hApps (displays up to ~3 - maybe with different statuses?) 7. View Aggregated Usage & Cost for last 7 days * Hosted Source Chains (all hApps) * Total # Hosts * CPU - #MS / Cost in HF * Storage - #MB / Cost in HF * Bandwidth - #Mb / Cost in HF 8. View Billing & Payment Section * HoloFuel Burndown (Buy HoloFuel) * View Invoices (Link) * Review Exceptions (Link) ### View All hApps - Card View of hApps *Each card should show the following data* * Summary Usage * Summary Costs * Link to hApp detail view * Status ### Setup a hApp 1. Navigate to Publisher Portal Dashboard 2. Click Setup hApp 3. Select the hApp from the hAppStore 4. Is it a clone of the hApp in the Store? * If no, use all data from hApp Store * If yes, pull default data and require user to edit name and optionally edit other details (name, description, icon) 4. Enter the custom domain where web users will access your hosted hApp * Art wants this to default to instructions for how users can use cloudflare to manage their dns since ther DNS is so much better. We'll share that info in the link/faq - but will need dev support to document * Give link to instructions for DNS configuration * Provide temporary domain for testing * Have button that tests the custom domain after DNS config has been done. 6. Configure Host Matching details * Include or Exclude Jurisdictions (could use same control as tags maybe) * Multi-Tag for category of hApp (something like [this](https://vue-multiselect.js.org/#sub-tagging) or [this](https://yaireo.github.io/tagify/)) 7. Set Pricing FUTURE: Review imported minimum technical requirements and performance settings for hosts (do not allow editing of these for now) * Enter estimated unique users * Enter estimated daily active users * Using minimum technical requirements, Display host pricing in slider table for each charge type (think airbnb pricing but for bandwidth, storage and CPU) * When user selects price, autopopulate below graph the max price for each service type. * When all three prices are selected, do a rough estimate calculation of total monthly cost based on the combination of minimum technical requirements, estimated users and the price point. * Show warning about this not being a monthly max. 11. Save 1. Save as Draft * Publishing validation is not performed 2. Publish * Validations Required * KYC must be good (or link to KYC) * DNS for custom domain must be verified * HF account must be connected and balance should be greater than 0 (or link to purchase HF in the error message) * if Validation is not met give option to save as Draft 3. Saving redirects to Dashboard ### Pause hApp Hosting 1. Navigate to Publisher Portal (default view of hApps) 2. Pause should live in hApp details. 3. When Pause is clicked, a confirmation notice is displayed * "This app will be made unavailable to people on the web, and may take up to 24 hours to restart. You will still be responsible for storage services provided by hosts." 4. User must click button for Yes, I want to Pause the hApp Hosting 5. Return to default view and show the hApp in a paused state with option to Restart. (similar process/confirmation for restarting) ### Remove a hApp from being hosted ##### When a hApp is removed from hosting, the hApp details should be removed. 1. Navigate to Publisher Portal 2. Click into hApp Details 3. At the very bottom of main settings user will click on a small-ish link to Remove hApp from Holo Hosting 4. Pre-Removal Confirmation notice is displayed * "This action permanently removes the hApp from Holo hosting and deletes all hosted data including web user sourcechains from all host devices, which means hosted user data will be permanently lost. Outstanding payments will be settled based on your autopay settings. If you would like to temporarily pause hosting, please use the Pause hApp option instead." * Have the Publisher type "YES" (or "CONFIRM" or type name of the hApp) if they want to continue and confirm the removal of the hApp from Holo. 5. Show confirmation message that the hApp has been removed. 6. Return them to the default view (hApp is gone) ### Review hApp Usage and Cost Information for all hApps or per hApp 1. Navigate to Publisher Portal 2. Navigate to Summary Usage and Cost for hApps **There are 2 ways to navigate into summary usage and cost info** 1. From dashboard - enter with aggregated usage and costs for past 7 days by default. 2. From within a single hApp detail: enter with that hApp filtered for and display data from past 7 days 4. Publisher can view summary data at level of current day/month/year * Bandwidth Units and Associated Cost in HF * Storage Units and Associated Cost in HF * CPU Units and Associated Cost in HF * Total Sourcechains Hosted * Total unique visitors 5. Publisher can select a date range for log files to download.(only available in single hApp view) 6. Publisher can navigate back to list of hApps, Billing & Payment or can navigate to summary cost info for the hApp for hApp (same view as other cost summary view, but filtered for costs only related to this hApp) **Note: usage and cost are only those associated with received invoices. We are not trying to pull data that has not yet been invoiced to a publisher.** ### Review Summary Cost Info per hApp or for All hApps ##### Include only Active/Paused hApps 1. Navigate to Publisher Portal 2. Navigate to Summary Cost for hApps **There are 2 ways to navigate into summary cost info** 1. From dashboard - which replicates dashboard data (aggregated usage for all hApps) but allows user to filter dates. 2. From within a single hApp detail: same view is used, applies single hApp filter and allows for date filters to be applied 3. View Requirements: * Show appropriate aggregated costs each for Bandwidth, Storage and CPU as well as total source chains hosted and # unique visitors. * Give time options of per month, per day with per month as default (no extrapolation of data, based on actuals from log/invoices) * **NOTE: we do not yet need a view that shows all individual hApp costs at monthly or weekly, etc. One aggregated view and then each hApp individually is good enough** * When filter is set to display for all hApps, provide internal link to billing view to view detail invoices and to adjust settings * When filter is set to a single hApp, provide internal link to see that hApp's invoices in the billing view. 4. Publisher can navigate back to list of hApps. ## Billing and Payments Detail Use Cases / Workflow ##### Wherease the cost information in the hApp views is about answering how much does hosting cost me, the Billing and Payment area and all views are about viewing invoices, procesing payments and reviewing exceptions based on our fraud detection. ### View Billing and Payment Dashboard 1. Navigate to Billing and Payment Dashboard from main nav 2. Publisher should see current balance of HoloFuel 3. Publisher should see a burndown chart with expected zero balance of HoloFuel based on existing invoices. This is intended to answer "When will I run out of HoloFuel based on my current liabilities?" 4. Publisher should see a LOW on HoloFuel Badge/Signal if they have less than 3 (or 5) days worth of HoloFuel based on what has been spent on average in the past 30 days. * This should allow them to link to the HOT Reserve URL in a new window 5. Publisher should see a Badge/Signal if they have any invoices in the Exception List * Clicking on this should take them to the Exceptions List View 6. Publisher should have visual link to AutoPay Settings 7. Publisher should have a visual link to Invoice Detail (this is actually the least important link on the page) 8. Publisher should have a visual link to Transact HoloFuel (link to open HoloFuel - can this work if they are a Holochain App user of HoloFuel?) ### Configure AutoPayment Settings 1. Navigate to Biling and Payments 2. Navigate to AutoPay Settings 3. Publisher should see explainer text at top of the screen (should this be a banner that can be dismissed?) * Explain the settings * Explain the default setting is for autopayment to be and no option for off (only doesn't pay if there is not enough HF in the account) * Explain that Exceptions are not auto paid, but will be in the exception view * Explain that in the future, more settings like max amount of invoice will be configurable by publisher, not just displayed as default. 5. Publisher should be able to set (frequency for autopayment) the number of hours or days after receipt invoice the HF transaction is automatically paid. * Options are 1-23 hours, or 1 to 30 days. 7. Publisher should be see, but not be able to edit the maximum amount of HoloFuel on an invoice that will pbe paid before it will trigger an exception. ### View and Manage Fraud/Exceptions * Holo defined exceptions (no settings available for publisher to opt in/out) * Payment is not made until the publisher accepts invoice for exceptions * Exceptions will be a list of invoices with some info about the nature of the exception * Standard deviation from traffic norms * Traffic logged not routed through our resolver * Manually approve or reject one or more invoices from exception list 1. Navigate to Billing and Payments 2. Navigate to Exception Reports 3. View data-table of invoices that have exceptions (I recommend use of a control like [this](https://vuetifyjs.com/en/components/data-tables/)) * By default in this view, filter invoice exception status to **not equal to "none"** * hApp Name, Invoice Number, Date Received, Amount, Exception Reason, Link to view detail??, and exception status (Exception, Accepted, Rejected, null or none) * Display Action Menu on each row that allows Publisher to 1) Accept & Pay Invoice or 2) Reject Invoice * Accepting should change status and process payment or queue for payment * Rejecting should somehow flag for Holo's Fraud Operations attention ### View Hosting Invoices 1. Navigate to Billing and Payments 2. Navigate to View Invoices 3. View data table with invoices (I recommend use of a control like [this](https://vuetifyjs.com/en/components/data-tables/)) 4. Allow search filter by hApp and date range and enable data-table sort by fields in table 5. Fields to display in table: hApp Name, Invoice Number Date Received, Amount, Payment Status, Exception Status **No actions can be taken in this view.** ### Transact HoloFuel **This links user to standard UI for HoloFuel for transactions -- see HoloFuel Requirements** ## Other UI/UX Requirements ### Default Views 1. Main Dashboard 2. We should highlight the setup an app for publishing if there is not one. Because nothing in dashboard will be relevant. ### Navigation 1. Requires Top Level Nav visible or accessible from all views 1. Dashboard 2. View All hApps 3. Billing & Payments * Dashboard * Payment Settings * Exception Reporting * View Invoices * Buy HoloFuel (link to reserve) * Transact HoloFuel (link) 3. Account ### Notifications - Banner that is Non-Dismissable until correct action has been taken - i.e. We need to have a constant banner up until a Publisher has KYC completed and has permission to publish. ## Scope Questions 1. Chargeable Errors (for now leave in logs) ## Links 1. [hApp bundle spec](https://hackmd.io/HSTJ91fKQ3irS7KIOF7bTQ?both) 2. [hApp Store Requirements](https://hackmd.io/L23oOeTbT82tTn8FvDA-mg) 3. [DevHub Requirements](https://hackmd.io/mbGkcZ4dQdCG6_AgMSKdRw)