From 7ca13f57f66a598f4a706c89de4fb8ce4456c94a Mon Sep 17 00:00:00 2001
From: Allan Lasser <lasser.allan@gmail.com>
Date: Tue, 28 Nov 2023 15:14:36 -0500
Subject: [PATCH] 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;
+  }
 </style>
 
 {#await getOrgPromise}
@@ -102,20 +105,21 @@
         </span>
       </MenuTitle>
       <Menu>
-        {#if isPremiumOrg(activeOrg)}
-          <MenuInsert>
-            <CreditMeter
-              id="org-credits"
-              label={$_("authSection.credits.monthlyOrg")}
-              helpText={$_("authSection.credits.refreshOn", {
-                values: {
-                  date: formatResetDate(activeOrg.credit_reset_date, $locale),
-                },
-              })}
-              value={activeOrg.monthly_credits}
-              max={activeOrg.monthly_credit_allowance}
-            />
-            <!-- TODO: Support credit purchases (#342)
+        <div class="medium-width">
+          {#if isPremiumOrg(activeOrg)}
+            <MenuInsert>
+              <CreditMeter
+                id="org-credits"
+                label={$_("authSection.credits.monthlyOrg")}
+                helpText={$_("authSection.credits.refreshOn", {
+                  values: {
+                    date: formatResetDate(activeOrg.credit_reset_date, $locale),
+                  },
+                })}
+                value={activeOrg.monthly_credits}
+                max={activeOrg.monthly_credit_allowance}
+              />
+              <!-- TODO: Support credit purchases (#342)
           <CreditMeter
             id="purchased-credits"
             label={$_("authSection.credits.purchased")}
@@ -134,36 +138,37 @@
               {$_("authSection.credits.purchaseCreditsAdminOnly")}
             </p>
           {/if} -->
-          </MenuInsert>
-        {:else if isOrgAdmin(user)}
-          <MenuInsert>
-            <div class="freeOrg">
-              <h3 class="heading">
-                {$_("authSection.premiumUpgrade.orgHeading")}
-              </h3>
-              <p class="description">
-                {$_("authSection.premiumUpgrade.orgDescription")}
-              </p>
-              <Button
-                label={$_("authSection.premiumUpgrade.cta")}
-                fullWidth={true}
-                premium={true}
-                on:click={() => triggerPremiumUpgradeFlow(activeOrg)}
-              />
-              <div class="learnMore">
-                <Link toUrl="/help/premium" color={true} on:click={close}>
-                  {$_("authSection.premiumUpgrade.docs")}
-                </Link>
+            </MenuInsert>
+          {:else if isOrgAdmin(user)}
+            <MenuInsert>
+              <div class="freeOrg">
+                <h3 class="heading">
+                  {$_("authSection.premiumUpgrade.orgHeading")}
+                </h3>
+                <p class="description">
+                  {$_("authSection.premiumUpgrade.orgDescription")}
+                </p>
+                <Button
+                  label={$_("authSection.premiumUpgrade.cta")}
+                  fullWidth={true}
+                  premium={true}
+                  on:click={() => triggerPremiumUpgradeFlow(activeOrg)}
+                />
+                <div class="learnMore">
+                  <Link toUrl="/help/premium" color={true} on:click={close}>
+                    {$_("authSection.premiumUpgrade.docs")}
+                  </Link>
+                </div>
               </div>
-            </div>
-          </MenuInsert>
-        {/if}
-        <OrgMemberList orgId={activeOrg.id} myId={user.id} />
-        {#await listOrgsPromise then orgOptions}
-          {#if orgOptions.length > 1}
-            <OrgPicker {activeOrg} {orgOptions} handleChange={changeOrg} />
+            </MenuInsert>
           {/if}
-        {/await}
+          <OrgMemberList orgId={activeOrg.id} myId={user.id} />
+          {#await listOrgsPromise then orgOptions}
+            {#if orgOptions.length > 1}
+              <OrgPicker {activeOrg} {orgOptions} handleChange={changeOrg} />
+            {/if}
+          {/await}
+        </div>
       </Menu>
     </Dropdown>
   {/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 = () => {};
 </script>
 
 <style>
@@ -62,7 +62,7 @@
             <MenuItem
               on:click={() => {
                 closeDropdown("orgSelect");
-                handleChange?.(org.id);
+                handleChange?.(org);
               }}
               selected={org.id === activeOrg.id}
             >