From 077097fac282dfbdba605f9e4283fd39957911c2 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Thu, 5 Oct 2023 14:25:40 -0400 Subject: [PATCH 01/56] Creates Price and Credit icon components --- src/common/icons/Credit.svelte | 36 +++++++++++++++++++ src/premium-credits/Price.svelte | 25 +++++++++++++ .../stories/Price.stories.svelte | 22 ++++++++++++ src/style/variables.css | 2 ++ 4 files changed, 85 insertions(+) create mode 100644 src/common/icons/Credit.svelte create mode 100644 src/premium-credits/Price.svelte create mode 100644 src/premium-credits/stories/Price.stories.svelte diff --git a/src/common/icons/Credit.svelte b/src/common/icons/Credit.svelte new file mode 100644 index 000000000..1ffde73d4 --- /dev/null +++ b/src/common/icons/Credit.svelte @@ -0,0 +1,36 @@ + + + + + + {title} + + diff --git a/src/premium-credits/Price.svelte b/src/premium-credits/Price.svelte new file mode 100644 index 000000000..a094001fd --- /dev/null +++ b/src/premium-credits/Price.svelte @@ -0,0 +1,25 @@ + + + + + + + {value?.toLocaleString()} + diff --git a/src/premium-credits/stories/Price.stories.svelte b/src/premium-credits/stories/Price.stories.svelte new file mode 100644 index 000000000..8f1ac0ec1 --- /dev/null +++ b/src/premium-credits/stories/Price.stories.svelte @@ -0,0 +1,22 @@ + + + + + + + diff --git a/src/style/variables.css b/src/style/variables.css index 6c8744c17..1f6ef7048 100644 --- a/src/style/variables.css +++ b/src/style/variables.css @@ -3,6 +3,7 @@ --primary: #4294f0; --primary-faded: rgba(66, 148, 240, 0.13); --sidebar: #edeeef; + --white: #ffffff; --black: #000000; --gray: rgba(0, 0, 0, 0.53); --darkgray: rgba(0, 0, 0, 0.8); @@ -23,6 +24,7 @@ --actionPane: #fffdea; --highlight-orange: #ff785c; --inputBg: #ffffff; + --premium: #24CC99; /* Viewer */ --viewerPaneColor: #f3f3f3; From 2f05ab32abb6d9ecc59d6fae097f919d3850b356 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Thu, 5 Oct 2023 14:48:37 -0400 Subject: [PATCH 02/56] Creates UpgradePrompt for premium add-ons --- src/common/Button.svelte | 7 +++ src/langs/json/en.json | 18 ++++--- src/premium-credits/UpgradePrompt.svelte | 49 +++++++++++++++++++ .../stories/UpgradePrompt.stories.svelte | 25 ++++++++++ 4 files changed, 92 insertions(+), 7 deletions(-) create mode 100644 src/premium-credits/UpgradePrompt.svelte create mode 100644 src/premium-credits/stories/UpgradePrompt.stories.svelte diff --git a/src/common/Button.svelte b/src/common/Button.svelte index 2e9edd2f1..1d9cb7810 100644 --- a/src/common/Button.svelte +++ b/src/common/Button.svelte @@ -8,6 +8,7 @@ export let small = false; export let secondary = false; export let tertiary = false; + export let premium = false; export let nondescript = false; export let action = false; export let caution = false; @@ -71,6 +72,10 @@ background: var(--tertiary, #0c8a01); } + .premium { + background: var(--premium, #24cc99); + } + .danger { background: var(--caution, #f04c42); } @@ -138,6 +143,7 @@ on:click class:secondary class:tertiary + class:premium class:danger class:small class:caution @@ -157,6 +163,7 @@ on:click class:secondary class:tertiary + class:premium class:danger class:small class:caution diff --git a/src/langs/json/en.json b/src/langs/json/en.json index 8210a6fb5..6ab3e75c5 100644 --- a/src/langs/json/en.json +++ b/src/langs/json/en.json @@ -729,7 +729,11 @@ "scheduleSuccess": "Add-on is now scheduled", "runSuccess": "Add-on is now running", "selectionHelp": "From the main list, select individual documents or run a search for the documents you want, for example “+project:mueller-docs-200005”.", - "selectionLearnMore": "Learn more about how Add-Ons work" + "selectionLearnMore": "Learn more about how Add-Ons work", + "premiumUpagrade": { + "message": "This Premium Add-On uses AI to perform advanced analysis. Upgrade to a Professional account to utilize this and other powerful Add-Ons.", + "callToAction": "Start Free Trial" + } }, "addonBrowserDialog": { "title": "Browse Add-Ons", @@ -783,11 +787,11 @@ "disable": "Disable upload via email" }, "anonymous": { - "title": "Welcome to DocumentCloud, an open document archive from MuckRock!", - "p1": "This site helps organize, analyze and host millions of records contributed by verified newsrooms, research organizations and other groups that help inform the public through the user of primary source materials. Using the search bar above, you can browse through {n} publicly published documents, with thousands more added ever day.", - "p2": "If you're part of a newsroom, academic organization, or other public-interest organization that vets and publishes materials in the public interest, you can register here and request verification to upload materials, or learn more about DocumentCloud and it's powerful suite of hosting, analysis and publication tools.", - "p3": "Want more fascinating documents, open data and original reporting to your inbox? Subscribe to MuckRock's newsletter:", - "p4": "DocumentCloud is part of a suite of transparency tools from the MuckRock Foundation, a 501c3 registered non-profit. This archive is open to the public and advertisement free thanks to support from readers like you — you can learn more about our work or make a donation.", - "subscribe": "Subscribe" + "title": "Welcome to DocumentCloud, an open document archive from MuckRock!", + "p1": "This site helps organize, analyze and host millions of records contributed by verified newsrooms, research organizations and other groups that help inform the public through the user of primary source materials. Using the search bar above, you can browse through {n} publicly published documents, with thousands more added ever day.", + "p2": "If you're part of a newsroom, academic organization, or other public-interest organization that vets and publishes materials in the public interest, you can register here and request verification to upload materials, or learn more about DocumentCloud and it's powerful suite of hosting, analysis and publication tools.", + "p3": "Want more fascinating documents, open data and original reporting to your inbox? Subscribe to MuckRock's newsletter:", + "p4": "DocumentCloud is part of a suite of transparency tools from the MuckRock Foundation, a 501c3 registered non-profit. This archive is open to the public and advertisement free thanks to support from readers like you — you can learn more about our work or make a donation.", + "subscribe": "Subscribe" } } diff --git a/src/premium-credits/UpgradePrompt.svelte b/src/premium-credits/UpgradePrompt.svelte new file mode 100644 index 000000000..dcebba411 --- /dev/null +++ b/src/premium-credits/UpgradePrompt.svelte @@ -0,0 +1,49 @@ + + + + +
+
+ +

{message}

+
+
+
+
diff --git a/src/premium-credits/stories/UpgradePrompt.stories.svelte b/src/premium-credits/stories/UpgradePrompt.stories.svelte new file mode 100644 index 000000000..dca08539f --- /dev/null +++ b/src/premium-credits/stories/UpgradePrompt.stories.svelte @@ -0,0 +1,25 @@ + + + + + + + From 31b1629e4a3ed8c7173b71f73cd819f85af31435 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Thu, 5 Oct 2023 15:07:25 -0400 Subject: [PATCH 03/56] Add Premium filter to Add-On Browser --- src/addons/browser/Browser.svelte | 10 ++++++++++ src/addons/browser/Filters.svelte | 17 +++++++++++++++++ src/common/icons/Credit.svelte | 6 ++++-- src/langs/json/en.json | 3 ++- 4 files changed, 33 insertions(+), 3 deletions(-) diff --git a/src/addons/browser/Browser.svelte b/src/addons/browser/Browser.svelte index c8c2cc9bf..3056183a9 100644 --- a/src/addons/browser/Browser.svelte +++ b/src/addons/browser/Browser.svelte @@ -11,6 +11,7 @@ import Filters, { filter, FILTERS, CATEGORIES } from "./Filters.svelte"; import Pin from "../../common/icons/Pin.svelte"; import Star from "../../common/icons/Star.svelte"; + import Credit from "../../common/icons/Credit.svelte"; export let visible = false; export let per_page = 10; @@ -201,6 +202,10 @@ fill: orange; } } + .premium.tip { + background-color: hsl(161, 69%, 91%); + border-color: var(--premium, #24cc99); + } @@ -225,6 +230,11 @@

{$_("addonBrowserDialog.featuredTip")}

+ {:else if $filter === "premium"} + {/if} diff --git a/src/addons/browser/Filters.svelte b/src/addons/browser/Filters.svelte index 7d81fb107..343fcc3fa 100644 --- a/src/addons/browser/Filters.svelte +++ b/src/addons/browser/Filters.svelte @@ -6,6 +6,7 @@ ["all", "All"], ["active", "Pinned"], ["featured", "Featured"], + ["premium", "Premium"], ]; export const CATEGORIES = [ @@ -26,6 +27,7 @@ import Pin from "../../common/icons/Pin.svelte"; import Star from "../../common/icons/Star.svelte"; import Infinity from "svelte-octicons/lib/Infinity16.svelte"; + import Credit from "../../common/icons/Credit.svelte";
    @@ -80,6 +86,17 @@ +
  • + + + + +

{$_("addonBrowserDialog.categories")}

diff --git a/src/common/icons/Credit.svelte b/src/common/icons/Credit.svelte index 1ffde73d4..77d1bef38 100644 --- a/src/common/icons/Credit.svelte +++ b/src/common/icons/Credit.svelte @@ -3,6 +3,7 @@ export let size = 1; export let title = "Credit"; export let badge = false; + export let color = "#24CC99"; diff --git a/src/addons/browser/Filters.svelte b/src/addons/browser/Filters.svelte index 343fcc3fa..fa74f660d 100644 --- a/src/addons/browser/Filters.svelte +++ b/src/addons/browser/Filters.svelte @@ -89,12 +89,7 @@
  • - +
    • diff --git a/src/common/icons/Credit.svelte b/src/common/icons/Credit.svelte index 77d1bef38..04776fd19 100644 --- a/src/common/icons/Credit.svelte +++ b/src/common/icons/Credit.svelte @@ -13,13 +13,6 @@ .icon path { fill: var(--credit-color, --premium); } - .badge { - background: var(--credit-color, --premium); - border-radius: 50%; - } - .badge path { - fill: var(--white); - } {title} - + {#if badge} + + {:else} + + {/if} From 33b1e8eebfd5b00f703fc69d8bf011bd773941f8 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Thu, 5 Oct 2023 16:58:13 -0400 Subject: [PATCH 05/56] Adds Premium badge to premium addon list items --- src/addons/browser/AddOnListItem.svelte | 22 ++++++++++-- .../stories/AddOnListItem.stories.svelte | 1 + src/addons/types.ts | 1 + src/common/Badge.svelte | 35 +++++++++++++++++++ src/common/stories/Badge.demo.svelte | 12 +++++++ src/common/stories/Badge.stories.svelte | 28 +++++++++++++++ 6 files changed, 97 insertions(+), 2 deletions(-) create mode 100644 src/common/Badge.svelte create mode 100644 src/common/stories/Badge.demo.svelte create mode 100644 src/common/stories/Badge.stories.svelte diff --git a/src/addons/browser/AddOnListItem.svelte b/src/addons/browser/AddOnListItem.svelte index 7c7afd567..57da12f26 100644 --- a/src/addons/browser/AddOnListItem.svelte +++ b/src/addons/browser/AddOnListItem.svelte @@ -4,6 +4,8 @@ import AddOnPin from "../AddOnPin.svelte"; import AddOnPopularity from "../Popularity.svelte"; import type { AddOnListItem } from "../types.js"; + import Credit from "../../common/icons/Credit.svelte"; + import Badge from "../../common/Badge.svelte"; export let addon: AddOnListItem; @@ -26,13 +28,18 @@ text-align: left; } - .top-row { + .row { display: flex; align-items: flex-end; gap: 0.5rem; margin: 0.5rem; } + .badge { + margin-bottom: -0.25em; + font-size: 0.8em; + } + .metadata { display: flex; align-items: flex-end; @@ -79,7 +86,7 @@
    -
    +
    @@ -100,6 +107,17 @@ {#if addon.usage} {/if} + {#if addon.premium} + + + + {/if}
    {#if description} diff --git a/src/addons/browser/stories/AddOnListItem.stories.svelte b/src/addons/browser/stories/AddOnListItem.stories.svelte index da17ea7ac..f807b5b75 100644 --- a/src/addons/browser/stories/AddOnListItem.stories.svelte +++ b/src/addons/browser/stories/AddOnListItem.stories.svelte @@ -43,3 +43,4 @@ }, }} /> + diff --git a/src/addons/types.ts b/src/addons/types.ts index 511971f72..7a8d3905c 100644 --- a/src/addons/types.ts +++ b/src/addons/types.ts @@ -16,5 +16,6 @@ export interface AddOnListItem { documents: string[]; active: boolean; featured: boolean; + premium?: boolean; default: boolean; } diff --git a/src/common/Badge.svelte b/src/common/Badge.svelte new file mode 100644 index 000000000..ed64c81a0 --- /dev/null +++ b/src/common/Badge.svelte @@ -0,0 +1,35 @@ + + + + +
    + {#if $$slots.icon}{/if} + {label} +
    diff --git a/src/common/stories/Badge.demo.svelte b/src/common/stories/Badge.demo.svelte new file mode 100644 index 000000000..69f8136cc --- /dev/null +++ b/src/common/stories/Badge.demo.svelte @@ -0,0 +1,12 @@ + + + + + diff --git a/src/common/stories/Badge.stories.svelte b/src/common/stories/Badge.stories.svelte new file mode 100644 index 000000000..19c55e58c --- /dev/null +++ b/src/common/stories/Badge.stories.svelte @@ -0,0 +1,28 @@ + + + + + + + + From 4f6aa974ff59066339458252b7fad7910ef21ba8 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Fri, 6 Oct 2023 11:03:05 -0400 Subject: [PATCH 06/56] Adds Premium Add-On to Dispatch stories --- .../dispatch/stories/Dispatch.stories.svelte | 2 + src/addons/fixtures/addons.json | 326 ++++++++++++++++++ 2 files changed, 328 insertions(+) diff --git a/src/addons/dispatch/stories/Dispatch.stories.svelte b/src/addons/dispatch/stories/Dispatch.stories.svelte index a78b02560..a5b8f202b 100644 --- a/src/addons/dispatch/stories/Dispatch.stories.svelte +++ b/src/addons/dispatch/stories/Dispatch.stories.svelte @@ -97,3 +97,5 @@ + + diff --git a/src/addons/fixtures/addons.json b/src/addons/fixtures/addons.json index 9aded61c5..1ebb3b285 100644 --- a/src/addons/fixtures/addons.json +++ b/src/addons/fixtures/addons.json @@ -237,5 +237,331 @@ "active": false, "default": false, "featured": false + }, + { + "id": 455, + "user": 100000, + "organization": 10001, + "access": "public", + "name": "Translate Documents", + "repository": "MuckRock/google-translate-addon", + "parameters": { + "type": "object", + "title": "Translate Documents", + "required": ["access_level", "output_lang", "input_lang"], + "documents": ["selected"], + "categories": ["ai", "premium", "file"], + "properties": { + "dry_run": { + "type": "boolean", + "title": "Dry Run", + "description": "Select this to calculate the cost of running this translation, it won't translate the text if selected." + }, + "input_lang": { + "enum": [ + "af", + "sq", + "am", + "ar", + "hy", + "as", + "ay", + "az", + "bm", + "eu", + "be", + "bn", + "bho", + "bs", + "bg", + "ca", + "ceb", + "zh-CN", + "zh-TW", + "co", + "hr", + "cs", + "da", + "dv", + "doi", + "nl", + "en", + "eo", + "et", + "ee", + "fil", + "fi", + "fr", + "fy", + "gl", + "ka", + "de", + "el", + "gn", + "gu", + "ht", + "ha", + "haw", + "he", + "hi", + "hmn", + "hu", + "is", + "ig", + "ilo", + "id", + "ga", + "it", + "ja", + "jv", + "kn", + "kk", + "km", + "rw", + "gom", + "ko", + "kri", + "ku", + "ckb", + "ky", + "lo", + "la", + "lv", + "ln", + "lt", + "lg", + "lb", + "mk", + "mai", + "mg", + "ms", + "ml", + "mt", + "mi", + "mr", + "mni-Mtei", + "lus", + "mn", + "my", + "ne", + false, + "ny", + "or", + "om", + "ps", + "fa", + "pl", + "pt", + "pa", + "qu", + "ro", + "ru", + "sm", + "sa", + "gd", + "nso", + "sr", + "st", + "sn", + "sd", + "si", + "sk", + "sl", + "so", + "es", + "su", + "sw", + "sv", + "tl", + "tg", + "ta", + "tt", + "te", + "th", + "ti", + "ts", + "tr", + "tk", + "ak", + "uk", + "ur", + "ug", + "uz", + "vi", + "cy", + "xh", + "yi", + "yo", + "zu" + ], + "type": "string", + "title": "Input language code", + "default": "en" + }, + "project_id": { + "type": "integer", + "title": "Project ID", + "description": "(Optional) Project ID of project you want to upload the translations to." + }, + "output_lang": { + "enum": [ + "af", + "sq", + "am", + "ar", + "hy", + "as", + "ay", + "az", + "bm", + "eu", + "be", + "bn", + "bho", + "bs", + "bg", + "ca", + "ceb", + "zh-CN", + "zh-TW", + "co", + "hr", + "cs", + "da", + "dv", + "doi", + "nl", + "en", + "eo", + "et", + "ee", + "fil", + "fi", + "fr", + "fy", + "gl", + "ka", + "de", + "el", + "gn", + "gu", + "ht", + "ha", + "haw", + "he", + "hi", + "hmn", + "hu", + "is", + "ig", + "ilo", + "id", + "ga", + "it", + "ja", + "jv", + "kn", + "kk", + "km", + "rw", + "gom", + "ko", + "kri", + "ku", + "ckb", + "ky", + "lo", + "la", + "lv", + "ln", + "lt", + "lg", + "lb", + "mk", + "mai", + "mg", + "ms", + "ml", + "mt", + "mi", + "mr", + "mni-Mtei", + "lus", + "mn", + "my", + "ne", + false, + "ny", + "or", + "om", + "ps", + "fa", + "pl", + "pt", + "pa", + "qu", + "ro", + "ru", + "sm", + "sa", + "gd", + "nso", + "sr", + "st", + "sn", + "sd", + "si", + "sk", + "sl", + "so", + "es", + "su", + "sw", + "sv", + "tl", + "tg", + "ta", + "tt", + "te", + "th", + "ti", + "ts", + "tr", + "tk", + "ak", + "uk", + "ur", + "ug", + "uz", + "vi", + "cy", + "xh", + "yi", + "yo", + "zu" + ], + "type": "string", + "title": "Output language code", + "default": "es" + }, + "access_level": { + "enum": ["public", "private", "organization"], + "type": "string", + "title": "Access level (public, private, organization) of translations", + "default": "public" + } + }, + "description": "

    This Add-On allows you to translate documents using the Google Translate service. Supply a two character ISO 639-1 code for the input and output languages and you will receive your translation in a download as well as it will be uploaded to DocumentCloud. See https://cloud.google.com/translate/docs/languages for supported languages.

    " + }, + "created_at": "2023-07-19T19:59:18.086713Z", + "updated_at": "2023-07-19T19:59:18.088614Z", + "active": false, + "default": false, + "featured": false, + "premium": true, + "premium_cost": { + "amount": 75, + "unit": "character" + } } ] From 9e4ffb9405ce646e31471054994463c986371958 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Fri, 6 Oct 2023 11:03:13 -0400 Subject: [PATCH 07/56] Adds Premium badge to Dispatch header --- src/addons/dispatch/Header.svelte | 15 +++++++++++++-- src/common/icons/Credit.svelte | 2 -- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/src/addons/dispatch/Header.svelte b/src/addons/dispatch/Header.svelte index 80f682ae5..92e3e0a69 100644 --- a/src/addons/dispatch/Header.svelte +++ b/src/addons/dispatch/Header.svelte @@ -9,6 +9,8 @@ import { pushToast } from "../../common/Toast.svelte"; import AddOnPin from "../AddOnPin.svelte"; + import Badge from "../../common/Badge.svelte"; + import Credit from "../../common/icons/Credit.svelte"; export let addon: AddOnListItem; @@ -54,14 +56,15 @@ .name { flex: 1 1 100%; display: flex; - align-items: flex-start; - gap: 1rem; + align-items: center; + gap: 1em; } .pin { flex: 0 1 auto; } .name h2 { margin: 0; + flex: 1 1 auto; } .metadata { display: flex; @@ -116,6 +119,14 @@

    {addon.name}

    + {#if addon.premium} + + {/if}
    diff --git a/src/common/icons/Credit.svelte b/src/common/icons/Credit.svelte index 04776fd19..c4c396b9e 100644 --- a/src/common/icons/Credit.svelte +++ b/src/common/icons/Credit.svelte @@ -9,8 +9,6 @@ From 760a111ee31fcef3a41e8cc8eae32d989f56facf Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Fri, 6 Oct 2023 13:10:13 -0400 Subject: [PATCH 08/56] Adds Premium cost section to AddOn Dispatch form --- src/addons/dispatch/Dispatch.svelte | 5 +- src/addons/dispatch/Form.svelte | 4 +- src/addons/dispatch/Premium.svelte | 184 ++++++++++++++++++ .../dispatch/stories/Premium.stories.svelte | 19 ++ src/addons/fixtures/addons.json | 37 +++- src/addons/types.ts | 6 +- src/common/Button.svelte | 9 + src/langs/json/en.json | 2 + 8 files changed, 262 insertions(+), 4 deletions(-) create mode 100644 src/addons/dispatch/Premium.svelte create mode 100644 src/addons/dispatch/stories/Premium.stories.svelte diff --git a/src/addons/dispatch/Dispatch.svelte b/src/addons/dispatch/Dispatch.svelte index e8b80f73b..9b5658410 100644 --- a/src/addons/dispatch/Dispatch.svelte +++ b/src/addons/dispatch/Dispatch.svelte @@ -19,6 +19,7 @@ import { getCsrfToken } from "../../api/session.js"; import { pushToast } from "../../common/Toast.svelte"; import { runs } from "../progress/AddonRun.svelte"; + import Premium from "./Premium.svelte"; export let visible: boolean = false; export let addon: AddOnListItem; @@ -289,12 +290,14 @@ + +
    {#if event} diff --git a/src/addons/dispatch/Form.svelte b/src/addons/dispatch/Form.svelte index 270e215fb..2d5b9ccf9 100644 --- a/src/addons/dispatch/Form.svelte +++ b/src/addons/dispatch/Form.svelte @@ -124,7 +124,9 @@ {/if} - + + +
    diff --git a/src/addons/dispatch/Premium.svelte b/src/addons/dispatch/Premium.svelte new file mode 100644 index 000000000..c29fd8fca --- /dev/null +++ b/src/addons/dispatch/Premium.svelte @@ -0,0 +1,184 @@ + + + + +{#if addon.premium} +
    + {$_("addonDispatchDialog.premium")} +
    +
    +

    {prettyCost} per credit

    + +
    +
    +
    +
    Your credit balance
    +
    +
    +
    +
    +
    +{/if} diff --git a/src/addons/dispatch/stories/Premium.stories.svelte b/src/addons/dispatch/stories/Premium.stories.svelte new file mode 100644 index 000000000..e960fc6d7 --- /dev/null +++ b/src/addons/dispatch/stories/Premium.stories.svelte @@ -0,0 +1,19 @@ + + + + + + + diff --git a/src/addons/fixtures/addons.json b/src/addons/fixtures/addons.json index 1ebb3b285..70d923b98 100644 --- a/src/addons/fixtures/addons.json +++ b/src/addons/fixtures/addons.json @@ -560,7 +560,42 @@ "featured": false, "premium": true, "premium_cost": { - "amount": 75, + "amount": 150, + "unit": "character" + } + }, + { + "id": 360, + "user": 100000, + "organization": 10001, + "access": "public", + "name": "Diakopoulos GPT-3 Example: Classifying Comments Based on Subject", + "repository": "MuckRock/gpt3-classification", + "parameters": { + "type": "object", + "title": "Diakopoulos GPT-3 Example: Classifying Comments Based on Subject", + "documents": ["query", "selected"], + "categories": ["ai", "premium"], + "properties": { + "value": { + "type": "string", + "title": "Value Label" + }, + "category": { + "type": "string", + "title": "Describe the category that of records you want labeled as \"True\"" + } + }, + "description": "

    A modified implementation of the example using GPT-3 to classify documents, described by Nick Diakopoulos. For simplicity’s sake, it only implements the first half of the classification task described, but allows the user to customize the subject matter. Use with care as it may introduce factual errors, hallucinations, and other artifacts in summaries.

    \n

    Note that this plugin uses 14 credits per document analyzed, rounded up. Give this a full prompt that you would pass into GPT-3 and it will run it against your selected documents, one at a time. The Add-On only looks at the 12,000 characters of a document. The prompt refers to the user input as the “Assignment,” the document’s text as “Document Text”, and GPT-3’s generated response as the “Answer,” which can be helpful when defining your prompt.

    \n

    We’d love your feedback and ideas — drop a note to info at documentcloud dot org or join us in the News Nerdery Slack in the #proj-documentcloud channel.

    " + }, + "created_at": "2023-07-19T19:59:18.054811Z", + "updated_at": "2023-07-19T19:59:18.057428Z", + "active": false, + "default": false, + "featured": false, + "premium": true, + "premium_cost": { + "amount": 150, "unit": "character" } } diff --git a/src/addons/types.ts b/src/addons/types.ts index 7a8d3905c..665a36c1c 100644 --- a/src/addons/types.ts +++ b/src/addons/types.ts @@ -16,6 +16,10 @@ export interface AddOnListItem { documents: string[]; active: boolean; featured: boolean; - premium?: boolean; default: boolean; + premium?: boolean; + premium_cost?: { + amount: number; + unit: string; + }; } diff --git a/src/common/Button.svelte b/src/common/Button.svelte index 1d9cb7810..c2acbee09 100644 --- a/src/common/Button.svelte +++ b/src/common/Button.svelte @@ -16,6 +16,7 @@ export let disabled = false; export let plain = false; export let nomargin = false; + export let fullWidth = false; export let type: "submit" | "reset" | "button" = "submit"; export let label = "Submit"; @@ -132,6 +133,12 @@ font-weight: normal; margin: 0 5px; } + + .fullWidth { + display: flex; + width: 100%; + justify-content: center; + } @@ -151,6 +158,7 @@ class:action class:plain class:nomargin + class:fullWidth class:disabled={disabled || disabledReason != null} rel={external ? "noopener noreferrer" : null} target={external ? "_blank" : null} @@ -171,6 +179,7 @@ class:action class:plain class:nomargin + class:fullWidth disabled={disabled || disabledReason != null} {type} > diff --git a/src/langs/json/en.json b/src/langs/json/en.json index dc87b5e70..5c67cc8d7 100644 --- a/src/langs/json/en.json +++ b/src/langs/json/en.json @@ -706,6 +706,8 @@ "addons": "Add-Ons", "backButton": "Browse Add-Ons", "select": "Documents to run this Add-On against:", + "premium": "This Add-On uses Premium Credits:", + "premiumSpendLimit": "Set a spending limit", "queryNoSelected": "This Add-On will try to run against the {n, plural, one {# document} other {# documents}} currently included in your search results. To run it against only selected documents, cancel this and select some, then select the Add-On again.", "noSelected": "You must select some documents to run against. Cancel this and select some, then select the Add-On again.", "runSelected": "This Add-On will try to run against the {n, plural, one {# currently selected document} other {# currently selected documents}}.", From be72f6a6016cbb494c2226379b9be1a6fc23adf3 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Fri, 13 Oct 2023 13:42:08 -0400 Subject: [PATCH 09/56] displays premium prompt for free users --- src/addons/dispatch/Premium.svelte | 103 ++++++++++-------- .../dispatch/stories/Premium.stories.svelte | 11 +- src/langs/json/en.json | 2 +- src/premium-credits/UpgradePrompt.svelte | 2 +- 4 files changed, 70 insertions(+), 48 deletions(-) diff --git a/src/addons/dispatch/Premium.svelte b/src/addons/dispatch/Premium.svelte index c29fd8fca..e67937323 100644 --- a/src/addons/dispatch/Premium.svelte +++ b/src/addons/dispatch/Premium.svelte @@ -5,11 +5,14 @@ import Button from "../../common/Button.svelte"; import Credit from "../../common/icons/Credit.svelte"; import Price from "../../premium-credits/Price.svelte"; + import UpgradePrompt from "../../premium-credits/UpgradePrompt.svelte"; export let addon: AddOnListItem; + // TODO: Load premium user status; if not premium, show upgrade tout + export let isPremiumUser: boolean = true; // TODO: Load credit balance from connected pro/org account - const creditBalance = 7000; + export let creditBalance: number = 7000; let spendingLimitEnabled = false; let spendingLimit = 0; @@ -42,8 +45,14 @@ spendingLimit = numVal; } + function triggerPremiumUpgradeFlow() { + // TODO: Trigger the premium account upgrade flow + alert("Upgrade to premium?"); + } + function triggerCreditPurchaseFlow() { // TODO: Trigger the credit purchase flow + alert("Purchase credits?"); } @@ -136,49 +145,57 @@ {#if addon.premium} -
    - {$_("addonDispatchDialog.premium")} -
    -
    -

    {prettyCost} per credit

    -
    -
    + + {:else} + + {/if} {/if} diff --git a/src/addons/dispatch/stories/Premium.stories.svelte b/src/addons/dispatch/stories/Premium.stories.svelte index e960fc6d7..97a8dcb2e 100644 --- a/src/addons/dispatch/stories/Premium.stories.svelte +++ b/src/addons/dispatch/stories/Premium.stories.svelte @@ -12,8 +12,13 @@ parameters={{ layout: "centered" }} /> - - - - - + + + + diff --git a/src/pages/app/AccountNavigation/stories/OrgMenu.stories.svelte b/src/pages/app/AccountNavigation/stories/OrgMenu.stories.svelte index d5f38ce73..c95a8dee8 100644 --- a/src/pages/app/AccountNavigation/stories/OrgMenu.stories.svelte +++ b/src/pages/app/AccountNavigation/stories/OrgMenu.stories.svelte @@ -1,3 +1,26 @@ + + @@ -21,4 +55,20 @@ - + + + diff --git a/src/pages/app/AccountNavigation/types.ts b/src/pages/app/AccountNavigation/types.ts new file mode 100644 index 000000000..929db97c1 --- /dev/null +++ b/src/pages/app/AccountNavigation/types.ts @@ -0,0 +1,18 @@ +export type Maybe = T | undefined | null; + +export interface Org { + id: string; + name: string; + avatar_url: string; + individual: boolean; +} + +export interface User { + id: string; + name: Maybe; + avatar_url: Maybe; + username: string; + organization: string | Org; + organizations: string[]; + admin_organizations: string[]; +} From d378dd8affa8bb6864f789c3c3dbd560c2878661 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Mon, 23 Oct 2023 10:22:31 -0400 Subject: [PATCH 24/56] Reloads userList when org changes --- src/pages/app/AccountNavigation/OrgMemberList.svelte | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/pages/app/AccountNavigation/OrgMemberList.svelte b/src/pages/app/AccountNavigation/OrgMemberList.svelte index 198a76120..e3a38bf16 100644 --- a/src/pages/app/AccountNavigation/OrgMemberList.svelte +++ b/src/pages/app/AccountNavigation/OrgMemberList.svelte @@ -13,11 +13,16 @@ export let orgId; export let myId; - export async function loadUsers() { - return inMyOrg(orgId, myId); + async function loadUsers(oId) { + return inMyOrg(oId, myId); } - let promise = loadUsers(); + let promise = loadUsers(orgId); + + // Refetch the user list upon org change + $: { + promise = loadUsers(orgId); + } + + +{#if overlay && isOpen} +
    +{/if} + +
    +
    + +
    + +
    + +
    +
    diff --git a/src/common/Menu.svelte b/src/common/Menu.svelte index 52a80f4ec..5e7c4b68d 100644 --- a/src/common/Menu.svelte +++ b/src/common/Menu.svelte @@ -2,7 +2,6 @@ .menu { @include menu; - border-top-left-radius: 0; border: 1px solid #cdcdcd; padding: 7px 0; diff --git a/src/common/stories/Dropdown.demo.svelte b/src/common/stories/Dropdown.demo.svelte new file mode 100644 index 000000000..beeefc42e --- /dev/null +++ b/src/common/stories/Dropdown.demo.svelte @@ -0,0 +1,67 @@ + + + + + + + + {#each options as option} + closeDropdown("dropdown-1")}>{option} + {/each} + + + + {#each subOptions as subOption} + closeDropdown("dropdown-1-1")} + >{subOption} + {/each} + + + + + + + +
    + Placeholder +

    + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus id + metus vel euismod. Phasellus luctus, orci sit amet vestibulum tincidunt, + purus erat interdum ex, vel bibendum tortor justo sit amet lectus. Fusce + consequat, ligula non viverra auctor, velit nulla elementum lectus, nec + luctus felis libero a quam. In hac habitasse platea dictumst. Vivamus + euismod, purus non tincidunt blandit, erat augue dapibus metus, et aliquam + sapien elit ac orci. Integer ut justo nec justo vestibulum consectetur ut + non nisi. Sed vestibulum eget tortor eget tristique. Nulla facilisi. Cras + eget vehicula quam, id scelerisque ipsum. Nunc sagittis elit vitae justo + viverra, at condimentum lectus tristique. Integer nec malesuada purus. + Nullam eu bibendum libero. +

    +
    +     diff --git a/src/common/stories/Dropdown.stories.svelte b/src/common/stories/Dropdown.stories.svelte new file mode 100644 index 000000000..874384486 --- /dev/null +++ b/src/common/stories/Dropdown.stories.svelte @@ -0,0 +1,21 @@ + + + + + + + + From b1c627ab2fa424bcf3681a8d3eb0076543f4b735 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Mon, 23 Oct 2023 13:11:22 -0400 Subject: [PATCH 26/56] Uses new dropdown in all menus --- src/common/Dropdown2.svelte | 19 +++++++++- src/common/MenuItem.svelte | 5 +-- src/common/MenuTitle.svelte | 5 +-- .../AccountNavigation.svelte | 6 ++-- .../app/AccountNavigation/HelpMenu.svelte | 21 +++++++---- .../app/AccountNavigation/LanguageMenu.svelte | 23 +++++++++--- .../AccountNavigation/OrgMemberList.svelte | 1 + .../app/AccountNavigation/OrgMenu.svelte | 6 ++-- .../app/AccountNavigation/OrgPicker.svelte | 9 +++-- .../app/AccountNavigation/PremiumMenu.svelte | 35 +++++++++++++------ .../app/AccountNavigation/UserMenu.svelte | 15 +++++--- 11 files changed, 106 insertions(+), 39 deletions(-) diff --git a/src/common/Dropdown2.svelte b/src/common/Dropdown2.svelte index 02890b4ee..cd04e8fd3 100644 --- a/src/common/Dropdown2.svelte +++ b/src/common/Dropdown2.svelte @@ -33,6 +33,8 @@ export let id: string; export let position = "bottom left"; export let overlay = true; + export let border = false; + export let titleColor = "primary"; // State let dropdown; @@ -103,17 +105,31 @@ padding: 0.5rem; border-radius: var(--radius); } + .title.border { + border: 1px solid rgba(0, 0, 0, 0.1); + } .title:hover { background: var(--light-primary); } .title.open { background: var(--primary); color: var(--white); + fill: var(--white); + } + .title.premium { + color: var(--premium); + fill: var(--premium); + } + .title.premium.open { + background: var(--premium); + color: var(--white); + fill: var(--white); } .dropdown { display: none; margin: 0; width: auto; + min-width: 100%; } .dropdown.open { display: block; @@ -155,8 +171,9 @@
    diff --git a/src/common/MenuItem.svelte b/src/common/MenuItem.svelte index 616433567..0b28ff44d 100644 --- a/src/common/MenuItem.svelte +++ b/src/common/MenuItem.svelte @@ -31,10 +31,11 @@ gap: 1rem; align-items: center; justify-content: center; - padding: 6px 21px; - font-size: 16px; + padding: 0.5rem 0.75rem; + font-size: 1rem; font-family: "Source Sans Pro", sans-serif; user-select: none; + white-space: nowrap; } .item .label { diff --git a/src/common/MenuTitle.svelte b/src/common/MenuTitle.svelte index bbdee3f54..b6cd5bbcd 100644 --- a/src/common/MenuTitle.svelte +++ b/src/common/MenuTitle.svelte @@ -8,12 +8,13 @@ align-items: center; } .label { + flex: 1 1 auto; pointer-events: none; } .icon { - background-color: rgba(0, 0, 0, 0.1); + background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; - margin-right: 0.4em; + margin-right: 0.2em; overflow: hidden; } .dropper { diff --git a/src/pages/app/AccountNavigation/AccountNavigation.svelte b/src/pages/app/AccountNavigation/AccountNavigation.svelte index 61b79bc5f..fe63b8a8b 100644 --- a/src/pages/app/AccountNavigation/AccountNavigation.svelte +++ b/src/pages/app/AccountNavigation/AccountNavigation.svelte @@ -9,10 +9,11 @@ import { User, Org } from "./types"; $: user = $orgsAndUsers.me as User; - $: activeOrg = user.organization as Org; + $: activeOrg = user?.organization as Org; // TODO: include user plan information in payload // @ts-expect-error unimplemented "plan" property - $: isPremium = user.organizations.length > 0 || user?.plan === "Professional"; + $: isPremium = + user?.organizations.length > 0 || user?.plan === "Professional"; diff --git a/src/pages/app/AccountNavigation/HelpMenu.svelte b/src/pages/app/AccountNavigation/HelpMenu.svelte index 01346d390..2270d0cbf 100644 --- a/src/pages/app/AccountNavigation/HelpMenu.svelte +++ b/src/pages/app/AccountNavigation/HelpMenu.svelte @@ -1,14 +1,12 @@ + + - + - +
    diff --git a/src/pages/app/AccountNavigation/LanguageMenu.svelte b/src/pages/app/AccountNavigation/LanguageMenu.svelte index a23a34d52..2154a28cc 100644 --- a/src/pages/app/AccountNavigation/LanguageMenu.svelte +++ b/src/pages/app/AccountNavigation/LanguageMenu.svelte @@ -1,13 +1,13 @@ + + {#if langs.length > 1} - + - +
    {#each langs as [name, code, flag]} updateLanguage(code)} + on:click={() => { + updateLanguage(code); + closeDropdown("language"); + }} selected={code === $locale} > {name} diff --git a/src/pages/app/AccountNavigation/OrgMemberList.svelte b/src/pages/app/AccountNavigation/OrgMemberList.svelte index e3a38bf16..385f25640 100644 --- a/src/pages/app/AccountNavigation/OrgMemberList.svelte +++ b/src/pages/app/AccountNavigation/OrgMemberList.svelte @@ -42,6 +42,7 @@ align-items: center; gap: 0.5rem; font-size: 0.875em; + white-space: nowrap; } .userListItem:hover { background: var(--light-primary); diff --git a/src/pages/app/AccountNavigation/OrgMenu.svelte b/src/pages/app/AccountNavigation/OrgMenu.svelte index 582e4dad4..f6f96b975 100644 --- a/src/pages/app/AccountNavigation/OrgMenu.svelte +++ b/src/pages/app/AccountNavigation/OrgMenu.svelte @@ -5,7 +5,7 @@ import { _ } from "svelte-i18n"; import Organization16 from "svelte-octicons/lib/Organization16.svelte"; - import Dropdown from "../../../common/Dropdown.svelte"; + import Dropdown from "../../../common/Dropdown2.svelte"; import Menu from "../../../common/Menu.svelte"; import MenuItem from "../../../common/MenuItem.svelte"; import MenuTitle from "../../../common/MenuTitle.svelte"; @@ -57,7 +57,7 @@ {#await activeOrgPromise} - + @@ -66,7 +66,7 @@     {:then activeOrg} - + {#if activeOrg.avatar_url} diff --git a/src/pages/app/AccountNavigation/OrgPicker.svelte b/src/pages/app/AccountNavigation/OrgPicker.svelte index 5c0475886..93040019f 100644 --- a/src/pages/app/AccountNavigation/OrgPicker.svelte +++ b/src/pages/app/AccountNavigation/OrgPicker.svelte @@ -1,5 +1,5 @@ - + -
    +
    @@ -75,21 +84,27 @@ on:click={triggerPremiumUpgradeFlow} />
    - + {$_("authSection.premiumUpgrade.docs")}
    {/if} - + {$_("authSection.premiumUpgrade.addons")} - - - {$_("authSection.premiumUpgrade.orgs")} - + + + + {$_("authSection.premiumUpgrade.orgs")} + + diff --git a/src/pages/app/AccountNavigation/UserMenu.svelte b/src/pages/app/AccountNavigation/UserMenu.svelte index c01eb118f..d737d3a3c 100644 --- a/src/pages/app/AccountNavigation/UserMenu.svelte +++ b/src/pages/app/AccountNavigation/UserMenu.svelte @@ -1,7 +1,7 @@ {#if user} - + {#if user.avatar_url} @@ -46,15 +51,15 @@ - + {$_("authSection.user.acctSettings")} - + {$_("authSection.user.uploadEmail")} - + {$_("authSection.user.signOut")} From dd8d9751f45c7fa6f5cc14103e9f2858b33d3128 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Wed, 25 Oct 2023 14:47:51 -0400 Subject: [PATCH 27/56] Moves error catching out of API call --- src/api/orgAndUser.js | 12 ++++-------- src/manager/orgsAndUsers.js | 6 +++++- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/api/orgAndUser.js b/src/api/orgAndUser.js index d8f80f47b..edfe92318 100644 --- a/src/api/orgAndUser.js +++ b/src/api/orgAndUser.js @@ -14,14 +14,10 @@ export async function getMe(expand = DEFAULT_EXPAND) { } } // Check that the user is logged in via network request - try { - const { data } = await session.get( - queryBuilder(apiUrl(`users/me/`), { expand }), - ); - return data; - } catch (e) { - return null; - } + const { data } = await session.get( + queryBuilder(apiUrl(`users/me/`), { expand }), + ); + return data; } export async function getUser(id, expand = DEFAULT_EXPAND) { diff --git a/src/manager/orgsAndUsers.js b/src/manager/orgsAndUsers.js index 5381ff641..36fc0c902 100644 --- a/src/manager/orgsAndUsers.js +++ b/src/manager/orgsAndUsers.js @@ -116,7 +116,11 @@ function initProjectsIfNecessary(route) { } export async function initOrgsAndUsers(callback = null) { - orgsAndUsers.me = await getMe(); + try { + orgsAndUsers.me = await getMe(); + } catch (e) { + orgsAndUsers.me = null; + } if (orgsAndUsers.me !== null) { // Logged in orgsAndUsers.usersById[orgsAndUsers.me.id] = orgsAndUsers.me; From 3d58848ec1ab0724cd078c1489bfd59010b23c64 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Wed, 25 Oct 2023 14:49:09 -0400 Subject: [PATCH 28/56] Data loading in AccountNavigation --- src/common/MenuTitle.svelte | 3 +- .../AccountNavigation.svelte | 39 +++++++---- .../AccountNavigation/OrgMemberList.svelte | 10 ++- .../app/AccountNavigation/OrgMenu.svelte | 68 ++++++++++++------- .../app/AccountNavigation/OrgPicker.svelte | 11 +-- .../app/AccountNavigation/PremiumMenu.svelte | 3 +- 6 files changed, 84 insertions(+), 50 deletions(-) diff --git a/src/common/MenuTitle.svelte b/src/common/MenuTitle.svelte index b6cd5bbcd..be9dd7d20 100644 --- a/src/common/MenuTitle.svelte +++ b/src/common/MenuTitle.svelte @@ -12,9 +12,10 @@ pointer-events: none; } .icon { + flex: 0 0 auto; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; - margin-right: 0.2em; + margin-right: 0.325em; overflow: hidden; } .dropper { diff --git a/src/pages/app/AccountNavigation/AccountNavigation.svelte b/src/pages/app/AccountNavigation/AccountNavigation.svelte index fe63b8a8b..f1288780f 100644 --- a/src/pages/app/AccountNavigation/AccountNavigation.svelte +++ b/src/pages/app/AccountNavigation/AccountNavigation.svelte @@ -1,19 +1,30 @@ -{#await activeOrgPromise} +{#await getOrgPromise} @@ -66,23 +72,33 @@ {:then activeOrg} - - - - {#if activeOrg.avatar_url} - - {:else} -
    + {#if activeOrg.individual} + + {#await listOrgsPromise then orgOptions} + {#if orgOptions.length > 1} + {/if} -     -     - - - {#await orgListPromise} - - {:then orgOptions} - {/await} - -     + + {:else} + + + + {#if activeOrg.avatar_url} + + {:else} +
    + {/if} +     +     + + + {#await listOrgsPromise then orgOptions} + {#if orgOptions.length > 1} + + {/if} + {/await} + +     + {/if} {/await} diff --git a/src/pages/app/AccountNavigation/OrgPicker.svelte b/src/pages/app/AccountNavigation/OrgPicker.svelte index 93040019f..a2fd72159 100644 --- a/src/pages/app/AccountNavigation/OrgPicker.svelte +++ b/src/pages/app/AccountNavigation/OrgPicker.svelte @@ -1,11 +1,14 @@ + + @@ -58,17 +107,42 @@ From dbcd26c717cb0e6379b9e5e0f758e95df13f1175 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Thu, 26 Oct 2023 11:13:30 -0400 Subject: [PATCH 30/56] Creates CreditMeter component --- src/premium-credits/CreditMeter.svelte | 73 +++++++++++++++++++ src/premium-credits/Price.svelte | 8 +- .../stories/CreditMeter.stories.svelte | 42 +++++++++++ 3 files changed, 121 insertions(+), 2 deletions(-) create mode 100644 src/premium-credits/CreditMeter.svelte create mode 100644 src/premium-credits/stories/CreditMeter.stories.svelte diff --git a/src/premium-credits/CreditMeter.svelte b/src/premium-credits/CreditMeter.svelte new file mode 100644 index 000000000..e111356cc --- /dev/null +++ b/src/premium-credits/CreditMeter.svelte @@ -0,0 +1,73 @@ + + + + + diff --git a/src/premium-credits/Price.svelte b/src/premium-credits/Price.svelte index a094001fd..c95105488 100644 --- a/src/premium-credits/Price.svelte +++ b/src/premium-credits/Price.svelte @@ -2,24 +2,28 @@ import Credit from "../common/icons/Credit.svelte"; export let value: number; + export let iconSize = 1; - + {value?.toLocaleString()} diff --git a/src/premium-credits/stories/CreditMeter.stories.svelte b/src/premium-credits/stories/CreditMeter.stories.svelte new file mode 100644 index 000000000..388bc2749 --- /dev/null +++ b/src/premium-credits/stories/CreditMeter.stories.svelte @@ -0,0 +1,42 @@ + + + + + + + + + + + From 0ded97dbc91ebbd4d20dbe412bffc13eae0d2695 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Thu, 26 Oct 2023 14:28:05 -0400 Subject: [PATCH 31/56] Creates generic `MenuInsert` component --- src/common/MenuInsert.svelte | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 src/common/MenuInsert.svelte diff --git a/src/common/MenuInsert.svelte b/src/common/MenuInsert.svelte new file mode 100644 index 000000000..607319a7c --- /dev/null +++ b/src/common/MenuInsert.svelte @@ -0,0 +1,16 @@ + + +
    + +
    From e2b18fb2254130f34dfba28662669ea27a38fd79 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Thu, 26 Oct 2023 14:28:27 -0400 Subject: [PATCH 32/56] Cleans up --- .../AccountNavigation/OrgMemberList.svelte | 2 +- .../app/AccountNavigation/OrgMenu.svelte | 53 +++++++++++++---- .../app/AccountNavigation/PremiumMenu.svelte | 57 +++++++++++++------ .../app/AccountNavigation/fixtures/getMe.json | 10 +++- .../AccountNavigation/fixtures/orgList.json | 17 ++++-- .../stories/AccountNavigation.stories.svelte | 53 ++++++++++++++--- .../stories/OrgMenu.stories.svelte | 32 +++-------- .../stories/PremiumMenu.stories.svelte | 9 ++- .../stories/UserMenu.stories.svelte | 5 +- src/pages/app/AccountNavigation/types.ts | 10 ++++ src/premium-credits/CreditMeter.svelte | 5 +- 11 files changed, 177 insertions(+), 76 deletions(-) diff --git a/src/pages/app/AccountNavigation/OrgMemberList.svelte b/src/pages/app/AccountNavigation/OrgMemberList.svelte index c04edf4eb..ac1f27323 100644 --- a/src/pages/app/AccountNavigation/OrgMemberList.svelte +++ b/src/pages/app/AccountNavigation/OrgMemberList.svelte @@ -35,7 +35,7 @@ list-style-type: none; padding: 0; margin: 0; - max-height: 19rem; + max-height: 14rem; overflow-y: auto; } .userListItem { diff --git a/src/pages/app/AccountNavigation/OrgMenu.svelte b/src/pages/app/AccountNavigation/OrgMenu.svelte index 6b05bf192..69d2cef4d 100644 --- a/src/pages/app/AccountNavigation/OrgMenu.svelte +++ b/src/pages/app/AccountNavigation/OrgMenu.svelte @@ -1,13 +1,9 @@ - - {#await getOrgPromise} @@ -72,8 +78,8 @@     {:then activeOrg} - {#if activeOrg.individual} - + {#if activeOrg.individual === true} + {#await listOrgsPromise then orgOptions} {#if orgOptions.length > 1} @@ -92,6 +98,33 @@ + + + + {#if user.admin_organizations.includes(activeOrg.id)} + +
    + +
    + + +
    +

    {addon.name}

    - {#if isPremium} - - {/if}
    @@ -140,26 +162,28 @@ {#if addon?.parameters?.categories}
    {$_("addonDispatchDialog.categories")}
    {#each addon.parameters.categories as category} -
    - - {category} - -
    + {#if category !== "premium"} +
    + + {category} + +
    + {/if} {/each} {/if}
    + {#if isPremium} + + {/if}
    -
    - - -
    -
    {@html addon?.parameters?.description}
    diff --git a/src/addons/fixtures/addons.json b/src/addons/fixtures/addons.json index 27d567c44..ba7304a40 100644 --- a/src/addons/fixtures/addons.json +++ b/src/addons/fixtures/addons.json @@ -563,6 +563,32 @@ "default": false, "featured": false }, + { + "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": "

    This Add-On uses Azure’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.

    ", + "instructions": "" + }, + "created_at": "2023-09-18T17:09:58.097621Z", + "updated_at": "2023-11-15T16:04:34.442286Z", + "active": false, + "default": false, + "featured": false + }, { "id": 360, "user": 100000, From e5d298c7f52f2506c58fd62d9001b1109819e186 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Fri, 17 Nov 2023 16:56:42 -0500 Subject: [PATCH 45/56] Handles plan upgrade action and updates language --- src/langs/json/en.json | 4 ++-- src/manager/orgsAndUsers.js | 6 ++++-- src/pages/app/AccountNavigation/PremiumMenu.svelte | 2 +- 3 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/langs/json/en.json b/src/langs/json/en.json index c357f9fd8..7bbd05bc2 100644 --- a/src/langs/json/en.json +++ b/src/langs/json/en.json @@ -375,7 +375,7 @@ "docs": "Learn more about DocumentCloud Premium", "addons": "Explore premium add-ons", "orgs": "Join or start an organization", - "startTrial": "Start Free Trial" + "cta": "Upgrade Plan" }, "org": { "changeOrg": "Change organization", @@ -763,7 +763,7 @@ "selectionLearnMore": "Learn more about how Add-Ons work", "premiumUpgrade": { "message": "This Premium Add-On uses AI to perform advanced analysis. Upgrade to a Professional account to utilize this and other powerful Add-Ons.", - "callToAction": "Start Free Trial" + "callToAction": "Upgrade Plan" } }, "addonBrowserDialog": { diff --git a/src/manager/orgsAndUsers.js b/src/manager/orgsAndUsers.js index 810f9473c..48f2d4e12 100644 --- a/src/manager/orgsAndUsers.js +++ b/src/manager/orgsAndUsers.js @@ -11,6 +11,7 @@ import { getUsers, getOrganization, } from "../api/orgAndUser.js"; +import { SQUARELET_URL } from "../api/auth.js"; import { projects, initProjects } from "./projects.js"; import { userUrl, allDocumentsUrl } from "../search/search.js"; import { layout } from "./layout.js"; @@ -229,9 +230,10 @@ export function getCreditBalance(org) { return org.monthly_credits + org.purchased_credits; } -// TODO: Handle flow to upgrade user to Pro account export async function triggerPremiumUpgradeFlow() { - alert("Upgrade to Premium!"); + // Redirect the user to their Squarelet account settings + const url = SQUARELET_URL + `/users/~payment/`; + window?.open(url); } // TODO: Handle flow for purchasing premium credits diff --git a/src/pages/app/AccountNavigation/PremiumMenu.svelte b/src/pages/app/AccountNavigation/PremiumMenu.svelte index 485420e6f..4a57a889b 100644 --- a/src/pages/app/AccountNavigation/PremiumMenu.svelte +++ b/src/pages/app/AccountNavigation/PremiumMenu.svelte @@ -104,7 +104,7 @@ {$_("authSection.premiumUpgrade.description")}

    Your credit balance
    +
    diff --git a/src/manager/orgsAndUsers.js b/src/manager/orgsAndUsers.js index 48f2d4e12..a9b10f7d1 100644 --- a/src/manager/orgsAndUsers.js +++ b/src/manager/orgsAndUsers.js @@ -236,7 +236,7 @@ export async function triggerPremiumUpgradeFlow() { window?.open(url); } -// TODO: Handle flow for purchasing premium credits +// TODO: Handle flow for purchasing premium credits (#342) export async function triggerCreditPurchaseFlow() { alert("Purchase Credits!"); } diff --git a/src/pages/app/AccountNavigation/OrgMenu.svelte b/src/pages/app/AccountNavigation/OrgMenu.svelte index 85b32d51f..6fb7aa688 100644 --- a/src/pages/app/AccountNavigation/OrgMenu.svelte +++ b/src/pages/app/AccountNavigation/OrgMenu.svelte @@ -108,6 +108,7 @@ value={activeOrg.monthly_credits} max={activeOrg.monthly_credit_allowance} /> + {#await listOrgsPromise then orgOptions} diff --git a/src/pages/app/AccountNavigation/PremiumMenu.svelte b/src/pages/app/AccountNavigation/PremiumMenu.svelte index 4a57a889b..9db21ec26 100644 --- a/src/pages/app/AccountNavigation/PremiumMenu.svelte +++ b/src/pages/app/AccountNavigation/PremiumMenu.svelte @@ -84,6 +84,7 @@ value={monthly_credits} max={monthly_credit_allowance} /> + {:else} From 8d19d75be824974fd64f76ce25d4c77d9ebb11b4 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Fri, 17 Nov 2023 17:16:53 -0500 Subject: [PATCH 47/56] Removes OrgUsers from application Sidebar --- src/pages/app/sidebar/OrgUsers.svelte | 76 --------------------------- src/pages/app/sidebar/Sidebar.svelte | 2 - 2 files changed, 78 deletions(-) delete mode 100644 src/pages/app/sidebar/OrgUsers.svelte diff --git a/src/pages/app/sidebar/OrgUsers.svelte b/src/pages/app/sidebar/OrgUsers.svelte deleted file mode 100644 index d313e1aa1..000000000 --- a/src/pages/app/sidebar/OrgUsers.svelte +++ /dev/null @@ -1,76 +0,0 @@ - - - - -
    - {#if $orgsAndUsers.me !== null && !$orgsAndUsers.me.organization.individual} -
    - -

    - {$_("organizations.sameOrgUsers")}: {$orgsAndUsers.me.organization.name} -

    -     - -
      - {#each $orgsAndUsers.sameOrgUsers as user} -
    • - - {user.name} - {#if user.admin_organizations.includes($orgsAndUsers.me.organization.id)} - (Admin) - {/if} - -
      • - {/each} -
    -
    - {/if} -
    diff --git a/src/pages/app/sidebar/Sidebar.svelte b/src/pages/app/sidebar/Sidebar.svelte index 41190400d..981382a04 100644 --- a/src/pages/app/sidebar/Sidebar.svelte +++ b/src/pages/app/sidebar/Sidebar.svelte @@ -7,7 +7,6 @@ import ProjectFilters from "./ProjectFilters.svelte"; import Projects from "./Projects.svelte"; - import OrgUsers from "./OrgUsers.svelte"; import AddonSidebar from "../../../addons/sidebar/Sidebar.svelte"; @@ -73,7 +72,6 @@ {#if $orgsAndUsers.me !== null} - {/if} From 9c93761c28f0d8b3430ee5dbb8f04724f8babd89 Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Tue, 21 Nov 2023 16:39:53 -0500 Subject: [PATCH 48/56] Updates AddOn Dispatch Premium component to account for free Org accounts --- src/addons/dispatch/Dispatch.svelte | 2 +- src/addons/dispatch/Premium.svelte | 26 ++++-- .../dispatch/stories/Premium.stories.svelte | 91 +++++++++++++++++-- src/langs/json/en.json | 5 +- src/manager/orgsAndUsers.js | 24 ++++- src/pages/app/AccountNavigation/types.ts | 1 + src/premium-credits/UpgradePrompt.svelte | 10 +- .../stories/UpgradePrompt.stories.svelte | 17 ++-- 8 files changed, 144 insertions(+), 32 deletions(-) diff --git a/src/addons/dispatch/Dispatch.svelte b/src/addons/dispatch/Dispatch.svelte index 0a9e32e73..685e41e8c 100644 --- a/src/addons/dispatch/Dispatch.svelte +++ b/src/addons/dispatch/Dispatch.svelte @@ -307,7 +307,7 @@ documents={new Set(addon.parameters.documents)} /> - +
    diff --git a/src/addons/dispatch/Premium.svelte b/src/addons/dispatch/Premium.svelte index bc99133f0..18a23fe7a 100644 --- a/src/addons/dispatch/Premium.svelte +++ b/src/addons/dispatch/Premium.svelte @@ -7,18 +7,24 @@ import Price from "../../premium-credits/Price.svelte"; import UpgradePrompt from "../../premium-credits/UpgradePrompt.svelte"; import { + isPremiumOrg, + getCreditBalance, triggerCreditPurchaseFlow, triggerPremiumUpgradeFlow, + isOrgAdmin, } from "../../manager/orgsAndUsers"; + import { User } from "../../pages/app/AccountNavigation/types"; export let addon: AddOnListItem; - export let isPremiumUser: boolean; - export let creditBalance: number; + export let user: User; let spendingLimitEnabled = false; let spendingLimit = 0; + $: creditBalance = getCreditBalance(user.organization); + $: isIndividualOrg = + typeof user.organization !== "string" && user.organization.individual; $: isPremium = addon?.parameters?.categories?.includes("premium") ?? false; const { amount, unit } = addon?.parameters?.cost ?? {}; $: prettyCost = amount && unit ? handlePlural(amount, unit) : null; @@ -138,7 +144,7 @@ {#if isPremium} - {#if isPremiumUser} + {#if isPremiumOrg(user.organization)}
    {$_("addonDispatchDialog.premium")}
    @@ -192,11 +198,19 @@
    - {:else} + {:else if isOrgAdmin(user)} triggerPremiumUpgradeFlow(user.organization)} + /> + {:else} + {/if} {/if} diff --git a/src/addons/dispatch/stories/Premium.stories.svelte b/src/addons/dispatch/stories/Premium.stories.svelte index 7337eae1e..8a06e455a 100644 --- a/src/addons/dispatch/stories/Premium.stories.svelte +++ b/src/addons/dispatch/stories/Premium.stories.svelte @@ -4,6 +4,46 @@ import Premium from "../Premium.svelte"; import * as addons from "../../fixtures/addons.json"; + + const individualOrg = { + id: 4, + avatar_url: + "https://cdn.muckrock.com/media/account_images/allan-headshot-2016.jpg", + individual: true, + name: "lasser.allan", + slug: "lasserallan", + monthly_credits: 2500, + purchased_credits: 3000, + credit_reset_date: "2023-11-28", + monthly_credit_allowance: 2500, + plan: "Professional", + }; + + const groupOrg = { + id: 1, + avatar_url: + "https://squarelet-staging.s3.amazonaws.com/media/org_avatars/logo_uEHCMva.png", + individual: false, + name: "MuckRock", + slug: "muckrock", + monthly_credits: 5000, + purchased_credits: 0, + credit_reset_date: "2023-11-28", + monthly_credit_allowance: 5000, + plan: "Organization", + }; + + const user = { + id: 4, + avatar_url: + "https://cdn.muckrock.com/media/account_images/allan-headshot-2016.jpg", + name: "Allan Lasser", + organization: groupOrg, + organizations: [1, 4], + admin_organizations: [4], + username: "lasser.allan", + verified_journalist: true, + }; + + + + diff --git a/src/langs/json/en.json b/src/langs/json/en.json index 7bbd05bc2..5a446bf23 100644 --- a/src/langs/json/en.json +++ b/src/langs/json/en.json @@ -762,8 +762,9 @@ "selectionHelp": "From the main list, select individual documents or run a search for the documents you want, for example “+project:mueller-docs-200005”.", "selectionLearnMore": "Learn more about how Add-Ons work", "premiumUpgrade": { - "message": "This Premium Add-On uses AI to perform advanced analysis. Upgrade to a Professional account to utilize this and other powerful Add-Ons.", - "callToAction": "Upgrade Plan" + "message": "This Premium Add-On uses AI to perform advanced analysis. Upgrade to a {plan} account to utilize this and other powerful Add-Ons.", + "callToAction": "Upgrade Plan", + "memberMessage": "This Premium Add-On uses AI to perform advanced analysis. Contact your organization admin about upgrading your plan." } }, "addonBrowserDialog": { diff --git a/src/manager/orgsAndUsers.js b/src/manager/orgsAndUsers.js index a9b10f7d1..0bce200fb 100644 --- a/src/manager/orgsAndUsers.js +++ b/src/manager/orgsAndUsers.js @@ -220,9 +220,17 @@ export async function inMyOrg(orgId, myId) { return [...adminUsers, ...regularUsers].filter((u) => u.id !== myId); } +export function isOrgAdmin(user) { + const id = + typeof user.organization === "string" + ? user.organization + : user.organization.id; + return user.admin_organizations.includes(id); +} + export function isPremiumOrg(org) { - if (!org) return null; - return !org.individual || org.plan === "Professional"; + if (!org || !org.plan) return null; + return ["Professional", "Organization"].includes(org.plan); } export function getCreditBalance(org) { @@ -230,9 +238,15 @@ export function getCreditBalance(org) { return org.monthly_credits + org.purchased_credits; } -export async function triggerPremiumUpgradeFlow() { - // Redirect the user to their Squarelet account settings - const url = SQUARELET_URL + `/users/~payment/`; +export async function triggerPremiumUpgradeFlow(org) { + let url; + if (org.individual) { + // Redirect the user to their Squarelet account settings + url = SQUARELET_URL + `/users/~payment/`; + } else { + // Redirect the user to the Squarelet organization settings + url = SQUARELET_URL + `/organizations/${org.slug}/payment/`; + } window?.open(url); } diff --git a/src/pages/app/AccountNavigation/types.ts b/src/pages/app/AccountNavigation/types.ts index 5bc4554fa..99ea5ffe7 100644 --- a/src/pages/app/AccountNavigation/types.ts +++ b/src/pages/app/AccountNavigation/types.ts @@ -10,6 +10,7 @@ interface PremiumOrgFields { export interface Org extends Partial { id: string; name: string; + slug: string; avatar_url: string; individual: boolean; plan: "Free" | "Professional" | "Organization"; diff --git a/src/premium-credits/UpgradePrompt.svelte b/src/premium-credits/UpgradePrompt.svelte index 8d821fc9d..70a88557b 100644 --- a/src/premium-credits/UpgradePrompt.svelte +++ b/src/premium-credits/UpgradePrompt.svelte @@ -4,7 +4,7 @@ import Button from "../common/Button.svelte"; export let message: string; - export let callToAction: string; + export let callToAction: string | null = null; {#if isPremium} - {#if isPremiumOrg(user.organization)} + {#if isPremiumOrg(user?.organization)}
    {$_("addonDispatchDialog.premium")}
    @@ -206,7 +208,7 @@ }, })} callToAction={$_("addonDispatchDialog.premiumUpgrade.callToAction")} - on:click={() => triggerPremiumUpgradeFlow(user.organization)} + on:click={() => triggerPremiumUpgradeFlow(user?.organization)} /> {:else} Date: Wed, 22 Nov 2023 16:11:46 -0500 Subject: [PATCH 51/56] Fixes Playwright tests --- src/pages/app/AccountNavigation/LanguageMenu.svelte | 5 +---- tests/anonymous/manager/app.spec.js | 10 +++++----- tests/anonymous/pages/home.spec.js | 2 +- 3 files changed, 7 insertions(+), 10 deletions(-) diff --git a/src/pages/app/AccountNavigation/LanguageMenu.svelte b/src/pages/app/AccountNavigation/LanguageMenu.svelte index 2154a28cc..ccb1bb3f3 100644 --- a/src/pages/app/AccountNavigation/LanguageMenu.svelte +++ b/src/pages/app/AccountNavigation/LanguageMenu.svelte @@ -32,10 +32,7 @@ {#if langs.length > 1} - +
    diff --git a/tests/anonymous/manager/app.spec.js b/tests/anonymous/manager/app.spec.js index 41703742b..5b338d954 100644 --- a/tests/anonymous/manager/app.spec.js +++ b/tests/anonymous/manager/app.spec.js @@ -29,16 +29,16 @@ test.describe("manager tests", () => { await page.goto("/app"); // help - await page.getByText("Help ▼").click(); + await page.getByText("Help", { exact: true }).dispatchEvent("click"); await expect(page.getByRole("button", { name: "FAQ" })).toBeVisible(); // close the menu - await page.locator(".shim").click(); + await page.locator(".overlay").click(); // language - await page.getByText("Language ▼").click(); - await expect(page.getByRole("button", { name: "English ✓" })).toBeVisible(); + await page.getByText("Language", { exact: true }).dispatchEvent("click"); + await expect(page.getByRole("button", { name: "Español" })).toBeVisible(); - await page.locator(".shim").click(); + await page.locator(".overlay").click(); }); }); diff --git a/tests/anonymous/pages/home.spec.js b/tests/anonymous/pages/home.spec.js index 699c9aecc..6bc3be552 100644 --- a/tests/anonymous/pages/home.spec.js +++ b/tests/anonymous/pages/home.spec.js @@ -11,7 +11,7 @@ test("basic homepage test", async ({ page }) => { await page.getByRole("banner").getByRole("link").first().click(); // and back - await page.getByRole("link", { name: "Home" }).click(); + await page.goBack(); await expect(page).toHaveTitle("Home | DocumentCloud"); }); From 7ca13f57f66a598f4a706c89de4fb8ce4456c94a Mon Sep 17 00:00:00 2001 From: Allan Lasser Date: Tue, 28 Nov 2023 15:14:36 -0500 Subject: [PATCH 52/56] Fixes org switching --- .../app/AccountNavigation/OrgMenu.svelte | 95 ++++++++++--------- .../app/AccountNavigation/OrgPicker.svelte | 4 +- 2 files changed, 52 insertions(+), 47 deletions(-) diff --git a/src/pages/app/AccountNavigation/OrgMenu.svelte b/src/pages/app/AccountNavigation/OrgMenu.svelte index 1f4c13c57..796880aaa 100644 --- a/src/pages/app/AccountNavigation/OrgMenu.svelte +++ b/src/pages/app/AccountNavigation/OrgMenu.svelte @@ -42,9 +42,9 @@ return orgs; } - async function changeOrg(id) { - changeActive(id); - getOrgPromise = getOrg(id); + async function changeOrg(org) { + changeActive(org); + getOrgPromise = getOrg(org.id); } let getOrgPromise = getOrg(org.id); @@ -70,6 +70,9 @@ color: var(--gray); margin: 0; } + .medium-width { + min-width: 20rem; + } {#await getOrgPromise} @@ -102,20 +105,21 @@ - {#if isPremiumOrg(activeOrg)} - - - - - {:else if isOrgAdmin(user)} - -
    -

    - {$_("authSection.premiumUpgrade.orgHeading")} -

    -

    - {$_("authSection.premiumUpgrade.orgDescription")} -

    -
    -
    - - {/if} - - {#await listOrgsPromise then orgOptions} - {#if orgOptions.length > 1} - + {/if} - {/await} + + {#await listOrgsPromise then orgOptions} + {#if orgOptions.length > 1} + + {/if} + {/await} +
    {/if} diff --git a/src/pages/app/AccountNavigation/OrgPicker.svelte b/src/pages/app/AccountNavigation/OrgPicker.svelte index a2fd72159..f5bf8843c 100644 --- a/src/pages/app/AccountNavigation/OrgPicker.svelte +++ b/src/pages/app/AccountNavigation/OrgPicker.svelte @@ -12,7 +12,7 @@ export let activeOrg: Org; export let loading = false; export let orgOptions: Org[] = []; - export let handleChange: (id: string) => void = () => {}; + export let handleChange: (org: Org) => void = () => {};