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

package/v2Components/TestAndPreviewSlidebox/index.js

@@ -0,0 +1,771 @@
+/**
+ *
+ * TestAndPreviewSlidebox
+ *
+ */
+
+import PropTypes from 'prop-types';
+import React, { useState, useEffect, useMemo } from 'react';
+import { convert } from "html-to-text";
+import { createStructuredSelector } from 'reselect';
+import { connect } from 'react-redux';
+import isEmpty from 'lodash/isEmpty';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import { compose, bindActionCreators } from 'redux';
+import CapSlideBox from '@capillarytech/cap-ui-library/CapSlideBox';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapSwitch from '@capillarytech/cap-ui-library/CapSwitch';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
+import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
+import CapDivider from '@capillarytech/cap-ui-library/CapDivider';
+import CapStepsAccordian from '@capillarytech/cap-ui-library/CapStepsAccordian';
+import CapTreeSelect from '@capillarytech/cap-ui-library/CapTreeSelect';
+import CapInfoNote from '@capillarytech/cap-ui-library/CapInfoNote';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes';
+import messages from './messages';
+import injectReducer from '../../utils/injectReducer';
+import injectSaga from '../../utils/injectSaga';
+import * as previewAndTestActions from './actions';
+import { previewAndTestSaga } from './sagas';
+import './_testAndPreviewSlidebox.scss';
+import reducer from './reducer';
+import CustomerSearchSection from '../CustomerSearchSection';
+import {
+  makeSelectPreviewAndTest,
+  makeSelectExtractedTags,
+  makeSelectIsExtractingTags,
+  makeSelectCustomers,
+  makeSelectIsSearchingCustomer,
+  makeSelectTags,
+  makeSelectPreviewData,
+  makeSelectIsUpdatingPreview,
+  makeSelectTestCustomers,
+  makeSelectIsFetchingTestCustomers,
+  makeSelectTestGroups,
+  makeSelectIsFetchingTestGroups,
+  makeSelectMessageMetaConfigId,
+  makeSelectPrefilledValues,
+  makeSelectIsSendingTestMessage,
+} from './selectors';
+import {
+  INITIAL_PAYLOAD, EMAIL, TEST, DESKTOP, ACTIVE, MOBILE,
+} from './constants';
+import { GLOBAL_CONVERT_OPTIONS } from '../FormBuilder/constants';
+
+const TestAndPreviewSlidebox = (props) => {
+  const {
+    intl: { formatMessage },
+    show,
+    onClose,
+    formData,
+    content,
+    actions,
+    extractedTags,
+    isExtractingTags,
+    previewData,
+    isUpdatingPreview,
+    customers,
+    isSearchingCustomer,
+    testCustomers,
+    isFetchingTestCustomers,
+    testGroups,
+    isFetchingTestGroups,
+    messageMetaConfigId,
+    prefilledValues,
+    isSendingTestMessage,
+  } = props;
+
+  // State management
+  const [selectedCustomer, setSelectedCustomer] = useState(null);
+  const [requiredTags, setRequiredTags] = useState([]);
+  const [optionalTags, setOptionalTags] = useState([]);
+  const [customValues, setCustomValues] = useState({});
+  const [showJSON, setShowJSON] = useState(false);
+  const [tagsExtracted, setTagsExtracted] = useState(false);
+  const [previewDevice, setPreviewDevice] = useState('desktop');
+  const [previewDataHtml, setPreviewDataHtml] = useState(previewData || '');
+  const [selectedTestEntities, setSelectedTestEntities] = useState([]);
+
+  const isUpdatePreviewDisabled = useMemo(() => (
+    requiredTags.some((tag) => !customValues[tag.fullPath])
+  ), [requiredTags, customValues]);
+
+  useEffect(() => {
+    if (show) {
+      actions.fetchTestCustomersRequested();
+      actions.fetchTestGroupsRequested();
+      const payloadContent = convert(
+        content,
+        GLOBAL_CONVERT_OPTIONS
+      );
+      actions.extractTagsRequested(formData['template-subject'] || '', payloadContent);
+    }
+  }, [show]);
+
+  useEffect(() => {
+    if (previewData) {
+      setPreviewDataHtml(previewData);
+    }
+  }, [previewData]);
+
+  // Listen for extract tags API result
+  useEffect(() => {
+    if (extractedTags?.length > 0) {
+      // Categorize tags into required and optional
+      const required = [];
+      const optional = [];
+
+      const processTag = (tag, parentPath = '') => {
+        const currentPath = parentPath ? `${parentPath}.${tag.name}` : tag.name;
+
+        if (tag?.metaData?.userDriven === false) {
+          required.push({
+            ...tag,
+            fullPath: currentPath,
+          });
+        } else if (tag?.metaData?.userDriven === true) {
+          optional.push({
+            ...tag,
+            fullPath: currentPath,
+          });
+        }
+
+        if (tag?.children?.length > 0) {
+          tag.children.forEach((child) => processTag(child, currentPath));
+        }
+      };
+
+      extractedTags.forEach((tag) => processTag(tag));
+
+      setRequiredTags(required);
+      setOptionalTags(optional);
+
+      // Initialize custom values for required tags
+      const initialValues = {};
+      required.forEach((tag) => {
+        initialValues[tag.fullPath] = '';
+      });
+      optional.forEach((tag) => {
+        initialValues[tag.fullPath] = '';
+      });
+      setCustomValues(initialValues);
+    }
+  }, [extractedTags]);
+
+  useEffect(() => {
+    if (tagsExtracted && selectedCustomer) {
+      const userDrivenTags = optionalTags?.map((tag) => tag.name);
+      if (userDrivenTags?.length > 0) {
+        const payload = {
+          channel: EMAIL,
+          messageTitle: formData['template-subject'],
+          messageBody: content,
+          resolvedTags: customValues,
+          userId: selectedCustomer?.customerId,
+        };
+        actions.getPrefilledValuesRequested(payload);
+      }
+    }
+  }, [selectedCustomer, tagsExtracted]);
+
+  useEffect(() => {
+    if (prefilledValues && !isEmpty(prefilledValues)) {
+      setCustomValues((prev) => ({
+        ...prev,
+        ...prefilledValues,
+      }));
+    }
+  }, [JSON.stringify(prefilledValues)]);
+
+  const testEntitiesTreeData = useMemo(() => {
+    const groupsNode = {
+      title: 'Groups',
+      value: 'groups-node',
+      children: testGroups?.map((group) => ({ title: group?.groupName, value: group?.groupId })),
+    };
+
+    const customersNode = {
+      title: 'Individuals',
+      value: 'customers-node',
+      children: testCustomers?.map((customer) => ({ title: customer.name, value: customer?.userId })),
+    };
+
+    return [groupsNode, customersNode];
+  }, [testCustomers, testGroups]);
+
+  // Handler to close the slidebox
+  const handleClose = () => {
+    // Reset state when closing
+    setSelectedCustomer(null);
+    setRequiredTags([]);
+    setOptionalTags([]);
+    setCustomValues({});
+    setShowJSON(false);
+    setTagsExtracted(false);
+    setPreviewDevice('desktop');
+    setPreviewDataHtml('');
+    setSelectedTestEntities([]);
+    actions.clearPrefilledValues();
+    if (onClose) {
+      onClose();
+    }
+  };
+
+  const handleSearchCustomer = (query) => {
+    actions.searchCustomersRequested(query);
+  };
+
+  // Handle customer selection from CustomerSearchSection
+  const handleCustomerSelect = (customer) => {
+    setSelectedCustomer(customer);
+    setCustomValues((prev) => {
+      const newValues = { ...prev };
+      optionalTags.forEach((tag) => {
+        delete newValues[tag.fullPath];
+      });
+      return newValues;
+    });
+  };
+
+  const handleClearSelection = () => {
+    setSelectedCustomer(null);
+    setCustomValues((prev) => {
+      const newValues = { ...prev };
+      optionalTags.forEach((tag) => {
+        delete newValues[tag.fullPath];
+      });
+      return newValues;
+    });
+  };
+
+  // Handle custom value changes
+  const handleCustomValueChange = (tagPath, value) => {
+    setCustomValues((prev) => ({
+      ...prev,
+      [tagPath]: value?.trim(),
+    }));
+  };
+
+  // Handle JSON text change
+  const handleJSONTextChange = (value) => {
+    try {
+      const parsedJSON = JSON.parse(value);
+      setCustomValues(parsedJSON);
+    } catch (error) {
+      CapNotification.error({
+        message: formatMessage(messages.invalidJSON),
+      });
+    }
+  };
+
+  // Handle discard custom values
+  const handleDiscardCustomValues = () => {
+    const resetValues = {};
+    requiredTags.forEach((tag) => {
+      resetValues[tag?.fullPath] = '';
+    });
+    optionalTags.forEach((tag) => {
+      resetValues[tag?.fullPath] = '';
+    });
+    setCustomValues(resetValues);
+  };
+
+  // Handle update preview
+  const handleUpdatePreview = () => {
+    const payload = {
+      channel: EMAIL,
+      messageTitle: formData['template-subject'],
+      messageBody: content,
+      resolvedTags: customValues,
+      userId: selectedCustomer?.customerId,
+    };
+    actions.updatePreviewRequested(payload);
+  };
+
+  // Handle extract tags button click
+  const handleExtractTags = () => {
+    setTagsExtracted(true);
+  };
+
+  const handleTestEntitiesChange = (value) => {
+    setSelectedTestEntities(value);
+  };
+
+  const handleSendTestMessage = () => {
+    const allUserIds = [];
+    selectedTestEntities.forEach((entityId) => {
+      const group = testGroups.find((g) => g.groupId === entityId);
+      if (group) {
+        allUserIds.push(...group.userIds);
+      } else {
+        allUserIds.push(entityId);
+      }
+    });
+    const uniqueUserIds = [...new Set(allUserIds)];
+    actions.createMessageMetaRequested({
+      ...INITIAL_PAYLOAD,
+      emailMessageContent: {
+        channel: EMAIL,
+        messageBody: previewData?.resolvedBody || content,
+        messageSubject: previewData?.resolvedTitle || formData['template-subject'],
+      },
+    }, messageMetaConfigId, (response) => {
+      const payload = {
+        messageMetaConfigId: response?.entity || messageMetaConfigId,
+        recipientDetails: uniqueUserIds,
+        resolvedTagValues: customValues,
+        clientId: 434,
+        communicationType: TEST,
+      };
+      actions.sendTestMessageRequested(payload, (result) => {
+        if (result) {
+          CapNotification.success({
+            message: formatMessage(messages.testMessageSent),
+          });
+        } else {
+          CapNotification.error({
+            message: formatMessage(messages.testMessageFailed),
+          });
+        }
+      });
+    });
+  };
+
+  const renderLeftPanelContent = () => {
+    if (isExtractingTags) {
+      return (
+        <CapRow className="loading-container">
+          <CapSpin size="large" />
+          <CapRow className="loading-text">
+            <FormattedMessage {...messages.extractingTags} />
+          </CapRow>
+        </CapRow>
+      );
+    }
+    if (extractedTags?.length > 0) {
+      return (
+        <>
+          {/* Customer Search Section */}
+          <CapRow className="panel-section customer-section">
+            <CapHeader size="label1" title={<FormattedMessage {...messages.customerSearchTitle} />} />
+            <CustomerSearchSection
+              selectedCustomer={selectedCustomer}
+              onCustomerSelect={handleCustomerSelect}
+              onSearch={handleSearchCustomer}
+              customers={customers}
+              isSearchingCustomer={isSearchingCustomer}
+              onClearSelection={handleClearSelection}
+            />
+          </CapRow>
+          {/* Tags Section */}
+          {!tagsExtracted && (
+            <CapRow className="panel-section">
+              <CapButton type="flat" className="extract-tags-button" onClick={handleExtractTags}>
+                <CapLabel type="label33">
+                  <FormattedMessage {...messages.enterCustomValuesForTags} />
+                </CapLabel>
+              </CapButton>
+            </CapRow>
+          )}
+          {tagsExtracted && renderCustomValuesEditor()}
+        </>
+      );
+    }
+    return (
+      <CapInfoNote
+        className="no-tags-extracted-info-note"
+        noteText={(
+          <CapLabel type="label31">
+            <FormattedMessage {...messages.noTagsExtracted} />
+          </CapLabel>
+        )}
+      />
+    );
+  };
+
+  // Header content for the slidebox
+  const slideboxHeader = (
+    <CapRow className="test-preview-header">
+      <CapIcon type="arrow-left" onClick={handleClose} className="back-icon" />
+      <CapHeader title={<FormattedMessage {...messages.testAndPreviewHeader} />} />
+    </CapRow>
+  );
+
+  // Render custom values editor table
+  const renderCustomValuesEditor = () => {
+    if (isExtractingTags) {
+      return (
+        <CapRow className="loading-container">
+          <CapSpin size="large" />
+          <CapRow className="loading-text">
+            <FormattedMessage {...messages.extractingTags} />
+          </CapRow>
+        </CapRow>
+      );
+    }
+
+    return (
+      <CapRow className="custom-values-editor">
+        {isUpdatePreviewDisabled && (
+          <CapLabel type="label16" className="values-missing-message">
+            <FormattedMessage {...messages.valuesMissing} />
+          </CapLabel>
+        )}
+        <CapRow className="editor-header">
+          <CapRow className="json-toggle">
+            <span className="toggle-label">
+              <FormattedMessage {...messages.showJSON} />
+            </span>
+            <CapSwitch
+              checked={showJSON}
+              onChange={setShowJSON}
+              size="small"
+            />
+          </CapRow>
+        </CapRow>
+        {showJSON ? (
+          <CapRow className="json-editor">
+            <CapRow className="json-editor-container">
+              <CapRow className="line-numbers">
+                {JSON.stringify(customValues, null, 2).split('\n').map((_, index) => (
+                  <CapRow key={`line-${index + 1}`} className="line-number">
+                    {index + 1}
+                  </CapRow>
+                ))}
+              </CapRow>
+              <textarea
+                className="json-textarea"
+                value={JSON.stringify(customValues, null, 2)}
+                onChange={(e) => handleJSONTextChange(e.target.value)}
+                placeholder={formatMessage(messages.enterValue)}
+                rows={Math.max(10, JSON.stringify(customValues, null, 2).split('\n').length)}
+                spellCheck={false}
+              />
+            </CapRow>
+          </CapRow>
+        ) : (
+          <>
+            {extractedTags?.length > 0 && (
+              <CapRow className="values-table">
+                <CapRow className="table-header">
+                  <CapLabel type="label31" className="header-cell">
+                    <FormattedMessage {...messages.personalizationTags} />
+                  </CapLabel>
+                  <CapLabel type="label31" className="header-cell">
+                    <FormattedMessage {...messages.customValues} />
+                  </CapLabel>
+                </CapRow>
+                {requiredTags.map((tag) => (
+                  <CapRow key={tag.fullPath} className="value-row">
+                    <CapRow className="tag-name">
+                      {tag.fullPath}
+                      <span className="required-tag-indicator">*</span>
+                    </CapRow>
+                    <CapRow className="tag-input">
+                      <CapInput
+                        type="text"
+                        isRequired
+                        className="tag-input-field"
+                        value={customValues[tag.fullPath] || ''}
+                        onChange={(e) => handleCustomValueChange(tag.fullPath, e.target.value)}
+                        placeholder={formatMessage(messages.enterValue)}
+                        size="small"
+                      />
+                    </CapRow>
+                  </CapRow>
+                ))}
+                {optionalTags.map((tag) => (
+                  <CapRow key={tag.fullPath} className="value-row">
+                    <CapRow className="tag-name">{tag.fullPath}</CapRow>
+                    <CapRow className="tag-input">
+                      <CapInput
+                        type="text"
+                        className="tag-input-field"
+                        value={customValues[tag.fullPath] || ''}
+                        onChange={(e) => handleCustomValueChange(tag.fullPath, e.target.value)}
+                        placeholder={formatMessage(messages.enterValue)}
+                        size="small"
+                      />
+                    </CapRow>
+                  </CapRow>
+                ))}
+              </CapRow>
+            )}
+          </>
+        )}
+        <div className="editor-actions">
+          <CapButton
+            className="discard-button"
+            type="flat"
+            size="small"
+            onClick={handleDiscardCustomValues}
+            icon="close"
+          >
+            <FormattedMessage {...messages.discardCustomValues} />
+          </CapButton>
+          <CapButton
+            type="primary"
+            size="small"
+            onClick={handleUpdatePreview}
+            loading={isUpdatingPreview}
+            disabled={isUpdatePreviewDisabled}
+          >
+            <FormattedMessage {...messages.updatePreview} />
+          </CapButton>
+        </div>
+      </CapRow>
+    );
+  };
+
+  // Render send test message section
+  const renderSendTestMessage = () => (
+    <CapStepsAccordian
+      showNumberSteps={false}
+      isChevronIcon
+      expandIconPosition="right"
+      items={[
+        {
+          header: <CapHeader
+            size="regular"
+            description={<FormattedMessage {...messages.testMessageDescription} />}
+            title={<FormattedMessage {...messages.sendTestMessage} />}
+          />,
+          content: (
+            <CapRow className="send-test-content">
+              <CapHeader size="label1" title={<FormattedMessage {...messages.testCustomers} />} />
+              <CapTreeSelect
+                className="test-customers-tree-select"
+                loading={isFetchingTestCustomers || isFetchingTestGroups}
+                treeData={testEntitiesTreeData}
+                onChange={handleTestEntitiesChange}
+                value={selectedTestEntities}
+                multiple
+                placeholder={formatMessage(messages.testCustomersPlaceholder)}
+              />
+              <CapButton onClick={handleSendTestMessage} disabled={isEmpty(selectedTestEntities) || isEmpty(formData['template-subject']) || isSendingTestMessage}>
+                <FormattedMessage {...messages.sendTestButton} />
+              </CapButton>
+            </CapRow>),
+          key: 1,
+        },
+      ]}
+    />
+  );
+
+  const renderPreview = () => (
+    <CapRow className="preview-section panel-section">
+      <PreviewChrome
+        device={previewDevice}
+        onDeviceChange={setPreviewDevice}
+        customer={selectedCustomer}
+        subject={formData['template-subject']}
+      >
+        {isUpdatingPreview && (
+          <CapRow className="loading-container">
+            <CapSpin />
+            <CapRow className="loading-text">{formatMessage(messages.updatingPreview)}</CapRow>
+          </CapRow>
+        )}
+        {!isUpdatingPreview && previewDataHtml && (
+          <iframe
+            srcDoc={previewDataHtml?.resolvedBody}
+            title="Email Preview"
+            width="100%"
+            height="100%"
+            frameBorder="0"
+          />
+        )}
+        {!isUpdatingPreview && !previewDataHtml && (
+          <iframe
+            srcDoc={content}
+            title="Email Preview"
+            width="100%"
+            height="100%"
+            frameBorder="0" />
+        )}
+      </PreviewChrome>
+    </CapRow>
+  );
+
+  return (
+    <CapSlideBox
+      className="test-and-preview-slidebox"
+      header={slideboxHeader}
+      handleClose={handleClose}
+      show={show}
+      size="size-xl"
+      content={(
+        <CapRow className="test-preview-container">
+          {(
+            <CapRow className="test-and-preview-panels">
+              {/* Left Panel */}
+              <CapRow className="left-panel">
+                {renderLeftPanelContent()}
+                <CapDivider className="panel-divider" />
+                {/* Send Test Message Section */}
+                {(
+                  <CapRow className="panel-section send-test-section">
+                    {renderSendTestMessage()}
+                  </CapRow>
+                )}
+                <CapDivider className="panel-divider" />
+              </CapRow>
+
+              {/* Right Panel - Email Preview */}
+              <CapRow className="right-panel">
+                {renderPreview()}
+              </CapRow>
+            </CapRow>
+          )}
+        </CapRow>
+      )}
+    />
+  );
+};
+
+const PreviewChrome = ({
+  device, onDeviceChange, subject, customer, children,
+}) => (
+  <CapRow className="preview-chrome">
+    <div className="preview-header">
+      <CapRow type="flex" className="preview-for">
+        <CapLabel type="label1">
+          <FormattedMessage {...messages.previewFor} />
+        </CapLabel>
+        <CapLabel type="label2">
+          {customer ? customer.name : <FormattedMessage {...messages.defaultPreview} />}
+        </CapLabel>
+      </CapRow>
+      <CapRow className="device-toggle">
+        <CapIcon
+          type="desktop"
+          size="s"
+          className={device === DESKTOP ? ACTIVE : ''}
+          onClick={() => onDeviceChange('desktop')} />
+        <CapIcon
+          type="mobile"
+          className={device === MOBILE ? ACTIVE : ''}
+          onClick={() => onDeviceChange('mobile')} />
+      </CapRow>
+    </div>
+    <CapRow className={`preview-body ${device}`}>
+      <CapRow className="browser-bar">
+        <CapRow className="browser-controls">
+          <CapIcon type="chevron-left" />
+          <CapIcon type="chevron-right" />
+          <CapIcon className="refresh-icon" type="refreshCircle" size="s" />
+        </CapRow>
+        <CapRow className="address-bar">
+          <CapLabel type="label3" className="address-bar-label">
+            <FormattedMessage {...messages.browserAddressBar} />
+          </CapLabel>
+          <CapIcon className="browser-address-bar-icon" type="star" size="s" />
+        </CapRow>
+      </CapRow>
+      <CapDivider className="preview-divider" />
+      <CapRow className="email-header">
+        <CapIcon type="arrow-left" className="back-arrow" />
+        <CapLabel type="label17" className="email-subject">{subject}</CapLabel>
+        <CapRow className="email-meta">
+          <span><FormattedMessage {...messages.timeAgo} /></span>
+          <CapRow className="dots" />
+          <CapRow className="dots" />
+          <CapRow className="dots" />
+        </CapRow>
+      </CapRow>
+      <CapRow className="email-from">
+        <CapRow className="sender-avatar" />
+        <CapRow className="sender-info">
+          <CapRow className="sender-name"><FormattedMessage {...messages.senderName} /></CapRow>
+          <CapRow className="recipient-info">to me</CapRow>
+        </CapRow>
+      </CapRow>
+      <CapRow className="email-content">
+        {children}
+      </CapRow>
+    </CapRow>
+  </CapRow>
+);
+
+PreviewChrome.propTypes = {
+  device: PropTypes.string.isRequired,
+  onDeviceChange: PropTypes.func.isRequired,
+  subject: PropTypes.string,
+  customer: PropTypes.object.isRequired,
+  children: PropTypes.node.isRequired,
+};
+
+PreviewChrome.defaultProps = {
+  subject: 'Welcome email',
+};
+
+TestAndPreviewSlidebox.propTypes = {
+  show: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  formData: PropTypes.object,
+  currentChannel: PropTypes.string,
+  actions: PropTypes.object.isRequired,
+  previewData: PropTypes.object.isRequired,
+  isUpdatingPreview: PropTypes.bool.isRequired,
+  content: PropTypes.string.isRequired,
+  extractedTags: PropTypes.array.isRequired,
+  isExtractingTags: PropTypes.bool.isRequired,
+  customers: PropTypes.array.isRequired,
+  isSearchingCustomer: PropTypes.bool.isRequired,
+  intl: PropTypes.object.isRequired,
+  testCustomers: PropTypes.array.isRequired,
+  isFetchingTestCustomers: PropTypes.bool.isRequired,
+  testGroups: PropTypes.array.isRequired,
+  isFetchingTestGroups: PropTypes.bool.isRequired,
+  messageMetaConfigId: PropTypes.string,
+  prefilledValues: PropTypes.object,
+  isSendingTestMessage: PropTypes.bool.isRequired,
+};
+
+TestAndPreviewSlidebox.defaultProps = {
+  formData: null,
+  currentChannel: EMAIL,
+  messageMetaConfigId: null,
+  prefilledValues: {},
+};
+
+// Redux connection
+const mapStateToProps = createStructuredSelector({
+  previewAndTest: makeSelectPreviewAndTest(),
+  extractedTags: makeSelectExtractedTags(),
+  isExtractingTags: makeSelectIsExtractingTags(),
+  customers: makeSelectCustomers(),
+  tags: makeSelectTags(),
+  previewData: makeSelectPreviewData(),
+  isUpdatingPreview: makeSelectIsUpdatingPreview(),
+  isSearchingCustomer: makeSelectIsSearchingCustomer(),
+  testCustomers: makeSelectTestCustomers(),
+  isFetchingTestCustomers: makeSelectIsFetchingTestCustomers(),
+  testGroups: makeSelectTestGroups(),
+  isFetchingTestGroups: makeSelectIsFetchingTestGroups(),
+  messageMetaConfigId: makeSelectMessageMetaConfigId(),
+  prefilledValues: makeSelectPrefilledValues(),
+  isSendingTestMessage: makeSelectIsSendingTestMessage(),
+});
+
+function mapDispatchToProps(dispatch) {
+  return {
+    actions: bindActionCreators(previewAndTestActions, dispatch),
+  };
+}
+
+const withReducer = injectReducer({ key: 'previewAndTest', reducer });
+const withSaga = injectSaga({ key: 'previewAndTest', saga: previewAndTestSaga, mode: DAEMON });
+const withConnect = connect(mapStateToProps, mapDispatchToProps);
+
+export default compose(
+  withReducer,
+  withSaga,
+  withConnect,
+  injectIntl,
+)(TestAndPreviewSlidebox);