@capillarytech/creatives-library 8.0.125-alpha.6 → 8.0.126

package/v2Components/TestAndPreviewSlidebox/_testAndPreviewSlidebox.scss

@@ -0,0 +1,543 @@
+/**
+ * TestAndPreviewSlidebox styles
+ */
+ @import '~@capillarytech/cap-ui-library/styles/_variables.scss';
+
+.test-and-preview-slidebox {
+  .test-preview-header {
+    display: flex;
+    align-items: center;
+    gap: $CAP_SPACE_12;
+
+    .back-icon {
+      cursor: pointer;
+      font-size: $CAP_SPACE_16;
+      color: #8c8c8c;
+      transition: color 0.2s ease;
+
+      &:hover {
+        color: #262626;
+      }
+    }
+
+    .header-title {
+      font-size: $CAP_SPACE_16;
+      font-weight: 500;
+      color: #262626;
+    }
+  }
+
+  .test-preview-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .discard-button {
+    padding: 0 $CAP_SPACE_08;
+  }
+
+  .tag-input-field {
+    width: 206px;
+  }
+
+  .test-and-preview-panels {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+  }
+
+  .left-panel {
+    width: 40%;
+    padding-right: 1rem;
+    border-right: 1px solid #e8e8e8;
+    overflow-y: auto;
+    .panel-divider {
+      margin: 0;
+    }
+    .no-tags-extracted-info-note {
+      .note-text {
+        white-space: unset;
+      }
+    }
+  }
+
+  .right-panel {
+    flex: 1;
+    background-color: #f0f2f5;
+    padding: $CAP_SPACE_08 $CAP_SPACE_24;
+  }
+
+  .panel-section {
+    margin-bottom: $CAP_SPACE_12;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  .loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: $CAP_SPACE_32;
+    text-align: center;
+
+    .loading-text {
+      margin-top: $CAP_SPACE_16;
+      color: #666;
+    }
+  }
+
+  .no-customer-message,
+  .no-tags-message {
+    padding: $CAP_SPACE_32;
+    text-align: center;
+    color: #666;
+    background: #f5f5f5;
+    border-radius: $CAP_SPACE_04;
+  }
+
+  .custom-values-editor {
+    .values-missing-message {
+      margin: $CAP_SPACE_16 0;
+    }
+    .editor-header {
+      display: flex;
+      justify-content: flex-end;
+      margin-bottom: $CAP_SPACE_16;
+
+      .json-toggle {
+        display: flex;
+        align-items: center;
+        gap: $CAP_SPACE_08;
+
+        .toggle-label {
+          color: #666;
+        }
+      }
+    }
+
+    .json-editor {
+      border: 1px solid #e0e0e0;
+      border-radius: $CAP_SPACE_04;
+      background-color: $CAP_WHITE;
+      margin-bottom: 1rem;
+      overflow: hidden;
+
+      .json-editor-container {
+        display: flex;
+        font-family: 'Courier New', monospace;
+        font-size: 13px;
+        line-height: 1.4;
+      }
+
+      .line-numbers {
+        background-color: #f8f8f8;
+        border-right: 1px solid #e0e0e0;
+        padding: $CAP_SPACE_08 $CAP_SPACE_04;
+        user-select: none;
+        min-width: $CAP_SPACE_40;
+        flex-shrink: 0;
+
+        .line-number {
+          text-align: right;
+          color: #8c8c8c;
+          font-size: $CAP_SPACE_12;
+          padding-right: $CAP_SPACE_08;
+          line-height: 1.4;
+          height: 19px;
+          display: flex;
+          align-items: center;
+          justify-content: flex-end;
+        }
+      }
+
+      .json-textarea {
+        flex: 1;
+        border: none;
+        outline: none;
+        font-family: 'Courier New', monospace;
+        font-size: 13px;
+        line-height: 1.4;
+        padding: $CAP_SPACE_08 $CAP_SPACE_08;
+        background-color: $CAP_WHITE;
+        resize: none;
+        white-space: pre;
+        overflow-wrap: normal;
+        overflow-x: auto;
+        tab-size: 2;
+        color: #3D7790;
+
+        &:focus {
+          outline: none;
+        }
+      }
+
+      .json-container {
+        font-family: 'Courier New', monospace;
+        font-size: 13px;
+        line-height: 1.4;
+      }
+
+      .json-line {
+        display: flex;
+        align-items: center;
+        min-height: $CAP_SPACE_20;
+        padding-left: $CAP_SPACE_08;
+        
+        &:hover {
+          background-color: #f5f5f5;
+        }
+      }
+
+      .line-number {
+        display: inline-block;
+        width: $CAP_SPACE_24;
+        text-align: right;
+        margin-right: $CAP_SPACE_12;
+        color: #8c8c8c;
+        font-size: $CAP_SPACE_12;
+        user-select: none;
+        flex-shrink: 0;
+      }
+
+      .json-indent {
+        color: transparent;
+        white-space: pre;
+      }
+
+      .json-key {
+        color: #3D7790;
+        ;
+        font-weight: 500;
+      }
+
+      .json-colon {
+        color: black;
+        margin: 0 2px;
+      }
+
+      .json-quote {
+        color: #0451a5;
+      }
+
+      .json-brace {
+        color: black;
+        font-weight: bold;
+      }
+
+      .json-comma {
+        color: black;
+      }
+
+      .json-value-input {
+        border: none;
+        background-color: transparent;
+        box-shadow: none;
+        padding: 0 2px;
+        font-family: inherit;
+        font-size: inherit;
+        color: #0451a5;
+        min-width: 60px;
+
+        &:focus {
+          background-color: #e6f7ff;
+          border: 1px solid #40a9ff;
+          border-radius: 2px;
+          outline: none;
+        }
+
+        &::placeholder {
+          color: #bfbfbf;
+          font-style: italic;
+        }
+        .ant-input {
+          margin: $CAP_SPACE_06 0;
+          height: $CAP_SPACE_36;
+          width: 206px;
+        }
+      }
+    }
+
+    .values-table {
+      margin-bottom: $CAP_SPACE_16;
+      border: 1px solid #e8e8e8;
+      border-radius: $CAP_SPACE_04;
+      overflow: hidden;
+
+      .table-header {
+        display: flex;
+        background: #f5f5f5;
+        border-bottom: 1px solid #e8e8e8;
+
+        .header-cell {
+          flex: 1;
+          padding: $CAP_SPACE_12 $CAP_SPACE_16;
+          font-weight: 500;
+          color: #666;
+
+          &:first-child {
+            flex: 2;
+          }
+        }
+      }
+
+      .value-row {
+        display: flex;
+        border-bottom: 1px solid #e8e8e8;
+
+        &:last-child {
+          border-bottom: none;
+        }
+
+        .tag-name {
+          flex: 2;
+          padding: $CAP_SPACE_12 $CAP_SPACE_16;
+          color: #333;
+          word-break: break-all;
+        }
+
+        .tag-input {
+          flex: 1;
+          padding: $CAP_SPACE_08 $CAP_SPACE_16;
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+
+    .editor-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 5rem;
+      margin-bottom: $CAP_SPACE_16;
+    }
+
+    .optional-tags-section {
+      .optional-count {
+        margin-left: $CAP_SPACE_08;
+        color: #666;
+      }
+
+      .optional-tags-content {
+        padding: $CAP_SPACE_16;  
+        background: #f5f5f5;
+        border-radius: $CAP_SPACE_04;
+      }
+    }
+  }
+
+  .preview-section {
+    .section-title {
+      margin-bottom: $CAP_SPACE_16;
+      color: #333;
+    }
+
+    .preview-content {
+      border: 1px solid #e8e8e8;
+      border-radius: $CAP_SPACE_04;
+      padding: $CAP_SPACE_16;
+      min-height: 200px;
+    }
+  }
+
+  .send-test-section {
+    .test-description {
+      margin-bottom: $CAP_SPACE_16;
+      color: #666;
+    }
+    .ant-collapse-header {
+      padding-left: 0;
+    }
+    .ant-collapse-content-box {
+      padding-left: 0 !important;
+    }
+    .test-customers-tree-select {
+      width: 100%;
+      height: $CAP_SPACE_40;
+      margin: $CAP_SPACE_12 0;
+      .ant-select-selection {
+        height: inherit;
+      }
+    }
+    .ant-select-selection__choice {
+      background-color: #EBECF0;
+      border-radius: $CAP_SPACE_04;
+    }
+  }
+}
+
+// Responsive design for smaller screens
+@media (max-width: 768px) {
+  .test-and-preview-slidebox {
+    .test-preview-container {
+      .left-panel {
+        border-right: none;
+        border-bottom: 1px solid #e8e8e8;
+        padding-right: 0;
+        padding-bottom: $CAP_SPACE_16;
+        margin-bottom: $CAP_SPACE_16;
+      }
+      
+      .right-panel {
+        padding-left: 0;
+        padding-top: $CAP_SPACE_16;
+      }
+    }
+  }
+}
+
+.preview-chrome {
+  background: #fff;
+  overflow: hidden;
+
+  .preview-divider {
+    margin: 0;
+  }
+  .preview-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: $CAP_SPACE_08 $CAP_SPACE_16 $CAP_SPACE_06 $CAP_SPACE_16;
+    background: #f0f2f5;
+    border-bottom: 1px solid #e8e8e8;
+
+    .preview-for {
+      font-size: 14px;
+      color: #595959;
+      gap: $CAP_SPACE_04;
+      b {
+        color: #262626;
+        margin-left: $CAP_SPACE_04;
+      }
+    }
+
+    .device-toggle {
+      display: flex;
+      gap: $CAP_SPACE_08;
+      background-color: #e0e0e0;
+      padding: $CAP_SPACE_06 $CAP_SPACE_08;
+      border-radius: $CAP_SPACE_08;
+
+      .anticon {
+        padding: $CAP_SPACE_04;
+        border-radius: $CAP_SPACE_04;
+        cursor: pointer;
+        color: #595959;
+
+        &.active {
+          background-color: #ffffff;
+          color: #262626;
+          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+        }
+      }
+    }
+  }
+
+  .preview-body {
+    border-radius: $CAP_SPACE_08;
+    box-shadow: 0 $CAP_SPACE_04 $CAP_SPACE_12 rgba(0,0,0,0.1);
+    &.mobile {
+      width: 375px;
+      margin: 0 auto;
+      .browser-bar {
+        background: #EBECF0;
+      }
+    }
+
+    .browser-bar {
+      display: flex;
+      align-items: center;
+      padding: $CAP_SPACE_08 $CAP_SPACE_12;
+      gap: $CAP_SPACE_08;
+
+      .browser-controls {
+        display: flex;
+        gap: $CAP_SPACE_08;
+        color: #B3BAC5;
+        .refresh-icon {
+          margin-top: $CAP_SPACE_04;
+          svg path {
+            fill: #B3BAC5;
+          }
+        }
+      }
+      .address-bar {
+        flex-grow: 1;
+        background: #fff;
+        border-radius: $CAP_SPACE_16;
+        padding: $CAP_SPACE_04 $CAP_SPACE_12;
+        font-size: $CAP_SPACE_12;
+        color: #595959;
+        text-align: center;
+        border: 1px solid #DFE2E7;
+        .address-bar-label {
+          float: left;
+        }
+        .browser-address-bar-icon {
+          float: right;
+        }
+      }
+      .browser-actions {
+        color: #8c8c8c;
+      }
+    }
+
+    .email-header {
+      display: flex;
+      align-items: center;
+      padding: $CAP_SPACE_16;
+      gap: $CAP_SPACE_16;
+      .back-arrow {
+        font-size: $CAP_SPACE_16;
+      }
+      .email-meta {
+        margin-left: auto;
+        display: flex;
+        align-items: center;
+        gap: $CAP_SPACE_08;
+        font-size: $CAP_SPACE_12;
+        color: #8c8c8c;
+        .dots {
+          width: $CAP_SPACE_06;
+          height: $CAP_SPACE_06;
+          border-radius: 50%;
+          background: #d9d9d9;
+        }
+      }
+    }
+
+    .email-from {
+      display: flex;
+      align-items: center;
+      padding: 0 $CAP_SPACE_16 $CAP_SPACE_16;
+      gap: $CAP_SPACE_12;
+      .sender-avatar {
+        width: $CAP_SPACE_40;
+        height: $CAP_SPACE_40;
+        border-radius: 50%;
+        background: #e8e8e8;
+      }
+      .sender-info {
+        .sender-name {
+          font-weight: 500;
+        }
+        .recipient-info {
+          font-size: $CAP_SPACE_12;
+          color: #8c8c8c;
+        }
+      }
+    }
+
+    .email-content {
+      height: 600px; // Or adjust as needed
+      border-top: 1px solid #e8e8e8;
+      padding: 0 $CAP_SPACE_16;
+      iframe {
+        border: none;
+      }
+    }
+  }
+}

package/v2Components/TestAndPreviewSlidebox/actions.js

@@ -0,0 +1,67 @@
+import {
+  SEARCH_CUSTOMERS_REQUESTED,
+  EXTRACT_TAGS_REQUEST,
+  UPDATE_PREVIEW_REQUEST,
+  SEND_TEST_MESSAGE_REQUESTED,
+  CLEAR_CUSTOMER_SEARCH_STATE,
+  FETCH_TEST_CUSTOMERS_REQUESTED,
+  FETCH_TEST_GROUPS_REQUESTED,
+  CREATE_MESSAGE_META_REQUESTED,
+  CLEAR_SEARCH_RESULTS,
+  GET_PREFILLED_VALUES_REQUESTED,
+  CLEAR_PREFILLED_VALUES,
+} from './constants';
+
+// Action Creators
+export const searchCustomersRequested = (query) => ({
+  type: SEARCH_CUSTOMERS_REQUESTED,
+  payload: { query },
+});
+
+export const extractTagsRequested = (templateSubject, templateContent) => ({
+  type: EXTRACT_TAGS_REQUEST,
+  payload: { templateSubject, templateContent },
+});
+
+export const updatePreviewRequested = (data) => ({
+  type: UPDATE_PREVIEW_REQUEST,
+  payload: data,
+});
+
+export const sendTestMessageRequested = (payload, callback) => ({
+  type: SEND_TEST_MESSAGE_REQUESTED,
+  payload,
+  callback,
+});
+
+export const clearCustomerSearchState = () => ({
+  type: CLEAR_CUSTOMER_SEARCH_STATE,
+});
+
+export const clearSearchResults = () => ({
+  type: CLEAR_SEARCH_RESULTS,
+});
+
+export const fetchTestCustomersRequested = () => ({
+  type: FETCH_TEST_CUSTOMERS_REQUESTED,
+});
+
+export const fetchTestGroupsRequested = () => ({
+  type: FETCH_TEST_GROUPS_REQUESTED,
+});
+
+export const createMessageMetaRequested = (payload, messageMetaConfigId, callback) => ({
+  type: CREATE_MESSAGE_META_REQUESTED,
+  payload,
+  messageMetaConfigId,
+  callback,
+});
+
+export const getPrefilledValuesRequested = (payload) => ({
+  type: GET_PREFILLED_VALUES_REQUESTED,
+  payload,
+});
+
+export const clearPrefilledValues = () => ({
+  type: CLEAR_PREFILLED_VALUES,
+});

package/v2Components/TestAndPreviewSlidebox/constants.js

@@ -0,0 +1,67 @@
+// Action type constants for CustomerSearchSection
+export const SEARCH_CUSTOMERS_REQUESTED = 'app/v2Components/TestAndPreviewSlidebox/SEARCH_CUSTOMERS_REQUESTED';
+export const SEARCH_CUSTOMERS_SUCCESS = 'app/v2Components/TestAndPreviewSlidebox/SEARCH_CUSTOMERS_SUCCESS';
+export const SEARCH_CUSTOMERS_FAILURE = 'app/v2Components/TestAndPreviewSlidebox/SEARCH_CUSTOMERS_FAILURE';
+
+export const EXTRACT_TAGS_REQUEST = 'app/v2Components/TestAndPreviewSlidebox/EXTRACT_TAGS_REQUEST';
+export const EXTRACT_TAGS_SUCCESS = 'app/v2Components/TestAndPreviewSlidebox/EXTRACT_TAGS_SUCCESS';
+export const EXTRACT_TAGS_FAILURE = 'app/v2Components/TestAndPreviewSlidebox/EXTRACT_TAGS_FAILURE';
+
+export const UPDATE_PREVIEW_REQUEST = 'app/v2Components/TestAndPreviewSlidebox/UPDATE_PREVIEW_REQUEST';
+export const UPDATE_PREVIEW_SUCCESS = 'app/v2Components/TestAndPreviewSlidebox/UPDATE_PREVIEW_SUCCESS';
+export const UPDATE_PREVIEW_FAILURE = 'app/v2Components/TestAndPreviewSlidebox/UPDATE_PREVIEW_FAILURE';
+
+export const SEND_TEST_MESSAGE_REQUESTED = 'app/v2Components/TestAndPreviewSlidebox/SEND_TEST_MESSAGE_REQUESTED';
+export const SEND_TEST_MESSAGE_SUCCESS = 'app/v2Components/TestAndPreviewSlidebox/SEND_TEST_MESSAGE_SUCCESS';
+export const SEND_TEST_MESSAGE_FAILURE = 'app/v2Components/TestAndPreviewSlidebox/SEND_TEST_MESSAGE_FAILURE';
+
+export const CLEAR_CUSTOMER_SEARCH_STATE = 'app/v2Components/TestAndPreviewSlidebox/CLEAR_CUSTOMER_SEARCH_STATE';
+export const CLEAR_SEARCH_RESULTS = 'app/v2Components/TestAndPreviewSlidebox/CLEAR_SEARCH_RESULTS';
+
+export const FETCH_TEST_CUSTOMERS_REQUESTED = 'app/v2Components/TestAndPreviewSlidebox/FETCH_TEST_CUSTOMERS_REQUESTED';
+export const FETCH_TEST_CUSTOMERS_SUCCESS = 'app/v2Components/TestAndPreviewSlidebox/FETCH_TEST_CUSTOMERS_SUCCESS';
+export const FETCH_TEST_CUSTOMERS_FAILURE = 'app/v2Components/TestAndPreviewSlidebox/FETCH_TEST_CUSTOMERS_FAILURE';
+
+export const FETCH_TEST_GROUPS_REQUESTED = 'app/v2Components/TestAndPreviewSlidebox/FETCH_TEST_GROUPS_REQUESTED';
+export const FETCH_TEST_GROUPS_SUCCESS = 'app/v2Components/TestAndPreviewSlidebox/FETCH_TEST_GROUPS_SUCCESS';
+export const FETCH_TEST_GROUPS_FAILURE = 'app/v2Components/TestAndPreviewSlidebox/FETCH_TEST_GROUPS_FAILURE';
+
+export const CREATE_MESSAGE_META_REQUESTED = 'app/v2Components/TestAndPreviewSlidebox/CREATE_MESSAGE_META_REQUESTED';
+export const CREATE_MESSAGE_META_SUCCESS = 'app/v2Components/TestAndPreviewSlidebox/CREATE_MESSAGE_META_SUCCESS';
+export const CREATE_MESSAGE_META_FAILURE = 'app/v2Components/TestAndPreviewSlidebox/CREATE_MESSAGE_META_FAILURE';
+
+export const GET_PREFILLED_VALUES_REQUESTED = 'app/v2Components/TestAndPreviewSlidebox/GET_PREFILLED_VALUES_REQUESTED';
+export const GET_PREFILLED_VALUES_SUCCESS = 'app/v2Components/TestAndPreviewSlidebox/GET_PREFILLED_VALUES_SUCCESS';
+export const GET_PREFILLED_VALUES_FAILURE = 'app/v2Components/TestAndPreviewSlidebox/GET_PREFILLED_VALUES_FAILURE';
+
+export const CLEAR_PREFILLED_VALUES = 'app/v2Components/TestAndPreviewSlidebox/CLEAR_PREFILLED_VALUES';
+
+export const INITIAL_PAYLOAD = {
+  ouId: -1,
+  sourceEntityId: "creatives_ui_76de58db-f70b-40d0-85a5-d014bda6e751",
+  channel: "EMAIL",
+  module: "CREATIVES",
+  emailDeliverySettings: {
+    additionalSettings: {
+      encryptUrl: false,
+      linkTrackingEnabled: false,
+      useTinyUrl: false,
+      skipRateLimit: false,
+      bypassControlUser: false,
+    },
+    channelSettings: {
+      channel: "EMAIL",
+      senderLabel: "",
+      senderId: "",
+      replyToId: "",
+    },
+  },
+  executionParams: {},
+  clientName: "CREATIVES",
+};
+
+export const TEST = "TEST";
+export const EMAIL = "EMAIL";
+export const DESKTOP = "desktop";
+export const ACTIVE = "active";
+export const MOBILE = "mobile";