@capillarytech/creatives-library 8.0.125 → 8.0.127-alpha.0

package/v2Components/TestAndPreviewSlidebox/tests/selector.test.js

@@ -0,0 +1,182 @@
+import { fromJS } from 'immutable';
+import {
+  makeSelectPreviewAndTest,
+  makeSelectCustomers,
+  makeSelectExtractedTags,
+  makeSelectIsSearchingCustomer,
+  makeSelectIsExtractingTags,
+  makeSelectSearchError,
+  makeSelectHasSearched,
+  makeSelectApiWarnings,
+  makeSelectApiErrors,
+  makeSelectPreviewData,
+  makeSelectIsUpdatingPreview,
+  makeSelectIsSendingTestEmail,
+  makeSelectTags,
+  makeSelectTestCustomers,
+  makeSelectIsFetchingTestCustomers,
+  makeSelectTestGroups,
+  makeSelectIsFetchingTestGroups,
+  makeSelectMessageMetaConfigId,
+  makeSelectIsCreatingMessageMeta,
+  makeSelectPrefilledValues,
+  makeSelectTestMessageResponse,
+  makeSelectIsSendingTestMessage,
+} from '../selectors';
+
+describe('TestAndPreviewSlidebox selectors', () => {
+  it('should return the expected object with default values when substate is empty for makeSelectTestCustomers', () => {
+    const state = fromJS({ previewAndTest: { testCustomers: [] } });
+    const expected = fromJS([]);
+    const selector = makeSelectTestCustomers();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+  it('should return the expected object with default values when substate is empty for makeSelectTestGroups', () => {
+    const state = fromJS({ previewAndTest: { testGroups: [] } });
+    const expected = fromJS([]);
+    const selector = makeSelectTestGroups();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+  it('should return the expected object with default values when substate is empty for makeSelectMessageMetaConfigId', () => {
+    const state = fromJS({ previewAndTest: { messageMetaConfigId: null } });
+    const expected = null;
+    const selector = makeSelectMessageMetaConfigId();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+  it('should return the expected object with default values when substate is empty for makeSelectPrefilledValues', () => {
+    const state = fromJS({ previewAndTest: { prefilledValues: {} } });
+    const expected = {};
+    const selector = makeSelectPrefilledValues();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+  it('should return the expected object with default values when substate is empty for makeSelectTestMessageResponse', () => {
+    const state = fromJS({ previewAndTest: { testMessageResponse: null } });
+    const expected = null;
+    const selector = makeSelectTestMessageResponse();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+  it('should return the expected object with default values when substate is empty for makeSelectPreviewAndTest', () => {
+    const state = fromJS({ previewAndTest: { previewData: null } });
+    const expected = fromJS({ previewData: null });
+    const selector = makeSelectPreviewAndTest();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+  it('should return the expected object with default values when substate is empty for makeSelectCustomers', () => {
+    const state = fromJS({ previewAndTest: { customers: [] } });
+    const expected = fromJS([]);
+    const selector = makeSelectCustomers();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+  it('should return the expected object with default values when substate is empty for makeSelectExtractedTags', () => {
+    const state = fromJS({ previewAndTest: { extractedTags: [] } });
+    const expected = fromJS([]);
+    const selector = makeSelectExtractedTags();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+  it('should return the expected object with default values when substate is empty for makeSelectIsSearchingCustomer', () => {
+    const state = fromJS({ previewAndTest: { isSearchingCustomer: false } });
+    const expected = false;
+    const selector = makeSelectIsSearchingCustomer();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+  it('should return the expected object with default values when substate is empty for makeSelectIsExtractingTags', () => {
+    const state = fromJS({ previewAndTest: { isExtractingTags: false } });
+    const expected = false;
+    const selector = makeSelectIsExtractingTags();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+  it('should return the expected object with default values when substate is empty for makeSelectSearchError', () => {
+    const state = fromJS({ previewAndTest: { searchError: null } });
+    const expected = null;
+    const selector = makeSelectSearchError();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+  it('should return the expected object with default values when substate is empty for makeSelectHasSearched', () => {
+    const state = fromJS({ previewAndTest: { hasSearched: false } });
+    const expected = false;
+    const selector = makeSelectHasSearched();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+  it('should return the expected object with default values when substate is empty for makeSelectApiWarnings', () => {
+    const state = fromJS({ previewAndTest: { apiWarnings: [] } });
+    const expected = fromJS([]);
+    const selector = makeSelectApiWarnings();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+  it('should return the expected object with default values when substate is empty for makeSelectApiErrors', () => {
+    const state = fromJS({ previewAndTest: { apiErrors: [] } });
+    const expected = fromJS([]);
+    const selector = makeSelectApiErrors();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+  it('should return the expected object with default values when substate is empty for makeSelectPreviewData', () => {
+    const state = fromJS({ previewAndTest: { previewData: null } });
+    const expected = null;
+    const selector = makeSelectPreviewData();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+  it('should return the expected object with default values when substate is empty for makeSelectIsUpdatingPreview', () => {
+    const state = fromJS({ previewAndTest: { isUpdatingPreview: false } });
+    const expected = false;
+    const selector = makeSelectIsUpdatingPreview();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+  it('should return the expected object with default values when substate is empty for makeSelectIsSendingTestEmail', () => {
+    const state = fromJS({ previewAndTest: { isSendingTestEmail: false } });
+    const expected = false;
+    const selector = makeSelectIsSendingTestEmail();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+  it('should return the expected object with default values when substate is empty for makeSelectTags', () => {
+    const state = fromJS({ previewAndTest: { tags: [] } });
+    const expected = fromJS([]);
+    const selector = makeSelectTags();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+  it('should return the expected object with default values when substate is empty for makeSelectIsFetchingTestCustomers', () => {
+    const state = fromJS({ previewAndTest: { isFetchingTestCustomers: false } });
+    const expected = false;
+    const selector = makeSelectIsFetchingTestCustomers();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+  it('should return the expected object with default values when substate is empty for makeSelectIsFetchingTestGroups', () => {
+    const state = fromJS({ previewAndTest: { isFetchingTestGroups: false } });
+    const expected = false;
+    const selector = makeSelectIsFetchingTestGroups();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+  it('should return the expected object with default values when substate is empty for makeSelectIsCreatingMessageMeta', () => {
+    const state = fromJS({ previewAndTest: { isCreatingMessageMeta: false } });
+    const expected = false;
+    const selector = makeSelectIsCreatingMessageMeta();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+  it('should return the expected object with default values when substate is empty for makeSelectIsSendingTestMessage', () => {
+    const state = fromJS({ previewAndTest: { isSendingTestMessage: false } });
+    const expected = false;
+    const selector = makeSelectIsSendingTestMessage();
+    const result = selector(state);
+    expect(result).toEqual(expected);
+  });
+});

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -7,17 +7,14 @@ import cloneDeep from 'lodash/cloneDeep';
 import TemplatesV2 from '../TemplatesV2';
 import TemplatePreview from '../../v2Components/TemplatePreview';
 import SmsWrapper from '../SmsWrapper';
-// import SmsEdit from '../Sms/Edit';
 import Email from '../Email';
 import EmailWrapper from '../EmailWrapper';
-import MobilepushWrapper from '../MobilepushWrapper';
 import EmailPreviewV2 from '../../v2Components/EmailPreviewV2';
 import MobilePushPreview from '../../v2Components/MobilePushPreviewV2';
 import WechatWrapper from '../WeChat/Wrapper';
 import Facebook from '../Facebook';
 import { RICH_MEDIA, MAP_TEMPLATE, CREATE } from '../WeChat/Wrapper/constants';
 import CallTask from '../CallTask';
-import MobliPushEdit from '../MobilePush/Edit';
 import * as constants from './constants';
 import LineContainer from '../Line/Container';
 import FTP from '../FTP';
@@ -28,6 +25,7 @@ import Rcs from '../Rcs';
 import { getWhatsappContent } from '../Whatsapp/utils';
 import * as commonUtil from '../../utils/common';
 import Zalo from '../Zalo';
+import MobilePushNew from '../MobilePushNew';
 const CreativesWrapper = styled.div`
   .ant-popover,
   .ant-notification,
@@ -160,6 +158,9 @@ export function SlideBoxContent(props) {
       eventContextTags,
       isLoyaltyModule,
       loyaltyMetaData = {},
+      showTestAndPreviewSlidebox,
+      handleTestAndPreview,
+      handleCloseTestAndPreview,
     } = props;
   const type = (messageDetails.type || '').toLowerCase(); // type is context in get tags values : outbound | dvs | referral | loyalty | coupons
   const query = { type: !isFullMode && 'embedded', module: isFullMode ? 'default' : 'library', isEditFromCampaigns: (templateData || {}).isEditFromCampaigns};
@@ -476,9 +477,6 @@ export function SlideBoxContent(props) {
           forwardedTags={forwardedTags}
         />
       )}
-      {isMpushPreview &&
-        <MobilePushPreview templateData={templateData} channel={channel}/>
-      }
       {
         (currentChannel === constants.WECHAT && !!slidBoxContent) && <WechatWrapper
           mode={slidBoxContent}
@@ -624,6 +622,9 @@ export function SlideBoxContent(props) {
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         eventContextTags={eventContextTags}
         isLoyaltyModule={isLoyaltyModule}
+        showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
+        handleTestAndPreview={handleTestAndPreview}
+        handleCloseTestAndPreview={handleCloseTestAndPreview} 
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -654,10 +655,13 @@ export function SlideBoxContent(props) {
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         eventContextTags={eventContextTags}
         isLoyaltyModule={isLoyaltyModule}
+        showTestAndPreviewSlidebox={showTestAndPreviewSlidebox}
+        handleTestAndPreview={handleTestAndPreview}
+        handleCloseTestAndPreview={handleCloseTestAndPreview}
       />
         )}
       {isEditMPush &&
-        <MobliPushEdit
+        <MobilePushNew
           getFormLibraryData={getFormData}
           setIsLoadingContent={setIsLoadingContent}
           location={{
@@ -684,16 +688,19 @@ export function SlideBoxContent(props) {
         />
         }
       {isCreateMPush &&
-        <MobilepushWrapper
+        <MobilePushNew
           key="creatives-mobilepush-wrapper"
           date={new Date().getMilliseconds()}
           setIsLoadingContent={setIsLoadingContent}
           onMobilepushModeChange={onMobilepushModeChange}
           mobilePushCreateMode={mobilePushCreateMode}
           isGetFormData={isGetFormData}
-          getFormData={getFormData}
+          getFormLibraryData={getFormData}
+          location={location}
+          getDefaultTags={type}
           templateData={templateData}
           type={type}
+          handleClose={handleClose}
           step={templateStep}
           showNextStep={onCreateNextStep}
           isFullMode={isFullMode}
@@ -711,6 +718,8 @@ export function SlideBoxContent(props) {
           onTestContentClicked={onTestContentClicked}
           eventContextTags={eventContextTags}
           showLiquidErrorInFooter={showLiquidErrorInFooter}
+          onCreateComplete={onCreateComplete}
+          creativesMode={creativesMode}
         />
       }
       {
@@ -977,6 +986,9 @@ SlideBoxContent.propTypes = {
   moduleType: PropTypes.string,
   showLiquidErrorInFooter: PropTypes.bool,
   creativesMode: PropTypes.string,
-  hostName: PropTypes.string
+  hostName: PropTypes.string,
+  showTestAndPreviewSlidebox: PropTypes.bool,
+  handleTestAndPreview: PropTypes.func,
+  handleCloseTestAndPreview: PropTypes.func
 };
 export default SlideBoxContent;

package/v2Containers/CreativesContainer/SlideBoxFooter.js

@@ -26,13 +26,18 @@ function SlideBoxFooter(props) {
     errorMessages,
     isLiquidValidationError,
     currentTab,
+    onTestAndPreview,
+    // isEmptyContent,
+    showTestAndPreviewButton,
+    shouldShowDoneFooter,
+    shouldShowContinueFooter,
   } = props;
 
   return (
     <div className='template-footer-width'>
       {isLiquidValidationError && (<ErrorInfoNote errorMessages={errorMessages} currentTab={currentTab?.toUpperCase()} />)}
       <div>
-        {props.shouldShowDoneFooter() && (
+        {shouldShowDoneFooter() && (
           <div>
             {isFullMode && isTemplateNameEmpty && (
               <CapError type="error">
@@ -50,11 +55,21 @@ function SlideBoxFooter(props) {
                   <FormattedMessage {...messages.creativesTemplatesSave} />
                 )}
               </CapButton>
+              {showTestAndPreviewButton && (
+                <CapButton
+                  type="secondary"
+                  onClick={onTestAndPreview}
+                  // disabled={isEmptyContent || false}
+                  style={{ marginLeft: '8px' }}
+                >
+                  <FormattedMessage {...messages.testAndPreview} />
+                </CapButton>
+              )}
             </CapRow>
             {/* {isFullMode && <CapButton type="secondary" onClick={onDiscard}><FormattedMessage {...messages.creativesTemplatesDiscard}/></CapButton>} */}
           </div>
         )}
-        {props.shouldShowContinueFooter() && (
+        {shouldShowContinueFooter() && (
           <CapButton onClick={onCreateNextStep}>
             <FormattedMessage {...messages.continue} />
           </CapButton>
@@ -76,7 +91,13 @@ SlideBoxFooter.propTypes = {
   shouldShowContinueFooter: PropTypes.func,
   shouldShowDoneFooter: PropTypes.func,
   isFullMode: PropTypes.bool,
+  fetchingCmsData: PropTypes.bool,
   isTemplateNameEmpty: PropTypes.bool,
+  errorMessages: PropTypes.array,
   isLiquidValidationError: PropTypes.bool,
+  currentTab: PropTypes.string,
+  onTestAndPreview: PropTypes.func,
+  isEmptyContent: PropTypes.bool,
+  showTestAndPreviewButton: PropTypes.bool,
 };
 export default SlideBoxFooter;