Premium Credits UI

[allanlasser]

Overview

This update enriches and expands the premium credits UI in two main areas of the application: add-ons and the top navigation.

Please note that this doesn't provide app functionality for handling account upgrades, purchasing credits, etc. This is pure UI and read-only data handing. I've made some assumptions about changes to the API response and backend data mode, which I've tracked with TODO comments and detailed below.

Top navigation changes

• Adds pro menu with premium credit summary
• Adds org menu with premium credit summary
• Adds upgrade promotion for free users
• Moves org users from sidebar into org menu
• Updates user menu, location menu, and help menu

In the process, I created a new dropdown component (src/common/Dropdown2.svelte) that improves upon the existing dropdown's state management, styling, and handling of nested dropdowns. Only two other components now use the previous dropdown (src/common/Dropdown.svelte) and can be upgraded in a focused, follow-up PR.

Update add-on components for "Premium Add-Ons"

• Updates add-on dispatch with premium cost controller or premium upgrade promotion
• Update browser with premium filter and premium badge on list items
• Update add-on run history event items with cost summary

Screenshots

To Review

Storybooks

npm run storybook

View the stories:

• Add-Ons / Browser / Success for premium sidebar section
• Add-Ons / Dispatch / Translate Documents for premium add-on dispatch form
• Add-Ons / Dispatch / Premium / ... for various states of the dispatch form's premium section
• Add-Ons / Runs / History / Event / Premium Run for a history list item with an amount of credits spent
• Account Navigation / ... for the new top navigation and individual menu components.
• Premium Credits / ... for other components supporting the premium credit experience

Preview Deployment

1. Log into the preview deployment: https://deploy-preview-311.muckcloud.com/
2. Examine new top bar as a free, professional, and organization user
3. Open the add-on browser and use Premium filter
4. View a Premium add-on as a free, professional, and organization user
5. Dispatch a Premium add-on as a professional and organization user
6. Check the add-on history to see the amount spent during the premium add-on run

[netlify]

✅ Deploy Preview for documentcloud-frontend ready!

Name	Link
🔨 Latest commit	45157eb
🔍 Latest deploy log	https://app.netlify.com/sites/documentcloud-frontend/deploys/6567634cd33110000870b586
😎 Deploy Preview	https://deploy-preview-311.muckcloud.com/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[allanlasser]

Just a heads up that I'm going to merge in my work on the top bar to this PR as well—they both use the same API calls. While this makes for a weightier review, it avoids shipping multiple PRs that depend on the same sets of API calls (and expect API changes).

[mitchelljkotler]

Changes have been uploaded to staging. If you need staging access or your account added to the MuckRock organization, let me know.

1. Add On information. Premium is being stored as a category under parameters, although it was also suggested that the presence of a cost is enough to distinguish a premium from a non-premium add-on. Cost is also stored under parameters, as this lets the user configure it through the config.yaml. Not all have been updated yet, but below is an example of one that has been:
   https://api.muckcloud.com/api/addons/46/

{
    "id": 46,
    "user": null,
    "organization": null,
    "access": "public",
    "name": "Azure Document Intelligence OCR",
    "repository": "MuckRock/documentcloud-azure-document-intelligence-ocr-addon",
    "parameters": {
        "cost": {
            "unit": "page",
            "amount": 1
        },
        "type": "object",
        "title": "Azure Document Intelligence OCR",
        "documents": [
            "selected"
        ],
        "categories": [
            "extraction",
            "premium"
        ],
        "properties": {},
        "description": "<p>This Add-On uses Azure&rsquo;s Document Intelligence API to OCR documents. The document(s) must be public to be processed. This Add-On uses 1 AI Credit per page.</p>",
        "instructions": ""
    },
    "created_at": "2023-09-18T17:09:58.097621Z",
    "updated_at": "2023-11-15T16:04:34.442286Z",
    "active": false,
    "default": false,
    "featured": false
}

2. credits_spent was added to the AddOnRun model and API. It requires an update to the premium add-ons in order for it to be tracked properly, but we can set that up before we release.

3 & 4. Organization fields:
I added them all in at the top level, and not with the exact names you used. See below for an example. One thing to note, is that you only see the monthly_credits, purchased_credits, credit_reset_date, monthly_credit_allowance, and plan field if you are a member of the organization. This does change some of the existing field names, which will need to be updated in the frontend code.

Plan is included for all organizations if you are a member. For Individuals, it will usually be Free or Professional. For organizations it will usually be Free or Organization. We also have a handful of custom plans, which should probably be treated like paid plans (some are paid, but some are free while offering paid features). I can expand upon this if necessary.

https://api.muckcloud.com/api/organizations/1/

{
    "id": 1,
    "avatar_url": "https://squarelet-staging.s3.amazonaws.com/media/org_avatars/logo_uEHCMva.png",
    "individual": false,
    "name": "MuckRock",
    "slug": "muckrock",
    "uuid": "026530fc-df3a-4625-8317-c58965b9e383",
    "monthly_credits": 5000,
    "purchased_credits": 0,
    "credit_reset_date": "2023-11-28",
    "monthly_credit_allowance": 5000,
    "plan": "Organization"
}

[allanlasser]

Great, thanks for sharing the example results—very helpful for updating the fixtures. I'm updating the code now to account for these changes, and remove the TODO flags related to them.

Although it was also suggested that the presence of a cost is enough to distinguish a premium from a non-premium add-on.

I think it's good to keep the door open for the possibility of add-ons that are only for premium users even if they have no per-run cost. Better to set the status explicitly and not infer from a related field.

Plan is included for all organizations if you are a member. For Individuals, it will usually be Free or Professional. For organizations it will usually be Free or Organization.

What would be an example of a non-individual organization with a "Free" plan?

[allanlasser]

After reviewing with Mitch, here's a punch list for things to address before opening the PR for real:

• Capitalize category tags
• For upgrading, just redirect to Squarelet and replace "Start Free Trial" language with "Upgrade Account" or similar
• Comment out "Set a spending limit" for a future release (Allow users to set a credit spend limit when dispatching premium add-ons #343)
• Comment out "Purchase credits" stuff for a future release (Provide credit purchase method for pro users and org admins #342)
• Remove org from sidebar now that it's in navigation