From 4f81496d686afd33f72cf4a936b17328843627ea Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Wed, 13 Dec 2023 11:49:25 -0500
Subject: [PATCH] Makes uploadOptions responsive to user premium status

---
 src/api/fixtures/orgAndUser.fixtures.js       |  28 +++
 src/common/UploadOptions.svelte               | 162 ++++++++++++------
 .../stories/UploadOptions.stories.svelte      |  27 ++-
 src/langs/json/en.json                        |   5 +-
 src/manager/orgsAndUsers.js                   |  15 +-
 src/pages/app/accounts/stories/mockData.ts    |  20 +++
 6 files changed, 194 insertions(+), 63 deletions(-)

diff --git a/src/api/fixtures/orgAndUser.fixtures.js b/src/api/fixtures/orgAndUser.fixtures.js
index 80e3db25e..387c24afe 100644
--- a/src/api/fixtures/orgAndUser.fixtures.js
+++ b/src/api/fixtures/orgAndUser.fixtures.js
@@ -205,3 +205,31 @@ export const organization = {
   monthly_credit_allowance: 5000,
   plan: "Organization",
 };
+
+export const proOrg = {
+  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",
+};
+
+export const freeOrg = {
+  id: 4,
+  avatar_url:
+    "https://cdn.muckrock.com/media/account_images/allan-headshot-2016.jpg",
+  individual: true,
+  name: "lasser.allan",
+  slug: "lasserallan",
+  monthly_credits: 0,
+  purchased_credits: 0,
+  credit_reset_date: "2023-11-28",
+  monthly_credit_allowance: 0,
+  plan: "Free",
+};
diff --git a/src/common/UploadOptions.svelte b/src/common/UploadOptions.svelte
index 8a1f00237..73b494feb 100644
--- a/src/common/UploadOptions.svelte
+++ b/src/common/UploadOptions.svelte
@@ -9,10 +9,16 @@
   import type { Org, User } from "../pages/app/accounts/types.js";
   import { getMe, getOrganization } from "../api/orgAndUser.js";
   import { onMount } from "svelte";
+  import {
+    getUpgradeURL,
+    isOrgAdmin,
+    isPremiumOrg,
+  } from "../manager/orgsAndUsers.js";
+  import PremiumBadge from "../premium-credits/PremiumBadge.svelte";
 
   export let language = defaultLanguage;
   export let forceOcr = false;
-  export let ocrEngine = "tess4";
+  export let ocrEngine: "tess4" | "textract" = "tess4";
   export let revisionControl = false;
 
   let languageName = defaultLanguageName(languages);
@@ -23,25 +29,31 @@
   async function getUser() {
     try {
       user = await getMe();
-      const activeOrg = user?.organization;
+    } catch (e) {
+      user = null;
+      console.error("Error setting User: ", JSON.stringify(e, null, 2));
+    }
+    try {
+      let activeOrg = user?.organization;
       if (typeof activeOrg === "string") {
-        org = await getOrganization(activeOrg);
+        org = (await getOrganization(activeOrg)) as Org;
       } else {
         org = activeOrg;
       }
     } catch (e) {
-      user = null;
+      org = null;
+      console.error("Error setting Org: ", JSON.stringify(e, null, 2));
     }
   }
 
-  $: hasTextract = user?.feature_level > 0;
   $: selectLanguages = ocrEngine === "textract" ? textractLanguages : languages;
+  $: hasTextract = isPremiumOrg(org);
 
   // value, name, disabled
-  type OCREngine = [string, string, boolean];
+  type OCREngine = [value: string, name: string, isPremium: boolean];
   const ocrEngines: OCREngine[] = [
     ["tess4", "Tesseract", false],
-    ["textract", "Textract", !hasTextract],
+    ["textract", "Textract", true],
   ];
 
   function defaultLanguageName(languages) {
@@ -59,42 +71,55 @@
   });
 </script>
 
-<div class="option">
-  <Select
-    name="document-language"
-    label={$_("uploadOptions.documentLang")}
-    placeholder={$_("uploadOptions.documentLanguagePlaceholder")}
-    options={selectLanguages}
-    bind:selected={languageName}
-    bind:value={language}
-  />
-</div>
-
-<div class="option">
-  <div class="flex alignCenter">
-    <label>
-      {$_("uploadOptions.ocrEngine")}
-      <select name="ocr-engine" bind:value={ocrEngine}>
-        {#each ocrEngines as [value, name, disabled]}
-          <option {value} {disabled}>{name}</option>
-        {/each}
-      </select>
-    </label>
-    <label>
-      {$_("uploadOptions.forceOcr")}
-      <input type="checkbox" bind:checked={forceOcr} />
-    </label>
+{#await getUserPromise then}
+  <div class="option">
+    <Select
+      name="document-language"
+      label={$_("uploadOptions.documentLang")}
+      placeholder={$_("uploadOptions.documentLanguagePlaceholder")}
+      options={selectLanguages}
+      bind:selected={languageName}
+      bind:value={language}
+    />
   </div>
 
-  <div class="small gray margin">
-    <p>{@html $_("uploadOptions.tesseract")}</p>
-    {#if !hasTextract}
+  <div class="option">
+    <div class="flex alignCenter">
+      <label>
+        {$_("uploadOptions.ocrEngine")}
+        <select name="ocr-engine" bind:value={ocrEngine}>
+          {#each ocrEngines as [value, name, isPremium]}
+            <option {value} disabled={isPremium && !isPremiumOrg(org)}
+              >{name}</option
+            >
+          {/each}
+        </select>
+      </label>
+      <label>
+        {$_("uploadOptions.forceOcr")}
+        <input type="checkbox" bind:checked={forceOcr} />
+      </label>
+    </div>
+
+    <div class="small gray margin">
+      <p>{@html $_("uploadOptions.tesseract")}</p>
       <p class="nomargin">
-        {@html $_("uploadOptions.textract")}
+        <span>{@html $_("uploadOptions.textract")}</span>
+        {#if !isPremiumOrg(org)}
+          {#if isOrgAdmin(user)}
+            <span
+              >{@html $_("uploadOptions.premiumToutAdmin", {
+                values: { upgradeUrl: getUpgradeURL(org) },
+              })}</span
+            >
+          {:else}
+            <span class="nomargin"
+              >{@html $_("uploadOptions.premiumToutMember")}</span
+            >
+          {/if}
+        {/if}
       </p>
-      <p class="nomargin">{@html $_("uploadOptions.premiumTout")}</p>
-    {:else}
-      {#await getUserPromise then}
+      {#if isPremiumOrg(org) && ocrEngine == "textract"}
         <p>
           {$_("uploadOptions.creditHelpText", {
             values: {
@@ -103,21 +128,46 @@
             },
           })}
         </p>
-      {/await}
-    {/if}
+      {/if}
+    </div>
   </div>
-</div>
-
-<div class="option">
-  <div class="middle">
-    <label>
-      {$_("uploadOptions.revisionControl")}
-      <input type="checkbox" bind:checked={revisionControl} />
-    </label>
-    <p class="small gray nomargin">{$_("uploadOptions.revisionControlHelp")}</p>
-    <p class="small gray nomargin">{@html $_("uploadOptions.premiumTout")}</p>
+
+  <div class="option">
+    <div class="middle">
+      <div class="flex spaceBetween">
+        <div>
+          <label class:fade={!isPremiumOrg(org)}>
+            {$_("uploadOptions.revisionControl")}
+            <input
+              type="checkbox"
+              bind:checked={revisionControl}
+              disabled={!isPremiumOrg(org)}
+            />
+          </label>
+          <p class="small gray nomargin" class:fade={!isPremiumOrg(org)}>
+            {$_("uploadOptions.revisionControlHelp")}
+          </p>
+        </div>
+        <PremiumBadge />
+      </div>
+      {#if !isPremiumOrg(org)}
+        <p class="small gray nomargin">
+          {#if isOrgAdmin(user)}
+            <span
+              >{@html $_("uploadOptions.premiumToutAdmin", {
+                values: { upgradeUrl: getUpgradeURL(org) },
+              })}</span
+            >
+          {:else}
+            <span class="nomargin"
+              >{@html $_("uploadOptions.premiumToutMember")}</span
+            >
+          {/if}
+        </p>
+      {/if}
+    </div>
   </div>
-</div>
+{/await}
 
 <style>
   .margin {
@@ -132,6 +182,9 @@
   .gray {
     color: var(--darkgray);
   }
+  .fade {
+    opacity: 0.7;
+  }
   .middle {
     display: inline-block;
     vertical-align: middle;
@@ -144,12 +197,17 @@
     display: flex;
     width: 100%;
     gap: 1rem;
+    align-items: flex-start;
   }
 
   .alignCenter {
     align-items: center;
   }
 
+  .spaceBetween {
+    justify-content: space-between;
+  }
+
   label {
     font-weight: bold;
   }
diff --git a/src/common/stories/UploadOptions.stories.svelte b/src/common/stories/UploadOptions.stories.svelte
index 6b31c763b..14d9be395 100644
--- a/src/common/stories/UploadOptions.stories.svelte
+++ b/src/common/stories/UploadOptions.stories.svelte
@@ -13,7 +13,10 @@
   export const meta = {
     title: "Common / Upload Options",
     component: UploadOptions,
-    parameters: { layout: "centered" },
+    parameters: {
+      layout: "centered",
+      chromatic: { delay: 300 },
+    },
   };
 </script>
 
@@ -22,7 +25,27 @@
 </Template>
 
 <Story
-  name="Default"
+  name="As Free Org Member"
+  {args}
+  parameters={{ msw: { handlers: [mockGetMe.freeOrgMember, mockGetOrg.free] } }}
+/>
+<Story
+  name="As Free Org Admin"
+  {args}
+  parameters={{ msw: { handlers: [mockGetMe.freeOrgAdmin, mockGetOrg.free] } }}
+/>
+<Story
+  name="As Premium Org Member"
   {args}
   parameters={{ msw: { handlers: [mockGetMe.data, mockGetOrg.data] } }}
 />
+<Story
+  name="As Free User"
+  {args}
+  parameters={{ msw: { handlers: [mockGetMe.freeUser, mockGetOrg.free] } }}
+/>
+<Story
+  name="As Pro User"
+  {args}
+  parameters={{ msw: { handlers: [mockGetMe.proUser] } }}
+/>
diff --git a/src/langs/json/en.json b/src/langs/json/en.json
index 01d1f7a65..566cfcffc 100644
--- a/src/langs/json/en.json
+++ b/src/langs/json/en.json
@@ -355,11 +355,12 @@
     "ocrEngine": "OCR Engine:",
     "tesseract": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://tesseract-ocr.github.io/tessdoc/\">Tesseract</a> is an open source OCR engine available free to all DocumentCloud accounts.",
     "textract": "<a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://aws.amazon.com/textract/\">Textract</a> is a more powerful OCR engine that can better handle messy text, handwriting and fuzzy scans.",
-    "premiumTout": "It is a premium feature available on <strong>Professional</strong> and <strong>Organization</strong> plans. <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://www.documentcloud.org/premium/\">Learn more</a> or <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://accounts.muckrock.com/accounts/signup/?intent=documentcloud\">sign up</a>.",
+    "premiumToutAdmin": "This premium feature is available on <strong>Professional</strong> and <strong>Organization</strong> plans. <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"{upgradeUrl}\">Upgrade today!</a>",
+    "premiumToutMember": "Contact your organization's admin about upgrading to an <strong>Organization</strong> plan.",
     "creditHelpText": "Selecting Textract will cost one AI Credit per page in the document.  If you go over, the document will fall back to using Tesseract.  You are currently working on behalf of {organization} and have {n, plural, one {# credit} other {# credits}} left.",
     "documentLanguagePlaceholder": "Begin typing to see options",
     "revisionControl": "Revision Control:",
-    "revisionControlHelp": "Make previous versions of the document will be preserved and available for download."
+    "revisionControlHelp": "All previous versions to the document will be preserved and available for download."
   },
   "actionBar": {
     "selectDocs": "Select some documents to reveal edit actions",
diff --git a/src/manager/orgsAndUsers.js b/src/manager/orgsAndUsers.js
index 257d0eced..298c9a633 100644
--- a/src/manager/orgsAndUsers.js
+++ b/src/manager/orgsAndUsers.js
@@ -239,16 +239,17 @@ export function getCreditBalance(org) {
   return org.monthly_credits + org.purchased_credits;
 }
 
-export async function triggerPremiumUpgradeFlow(org) {
-  let url;
+export function getUpgradeURL(org) {
   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/`;
+    return SQUARELET_URL + `/users/~payment/`;
   }
-  window?.open(url);
+  // Redirect the user to the Squarelet organization settings
+  return SQUARELET_URL + `/organizations/${org.slug}/payment/`;
+}
+
+export async function triggerPremiumUpgradeFlow(org) {
+  window?.open(getUpgradeUrl(org));
 }
 
 // TODO: Handle flow for purchasing premium credits (#342)
diff --git a/src/pages/app/accounts/stories/mockData.ts b/src/pages/app/accounts/stories/mockData.ts
index 9fe27a38a..1b9ba3d16 100644
--- a/src/pages/app/accounts/stories/mockData.ts
+++ b/src/pages/app/accounts/stories/mockData.ts
@@ -1,8 +1,10 @@
 import { rest } from "msw";
 import { baseApiUrl } from "../../../../api/base.js";
 import {
+  freeOrg,
   me,
   organizations,
+  proOrg,
   users,
 } from "../../../../api/fixtures/orgAndUser.fixtures.js";
 
@@ -10,6 +12,24 @@ import {
 const mockMeUrl = new URL(`users/me/`, baseApiUrl).toString();
 export const mockGetMe = {
   data: rest.get(mockMeUrl, (req, res, ctx) => res(ctx.json(me))),
+  freeUser: rest.get(mockMeUrl, (req, res, ctx) =>
+    res(
+      ctx.json({
+        ...me,
+        organization: freeOrg,
+        admin_organizations: [...me.admin_organizations, freeOrg.id],
+      }),
+    ),
+  ),
+  proUser: rest.get(mockMeUrl, (req, res, ctx) =>
+    res(
+      ctx.json({
+        ...me,
+        organization: proOrg,
+        admin_organizations: [...me.admin_organizations, proOrg.id],
+      }),
+    ),
+  ),
   noOrgs: rest.get(mockMeUrl, (req, res, ctx) =>
     res(ctx.json({ ...me, organization: "4" })),
   ),