feat: DPMMA-1572 Clone campaign events

app/bundles/CampaignBundle/Assets/css/campaign.css

@@ -47,6 +47,53 @@
     height: 150px;
 }
 
+#CampaignPasteContainer {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10px;
+}
+#CampaignPasteContainer::before {
+    content: "";
+    position: absolute;
+    z-index: 1;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: linear-gradient(to right, #00B49C, #4E5D9D, #F86B4F);
+    border-radius: 3px 3px 0 0;
+}
+
+#CampaignPasteContainer .panel-body {
+    height: auto;
+}
+
+#CampaignPasteContainer .panel-body > div {
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 296px;
+}
+
+#CampaignEventPanelGroups.groups-enabled-2 #CampaignPasteContainer .panel-body > div {
+    max-width: 164px;
+}
+
+#CampaignPasteContainer .panel-footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 150px;
+    min-width: 112px;
+    height: auto;
+    border-top: none;
+    border-left: 1px solid #ebedf0;
+}
+
+
+
 .jtk-endpoint {
     z-index: 1005;
 }
@@ -218,7 +265,8 @@
     height: 3px;
 }
 
-.campaign-event-buttons .btn-edit {
+.campaign-event-buttons .btn-edit,
+.campaign-event-buttons .btn-clone {
     background: #337ab7;
 }
 

app/bundles/CampaignBundle/Assets/js/campaign.js

@@ -82,8 +82,7 @@ Mautic.campaignOnLoad = function (container, response) {
             // Hide events list
 
             if (!mQuery('#CampaignEvent_newsource').length) {
-                // Hide the CampaignEventPanel if visible
-                mQuery('#CampaignEventPanel').addClass('hide');
+                Mautic.hideCampaignEventPanel();
             }
 
             // Get the option clicked
@@ -109,8 +108,7 @@ Mautic.campaignOnLoad = function (container, response) {
 
         mQuery('#CampaignCanvas').on('click', function(event) {
             if (!mQuery(event.target).parents('#CampaignCanvas').length && !mQuery('#CampaignEvent_newsource').length) {
-                // Hide the CampaignEventPanel if visible
-                mQuery('#CampaignEventPanel').addClass('hide');
+                Mautic.hideCampaignEventPanel();
             }
         });
 
@@ -134,6 +132,20 @@ Mautic.campaignOnLoad = function (container, response) {
             Mautic.processBuilderErrors(response);
         }
 
+        // update the cloned event info when storage is updated from different tab
+        window.addEventListener('storage', function(event) {
+            if (event.key === 'mautic_campaign_event_clone') {
+                Mautic.campaignBuilderUpdateEventCloneDescription();
+            }
+        });
+
+        mQuery(document).ajaxError(function(event, jqxhr, settings, thrownError) {
+            var path = settings.url.split('?')[0];
+
+            if (path === "/s/campaigns/events/insert") {
+                Mautic.campaignEventInsertOnError(event, jqxhr);
+            }
+        });
     }
 };
 
@@ -205,6 +217,28 @@ Mautic.campaignOnUnload = function(container) {
     delete Mautic.campaignBuilderLabels;
 }
 
+Mautic.campaignEventCloneOnLoad = function(container, response) {
+    Mautic.setCampaignEventClone({
+        'sourceEventName': response['eventName'],
+        'sourceEventType': response['eventType'],
+        'sourceType': response['type'],
+        'sourceCampaignId': response['campaignId'],
+        'sourceCampaignName': response['campaignName'],
+    });
+    const flashMessage = Mautic.addInfoFlashMessage(Mautic.translate('mautic.campaign.event.clone.success'));
+    Mautic.setFlashes(flashMessage);
+    Mautic.campaignBuilderUpdateEventCloneDescription();
+};
+
+Mautic.campaignEventInsertOnError = function (event, jqxhr) {
+    Mautic.clearCampaignEventClone();
+    Mautic.hideCampaignEventPanel();
+    if (jqxhr.responseJSON.error) {
+        const flashMessage = Mautic.addErrorFlashMessage(jqxhr.responseJSON.error);
+        Mautic.setFlashes(flashMessage);
+    }
+};
+
 /**
  * Setup the campaign event view
  *
@@ -306,6 +340,11 @@ Mautic.campaignEventOnLoad = function (container, response) {
         });
     }
 
+    if (response.hasOwnProperty('clearCloneStorage')) {
+        Mautic.hideCampaignEventPanel();
+        Mautic.clearCampaignEventClone();
+    }
+
     Mautic.campaignBuilderInstance.repaintEverything();
 };
 
@@ -416,7 +455,7 @@ Mautic.campaignSourceOnLoad = function (container, response) {
             var y = mQuery('#CampaignEvent_newsource').position().top;
 
             mQuery('#CampaignEvent_newsource').attr('id', 'CampaignEvent_newsource_hide');
-            mQuery('#CampaignEventPanel').addClass('hide');
+            Mautic.hideCampaignEventPanel();
             var autoConnect = false;
         } else {
             //append content
@@ -1655,11 +1694,14 @@ Mautic.campaignBuilderRegisterAnchors = function(names, el) {
                 }
             });
             Mautic.campaignBuilderAnchorClickedAllowedEvents = allowedEvents;
+            Mautic.campaignBuilderIsEventCloneAllowed = Mautic.isCampaignCloneEventAllowedForEndpoint(epDetails);
 
             if (!(mQuery('.preview').length)) {
                 var el = (mQuery(event.target).hasClass('jtk-endpoint')) ? event.target : mQuery(event.target).parents('.jtk-endpoint')[0];
                 Mautic.campaignBuilderAnchorClickedPosition = Mautic.campaignBuilderGetEventPosition(el);
                 Mautic.campaignBuilderUpdateEventList(allowedEvents, false, 'groups');
+                Mautic.campaignBuilderUpdateEventCloneButton(allowedEvents, epDetails.eventType, epDetails.anchorName);
+                Mautic.campaignBuilderUpdateEventCloneDescription();
             }
 
             // Disable the list items not allowed
@@ -1737,6 +1779,9 @@ Mautic.campaignBuilderUpdateEventList = function (groups, hidden, view, active,
         }
     });
 
+    mQuery('#CampaignEventPanelGroups').removeClass('groups-enabled-1 groups-enabled-2 groups-enabled-3')
+    mQuery('#CampaignEventPanelGroups').addClass('groups-enabled-' + groups.length)
+
     if (inGroupsView) {
         mQuery.each(groups, function (key, theGroup) {
             mQuery('#'+theGroup+'GroupSelector').removeClass(
@@ -1757,12 +1802,19 @@ Mautic.campaignBuilderUpdateEventList = function (groups, hidden, view, active,
                 left: (leftPos >=0 ) ? leftPos : 10,
                 top: topPos,
                 width: newWidth,
-                height: 280
+                height: Mautic.campaignBuilderIsEventCloneAllowed ? 372 : 280
             });
 
         mQuery('#CampaignEventPanel').removeClass('hide');
         mQuery('#CampaignEventPanelGroups').removeClass('hide');
         mQuery('#CampaignEventPanelLists').addClass('hide');
+
+        if (Mautic.campaignBuilderIsEventCloneAllowed) {
+            mQuery('#CampaignPasteContainer').removeClass('hide');
+        } else {
+            mQuery('#CampaignPasteContainer').addClass('hide');
+        }
+
     } else {
         var leftPos = (forcePosition) ? forcePosition.left : Mautic.campaignBuilderAnchorClickedPosition.left - 125;
         var topPos  = (forcePosition) ? forcePosition.top : Mautic.campaignBuilderAnchorClickedPosition.top + 25;
@@ -1786,6 +1838,20 @@ Mautic.campaignBuilderUpdateEventList = function (groups, hidden, view, active,
     }
 };
 
+Mautic.campaignBuilderUpdateEventCloneButton = function (groups, eventType, anchorName) {
+    var $insertButton = mQuery('#EventInsertButton');
+    var updatedUrl = $insertButton.attr('href').replace(/anchor=(.*?)$/, "anchor=" + anchorName + "&anchorEventType=" + eventType);
+    $insertButton.attr('href', updatedUrl);
+};
+
+Mautic.campaignBuilderUpdateEventCloneDescription = function () {
+    var cloneDetails = Mautic.getCampaignEventClone();
+    if (cloneDetails) {
+        mQuery('[data-campaign-event-clone="sourceEventName"]').html(cloneDetails['sourceEventName']);
+        mQuery('[data-campaign-event-clone="sourceCampaignName"]').html(cloneDetails['sourceCampaignName']);
+    }
+};
+
 /**
  *
  * @param endpoint
@@ -1838,7 +1904,8 @@ Mautic.campaignBuilderPrepareNewSource = function () {
 /**
  *
  * @param epDetails
- * @param optionVal
+ * @param targetType action|decision|condition
+ * @param targetEvent
  * @returns {boolean}
  */
 Mautic.campaignBuilderValidateConnection = function (epDetails, targetType, targetEvent) {
@@ -2155,3 +2222,32 @@ Mautic.confirmCallbackCampaignPublishStatus = function (action, el) {
     // Dismiss the confirmation
     Mautic.dismissConfirmation();
 }
+
+Mautic.isCampaignCloneEventAllowedForEndpoint = function(endpointDetails) {
+    const eventClone = Mautic.getCampaignEventClone();
+    if (!eventClone) {
+        return false;
+    }
+    // uppercase first letter for string comparison
+    const eventType = eventClone['sourceEventType'].charAt(0).toUpperCase() + eventClone['sourceEventType'].slice(1);
+    const allowedEvents = Mautic.campaignBuilderAnchorClickedAllowedEvents || [];
+    const isValidConnection = Mautic.campaignBuilderValidateConnection(endpointDetails, eventClone['sourceEventType'], eventClone['sourceType']);
+    return allowedEvents.includes(eventType) && isValidConnection;
+}
+
+Mautic.getCampaignEventClone = function() {
+    const eventClone = localStorage.getItem("mautic_campaign_event_clone");
+    return eventClone === null ? null : JSON.parse(eventClone);
+}
+
+Mautic.setCampaignEventClone = function(data) {
+    localStorage.setItem("mautic_campaign_event_clone", JSON.stringify(data));
+}
+
+Mautic.clearCampaignEventClone = function() {
+    localStorage.removeItem("mautic_campaign_event_clone");
+}
+
+Mautic.hideCampaignEventPanel = function() {
+    mQuery('#CampaignEventPanel').addClass('hide');
+}

app/bundles/CampaignBundle/Controller/CampaignController.php

@@ -945,13 +945,15 @@ protected function getViewArguments(array $args, $action): array
                 break;
             case 'new':
             case 'edit':
+                $session                = $this->getCurrentRequest()->getSession();
                 $args['viewParameters'] = array_merge(
                     $args['viewParameters'],
                     [
                         'eventSettings'   => $this->eventCollector->getEventsArray(),
                         'campaignEvents'  => $this->campaignEvents,
                         'campaignSources' => $this->campaignSources,
                         'deletedEvents'   => $this->deletedEvents,
+                        'hasEventClone'   => $session->has('mautic.campaign.events.clone.storage'),
                     ]
                 );
                 break;