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

package/v2Components/TestAndPreviewSlidebox/messages.js

@@ -0,0 +1,147 @@
+/*
+ * TestAndPreviewSlidebox Messages
+ *
+ * This contains all the text for the TestAndPreviewSlidebox component.
+ */
+import { defineMessages } from 'react-intl';
+
+export const scope = 'app.v2Components.TestAndPreviewSlidebox';
+
+export default defineMessages({
+  testAndPreviewHeader: {
+    id: `${scope}.testAndPreviewHeader`,
+    defaultMessage: 'Preview and Test',
+  },
+  customerSearchTitle: {
+    id: `${scope}.customerSearchTitle`,
+    defaultMessage: 'Customer',
+  },
+  enterCustomValuesForTags: {
+    id: `${scope}.enterCustomValuesForTags`,
+    defaultMessage: 'Enter custom values for tags',
+  },
+  personalizationTags: {
+    id: `${scope}.personalizationTags`,
+    defaultMessage: 'Personalization Tags',
+  },
+  customValues: {
+    id: `${scope}.customValues`,
+    defaultMessage: 'Custom Values',
+  },
+  showJSON: {
+    id: `${scope}.showJSON`,
+    defaultMessage: 'Show JSON',
+  },
+  discardCustomValues: {
+    id: `${scope}.discardCustomValues`,
+    defaultMessage: 'Discard custom values',
+  },
+  updatePreview: {
+    id: `${scope}.updatePreview`,
+    defaultMessage: 'Update Preview',
+  },
+  sendTestMessage: {
+    id: `${scope}.sendTestMessage`,
+    defaultMessage: 'Send Test Message',
+  },
+  testMessageDescription: {
+    id: `${scope}.testMessageDescription`,
+    defaultMessage: 'Test out the message before sending to your customers',
+  },
+  sendTestButton: {
+    id: `${scope}.sendTestButton`,
+    defaultMessage: 'Send test message',
+  },
+  emailPreviewTitle: {
+    id: `${scope}.emailPreviewTitle`,
+    defaultMessage: 'Email Preview',
+  },
+  extractingTags: {
+    id: `${scope}.extractingTags`,
+    defaultMessage: 'Extracting tags...',
+  },
+  noTagsExtracted: {
+    id: `${scope}.noTagsExtracted`,
+    defaultMessage: 'There are no personalization tags in this message, you can directly send out a test message',
+  },
+  noTagsFound: {
+    id: `${scope}.noTagsFound`,
+    defaultMessage: 'No tags found in the template',
+  },
+  tagName: {
+    id: `${scope}.tagName`,
+    defaultMessage: 'Tag Name',
+  },
+  tagValue: {
+    id: `${scope}.tagValue`,
+    defaultMessage: 'Value',
+  },
+  enterValue: {
+    id: `${scope}.enterValue`,
+    defaultMessage: 'Enter value',
+  },
+  overrideValue: {
+    id: `${scope}.overrideValue`,
+    defaultMessage: 'Override value (optional)',
+  },
+  noRequiredTags: {
+    id: `${scope}.noRequiredTags`,
+    defaultMessage: 'No required personalization tags found. Select a customer to continue.',
+  },
+  previewTitle: {
+    id: `${scope}.previewTitle`,
+    defaultMessage: 'Preview',
+  },
+  previewPlaceholder: {
+    id: `${scope}.previewPlaceholder`,
+    defaultMessage: 'Click "Update Preview" to see the rendered email.',
+  },
+  previewFor: {
+    id: `${scope}.previewFor`,
+    defaultMessage: 'Preview for',
+  },
+  defaultPreview: {
+    id: `${scope}.defaultPreview`,
+    defaultMessage: 'Default preview',
+  },
+  senderName: {
+    id: `${scope}.senderName`,
+    defaultMessage: 'Capillary Technologies',
+  },
+  browserAddressBar: {
+    id: `${scope}.browserAddressBar`,
+    defaultMessage: 'www.yourmail.com',
+  },
+  testCustomers: {
+    id: `${scope}.testCustomers`,
+    defaultMessage: 'Test Customers',
+  },
+  testCustomersPlaceholder: {
+    id: `${scope}.testCustomersPlaceholder`,
+    defaultMessage: 'Search and select a group or individual test customers',
+  },
+  updatingPreview: {
+    id: `${scope}.updatingPreview`,
+    defaultMessage: 'Updating preview with the latest changes',
+  },
+  valuesMissing: {
+    id: `${scope}.valuesMissing`,
+    defaultMessage: 'Values missing for some of the personalization tags',
+  },
+  timeAgo: {
+    id: `${scope}.timeAgo`,
+    defaultMessage: '0 min ago',
+  },
+  testMessageSent: {
+    id: `${scope}.testMessageSent`,
+    defaultMessage: 'Test message sent successfully!',
+  },
+  testMessageFailed: {
+    id: `${scope}.testMessageFailed`,
+    defaultMessage: 'Failed to send test message',
+  },
+  invalidJSON: {
+    id: `${scope}.invalidJSON`,
+    defaultMessage: 'Invalid JSON input',
+  },
+});

package/v2Components/TestAndPreviewSlidebox/reducer.js

@@ -0,0 +1,233 @@
+/**
+ * Customer Search Section Reducer
+ */
+import { fromJS } from 'immutable';
+import {
+  SEARCH_CUSTOMERS_REQUESTED,
+  SEARCH_CUSTOMERS_SUCCESS,
+  SEARCH_CUSTOMERS_FAILURE,
+  EXTRACT_TAGS_REQUEST,
+  EXTRACT_TAGS_SUCCESS,
+  EXTRACT_TAGS_FAILURE,
+  UPDATE_PREVIEW_REQUEST,
+  UPDATE_PREVIEW_SUCCESS,
+  UPDATE_PREVIEW_FAILURE,
+  SEND_TEST_MESSAGE_REQUESTED,
+  SEND_TEST_MESSAGE_SUCCESS,
+  SEND_TEST_MESSAGE_FAILURE,
+  CLEAR_CUSTOMER_SEARCH_STATE,
+  CLEAR_SEARCH_RESULTS,
+  FETCH_TEST_CUSTOMERS_REQUESTED,
+  FETCH_TEST_CUSTOMERS_SUCCESS,
+  FETCH_TEST_CUSTOMERS_FAILURE,
+  FETCH_TEST_GROUPS_REQUESTED,
+  FETCH_TEST_GROUPS_SUCCESS,
+  FETCH_TEST_GROUPS_FAILURE,
+  CREATE_MESSAGE_META_REQUESTED,
+  CREATE_MESSAGE_META_SUCCESS,
+  CREATE_MESSAGE_META_FAILURE,
+  GET_PREFILLED_VALUES_REQUESTED,
+  GET_PREFILLED_VALUES_SUCCESS,
+  GET_PREFILLED_VALUES_FAILURE,
+  CLEAR_PREFILLED_VALUES,
+} from './constants';
+
+const initialState = fromJS({
+  // Search state
+  searchQuery: '',
+  customers: [],
+  isSearchingCustomer: false,
+  searchError: null,
+  hasSearched: false,
+
+  // Selected customer and tags
+  extractedTags: [],
+  requiredTags: [],
+  optionalTags: [],
+  isExtractingTags: false,
+  extractTagsError: null,
+  apiWarnings: [],
+  apiErrors: [],
+
+  // Preview state
+  previewData: null,
+  isUpdatingPreview: false,
+  updatePreviewError: null,
+
+  // Test email state
+  isSendingTestMessage: false,
+  sendTestMessageError: null,
+  testMessageResponse: null,
+
+  tags: {
+    loading: false,
+    error: null,
+    required: [],
+    optional: [],
+  },
+
+  // Test Customers
+  testCustomers: [],
+  isFetchingTestCustomers: false,
+  fetchTestCustomersError: null,
+
+  // Test Groups
+  testGroups: [],
+  isFetchingTestGroups: false,
+  fetchTestGroupsError: null,
+
+  messageMetaConfigId: null,
+  isCreatingMessageMeta: false,
+  createMessageMetaError: null,
+  prefilledValues: {},
+  isFetchingPrefilledValues: false,
+  fetchPrefilledValuesError: null,
+});
+
+const previewAndTestReducer = (state = initialState, action) => {
+  switch (action.type) {
+    // Search Customers
+    case SEARCH_CUSTOMERS_REQUESTED:
+      return state.set('searchQuery', action.payload.query)
+        .set('isSearchingCustomer', true)
+        .set('searchError', null)
+        .set('hasSearched', false);
+
+    case SEARCH_CUSTOMERS_SUCCESS:
+      return state.set('customers', action.payload.customers)
+        .set('isSearchingCustomer', false)
+        .set('searchError', null)
+        .set('hasSearched', true);
+
+    case SEARCH_CUSTOMERS_FAILURE:
+      return state.set('customers', [])
+        .set('isSearchingCustomer', false)
+        .set('searchError', action.payload.error)
+        .set('hasSearched', true);
+
+    // Extract Tags
+    case EXTRACT_TAGS_REQUEST:
+      return state.set('isExtractingTags', true)
+        .set('extractTagsError', null)
+        .set('apiWarnings', [])
+        .set('apiErrors', [])
+        .set('tags.loading', true)
+        .set('tags.error', null);
+
+    case EXTRACT_TAGS_SUCCESS:
+      return state.set('extractedTags', action.payload.extractedtags)
+        .set('isExtractingTags', false)
+        .set('extractTagsError', null)
+        .set('tags.loading', false)
+        .set('tags.error', null);
+
+    case EXTRACT_TAGS_FAILURE:
+      return state.set('extractedTags', [])
+        .set('isExtractingTags', false)
+        .set('extractTagsError', action.payload.error)
+        .set('apiWarnings', [])
+        .set('apiErrors', [])
+        .set('tags.loading', false)
+        .set('tags.error', action.payload.error);
+
+    // Update Preview
+    case UPDATE_PREVIEW_REQUEST:
+      return state.set('isUpdatingPreview', true)
+        .set('updatePreviewError', null);
+
+    case UPDATE_PREVIEW_SUCCESS:
+      return state.set('previewData', action.payload.previewData)
+        .set('isUpdatingPreview', false)
+        .set('updatePreviewError', null);
+
+    case UPDATE_PREVIEW_FAILURE:
+      return state.set('previewData', null)
+        .set('isUpdatingPreview', false)
+        .set('updatePreviewError', action.payload.error);
+
+    // Send Test Email
+    case SEND_TEST_MESSAGE_REQUESTED:
+      return state.set('isSendingTestMessage', true)
+        .set('sendTestMessageError', null)
+        .set('testMessageResponse', null);
+
+    case SEND_TEST_MESSAGE_SUCCESS:
+      return state.set('testMessageResponse', action.payload.response)
+        .set('isSendingTestMessage', false)
+        .set('sendTestMessageError', null);
+
+    case SEND_TEST_MESSAGE_FAILURE:
+      return state.set('testMessageResponse', action.payload.response)
+        .set('isSendingTestMessage', false)
+        .set('sendTestMessageError', action.payload.error);
+
+    // Clear Actions
+    case CLEAR_SEARCH_RESULTS:
+      return state.set('customers', [])
+        .set('searchQuery', '')
+        .set('hasSearched', false)
+        .set('searchError', null);
+
+    case CLEAR_CUSTOMER_SEARCH_STATE:
+      return fromJS(initialState);
+
+    // Test Customers
+    case FETCH_TEST_CUSTOMERS_REQUESTED:
+      return state.set('isFetchingTestCustomers', true)
+        .set('fetchTestCustomersError', null);
+
+    case FETCH_TEST_CUSTOMERS_SUCCESS:
+      return state.set('isFetchingTestCustomers', false)
+        .set('testCustomers', action.payload.customers);
+
+    case FETCH_TEST_CUSTOMERS_FAILURE:
+      return state.set('isFetchingTestCustomers', false)
+        .set('fetchTestCustomersError', action.payload.error);
+
+    // Test Groups
+    case FETCH_TEST_GROUPS_REQUESTED:
+      return state.set('isFetchingTestGroups', true)
+        .set('fetchTestGroupsError', null);
+
+    case FETCH_TEST_GROUPS_SUCCESS:
+      return state.set('isFetchingTestGroups', false)
+        .set('testGroups', action.payload.groups);
+
+    case FETCH_TEST_GROUPS_FAILURE:
+      return state.set('isFetchingTestGroups', false)
+        .set('fetchTestGroupsError', action.payload.error);
+
+    // Create Message Meta
+    case CREATE_MESSAGE_META_REQUESTED:
+      return state.set('isCreatingMessageMeta', true)
+        .set('createMessageMetaError', null);
+
+    case CREATE_MESSAGE_META_SUCCESS:
+      return state.set('isCreatingMessageMeta', false)
+        .set('messageMetaConfigId', action.payload.response.entity);
+
+    case CREATE_MESSAGE_META_FAILURE:
+      return state.set('isCreatingMessageMeta', false)
+        .set('createMessageMetaError', action.payload.error);
+
+    // Get Prefilled Values
+    case GET_PREFILLED_VALUES_REQUESTED:
+      return state.set('isFetchingPrefilledValues', true)
+        .set('fetchPrefilledValuesError', null);
+    case GET_PREFILLED_VALUES_SUCCESS:
+      return state.set('isFetchingPrefilledValues', false)
+        .set('prefilledValues', fromJS(action.payload.values));
+
+    case GET_PREFILLED_VALUES_FAILURE:
+      return state.set('isFetchingPrefilledValues', false)
+        .set('fetchPrefilledValuesError', action.payload.error);
+
+    case CLEAR_PREFILLED_VALUES:
+      return state.set('prefilledValues', fromJS({}));
+
+    default:
+      return state;
+  }
+};
+
+export default previewAndTestReducer;

package/v2Components/TestAndPreviewSlidebox/sagas.js

@@ -0,0 +1,258 @@
+/**
+ * Customer Search Section Sagas
+ */
+
+import {
+  call, put, takeLatest, all,
+} from 'redux-saga/effects';
+import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
+import * as Api from '../../services/api';
+import {
+  SEARCH_CUSTOMERS_REQUESTED,
+  SEARCH_CUSTOMERS_SUCCESS,
+  SEARCH_CUSTOMERS_FAILURE,
+  EXTRACT_TAGS_REQUEST,
+  EXTRACT_TAGS_SUCCESS,
+  EXTRACT_TAGS_FAILURE,
+  UPDATE_PREVIEW_REQUEST,
+  UPDATE_PREVIEW_SUCCESS,
+  UPDATE_PREVIEW_FAILURE,
+  SEND_TEST_MESSAGE_REQUESTED,
+  SEND_TEST_MESSAGE_SUCCESS,
+  SEND_TEST_MESSAGE_FAILURE,
+  FETCH_TEST_CUSTOMERS_REQUESTED,
+  FETCH_TEST_GROUPS_REQUESTED,
+  FETCH_TEST_CUSTOMERS_SUCCESS,
+  FETCH_TEST_CUSTOMERS_FAILURE,
+  FETCH_TEST_GROUPS_SUCCESS,
+  FETCH_TEST_GROUPS_FAILURE,
+  CREATE_MESSAGE_META_REQUESTED,
+  CREATE_MESSAGE_META_SUCCESS,
+  CREATE_MESSAGE_META_FAILURE,
+  GET_PREFILLED_VALUES_REQUESTED,
+  GET_PREFILLED_VALUES_SUCCESS,
+  GET_PREFILLED_VALUES_FAILURE,
+} from './constants';
+
+// Search Customers Saga
+export function* searchCustomersSaga(action) {
+  try {
+    const { query } = action.payload;
+    const response = yield call(Api.searchCustomers, { query });
+
+    if (response.isError) {
+      yield put({ type: SEARCH_CUSTOMERS_FAILURE, payload: { error: response.message || 'Failed to search customers' } });
+    } else {
+      const customers = response?.result?.data || [];
+      yield put({ type: SEARCH_CUSTOMERS_SUCCESS, payload: { customers } });
+    }
+  } catch (error) {
+    yield put({ type: SEARCH_CUSTOMERS_FAILURE, payload: { error: error.message || 'Network error occurred' } });
+  }
+}
+
+// Extract Tags Saga
+export function* extractTagsSaga(action) {
+  try {
+    const { templateSubject, templateContent } = action.payload;
+
+    const payload = {
+      messageTitle: templateSubject || '',
+      messageBody: templateContent || '',
+    };
+
+    const response = yield call(Api.extractTagsWithMetaData, payload);
+    if (response?.data?.length > 0) {
+      yield put({ type: EXTRACT_TAGS_SUCCESS, payload: { extractedtags: response.data } });
+    } else {
+      yield put({ type: EXTRACT_TAGS_FAILURE, payload: { error: response.error || 'Failed to extract tags' } });
+    }
+  } catch (error) {
+    yield put({ type: EXTRACT_TAGS_FAILURE, payload: { error: error.message || 'Network error occurred' } });
+  }
+}
+
+// Update Preview Saga
+export function* updatePreviewSaga(action) {
+  try {
+    const response = yield call(Api.updateEmailPreview, action.payload);
+    if (response?.data) {
+      yield put({ type: UPDATE_PREVIEW_SUCCESS, payload: { previewData: response.data } });
+    } else {
+      yield put({ type: UPDATE_PREVIEW_FAILURE, payload: { error: response.error || 'Failed to update preview' } });
+    }
+  } catch (error) {
+    yield put({ type: UPDATE_PREVIEW_FAILURE, payload: { error: error.message || 'Network error occurred' } });
+  }
+}
+
+// Send Test Email Saga
+export function* sendTestMessageSaga(action) {
+  try {
+    const { callback } = action;
+    const response = yield call(Api.sendTestMessage, action.payload);
+
+    if (!response.errors) {
+      yield put({ type: SEND_TEST_MESSAGE_SUCCESS, payload: { response: true } });
+      callback(true);
+    } else {
+      yield put({ type: SEND_TEST_MESSAGE_FAILURE, payload: { response: false, error: response.errors || 'Failed to send test email' } });
+      callback(false);
+    }
+  } catch (error) {
+    yield put({ type: SEND_TEST_MESSAGE_FAILURE, payload: { response: false, error: error.message || 'Network error occurred' } });
+    action.callback(false);
+  }
+}
+
+export function* getBulkCustomerDetails({fetchedUserIds}) {
+  try {
+    const bulkCustomerDetails = yield call(Api.getBulkCustomerDetails, {
+      userIds: fetchedUserIds,
+    });
+    const transformedData = get(bulkCustomerDetails, 'result.data').map(
+      (item) => {
+        const profile = get(item, 'entity.profiles[0]', {});
+        if (isEmpty(profile)) {
+          throw item?.errors?.[0]?.message;
+        }
+        const mobileIdentifier = profile?.identifiers?.find(
+          (identifier) => identifier.type === 'mobile',
+        );
+        const emailIdentifier = profile?.identifiers?.find(
+          (identifier) => identifier.type === 'email',
+        );
+        return {
+          userId: item?.entity?.id,
+          name: `${profile?.firstName} ${profile?.lastName}`,
+          mobile: mobileIdentifier?.value,
+          email: emailIdentifier?.value,
+        };
+      },
+    );
+    yield put({
+      type: FETCH_TEST_CUSTOMERS_SUCCESS,
+      payload: { customers: transformedData },
+    });
+  } catch (error) {
+    yield put({
+      type: FETCH_TEST_CUSTOMERS_FAILURE,
+      payload: { error },
+    });
+  }
+}
+
+export function* fetchTestCustomersSaga() {
+  try {
+    const response = yield call(Api.fetchTestCustomers);
+    if (response.entity) {
+      const fetchedUserIds = get(response, 'entity.userIds');
+      if (Array.isArray(fetchedUserIds) && fetchedUserIds.length > 0) {
+        yield call(getBulkCustomerDetails, { fetchedUserIds });
+      } else {
+        yield put({
+          type: FETCH_TEST_CUSTOMERS_FAILURE,
+          payload: { error: "No test customers found" },
+        });
+      }
+    } else {
+      yield put({ type: FETCH_TEST_CUSTOMERS_FAILURE, payload: { error: response.error || 'Failed to fetch test customers' } });
+    }
+  } catch (error) {
+    yield put({ type: FETCH_TEST_CUSTOMERS_FAILURE, payload: { error: error.message } });
+  }
+}
+
+export function* fetchTestGroupsSaga() {
+  try {
+    const response = yield call(Api.fetchTestGroups);
+    if (response?.entity) {
+      yield put({ type: FETCH_TEST_GROUPS_SUCCESS, payload: { groups: response?.entity?.userGroups } });
+    } else {
+      yield put({ type: FETCH_TEST_GROUPS_FAILURE, payload: { error: response.error || 'Failed to fetch test groups' } });
+    }
+  } catch (error) {
+    yield put({ type: FETCH_TEST_GROUPS_FAILURE, payload: { error: error.message } });
+  }
+}
+
+export function* createMessageMetaSaga(action) {
+  try {
+    const { payload, messageMetaConfigId, callback } = action;
+    let response;
+    if (messageMetaConfigId) {
+      response = yield call(Api.updateTestMessageMeta, { data: payload, messageMetaConfigId });
+    } else {
+      response = yield call(Api.createTestMessageMeta, payload);
+    }
+    if (!response.errors) {
+      yield put({ type: CREATE_MESSAGE_META_SUCCESS, payload: { response } });
+      callback(response);
+    } else {
+      yield put({ type: CREATE_MESSAGE_META_FAILURE, payload: { error: response.errors || 'Failed to create message meta' } });
+    }
+  } catch (error) {
+    yield put({ type: CREATE_MESSAGE_META_FAILURE, payload: { error } });
+  }
+}
+
+export function* getPrefilledValuesSaga(action) {
+  try {
+    const response = yield call(Api.updateEmailPreview, action.payload);
+    if (response?.data) {
+      yield put({ type: GET_PREFILLED_VALUES_SUCCESS, payload: { values: response?.data?.resolvedTagValues } });
+    } else {
+      yield put({ type: GET_PREFILLED_VALUES_FAILURE, payload: { error: response.error || 'Failed to fetch prefilled values' } });
+    }
+  } catch (error) {
+    yield put({ type: GET_PREFILLED_VALUES_FAILURE, payload: { error } });
+  }
+}
+
+// Watcher Sagas
+export function* watchSearchCustomers() {
+  yield takeLatest(SEARCH_CUSTOMERS_REQUESTED, searchCustomersSaga);
+}
+
+export function* watchExtractTags() {
+  yield takeLatest(EXTRACT_TAGS_REQUEST, extractTagsSaga);
+}
+
+export function* watchUpdatePreview() {
+  yield takeLatest(UPDATE_PREVIEW_REQUEST, updatePreviewSaga);
+}
+
+export function* watchSendTestMessage() {
+  yield takeLatest(SEND_TEST_MESSAGE_REQUESTED, sendTestMessageSaga);
+}
+
+export function* watchFetchTestCustomers() {
+  yield takeLatest(FETCH_TEST_CUSTOMERS_REQUESTED, fetchTestCustomersSaga);
+}
+
+export function* watchFetchTestGroups() {
+  yield takeLatest(FETCH_TEST_GROUPS_REQUESTED, fetchTestGroupsSaga);
+}
+
+export function* watchCreateMessageMeta() {
+  yield takeLatest(CREATE_MESSAGE_META_REQUESTED, createMessageMetaSaga);
+}
+
+export function* watchGetPrefilledValues() {
+  yield takeLatest(GET_PREFILLED_VALUES_REQUESTED, getPrefilledValuesSaga);
+}
+
+// Root saga
+export function* previewAndTestSaga() {
+  yield all([
+    watchSearchCustomers(),
+    watchExtractTags(),
+    watchUpdatePreview(),
+    watchSendTestMessage(),
+    watchFetchTestCustomers(),
+    watchFetchTestGroups(),
+    watchCreateMessageMeta(),
+    watchGetPrefilledValues(),
+  ]);
+}