Finalize multi-org features (#3041)

* Finalize multi-org features

* Fix credits count issues

* Only show org list if multiple orgs on dashboard

* Add check for organizations to JS

app/assets/stylesheets/dashboard.scss

@@ -8,12 +8,12 @@
   margin: auto;
 
   h1 {
-    font-size: calc(16px + 0.3vw);
+    font-size: calc(15px + 0.2vw);
     font-family: $helvetica-condensed;
     font-stretch: condensed;
-    padding-bottom: 20px;
+    padding-bottom: 0px;
     text-align: center;
-
+    margin-bottom: 0px;
     @media screen and (min-width: 600px) {
       text-align: left;
     }
@@ -27,7 +27,7 @@
   }
 
   .rounded-btn {
-    font-size: calc(16px + 0.3vw);
+    font-size: calc(15px + 0.2vw);
     font-family: $helvetica-condensed;
     font-stretch: condensed;
     padding: 4px 20px;
@@ -36,21 +36,51 @@
     display: inline-block;
     width: fit-content;
     margin-bottom: 10px;
-    color: $black;
-    background: lighten($light-medium-gray, 5%);
-
+    @include themeable(
+      color,
+      theme-color,
+      $black
+    );
+    @include themeable(
+      background,
+      theme-container-background,
+      lighten($light-medium-gray, 5%)
+    );
     &:hover {
-      background: $light-medium-gray;
+      @include themeable(
+        background,
+        theme-container-background-hover,
+        $light-medium-gray
+      );
     }
 
     &.active {
-      background: $dark-gray;
-      color: white;
+      @include themeable(
+        background,
+        theme-secondary-color,
+        $dark-gray
+      );
+      @include themeable(
+        color,
+        theme-container-background,
+        white
+      );
     }
 
     &.back-nav {
       left: 2vw;
     }
+    &.rounded-btn--transparent {
+      background: transparent;
+      font-size: calc(15px + 0.2vw);
+      &:hover {
+        @include themeable(
+          background,
+          theme-container-accent-background,
+          lighten($light-medium-gray, 10%)
+        );
+      }
+    }
   }
 
   .actions {
@@ -77,7 +107,7 @@
       transition: background-color 250ms ease, opacity 250ms ease;
       font-family: $helvetica-condensed;
       font-stretch: condensed;
-      font-size: 1.1em;
+      font-size: 0.95em;
       text-align: center;
 
       &.active {

app/controllers/credits_controller.rb

@@ -26,12 +26,18 @@ class CreditsController < ApplicationController
 
     credit_objects = Array.new(@number_to_purchase) do
       if params[:organization_id].present?
+        @purchaser = Organization.find(params[:organization_id])
         Credit.new(organization_id: params[:organization_id], cost: cost_per_credit / 100.0)
       else
+        @purchaser = current_user
         Credit.new(user_id: current_user.id, cost: cost_per_credit / 100.0)
       end
     end
     Credit.import credit_objects
+    @purchaser.credits_count = @purchaser.credits.size
+    @purchaser.spent_credits_count = @purchaser.credits.where(spent: true).size
+    @purchaser.unspent_credits_count = @purchaser.credits.where(spent: false).size
+    @purchaser.save
     redirect_to "/credits", notice: "#{@number_to_purchase} new credits purchased!"
   end
 

app/javascript/article-form/articleForm.jsx

@@ -303,7 +303,7 @@ export default class ArticleForm extends Component {
     ) : (
       ''
     );
-    const orgArea = organizations ? (
+    const orgArea = (organizations && organizations.length > 0) ? (
       <OrgSettings
         organizations={organizations}
         organizationId={organizationId}

app/javascript/listings/listingForm.jsx

@@ -48,7 +48,7 @@ export default class ListingForm extends Component {
       organizations,
       organizationId,
     } = this.state;
-    const orgArea = organizations ? (
+    const orgArea = (organizations && organizations.length > 0) ? (
       <OrgSettings
         organizations={organizations}
         organizationId={organizationId}

app/views/articles/_v2_form.html.erb

@@ -5,10 +5,9 @@
        data-organizations="<%= organizations&.to_json(only: %i[id name bg_color_hex text_color_hex], methods: [:profile_image_90]) %>"
        data-version="<%= version %>">
     <form class="articleform__form articleform__form--<%= version %>">
-      <% if organizations %>
+      <% if organizations && organizations.size > 0 %>
         <div class="articleform__orgsettings">
-          Publish under an organization:
-          <select name="article[organization_id]" id="article_publish_under_org">
+          Publish under an organization:<select name="article[organization_id]" id="article_publish_under_org">
             <%= options_for_select({ "None" => "" }.merge(organizations.pluck(:name, :id).to_h), article.organization_id || "") %>
           </select>
         </div>

app/views/classified_listings/_form.html.erb

@@ -45,13 +45,13 @@
           <%= form.label "tags_list", "Tags" %>
           <%= form.text_field "tags_list", placeholder: "8 tags max, comma separated, no spaces or special characters" %>
         </div>
-      <% if @organizations.present? %>
-      <div class="field">
-        <%= form.label "organization_id", "Post under an organization:" %>
-        <%= form.select :organization_id, "None" => "None" %>
-        <p><em>Posting on behalf of an organization spends the organization's credits.</em></p>
-      </div>
-      <% end %>
+      <% if @organizations.present? && @organizations.size > 0 %>
+        <div class="field">
+          <%= form.label "organization_id", "Post under an organization:" %>
+          <%= form.select :organization_id, "None" => "None" %>
+          <p><em>Posting on behalf of an organization spends the organization's credits.</em></p>
+        </div>
+        <% end %>
       </div>
     </div>
       <%= javascript_pack_tag "listingForm", defer: true %>

app/views/credits/index.html.erb

@@ -1,3 +1,5 @@
+<% title "Credits" %>
+
 <div class="credits-container">
 <% if flash[:notice].present? %>
   <div class="notice" id="notice">
@@ -9,18 +11,14 @@
     <a href="/credits/purchase" data-no-instant>Purchase additional credits</a>
   </div>
   <% if @organizations.present? %>
-  <div class="existing-credits">
-    <div class="existing-credits-status">
-      <select id="org-credits-select" class="org-credits-select">
-        <% @organizations.each do |org| %>
-          <option value="<%= org.id %>" data-credits="<%= org.unspent_credits_count %>"><%= org.name %></option>
-        <% end %>
-      </select>
-      has <span id="org-credits-number"><%= @organizations.first.unspent_credits_count %></span> credits to spend
-    </div>
-    <a id="org-credits-purchase-link" href="/credits/purchase?organization_id=<%= @organizations.first.id %>" data-no-instant>Purchase additional credits</a>
-    <%= javascript_pack_tag "orgCreditsSelector", defer: true %>
-  </div>
+    <% @organizations.each do |org| %>
+      <div class="existing-credits">
+        <div class="existing-credits-status">
+          <%= org.name %> has <span id="org-credits-number"><%= org.unspent_credits_count %></span> credits to spend
+        </div>
+        <a id="org-credits-purchase-link" href="/credits/purchase?organization_id=<%= org.id %>" data-no-instant>Purchase additional credits</a>
+      </div>
+    <% end %>
   <% end %>
   <% if @credits.size > 0 %>
     <center>

app/views/dashboards/_actions.html.erb

@@ -11,4 +11,9 @@
     <span>FOLLOWING</span>
     <span>(<%= @user.following_users_count + @user.following_tags_count + @user.following_organizations_count + @user.following_podcasts_count %>)</span>
   </a>
+  <% if @user.has_role? :pro %>
+    <a class="action" href="/dashboard/pro">
+      <span>PRO ANALYTICS</span>
+    </a>
+  <% end %>
 </div>

app/views/dashboards/pro.html.erb

@@ -1,5 +1,7 @@
+<% title "Pro Analytics" %>
+
 <div class="dashboard-container pro-container" id="user-dashboard">
-  <a href="/dashboard" class="rounded-btn">Back to Main Dashboard</a>
+  <a href="/dashboard" class="rounded-btn rounded-btn--transparent">👈 Back to Main Dashboard</a>
     <a class="rounded-btn <%= "active" if params[:org_id].blank? %>" href="/dashboard/pro">
       Your Pro Dashboard
     </a>

app/views/dashboards/show.html.erb

@@ -1,20 +1,13 @@
-<% title "Dashboard - DEV" %>
+<% title "Dashboard" %>
 
 <div class="dashboard-container" id="user-dashboard">
   <%= render "actions" %>
-  <% if @organizations && (params[:which].blank? || params[:which] == "organization") %>
+  <% if @organizations && @organizations.size > 0 && (params[:which].blank? || params[:which] == "organization") %>
     <h1>
       <a href="/dashboard" class="rounded-btn <%= "active" if params[:which].blank? %>">Personal</a>
       <% @organizations.each do |org| %>
         <a href="/dashboard/organization/<%= org.id %>" class="rounded-btn <%= "active" if params[:org_id].to_i == org.id %>"><%= org.name %> (<%= org.articles_count %>)</a>
       <% end %>
-      <% if @user.has_role? :pro %>
-      <hr>
-        <a class="rounded-btn" href="/dashboard/pro">Pro Analytics</a>
-        <% @member_organizations.each do |org| %>
-          <a class="rounded-btn" href="/dashboard/pro/org/<%= org.id %>"><%= org.name %></a>
-        <% end %>
-      <% end %>
     </h1>
   <% end %>
   <% if params[:which] == "organization" %>