Fix api keys banner

app/models/user.rb

@@ -1910,6 +1910,11 @@ class User < Sequel::Model
     end
   end
 
+  def remaining_trial_days
+    return 0 unless trial_ends_at
+    (trial_ends_at - DateTime.now).to_f.floor
+  end
+
   private
 
   def password_rate_limit_configured?

app/views/admin/client_applications/api_key.html.erb

@@ -23,6 +23,7 @@
 <% end %>
 
 <%= render :partial => 'shared/flash_message' %>
+<%= render :partial => 'admin/shared/trial_notification' %>
 
 <div class="FormAccount-Section u-inner">
 

app/views/admin/shared/_trial_notification.html.erb

@@ -1,14 +1,13 @@
-<% if current_user.account_type == 'PERSONAL30' %>
+<% if current_user.account_type == 'PERSONAL30' ||  current_user.account_type == 'Professional' %>
+  <div class="FlashMessage-container">
     <div class="CDB-Text FlashMessage FlashMessage--main">
-        <div class="u-inner">
-            <div class="FlashMessage FlashMessage-info FlashMessage--main u-flex u-justifySpace u-alignCenter">
-                <p>You're currently under your Trial Period. Add your billing info to keep using our platform.</p>
-                <p class="u-flex">
-                    <a href="<%= current_user.update_payment_url(request.protocol) %>" class="CDB-Button CDB-Button--secondary CDB-Button--secondary--background CDB-Button--big">
-                        <span class="CDB-Button-Text CDB-Text is-semibold CDB-Size-medium u-upperCase">Add payment method</span>
-                    </a>
-                </p>
-            </div>
+      <div class="u-inner">
+        <div class="FlashMessage FlashMessage-info FlashMessage--main u-flex u-justifyCenter u-alignCenter">
+          <p class="FlashMessage--text"><%= current_user.remaining_trial_days %> days left days left in your Trial Period. To keep using our platform,
+            <a href="<%= current_user.update_payment_url(request.protocol) %>" class="FlashMessage--text">Subscribe now</a>
+          </p>
         </div>
+      </div>
     </div>
+  </div>
 <% end %>

assets/stylesheets/common/flash-message.scss

@@ -45,8 +45,9 @@
 }
 
 .FlashMessage--text {
-  font-family: 'Montserrat-SemiBold';
+  font-family: 'Montserrat';
   font-size: 12px;
+  font-weight: 600;
   letter-spacing: 0;
   line-height: 16px;
   text-align: right;

lib/assets/javascripts/dashboard/components/trial-notification/trial-notification.tpl

@@ -1,7 +1,7 @@
 <div class="CDB-Text FlashMessage FlashMessage--main">
   <div class="u-inner">
-      <div class="FlashMessage FlashMessage-info FlashMessage--main u-flex u-justifyCenter u-alignCenter">
-        <p class="FlashMessage--text"><%= _t('common.trial_notification.views.trial_notification.message', { trial_days: trialDays }) %>&nbsp;<a href="<%= accountUpdateUrl %>" class="FlashMessage--text"><%= _t('common.trial_notification.views.trial_notification.add_payment') %></a></p>
-      </div>
+    <div class="FlashMessage FlashMessage-info FlashMessage--main u-flex u-justifyCenter u-alignCenter">
+      <p class="FlashMessage--text"><%= _t('common.trial_notification.views.trial_notification.message', { trial_days: trialDays }) %>&nbsp;<a href="<%= accountUpdateUrl %>" class="FlashMessage--text"><%= _t('common.trial_notification.views.trial_notification.add_payment') %></a></p>
+    </div>
   </div>
 </div>

lib/assets/javascripts/locale/en.json

@@ -3,7 +3,7 @@
     "trial_notification": {
       "views": {
         "trial_notification": {
-          "message": "%{trial_days} days left days left in your Professional Plan Trial. To keep using our platform,",
+          "message": "%{trial_days} days left days left in your Trial Period. To keep using our platform,",
           "add_payment": "Subscribe Now"
         }
       }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cartodb-ui",
-  "version": "1.0.0-assets.97-banner4",
+  "version": "1.0.0-assets.97-banner5",
   "description": "CARTO UI frontend",
   "repository": {
     "type": "git",