@capillarytech/creatives-library 8.0.243 → 8.0.244

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.243",
+  "version": "8.0.244",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/CommonTestAndPreview/UnifiedPreview/WhatsAppPreviewContent.js

@@ -115,7 +115,7 @@ const WhatsAppPreviewContent = ({
   // Render WhatsApp structure (common for all states) - Based on TemplatePreview lines 1229-1328
   const renderWhatsAppStructure = (contentSection) => (
     <div className="whatsapp-preview-wrapper">
-      <div className="shell-v2 align-center">
+      <div className="shell-v2-whatsapp align-center">
         <CapImage
           className="preview-image"
           src={deviceImage}

package/v2Components/CommonTestAndPreview/UnifiedPreview/_unifiedPreview.scss

@@ -759,7 +759,7 @@
     // Using same CSS classes as TemplatePreview for consistency
     // Styles are copied from TemplatePreview/_templatePreview.scss to ensure they work
     
-    .shell-v2 {
+    .shell-v2-whatsapp {
       position: relative;
       -webkit-transform: translate(-50%);
       transform: translate(-50%);

package/v2Components/CommonTestAndPreview/tests/UnifiedPreview/WhatsAppPreviewContent.test.js

@@ -109,7 +109,7 @@ describe('WhatsAppPreviewContent', () => {
       );
 
       expect(container.querySelector('.whatsapp-preview-wrapper')).toBeTruthy();
-      expect(container.querySelector('.shell-v2')).toBeTruthy();
+      expect(container.querySelector('.shell-v2-whatsapp')).toBeTruthy();
     });
   });
 

package/v2Containers/Email/index.js

@@ -2825,16 +2825,9 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
       tags = this.props.supportedTags;
     }
     const { showImageSelectionBox = false } = this.state;
-     const showTestAndPreview = !showImageSelectionBox && getDefaultTags === 'outbound' && !this.props.showTestAndPreviewSlidebox;
     return (
       <div className="email-container">
         <CapSpin spinning={isLoading}>
-          { showTestAndPreview &&
-            <div className="test-and-preview-container">
-              {this.showTestAndPreviewIcons('PREVIEW')}
-              {this.showTestAndPreviewIcons('TEST')}
-            </div>
-          }
           <Row>
             <Col>
               { !_.isEmpty(schema) && (this.state.formData[0] || this.state.formData["0"]) ?

package/v2Containers/SmsTrai/Create/index.scss

@@ -90,3 +90,13 @@
     }
   }
 }
+
+.cancel-dlt-msg {
+  margin-left: 260px;
+  position: fixed;
+  bottom: 20px;
+}
+
+.create-dlt-msg {
+  margin-left: 170px;
+}

package/v2Containers/SmsTrai/Edit/index.js

@@ -3,7 +3,7 @@
 import React, { useState, useEffect } from 'react';
 import { createStructuredSelector } from 'reselect';
 import { bindActionCreators } from 'redux';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import { get, cloneDeep, isEmpty, isObject } from 'lodash';
 import styled from 'styled-components';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
@@ -18,7 +18,6 @@ import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
 import CapError from '@capillarytech/cap-ui-library/CapError';
 import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
 import CapInfoNote from '@capillarytech/cap-ui-library/CapInfoNote';
-import * as globalActions from '../../Cap/actions';
 import injectSaga from '../../../utils/injectSaga';
 import injectReducer from '../../../utils/injectReducer';
 import {
@@ -33,10 +32,12 @@ import {
 import { makeSelectTemplateDetailsResponse } from '../../Sms/Edit/selectors';
 import { makeSelectMetaEntities, selectLiquidStateDetails, setInjectedTags } from '../../Cap/selectors';
 import * as smsEditActions from '../../Sms/Edit/actions';
+import * as globalActions from '../../Cap/actions';
 import messages from './messages';
 import TagList from '../../TagList';
 import formBuilderMessages from '../../../v2Components/FormBuilder/messages';
-import TemplatePreview from '../../../v2Components/TemplatePreview';
+import UnifiedPreview from '../../../v2Components/CommonTestAndPreview/UnifiedPreview';
+import TestAndPreviewSlidebox from '../../../v2Components/TestAndPreviewSlidebox';
 import withCreatives from '../../../hoc/withCreatives';
 import { validateTags } from '../../../utils/tagValidations';
 import {
@@ -53,8 +54,9 @@ import {
 import v2EditSmsReducer from '../../Sms/Edit/reducer';
 import { v2SmsEditSagas } from '../../Sms/Edit/sagas';
 import ErrorInfoNote from '../../../v2Components/ErrorInfoNote';
-import { getChannelData, validateLiquidTemplateContent } from '../../../utils/commonUtils';
+import { validateLiquidTemplateContent } from '../../../utils/commonUtils';
 import { hasLiquidSupportFeature } from '../../../utils/common';
+import { ANDROID } from '../../../v2Components/CommonTestAndPreview/constants';
 
 let varMap = {};
 let traiData = {};
@@ -98,6 +100,7 @@ export const SmsTraiEdit = (props) => {
   const [showMsgLengthNote, updateshowMsgLengthNote] = useState(false);
   const [liquidErrorMessages, setLiquidErrorMessages] = useState({});
   const [isLiquidValidationError, setIsLiquidValidationError] = useState(false);
+  const [showTestAndPreviewSlidebox, setShowTestAndPreviewSlidebox] = useState(false);
   const SMSTraiFooter = styled.div`
     background-color: ${CAP_WHITE};
     padding: ${CAP_SPACE_32} ${CAP_SPACE_24};
@@ -569,6 +572,25 @@ export const SmsTraiEdit = (props) => {
   const unicodeHandler = ({ target: { checked } }) => {
     updateIsUnicodeAllowed(checked);
   };
+
+  // Get template content for test and preview
+  const getTemplateContent = () => {
+    if (!updatedSmsEditor || updatedSmsEditor.length === 0) {
+      return '';
+    }
+    return updatedSmsEditor.join('');
+  };
+
+  // Handle test and preview button click
+  const handleTestAndPreview = () => {
+    setShowTestAndPreviewSlidebox(true);
+  };
+
+  // Handle close test and preview slidebox
+  const handleCloseTestAndPreview = () => {
+    setShowTestAndPreviewSlidebox(false);
+  };
+
   const isLiquidSupportFeatureEnabled = hasLiquidSupportFeature();
   return (
     <>
@@ -600,7 +622,7 @@ export const SmsTraiEdit = (props) => {
               <CapHeader
                 title={formatMessage(messages.traiEditTitle)}
                 size="regular"
-                suffix={
+                suffix={(
                   <TagList
                     label={formatMessage(messages.addLabels)}
                     onTagSelect={onTagSelect}
@@ -612,7 +634,7 @@ export const SmsTraiEdit = (props) => {
                     selectedOfferDetails={selectedOfferDetails}
                     eventContextTags={eventContextTags}
                   />
-                }
+                )}
               />
             </CapRow>
 
@@ -624,7 +646,9 @@ export const SmsTraiEdit = (props) => {
             >
               {renderedContent()}
             </CapRow>
-            <CapRow>{smsLengthForVar()}</CapRow>
+            <CapRow>
+              {smsLengthForVar()}
+            </CapRow>
             {isTagValidationError && tagValidationErrorMessage()}
             <CapCheckbox onChange={unicodeHandler} checked={isUnicodeAllowed} disabled={disablehandler()}>
               {formatMessage(messages.unicodeLabel)}
@@ -632,12 +656,15 @@ export const SmsTraiEdit = (props) => {
             {showMsgLengthNote && <CapInfoNote message={<FormattedMessage {...messages.msgLengthNote} values={{ var: '{#var#}' }} />} />}
             <div style={{ marginBottom: '100px' }} />
           </CapColumn>
-          <CapColumn span={10}>
-            <TemplatePreview
+          <CapColumn span={8} offset={1}>
+            <UnifiedPreview
               channel={SMS}
               content={updatedSmsEditor.join('')}
-              unicodeEnabled={isUnicodeAllowed}
-              charCounterEnabled
+              device={ANDROID}
+              showDeviceToggle={false}
+              showHeader={false}
+              formatMessage={formatMessage}
+              senderId={isUnicodeAllowed ? 'Unicode' : 'ASCII'}
             />
           </CapColumn>
         </CapRow>
@@ -646,20 +673,34 @@ export const SmsTraiEdit = (props) => {
             <ErrorInfoNote errorMessages={liquidErrorMessages} />
           )}
           <CapButton
-            onClick={isLiquidSupportFeatureEnabled ? onSubmitWrapper : onDoneCallback}
+            onClick={handleTestAndPreview}
+            type="secondary"
             className="create-msg"
+          >
+            <FormattedMessage {...messages.testAndPreviewButtonLabel} />
+          </CapButton>
+          <CapButton
+            onClick={isLiquidSupportFeatureEnabled ? onSubmitWrapper : onDoneCallback}
+            className="create-msg create-dlt-msg"
             disabled={isTagValidationError || (isLiquidSupportFeatureEnabled && !isObject(metaEntities?.tagLookupMap))}
           >
             <FormattedMessage {...messages.saveButtonLabel} />
           </CapButton>
           <CapButton
             onClick={handleClose}
-            className="cancel-msg"
+            className="cancel-dlt-msg"
             type="secondary"
           >
             <FormattedMessage {...messages.cancelButtonLabel} />
           </CapButton>
         </SMSTraiFooter>
+        <TestAndPreviewSlidebox
+          show={showTestAndPreviewSlidebox}
+          onClose={handleCloseTestAndPreview}
+          formData={{}}
+          content={getTemplateContent()}
+          currentChannel={SMS}
+        />
       </CapSpin>
     </>
   );

package/v2Containers/SmsTrai/Edit/messages.js

@@ -68,4 +68,8 @@ export default defineMessages({
     id: `${prefix}.msgLengthNote`,
     defaultMessage: 'Only 40 characters are allowed per variable {var} field. In case the field resolves to more than 40 characters the message is bound to fail. Hence will not be sent by the Capillary system.',
   },
+  testAndPreviewButtonLabel: {
+    id: `${prefix}.testAndPreviewButtonLabel`,
+    defaultMessage: 'Preview and Test',
+  },
 });