Add budget component

app/__init__.py

@@ -224,6 +224,7 @@ def get_locale():
     application.jinja_env.globals["show_tou_prompt"] = show_tou_prompt
     application.jinja_env.globals["parse_ua"] = parse
     application.jinja_env.globals["events_key"] = EVENTS_KEY
+    application.jinja_env.globals["now"] = datetime.utcnow
 
     # Initialize Salesforce Account list
     if application.config["FF_SALESFORCE_CONTACT"]:

app/main/__init__.py

@@ -29,6 +29,7 @@
     set_lang,
     sign_in,
     sign_out,
+    storybook,
     styleguide,
     templates,
     two_factor,

app/main/views/storybook.py

@@ -0,0 +1,12 @@
+from flask import render_template, request
+
+from app.main import main
+
+
+@main.route("/_storybook")
+def storybook():
+    component = None
+    if "component" in request.args:
+        component = request.args["component"]
+
+    return render_template("views/storybook.html", component=component)

app/templates/components/remaining-messages-summary.html

@@ -0,0 +1,106 @@
+{% macro remaining_messages_summary(dailyLimit, dailyUsed, yearlyLimit, yearlyUsed, notification_type, textOnly=None) %}
+  <!-- Validate textOnly param -->
+  {% set textOnly_allowed_values = ['text', 'emoji'] %}
+  {% if textOnly not in textOnly_allowed_values %}
+    {% set textOnly = None %}
+    {% set textOnlyMode = false %}
+  {% else %}
+    {% set textOnlyMode = true %}
+  {% endif %}
+
+  <!-- Validate notification_type param  -->
+  {% set notificationType_allowed_values = ['sms', 'email'] %}
+  {% if notification_type not in notificationType_allowed_values %}
+      {% set notification_type = None %}
+      {% if config["NOTIFY_ENVIRONMENT"].lower() == 'development' %}
+        <p class="text-red-300 mt-6 mb-6"><i aria-hidden="true" class="fa-solid fa-fas fa-triangle-exclamation text-yellow w-8 h-8 text-xs rounded-full mx-1" data-testid="rms-icon"></i> Invalid notification type - check your jinja template!</p>
+      {% endif %}
+  {% else %}
+    {% if notification_type == 'sms' %}
+      {% set notification_type = _('text messages') %}
+    {% elif notification_type == 'email' %}
+      {% set notification_type = _('emails') %}
+    {% endif %}
+  {% endif %}
+
+  <!-- Set some constants -->
+  {% set current_year = current_year or (now().year if now().month < 4 else now().year + 1) %}
+  {% set next_april = _('April 1, ') ~  current_year %}
+  {% set icon_default = 'fa-check bg-blue-300 text-white p-2 w-4 h-4' %}
+  {% set icon_warning = 'fa-circle-exclamation text-red-300 w-8 h-8' %}
+  {% set warning_threshold = 0.8 %}
+
+  {% set sections = [
+    {
+      'type': 'daily',
+      'used': dailyUsed,
+      'limit': dailyLimit,
+      'text': _('remaining until') ~ ' ' ~ ('7 pm ET'),
+      'link_text': _('Request a daily limit increase'),
+      'link_href': url_for('main.contact'),
+      'remaining': "{:,}".format(dailyLimit - dailyUsed) if session['userlang'] == 'en' else "{:,}".format(dailyLimit - dailyUsed).replace(',', ' '),
+      'skip': false if textOnlyMode else dailyLimit - dailyUsed == 0 and yearlyLimit - yearlyUsed == 0,
+      'warn': dailyUsed / dailyLimit >= warning_threshold
+    },
+    {
+      'type': 'yearly',
+      'used': yearlyUsed,
+      'limit': yearlyLimit,
+      'text': _('remaining until') ~ ' ' ~ next_april,
+      'link_text': _('Visit Usage reports'),
+      'link_href': '#',
+      'remaining': "{:,}".format(yearlyLimit - yearlyUsed) if session['userlang'] == 'en' else "{:,}".format(yearlyLimit - yearlyUsed).replace(',', ' '),
+      'warn': yearlyUsed / yearlyLimit >= warning_threshold
+    }
+  ] %}
+
+  {% if textOnlyMode %}
+    <div class="mt-4 pl-10 py-2 border-l-8 border-gray-300">
+  {% endif %}
+  <div data-testid="rms">
+    {% for section in sections if not section.skip %}
+      {% if textOnly == None %}
+        <div class="flex justify-between items-center border-b border-gray-300 py-4 text-small" data-testid="rms-item">
+          <div class="flex items-center">
+            {% set icon_class = icon_default %}
+            {% set icon_type = "default" %}
+            {% if section.warn %}
+              {% set icon_class = icon_warning %}
+              {% set icon_type = "warning" %}
+            {% endif %}
+            <span data-testid="rms-icon-{{ icon_type }}">
+              <i aria-hidden="true" class="fa-solid fa-fas {{ icon_class }} text-xs rounded-full mx-1" {{ 'aria-label=' ~ _('warning') if icon_type == "warning" else "" }}></i>
+            </span>
+            <span class="mx-2 font-bold"  data-testid="rms-{{ section.type }}-remaining">{{ section.remaining }}</span> {{ section.text }}
+          </div>
+          <a href="{{ section.link_href }}" data-testid="rms-{{ section.type }}-link" class="text-blue-500">{{ section.link_text }}</a>
+        </div>
+      {% else %}
+        <p class="m-0 p-0" data-testid="rms-item">
+          {% if section.remaining == "0" %}
+            <span data-testid="text-prefix-at-limit">{{ _('At limit: ') if textOnly == 'text' else '⚠️' }}</span>
+          {% elif section.warn %}
+            <span data-testid="text-prefix-near-limit">{{ _('Near limit: ') if textOnly == 'text' else '⚠️' }}</span>
+          {% else %}
+            <span data-testid="text-prefix-below-limit">{{ _('Below limit: ') if textOnly == 'text' else '🆗' }}</span>
+          {% endif %}
+          {{ section.remaining }} {{notification_type}} {{ section.text }}
+        </p>
+      {% endif %}
+    {% endfor %}
+  </div>
+  {% if textOnlyMode %}
+    </div>
+  {% endif %}
+
+  {% if sections[0].skip %}
+    <p class="mt-4 pl-10 py-4 border-l-4 border-gray-300" data-testid="yearly-sending-paused">
+      Sending paused until annual limit resets
+    </p>
+  {% elif sections[0].remaining == "0" %}
+    <p class="mt-4 pl-10 py-4 border-l-4 border-gray-300" data-testid="daily-sending-paused">
+      Sending paused until 7pm ET. You can schedule more messages to send later.
+    </p>
+  {% endif %}
+
+{% endmacro %}

app/templates/views/storybook.html

@@ -0,0 +1,29 @@
+{% extends "admin_template.html" %}
+{% from 'views/storybook/storybook-menu.html' import storybook_menu %}
+
+{% block page_title %} Storybook {% endblock %}
+
+{% block maincolumn_content %}
+<style>
+  .container {
+    max-width: 1536px;
+  }
+</style>
+
+<div class="flex">
+  <!-- Left Column -->
+  <div class="w-1/4 p-4 bg-gray-100">
+    <h1 class="text-lg font-bold mb-4">Components</h1>
+    {{ storybook_menu() }}
+  </div>
+
+  <!-- Main Content Area -->
+  <div class="w-3/4 p-4">
+    {% if component %}
+      {% include 'views/storybook/' ~ component ~ '.html' %}
+    {% else %}
+      <p>Choose a component</p>
+    {% endif %}
+  </div>
+
+  {% endblock %}

app/templates/views/storybook/remaining-messages-summary.html

@@ -0,0 +1,85 @@
+{% from 'components/remaining-messages-summary.html' import remaining_messages_summary with context %}
+
+    <h2><code>remaining_messages_summary</code></h2>
+    <hr />
+    <h3 class="heading-medium">Below limits</h3>
+    <div class="grid grid-cols-2 gap-6 bg-gray p-6" data-testid="rms-below">
+
+        <div class="mb-6 bg-white p-4">
+        {{ remaining_messages_summary(1000, 799, 1000, 799, "email") }}
+        </div>
+        <div class="mb-6 bg-white p-4">
+        {{ remaining_messages_summary(10000, 699, 10000, 699, "sms") }}
+        </div>
+        <div class="mb-6 bg-white p-4">
+        {{ remaining_messages_summary(1000, 0, 1000, 0, "email") }}
+        </div>
+    </div>
+
+    <h3 class="heading-medium">Warning</h3>
+    <div class="grid grid-cols-2 gap-6 bg-gray p-6" data-testid="rms-warning">
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(1000, 800, 1000, 800, "email") }}
+        </div>
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(1000, 900, 1000, 900, "email") }}
+        </div>
+    </div>
+
+    <h3 class="heading-medium">At limit</h3>
+    <div class="grid grid-cols-2 gap-6 bg-gray p-6" data-testid="rms-limit-both">
+        At both limits
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(1000, 1000, 1000, 1000, "email") }}
+        </div>
+    </div>
+    <div class="grid grid-cols-2 gap-6 bg-gray p-6" data-testid="rms-limit-daily">
+        At daily limit
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(1000, 1000, 1000, 500, "email") }}
+        </div>
+    </div>
+
+    <h3 class="heading-medium">Mixed</h3>
+    <div class="grid grid-cols-2 gap-6 bg-gray p-6" data-testid="rms-mixed">
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(1000, 100, 1000, 1000, "email") }}
+        </div>
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(1000, 1000, 1000, 100, "email") }}
+        </div>
+    </div>
+
+    <h3 class="heading-medium">Text only</h3>
+    <div class="grid grid-cols-2 gap-6 bg-gray p-6" data-testid="rms-text-below">below limit
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(10000, 700, 10000, 750, "email", "text") }}
+        </div>
+    </div>
+    <div class="grid grid-cols-2 gap-6 bg-gray p-6" data-testid="rms-text-warning">near limit
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(1000, 800, 1000, 900, "email", "text") }}
+        </div>  
+    </div>
+    <div class="grid grid-cols-2 gap-6 bg-gray p-6" data-testid="rms-text-limit">at limit
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(1000, 1000, 1000, 1000, "email", "text") }}
+        </div>
+    </div>
+
+    <h3 class="heading-medium">Text only emoji</h3>
+    <div class="grid grid-cols-2 gap-6 bg-gray p-6" data-testid="rms-emoji-below">below limit
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(1000, 700, 1000, 750, "email", "emoji") }}
+        </div>
+    </div>
+    <div class="grid grid-cols-2 gap-6 bg-gray p-6" data-testid="rms-emoji-warning">near limit
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(1000, 800, 1000, 900, "email", "emoji") }}
+        </div>
+    </div>
+    <div class="grid grid-cols-2 gap-6 bg-gray p-6" data-testid="rms-emoji-limit">at limit
+        <div class="mb-6 bg-white p-4">
+            {{ remaining_messages_summary(1000, 1000, 1000, 1000, "email", "emoji") }}
+        </div>
+    </div>

app/templates/views/storybook/remaining-messages.html

@@ -0,0 +1,46 @@
+{% from 'components/remaining-messages.html' import remaining_messages with context %}
+
+<h1 class="heading-large">remaining_messages</h1>
+<hr />
+<h2 class="heading-medium">Below limits</h2>
+<div class="grid grid-cols-2 gap-4" data-testid="rm-below">
+  {{ remaining_messages(header=_('emails'), total=1000, used=1) }}
+  {{ remaining_messages(header=_('emails'), total=1000, used=250) }}
+  {{ remaining_messages(header=_('emails'), total=1000, used=500) }}  
+  {{ remaining_messages(header=_('emails'), total=1000, used=799) }}  
+</div>
+
+<h2 class="heading-medium">Warning</h2>
+<div class="grid grid-cols-2 gap-4" data-testid="rm-warning">
+  {{ remaining_messages(header=_('emails'), total=1000, used=800) }}
+  {{ remaining_messages(header=_('emails'), total=1000, used=825) }}
+  {{ remaining_messages(header=_('emails'), total=1000, used=900) }}  
+  {{ remaining_messages(header=_('emails'), total=1000, used=999) }}  
+</div>
+
+<h2 class="heading-medium">At limit</h2>
+<div class="grid grid-cols-2 gap-4" data-testid="rm-limit">
+  {{ remaining_messages(header=_('emails'), total=1000, used=1000) }}
+</div>
+
+
+<h2 class="heading-medium">Muted - Below limits</h2>
+<div class="grid grid-cols-2 gap-4" data-testid="rm-muted-below">
+  {{ remaining_messages(header=_('emails'), total=1000, used=1, muted=true) }}
+  {{ remaining_messages(header=_('emails'), total=1000, used=250, muted=true) }}
+  {{ remaining_messages(header=_('emails'), total=1000, used=500, muted=true) }}  
+  {{ remaining_messages(header=_('emails'), total=1000, used=799, muted=true) }}  
+</div>
+
+<h2 class="heading-medium">Muted - Warning</h2>
+<div class="grid grid-cols-2 gap-4" data-testid="rm-muted-warning">
+  {{ remaining_messages(header=_('emails'), total=1000, used=800, muted=true) }}
+  {{ remaining_messages(header=_('emails'), total=1000, used=825, muted=true) }}
+  {{ remaining_messages(header=_('emails'), total=1000, used=900, muted=true) }}  
+  {{ remaining_messages(header=_('emails'), total=1000, used=999, muted=true) }}  
+</div>
+
+<h2 class="heading-medium">Muted - At limit</h2>
+<div class="grid grid-cols-2 gap-4" data-testid="rm-muted-limit">
+  {{ remaining_messages(header=_('emails'), total=1000, used=1000, muted=true) }}
+</div>

app/templates/views/storybook/storybook-menu.html

@@ -0,0 +1,21 @@
+<!-- macro to display the component menu -->
+{% set components = [
+    {
+        'name': 'Remaining Messages Summary',
+        'path': 'remaining-messages-summary'
+    },
+    {
+        'name': 'Remaining Messages',
+        'path': 'remaining-messages'
+    },
+] %}
+
+{% macro storybook_menu() %}
+    <ul>
+        <!-- loop through components -->
+        {% for component in components %}
+            <li><a href="{{ url_for('main.storybook', component=component.path) }}"
+                class="text-blue-500 hover:underline">{{ component.name }}</a></li>
+        {% endfor %}
+    </ul>
+{% endmacro %}

app/templates/views/styleguide.html

@@ -9,7 +9,7 @@
 "components/api-key.html" import api_key %} {% from
 "components/template-filter.html" import template_filter with context %} {%
 block per_page_title %} Styleguide {% endblock %} {% block maincolumn_content %}
-
+{% from 'components/remaining-messages-summary.html' import remaining_messages_summary with context %}
 <h2 class="heading-large">Banner</h2>
 <div class="grid-row contain-floats">
   <div class="md:w-3/4 float-left py-0 px-0 px-gutterHalf box-border">
@@ -388,5 +388,51 @@ <h2 class="heading-medium">Browse Templates</h2>
   </fieldset>
 </nav>
 <hr />
+<h2 class="heading-large">Below limits</h2>
+<p data-testid="remaining-summary-checks">
+  {{ remaining_messages_summary(1000, 799, 1000, 799, "email") }}
+  <br /><br />
+  {{ remaining_messages_summary(10000, 699, 10000, 699, "sms") }}
+  <br /><br />
+  {{ remaining_messages_summary(1000, 0, 1000, 0, "email") }}
+</p>
+
+<h2 class="heading-large">Warning</h2>
+<p data-testid="remaining-summary-warnings">
+  {{ remaining_messages_summary(1000, 800, 1000, 800, "email") }}
+  <br /><br />
+  {{ remaining_messages_summary(1000, 900, 1000, 900, "email") }}
+</p>
+
+<h2 class="heading-large">At both limits</h2>
+<p data-testid="remaining-summary-both-limits">
+  {{ remaining_messages_summary(1000, 1000, 1000, 1000, "email") }}
+</p>
+
+<h2 class="heading-large">Mixed</h2>
+<p data-testid="remaining-summary-both-limits">
+  {{ remaining_messages_summary(1000, 100, 1000, 1000, "email") }}
+  {{ remaining_messages_summary(1000, 1000, 1000, 1000, "email") }}
+</p>
+<h2 class="heading-large">Text only</h2>
+<p data-testid="remaining-summary-text-only-at-limit">at limit
+  {{ remaining_messages_summary(1000, 1000, 1000, 1000, "email", "text") }}
+</p>
+<p data-testid="remaining-summary-text-only-below-limit">below limit
+  {{ remaining_messages_summary(10000, 700, 10000, 750, "email", "text") }}
+</p>
+<p data-testid="remaining-summary-text-only-near-limit">near limit
+  {{ remaining_messages_summary(1000, 800, 1000, 900, "email", "text") }}
+</p>
 
+<h2 class="heading-large">Text only emoji</h2>
+<p data-testid="remaining-summary-text-only-at-limit">at limit
+  {{ remaining_messages_summary(1000, 1000, 1000, 1000, "email", "emoji") }}
+</p>
+<p data-testid="remaining-summary-text-only-below-limit">below limit
+  {{ remaining_messages_summary(1000, 700, 1000, 750, "email", "emoji") }}
+</p>
+<p data-testid="remaining-summary-text-only-near-limit">near limit
+  {{ remaining_messages_summary(1000, 800, 1000, 900, "email", "emoji") }}
+</p>
 {% endblock %}

app/templates/views/welcome.html

@@ -1,4 +1,5 @@
 {% extends  "admin_template.html" %}
+{% from 'components/remaining-messages-summary.html' import remaining_messages_summary %}
 
 {% block per_page_title %}
   {{ _('Welcome to GC Notify') }}
@@ -18,4 +19,6 @@ <h1 class="heading-large">{{ _('Welcome to GC Notify') }}</h1>
         <a href="{{ url_for('main.add_service', first='first') }}" class="mt-4 button">{{ _('Create your first service') }}</a>
     </div>
 
+    <br /><br />
+    {{ remaining_messages_summary(1500, 400, 10000, 8100, 'text') }}
 {% endblock %}