feat(remaining-messages-summary): add new 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/templates/components/remaining-messages-summary.html

@@ -0,0 +1,94 @@
+{% 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 %}
+    {% set notification_type = notification_type %}
+  {% 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 = [
+    {
+      '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
+    },
+    {
+      '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 %}
+
+  {% 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 %}
+          {% if section.warn %}
+            {% set icon_class = icon_warning %}
+          {% endif %}
+          <i aria-hidden="true" class="fa-solid fa-fas {{ icon_class }} text-xs rounded-full mx-1" data-testid="rms-icon"></i>
+          <span class="mx-2 font-bold">{{ section.remaining }} </span> {{ section.text }}
+        </div>
+        <a href="{{ section.link_href }}" class="text-blue-500">{{ section.link_text }}</a>
+      </div>
+    {% else %}
+      <p class="m-0 p-0">
+        {% if section.remaining == 0 %}
+          {{ _('At limit: ') if textOnly == 'text' else '⚠️' }}
+        {% elif section.warn %}
+          {{ _('Near limit: ') if textOnly == 'text' else '⚠️' }}
+        {% else %}
+          {{ _('Below limit: ') if textOnly == 'text' else '🆗' }}
+        {% endif %}
+        {{ section.remaining }} {{notification_type}} {{ section.text }}
+      </p>
+    {% endif %}
+  {% endfor %}
+  {% if textOnlyMode %}
+    </div>
+  {% endif %}
+  {% if sections[0].skip %}
+    <p class="mt-4 pl-10 py-4 border-l-4 border-gray-300">
+      Sending paused until annual limit resets
+    </p>
+  {% endif %}
+{% endmacro %}

app/translations/csv/fr.csv

@@ -1986,4 +1986,8 @@
 "The service {} responded in {} seconds.","Le service {} a répondu en {} secondes."
 "Are you sure you want to delete this callback configuration?","Voulez-vous vraiment supprimer cette configuration de rappel?"
 "Your Callback configuration has been deleted.","Votre configuration de rappel a été supprimée."
-"The service {} took longer than 1 second to respond.","Le service {} a mis plus d’une seconde à répondre."
+"The service {} took longer than 1 second to respond.","Le service {} a mis plus d’une seconde à répondre."
+"April 1, ","1er avril "
+"remaining until","restant jusqu'à"
+"Request a daily limit increase","Demander une augmentation de limite quotidienne"
+"Visit Usage reports","Consultez les rapports d'utilisation"