Show campaign QR codes for email as well as postcard.

Closes #13.

site/messaging/templates/messaging/_utm_link_panel.html

@@ -13,6 +13,7 @@
       Auto-added to the email as a styled link. Updates as you type the campaign name.
       <code>utm_medium=email</code> · <code>utm_campaign</code> matches the name.
       Recipients tap a short <code>piha.li</code> link that redirects to this URL.
+      QR below encodes the same short link.
     </p>
     <p class="hint" data-utm-sms-hint hidden>
       SMS is plain text — phones cannot show HTML links. A short <code>piha.li</code>
@@ -31,7 +32,10 @@
       <div class="utm-qr-actions">
         <button type="button" class="btn btn-ghost btn-sm" data-utm-copy-qr>Copy QR image</button>
         <button type="button" class="btn btn-ghost btn-sm" data-utm-download-qr>Download PNG</button>
-        <p class="hint" style="margin-top:8px">
+        <p class="hint" style="margin-top:8px" data-utm-qr-email-hint hidden>
+          Copy or download the PNG for print, signatures, or other materials.
+        </p>
+        <p class="hint" style="margin-top:8px" data-utm-qr-postcard-hint hidden>
           Paste or upload the PNG in
           <a href="{% url 'messaging:postcard_designer' %}">Postcard design</a>.
         </p>

site/messaging/tests.py

@@ -1554,6 +1554,8 @@ class CampaignUtmLinkTests(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertContains(response, "Tracked site link")
         self.assertContains(response, "campaign-utm.js")
+        self.assertContains(response, "qrcode.min.js")
+        self.assertContains(response, "data-utm-qr")
         self.assertContains(response, "utm_campaign")
         self.assertContains(response, reverse("messaging:campaign_short_link"))
 
@@ -1573,6 +1575,9 @@ class CampaignUtmLinkTests(TestCase):
         self.assertEqual(response.status_code, 200)
         self.assertContains(response, "utm_campaign=spring-seller-tips")
         self.assertContains(response, "utm_medium=email")
+        self.assertContains(response, "qrcode.min.js")
+        self.assertContains(response, "data-utm-qr")
+        self.assertContains(response, "QR below encodes the same short link")
 
     def test_sms_replaces_existing_short_url(self):
         from messaging.services import ensure_campaign_utm_in_text

site/monica_site/static/css/portal.css

@@ -718,6 +718,9 @@ body.portal {
   flex-wrap: wrap;
   margin-top: 12px;
 }
+.utm-qr[hidden] {
+  display: none !important;
+}
 .utm-qr canvas {
   display: block;
   border: 1px solid var(--monica-border);

site/monica_site/static/js/campaign-utm.js

@@ -181,12 +181,19 @@
 
     function paint(url, inject) {
       var ch = medium();
+      var showQr = ch === "email" || ch === "postcard";
       if (urlEl) urlEl.textContent = url;
-      if (qrWrap) qrWrap.hidden = ch !== "postcard";
+      if (qrWrap) qrWrap.hidden = !showQr;
       if (smsHint) smsHint.hidden = ch !== "sms";
       if (emailHint) emailHint.hidden = ch !== "email";
       if (postcardHint) postcardHint.hidden = ch !== "postcard";
-      if (ch === "postcard" && canvas) {
+      panel.querySelectorAll("[data-utm-qr-email-hint]").forEach(function (el) {
+        el.hidden = ch !== "email";
+      });
+      panel.querySelectorAll("[data-utm-qr-postcard-hint]").forEach(function (el) {
+        el.hidden = ch !== "postcard";
+      });
+      if (showQr && canvas) {
         renderQr(canvas, url).catch(function () {});
       }
       if (inject && typeof opts.onUrlChange === "function") {