Merge pull request #8485 from cfpb/tccp/details-disclaimers

TCCP: Add APR disclaimers to card details

cfgov/tccp/jinja2/tccp/card.html

@@ -1,7 +1,7 @@
 {% extends 'v1/layouts/layout-2-1.html' %}
 
+{% from 'tccp/includes/apr_disclaimer.html' import apr_disclaimer with context %}
 {% from 'tccp/includes/apr_table.html' import apr_table with context %}
-{% from 'tccp/includes/data_published.html' import data_published %}
 {% from 'tccp/includes/fields.html' import apr, apr_range, currency, lower_first_letter, oxfordize %}
 {% from 'tccp/includes/speed_bump.html' import speed_bump %}
 {% from 'v1/includes/organisms/expandable.html' import expandable with context %}
@@ -102,7 +102,7 @@ <h1>{{ card.product_name }}</h1>
             {% set availability = "nationwide" %}
             {% set available_states = none %}
         {% endif %}
-        <div class="{{ 'u-mt45 u-mb45' if availability == 'multiple_states' or card.requirements_for_opening else 'u-mt30 u-mb30' }}">
+        <div class="{{ 'u-mt45' if availability == 'multiple_states' or card.requirements_for_opening else 'u-mt30 ' }} u-mb30">
             <div class="m-location-requirements">
                 <div class="h2 u-mb0">
                     {% if availability == "nationwide" %}
@@ -163,6 +163,11 @@ <h1>{{ card.product_name }}</h1>
             {% endif %}
         </div>
 
+        <h2>Review details with the company before applying</h2>
+        <p>
+            APRs change over time and are specific to the applicant.
+            Check rates before applying.
+        </p>
         {{ render_contact_info(card) }}
 
         {% if not card.top_25_institution %}
@@ -178,7 +183,6 @@ <h1>{{ card.product_name }}</h1>
             </div>
         {% endif %}
     </div>
-    {{ data_published(card.report_date, verbose=true) }}
 
     {% if card.secured_card %}
         <div class="u-mt30 u-mb30">
@@ -215,24 +219,23 @@ <h2>
                 {% if card.purchase_apr_min is not none
                     and card.purchase_apr_max is not none
                 %}
-                    {{ apr_range(card.purchase_apr_min, card.purchase_apr_max) }}
+                    {{ apr_range(card.purchase_apr_min, card.purchase_apr_max) }}*
                 {% elif card.purchase_apr_median is not none %}
-                    {{ apr(card.purchase_apr_median) }}
+                    {{ apr(card.purchase_apr_median) }}*
                 {% endif %}
             {% endcall %}
+            {{ apr_disclaimer(card.report_date,
+                "purchase",
+                card.purchase_apr_vary_by_credit_tier
+            ) }}
             <p>
-                An APR, or annual percentage rate, is the interest you‘ll pay
-                on purchases.
-                {{ 'Your APR will vary based on your credit score. '
-                    if card.purchase_apr_vary_by_credit_tier
-                }}
                 Here are typical APRs for different credit scores for this card:
             </p>
 
             {{ apr_table(card, "purchase", show_comparison=true) }}
 
             <p>
-                The purchase APR is
+                After opening the credit card, the purchase APR is
                 {% if 'V' in card.index %}
                     variable, meaning it can go up or down based on the index
                     listed in the details below.
@@ -461,6 +464,21 @@ <h2>
                     {% endcall %}
                 </div>
             {% endif %}
+            {% if not card.annual_fee
+                and not card.monthly_fee
+                and not card.weekly_fee
+                and not card.other_periodic_fee_amount
+            %}
+                <div class="m-payment-calculation__part">
+                    {% call data_section(
+                        'Annual fee',
+                        heading_classes="h2 u-mb0 u-mt0",
+                        subheading_classes="h4 u-mt0 u-mb0"
+                    ) %}
+                        {{ currency(0) }}
+                    {% endcall %}
+                </div>
+            {% endif %}
         </div>
         {% if card.fee_explanation is not none %}
             <p>{{ card.fee_explanation }}</p>
@@ -641,6 +659,16 @@ <h2>
                 </dl>
             {% endcall %}
         </div>
+        {% if card.rewards %}
+            <div class="u-mt30">
+                {{ speed_bump( {
+                    'content': 'If you carry a balance on your credit card, interest and
+                        fees typically exceed the value of any rewards earned.',
+                    'link': 'Learn why rewards may not be as beneficial as they seem.',
+                    'url': '/about-us/newsroom/cfpb-report-highlights-consumer-frustrations-with-credit-card-rewards-programs/'
+                } ) }}
+            </div>
+        {% endif %}
     </div>
 
     <div class="o-card-details-section">
@@ -677,9 +705,9 @@ <h2>
                         {% if card.transfer_apr_min is not none
                             and card.transfer_apr_max is not none
                         %}
-                            {{ apr_range(card.transfer_apr_min, card.transfer_apr_max) }}
+                            {{ apr_range(card.transfer_apr_min, card.transfer_apr_max) }}*
                         {% elif card.transfer_apr_median is not none %}
-                            {{ apr(card.transfer_apr_median) }}
+                            {{ apr(card.transfer_apr_median) }}*
                         {% endif %}
                     {% endcall %}
                 </div>
@@ -717,10 +745,13 @@ <h2>
                     {{ card.balance_transfer_fee_calculation }}
                 </p>
             {% endif %}
+            {{ apr_disclaimer(card.report_date,
+                "balance transfer",
+                card.balance_transfer_apr_vary_by_credit_tier
+            ) }}
             {% if card.balance_transfer_apr_vary_by_credit_tier %}
                 <p>
-                    Your balance transfer APR will vary based on your credit
-                    score. Here are typical balance transfer APRs for different
+                    Here are typical balance transfer APRs for different
                     credit scores for this card:
                 </p>
 
@@ -764,9 +795,9 @@ <h2>
                         {% if card.advance_apr_min is not none
                             and card.advance_apr_max is not none
                         %}
-                            {{ apr_range(card.advance_apr_min, card.advance_apr_max) }}
+                            {{ apr_range(card.advance_apr_min, card.advance_apr_max) }}*
                         {% elif card.advance_apr_median is not none %}
-                            {{ apr(card.advance_apr_median) }}
+                            {{ apr(card.advance_apr_median) }}*
                         {% else %}
                             N/A
                         {% endif %}
@@ -806,9 +837,12 @@ <h2>
                     {{ card.cash_advance_fee_calculation }}
                 </p>
             {% endif %}
+            {{ apr_disclaimer(card.report_date,
+                "cash advance",
+                card.cash_advance_apr_vary_by_credit_tier
+            ) }}
             {% if card.cash_advance_apr_vary_by_credit_tier %}
                 <p>
-                    Your cash advance APR will vary based on your credit score.
                     Here are typical cash advance APRs for different credit
                     scores for this card:
                 </p>

cfgov/tccp/jinja2/tccp/includes/apr_disclaimer.html

@@ -0,0 +1,30 @@
+{# ==========================================================================
+
+    APR disclaimer
+
+    ==========================================================================
+
+    Description:
+
+    A disclaimer that is shown with all APRs in the card details.
+
+    published_date:     Date the data was published.
+
+    apr_type:           Text of the kind of APR: purchase, balance transfer,
+                        or cash advance.
+
+    is_risk_based:      Boolean telling if the APR varies by credit score.
+
+    ========================================================================== #}
+
+{% from 'tccp/includes/fields.html' import date %}
+
+{%- macro apr_disclaimer(published_date, apr_type, is_risk_based) -%}
+
+<p class="m-apr-disclaimer">
+    *As of {{ date(published_date) -}}.
+    Advertised {{ apr_type }} APRs change over time {{- ' and are specific to the applicant, based on your credit score' if is_risk_based -}}.
+    Check rates before applying.
+</p>
+
+{%- endmacro -%}

cfgov/tccp/jinja2/tccp/includes/data_published.html

@@ -1,12 +1,10 @@
 {% from 'tccp/includes/fields.html' import date %}
 
-{%- macro data_published(value, verbose=false) -%}
+{%- macro data_published(value) -%}
 
 <p class="u-small-text u-small-text--subtle">
     Data as of {{ date(value) }}
-    ({{- 'credit card terms may have changed since then, double-check with the company
-          for the most current terms or ' if verbose -}}
-    <a href="{{ url('tccp:about') }}">{{ 'l' if verbose else 'L' }}earn about the data</a>)
+    (<a href="{{ url('tccp:about') }}">Learn about the data</a>)
 </p>
 
 {%- endmacro %}

cfgov/tccp/situations.py

@@ -159,7 +159,7 @@ def get_nonconflicting_params(cls, situations):
                     "fees typically exceed the value of any rewards earned."
                 ),
                 "link": (
-                    "Learn why rewards may not be as beneficial as they seem.",
+                    "Learn why rewards may not be as beneficial as they seem."
                 ),
                 "url": (
                     "/about-us/newsroom/"

cfgov/unprocessed/apps/tccp/css/main.less

@@ -458,7 +458,7 @@ html.js .o-filterable-list-results--partial {
     });
   }
 
-  h2 {
+  &:not(.o-card-details-section--introduction) > h2 {
     .respond-to-max(@bp-sm-min, {
       font-weight: 600;
     });
@@ -502,6 +502,11 @@ html.js .o-filterable-list-results--partial {
   }
 }
 
+.m-apr-disclaimer {
+  // Hang the asterisk at the beginning of the content
+  text-indent: -0.7ch;
+}
+
 .m-payment-calculation {
   display: flex;
   flex-direction: column;

cfgov/v1/jinja2/v1/includes/macros/time.html

@@ -39,6 +39,6 @@
         {{ dt.format_time(datetime) }}
         {% endif %}
     </time>
-    {%- endif %}
+    {%- endif -%}
 </span>
 {%- endmacro %}