From 43febe00ba0481c3d63e2329665d5842cf88689e Mon Sep 17 00:00:00 2001
From: Tim Otten <totten@civicrm.org>
Date: Fri, 2 Feb 2024 15:00:58 -0800
Subject: [PATCH] "Send test email" - Add notice about A/B testing

Do you want or expect this button to send one message or two messages? It depends.

* Heretofore, with subject-based A/B, the user intent was a bit ambiguous --
  but the imperative was to send both. The user needs *some* way to send
  each A/B condition -- but there's only one button for sending. So that
  button sends both.

* Now, with design-based A/B, you might reasonably infer user-intent. When
  editing "Design (A)", you send a test for "Design (A)". When editing "Design (B)",
  you send a test for "Design (B)". You can navigate back+forth to send
  whichever test you want.

* But OTOH, the user now has a choice.  They may do subject-based, design-based, or both. So:
    * If you always send the one being edited, then it's good for design-based.
    * If you always send both, then it's good for subject-based.
    * If you send one-or-both dynamically, then it's inconsistent.

* IMHO, whether subject-based or design-based, it's still not bad to send
  both.  When you go to read the messages in your email client, you can
  quickly compare the latest rendering of each.

* The main thing is to be clear about what's happening.
---
 ang/crmMosaico/BlockPreview.html |  4 ++++
 ang/crmMosaico/BlockPreview.js   |  3 ++-
 ang/crmMosaico/Variants.js       | 11 ++++++++++-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/ang/crmMosaico/BlockPreview.html b/ang/crmMosaico/BlockPreview.html
index b59f564c9..456a29d6a 100644
--- a/ang/crmMosaico/BlockPreview.html
+++ b/ang/crmMosaico/BlockPreview.html
@@ -44,3 +44,7 @@
   <button type="button" class="btn btn-sm btn-primary" title="{{ crmMailing.$invalid || !testGroup.gid ? ts('Complete all required-mark fields first') : ts('Send test message to group') }}" ng-disabled="crmMailing.$invalid || !testGroup.gid" crm-confirm="{resizable: true, width: '40%', height: '40%', open: previewTestGroup}"
       on-yes="doSend({gid: testGroup.gid})">{{:: ts('Send test') }}</button>
 </div>
+
+<div class="form-group" ng-if="isSplit(mailing)">
+  <em>{{ts('The draft mailing allows two variations (A/B).')}}<br/>{{ts('If you send a test now, it will use all available variations.')}}</em>
+</div>
diff --git a/ang/crmMosaico/BlockPreview.js b/ang/crmMosaico/BlockPreview.js
index 1d5c663c8..92dc4d3aa 100644
--- a/ang/crmMosaico/BlockPreview.js
+++ b/ang/crmMosaico/BlockPreview.js
@@ -2,7 +2,7 @@
   // example: <div crm-mailing-block-preview crm-mailing="myMailing" on-preview="openPreview(myMailing, preview.mode)" on-send="sendEmail(myMailing,preview.recipient)">
   // note: the directive defines a variable called "preview" with any inputs supplied by the user (e.g. the target recipient for an example mailing)
 
-  angular.module('crmMosaico').directive('crmMosaicoBlockPreview', function(crmUiHelp) {
+  angular.module('crmMosaico').directive('crmMosaicoBlockPreview', function(crmUiHelp, crmMosaicoVariants) {
     return {
       templateUrl: '~/crmMosaico/BlockPreview.html',
       link: function(scope, elm, attr) {
@@ -25,6 +25,7 @@
 
           return ($.inArray(false, validityArr) == -1);
         };
+        scope.isSplit = crmMosaicoVariants.isSplit;
 
         scope.doPreview = function(mode) {
           scope.$eval(attr.onPreview, {
diff --git a/ang/crmMosaico/Variants.js b/ang/crmMosaico/Variants.js
index f15245825..0fa3f79d4 100644
--- a/ang/crmMosaico/Variants.js
+++ b/ang/crmMosaico/Variants.js
@@ -73,8 +73,17 @@
         return preview;
       },
 
+      // isSplit(mailing): Determine if there are -any- split/variant fields.
+      // isSplit(mailing, field): Determine if a -specific- field has variations.
       isSplit: function isSplit(mailing, field) {
-        return mailing.template_options && mailing.template_options.variants && (field in mailing.template_options.variants[0]);
+        if (!mailing.template_options || !mailing.template_options.variants) {
+          return false;
+        }
+        if (field) {
+          return (field in mailing.template_options.variants[0]);
+        }
+        const nonEmpties = _.filter(mailing.template_options.variants, (v) => !_.isEmpty(angularObj(v)));
+        return nonEmpties.length > 0;
       }
     };
     return self;