refactor(pricing): refonte v7.0 — 3 Cloud (Basic 189$/Essentiel 349$/Pro 549$) + DictIA Local (5998$ An1) + Pro+ soumission

Remplace l'ancien pricing (DictIA 8 / 16 / Cloud) par la nouvelle structure canonique v7.0 : 4 forfaits + 1 sentinel quote-only. Changements clés : - pricing_card.html : signature étendue (badge, recommended, capacity_audio, capacity_storage, gpu, yearly_renewal, cta_label) + format prix server-side avec NBSP OQLF (5998 -> 5 998 $) - _pricing_tiers.html : 4 cards (Cloud Basic 189$, Cloud Essentiel 349$, Cloud Pro 549$+485$ RECOMMANDÉ, DictIA Local 5998$ An1) + chip Pro+ soumission -> /contact?pro-plus=1 - plans.py : refonte complète avec yearly_renewal_env (DictIA Local An 2+ = 500$/an) + is_quote_only sentinel (Pro+ -> redirect /contact, jamais Stripe) - routes.py : Pro+ intercepté avant le flow Stripe Checkout - env.stripe.example : nouveau naming STRIPE_CLOUD_BASIC|ESSENTIEL|PRO_* + STRIPE_DICTIA_LOCAL_SETUP/RENEWAL_YEARLY - tarifs.html : header "Quatre forfaits", matrice comparative 4 colonnes, FAQ enrichie (7 questions incluant DictIA Local + onboarding Pro + Pro+) - fonctionnalites.html : section Architecture refondue (4 cards v7.0) - landing.html : ROI footnote + cycle "189$" + wave "189$/mois" actualisés - roi_calculator.js : recalibrage sur Cloud ESSENTIEL 349$ × 12 = 4188$/an - routes.py marketing : FAQ "DictIA 8 et 16" -> "DictIA LOCAL" - contact.html : "déploiements DictIA 16" -> "Cloud PRO" + "DictIA LOCAL" Tests : - test_marketing_landing_template.py : assertions prix v7.0 (189/349/549/5998), 4 slugs (cloud-basic, cloud-essentiel, cloud-pro, dictia-local), Pro+ chip, capacity chips, RECOMMANDÉ sur Cloud PRO - test_marketing_secondary_pages.py : 4 cards + Pro+ chip + matrice 4 col + FAQ 7 questions - test_stripe_checkout.py : env vars v7.0, slugs cloud-basic/cloud-pro/ dictia-local + nouveau test pro-plus -> /contact + tests setup pour Cloud PRO et DictIA Local - test_stripe_webhook.py : plan_slug metadata cloud-basic Status : 28/28 Stripe checkout + 17/17 webhook + 93/98 marketing pass (les 5 marketing failures sont pré-existantes, non liées au pricing : test_landing_has_main_nav et test_footer_links_complete = /blog manquant ; test_trust_bar_has_eyebrow_factual_phrasing + 2 tests conformite = casing eyebrow + entité é — vérifié par git stash baseline). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-04-28 21:06:12 -04:00
parent e8c7e5cd43
commit 1c4cafaf69
16 changed files with 648 additions and 301 deletions
--- a/templates/macros/pricing_card.html
+++ b/templates/macros/pricing_card.html
@@ -1,32 +1,105 @@
-{# Reusable pricing card macro. FlexiHub style — recommended tier gets a grad-bg outer border (1.5px gradient frame).
+{# Reusable pricing card macro (v7.0). FlexiHub style — recommended tier gets a grad-bg outer border (1.5px gradient frame).

   Args:
-     slug          : URL-safe identifier (goes into href, NOT piped through | safe — autoescape protects URL)
-     name          : Display name (piped through | safe — may contain entities; current names like "DictIA 8" are entity-free)
-     price_setup   : Setup price string with NBSP (e.g. '3&nbsp;450&nbsp;$') — piped through | safe
-     price_monthly : Monthly price string with NBSP (e.g. '173&nbsp;$') — piped through | safe
-     target        : Target audience tagline — piped through | safe (may contain entities)
-     features      : List of feature strings, each piped through | safe (will contain &nbsp; entities)
-     recommended   : If True, wraps the card in grad-bg gradient frame + RECOMMANDÉ badge
-     cta_url       : Base URL for the CTA — slug appended (NOT piped through | safe — URL injection guard)
+     slug             : URL-safe identifier (goes into href, NOT piped through | safe — autoescape protects URL)
+     name             : Display name (piped through | safe — entity-free expected: "Cloud BASIC", "DictIA LOCAL"…)
+     target           : Target audience tagline — piped through | safe (may contain entities)
+     features         : List of feature strings, each piped through | safe (may contain &nbsp; entities)
+     badge            : Top eyebrow chip text above the title — e.g. 'Cloud · Souverain QC' or 'Local · 100% hors-ligne'
+     recommended      : If True, wraps the card in grad-bg gradient frame + RECOMMANDÉ badge
+     setup            : One-shot setup price NUMBER (CAD, no NBSP) — None to hide. Cloud Basic/Essentiel = None,
+                        Cloud Pro = 485, DictIA Local = 5998.
+     monthly          : Monthly recurring price NUMBER (CAD, no NBSP) — None for DictIA Local (one-shot only).
+     yearly_renewal   : Year-2+ renewal NUMBER (CAD, no NBSP) — only for DictIA Local (500$/an dès An 2).
+     capacity_audio   : Capacity chip (audio hours / month) — e.g. '~165&nbsp;h audio/mois'
+     capacity_storage : Capacity chip (storage) — e.g. '100&nbsp;Go'
+     gpu              : GPU chip — e.g. 'NVIDIA L4 partagé'
+     cta_label        : Button text — e.g. 'Démarrer en Cloud', 'Configurer DictIA Local'
+     cta_url          : Base URL for the CTA — slug appended (NOT piped through | safe — URL injection guard)

-   Note: CTA label is "Réserver [name]" not "Choisir" because product is in pre-launch
-   (cf. trust bar "Pré-inscription ouverte") — LPC art. 219 hygiene.
-   The button macro autoescapes its `text` arg, so `name` MUST NOT contain HTML entities
-   (verified: "DictIA 8", "DictIA 16", "DictIA Cloud" are all entity-free). #}
-{%- macro pricing_card(slug, name, price_setup, price_monthly, target, features, recommended=False, cta_url='/checkout') -%}
-<div class="relative {% if recommended %}grad-bg p-[1.5px] rounded{% endif %}">
+   The numeric `setup` / `monthly` / `yearly_renewal` are formatted server-side
+   with French (fr-CA) thousands separator (NBSP) — `5998` → `5&nbsp;998&nbsp;$`.
+   This avoids requiring callers to remember OQLF NBSP conventions for every
+   price string.
+
+   Note: pre-launch hygiene (LPC art. 219) — CTA wording is supplied by the
+   caller (`cta_label`) so we no longer hardcode "Réserver" everywhere. #}
+
+{# Format an integer like 5998 → '5&nbsp;998' (OQLF thousands separator) #}
+{%- macro fmt_price(n) -%}
+{%- set s = n | string -%}
+{%- if s | length > 3 -%}{{ s[:-3] }}&nbsp;{{ s[-3:] }}{%- else -%}{{ s }}{%- endif -%}
+{%- endmacro -%}
+
+{%- macro pricing_card(slug, name, target, features,
+                      badge=None, recommended=False,
+                      setup=None, monthly=None, yearly_renewal=None,
+                      capacity_audio=None, capacity_storage=None, gpu=None,
+                      cta_label='Choisir ce forfait', cta_url='/checkout') -%}
+<div class="relative {% if recommended %}grad-bg p-[1.5px] rounded shadow-cta{% endif %}">
  {% if recommended %}<span class="absolute -top-3 left-1/2 -translate-x-1/2 grad-bg text-white text-xs font-bold px-3 py-1 rounded-full shadow-cta inline-flex items-center gap-1.5"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-3 h-3" aria-hidden="true"><path d="M12 2l2.9 6.9L22 10l-5.5 4.8L18 22l-6-3.6L6 22l1.5-7.2L2 10l7.1-1.1z"/></svg>RECOMMANDÉ</span>{% endif %}
-  <div class="bg-white p-8 rounded border border-brand-border h-full flex flex-col">
-    <div class="mb-6">
-      <h3 class="text-xl font-black mb-1 text-brand-navy">{{ name | safe }}</h3>
-      <p class="text-sm text-brand-navy/70">{{ target | safe }}</p>
+  <div class="bg-white p-6 rounded border border-brand-border h-full flex flex-col">
+
+    {# Eyebrow badge (optional) — Cloud · Souverain QC / Local · 100% hors-ligne #}
+    {% if badge %}
+    <p class="eyebrow grad-text mb-3 text-[11px]">{{ badge | safe }}</p>
+    {% endif %}
+
+    {# Title + target audience #}
+    <div class="mb-5">
+      <h3 class="text-xl font-black mb-1.5 text-brand-navy">{{ name | safe }}</h3>
+      <p class="text-sm text-brand-navy/70 leading-snug">{{ target | safe }}</p>
    </div>
-    <div class="mb-6">
-      <div class="text-4xl font-black grad-text">{{ price_setup | safe }}</div>
-      <div class="text-sm text-brand-navy/70">+ {{ price_monthly | safe }} / mois</div>
+
+    {# Pricing block — 3 layouts:
+       - DictIA Local : setup (one-shot An 1) + yearly_renewal tagline
+       - Cloud Pro    : setup (one-time onboarding) + monthly recurring
+       - Cloud Basic/Essentiel : monthly only #}
+    <div class="mb-5 pb-5 border-b border-brand-border">
+      {% if monthly is none and setup is not none %}
+        {# DictIA Local — one-shot An 1 + yearly renewal #}
+        <div class="text-4xl font-black grad-text leading-none">{{ fmt_price(setup) }}&nbsp;$</div>
+        <div class="text-xs text-brand-navy/70 mt-2">An&nbsp;1 (matériel + installation + 1<sup>re</sup> année logiciel)</div>
+        {% if yearly_renewal %}
+        <div class="text-xs text-brand-navy/70 mt-1">puis <strong class="text-brand-navy">{{ fmt_price(yearly_renewal) }}&nbsp;$/an</strong> dès An&nbsp;2</div>
+        {% endif %}
+      {% elif setup is not none and monthly is not none %}
+        {# Cloud Pro — setup + monthly #}
+        <div class="text-4xl font-black grad-text leading-none">{{ fmt_price(monthly) }}&nbsp;$<span class="text-base text-brand-navy/60 font-bold">&nbsp;/&nbsp;mois</span></div>
+        <div class="text-xs text-brand-navy/70 mt-2">+ {{ fmt_price(setup) }}&nbsp;$ onboarding (unique)</div>
+      {% else %}
+        {# Cloud Basic / Essentiel — monthly only #}
+        <div class="text-4xl font-black grad-text leading-none">{{ fmt_price(monthly) }}&nbsp;$<span class="text-base text-brand-navy/60 font-bold">&nbsp;/&nbsp;mois</span></div>
+        <div class="text-xs text-brand-navy/70 mt-2">Aucun frais d'installation</div>
+      {% endif %}
    </div>
-    <ul class="space-y-3 mb-8 flex-grow">
+
+    {# Capacity chips — audio / storage / GPU (only if provided) #}
+    {% if capacity_audio or capacity_storage or gpu %}
+    <div class="flex flex-wrap gap-1.5 mb-5" role="list" aria-label="Caractéristiques techniques">
+      {% if capacity_audio %}
+      <span role="listitem" class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-brand-b1/[0.08] border border-brand-b1/20 text-[11px] font-semibold text-brand-navy/85">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3 text-brand-b1" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
+        <span>{{ capacity_audio | safe }}</span>
+      </span>
+      {% endif %}
+      {% if capacity_storage %}
+      <span role="listitem" class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-brand-b2/[0.08] border border-brand-b2/20 text-[11px] font-semibold text-brand-navy/85">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3 text-brand-b2" aria-hidden="true"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14a9 3 0 0 0 18 0V5"/><path d="M3 12a9 3 0 0 0 18 0"/></svg>
+        <span>{{ capacity_storage | safe }}</span>
+      </span>
+      {% endif %}
+      {% if gpu %}
+      <span role="listitem" class="inline-flex items-center gap-1 px-2 py-1 rounded-full bg-brand-b3/[0.08] border border-brand-b3/20 text-[11px] font-semibold text-brand-navy/85">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-3 h-3 text-brand-b3" aria-hidden="true"><rect x="2" y="6" width="20" height="12" rx="2"/><path d="M6 18v2"/><path d="M18 18v2"/><path d="M6 10h.01"/><path d="M10 10h4"/></svg>
+        <span>{{ gpu | safe }}</span>
+      </span>
+      {% endif %}
+    </div>
+    {% endif %}
+
+    {# Features list #}
+    <ul class="space-y-2.5 mb-6 flex-grow" role="list">
      {% for f in features %}
      <li class="flex items-start gap-2 text-sm text-brand-navy/80">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mt-0.5 flex-shrink-0 text-brand-b3" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg>
@@ -34,8 +107,10 @@
      </li>
      {% endfor %}
    </ul>
+
+    {# CTA #}
    {% from 'macros/button.html' import button %}
-    {{ button('Réserver ' + name, href=cta_url.rstrip('/') + '/' + slug, variant='primary' if recommended else 'secondary', size='lg') }}
+    {{ button(cta_label, href=cta_url.rstrip('/') + '/' + slug, variant='primary' if recommended else 'secondary', size='lg') }}
  </div>
 </div>
 {%- endmacro -%}