@capillarytech/creatives-library 8.0.87-alpha.21 → 8.0.87-alpha.22

package/v2Components/TemplatePreview/index.js

@@ -20,6 +20,7 @@ import {
   CAP_PURPLE01,
   CAP_G16,
   CAP_SPACE_08,
+  CAP_SPACE_04,
 } from '@capillarytech/cap-ui-library/styled/variables';
 import isEmpty from 'lodash/isEmpty';
 import './_templatePreview.scss';
@@ -43,14 +44,16 @@ import inAppMobileIOSModal from './assets/images/inapp_mobile_ios_modal.svg';
 import inAppMobileIOSTop from './assets/images/inapp_mobile_ios_top.svg';
 import inAppMobileIOSBottom from './assets/images/inapp_mobile_ios_bottom.svg';
 import inAppMobileIOSFull from './assets/images/inapp_mobile_ios_full.svg';
+import whatsappImageEmptyPreview from './assets/images/empty_image_preview.svg';
+import whatsappVideoEmptyPreview from './assets/images/empty_video_preview.svg';
 import videoPlay from '../../assets/videoPlay.svg';
 import zaloMessage from '../../v2Containers/Zalo/messages';
 import { handlePreviewInNewTab } from '../../utils/common';
 import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from '../../v2Containers/Line/Container/constants';
 import CapFacebookPreview from '../../v2Containers/CapFacebookPreview';
 import WhatsappStatusContainer from '../WhatsappStatusContainer';
-import { getWhatsappQuickReply } from '../../v2Containers/Whatsapp/utils';
-import { QUICK_REPLY, WHATSAPP_CATEGORIES } from '../../v2Containers/Whatsapp/constants';
+import { getWhatsappQuickReply, getWhatsappCarouselButtonView } from '../../v2Containers/Whatsapp/utils';
+import { QUICK_REPLY, WHATSAPP_CATEGORIES, PHONE_NUMBER } from '../../v2Containers/Whatsapp/constants';
 import { ANDROID, INAPP_MESSAGE_LAYOUT_TYPES } from '../../v2Containers/InApp/constants';
 
 const wechatBodyNew = require('./assets/images/wechat_mobile_android.svg');
@@ -213,7 +216,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       iosActions = _.map(content.actions, (action) => {
         if (action.label) {
           return (<div className="actions" key={`action-${action.label}`}>
-            <span className="action">{action.label.toUpperCase()}</span>
+              <span className="action">{action.label.toUpperCase()}</span>
           </div>);
         }
         return undefined;
@@ -253,6 +256,15 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       'width': '88%',
       'left': 0,
     };
+    const carouselWhatsappSectionStyle = {
+      'padding': `${CAP_SPACE_04} 0 ${CAP_SPACE_08}`,
+      'border-radius': '0.428rem',
+      'background-color': CAP_WHITE,
+      'width': '10.4rem',
+      'cursor': 'pointer',
+      'flex-shrink': 0,
+      'left': 0,
+    };
     const getVideoContent = ({
       video,
       actionUrl,
@@ -274,53 +286,53 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       >
         {
           video
-          ? (
-            <>
-              <video style={{ opacity: 0.5, width: '100%' }}>
-                <source src={video} type="video/mp4" />
-              </video>
-              <div
-                style={{
-                  position: 'absolute',
-                  display: 'flex',
-                  flexDirection: 'column',
-                }}
-              >
-                <CapButton
-                  className="preview-video-btn"
-                  type="flat"
+            ? (
+              <>
+                <video style={{ opacity: 0.5, width: '100%' }}>
+                  <source src={video} type="video/mp4" />
+                </video>
+                <div
+                  style={{
+                    position: 'absolute',
+                    display: 'flex',
+                    flexDirection: 'column',
+                  }}
                 >
+                  <CapButton
+                    className="preview-video-btn"
+                    type="flat"
+                  >
                   <CapIcon type="play"/>
-                  <FormattedMessage {...messages.playVideo} />
-                </CapButton>
-                {
-                  actionUrl
-                  ? (
-                    <CapButton
-                      className="preview-video-btn"
-                      type="flat"
-                    >
+                    <FormattedMessage {...messages.playVideo} />
+                  </CapButton>
+                  {
+                    actionUrl
+                      ? (
+                        <CapButton
+                          className="preview-video-btn"
+                          type="flat"
+                        >
                       <CapIcon type="reply" style={{ fontSize: 18 }}/>
-                      <FormattedMessage {...messages.showDetails} />
-                    </CapButton>
-                  )
-                  : null
-                }
-              </div>
-            </>
-          )
-          : (
-            <CapImage
-              src={lineVideoPlaceholder}
-              alt="brand-name"
-              rest={{
-                style: {
-                  width: 126,
-                  marginBottom: 5,
-                },
-              }}
-            />
-          )
+                          <FormattedMessage {...messages.showDetails} />
+                        </CapButton>
+                      )
+                      : null
+                  }
+                </div>
+              </>
+            )
+            : (
+              <CapImage
+                src={lineVideoPlaceholder}
+                alt="brand-name"
+                rest={{
+                  style: {
+                    width: 126,
+                    marginBottom: 5,
+                  },
+                }}
+              />
+            )
         }
       </div>
     );
@@ -336,10 +348,10 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
             renderArray.push(
               <CapLabel type="label21" className="whatsapp-cta-preview">
                 {type !== WHATSAPP_CATEGORIES.authentication && <CapIcon
-                  type={
-                    (ctaType || type) === 'PHONE_NUMBER' ? 'call' : 'launch'
-                  }
-                  size="xs"
+                    type={
+                      (ctaType || type) === PHONE_NUMBER ? 'call' : 'launch'
+                    }
+                    size="xs"
                 />}
                 {text}
               </CapLabel>,
@@ -430,42 +442,42 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
         {this.props.showCount &&
           channel &&
           channel.toLowerCase() !== FACEBOOK && (
-            <CapColumn span={16}>
-              {channel && channel.toLowerCase() === "sms" && (
-                <CapHeading type="h3">
-                  <FormattedMessage
-                    {...messages.charactersTotal}
-                    values={{
-                      smsCount: smsDetails.parts,
-                      charCount: smsDetails.chars_used,
-                    }}
-                  />
-                  {smsDetails.unicode && (
-                    <FormattedMessage {...messages.smsFormatType} />
-                  )}
-                </CapHeading>
-              )}
-              {smsDetails.optoutUrlPresent && (
-                <CapHeading type="h6">
+          <CapColumn span={16}>
+            {channel && channel.toLowerCase() === "sms" && (
+              <CapHeading type="h3">
+                <FormattedMessage
+                  {...messages.charactersTotal}
+                  values={{
+                    smsCount: smsDetails.parts,
+                    charCount: smsDetails.chars_used,
+                  }}
+                />
+                {smsDetails.unicode && (
+                  <FormattedMessage {...messages.smsFormatType} />
+                )}
+              </CapHeading>
+            )}
+            {smsDetails.optoutUrlPresent && (
+              <CapHeading type="h6">
+                <FormattedMessage
+                  {...messages.optoutCharactersTotal}
+                  values={{ optoutUrlLength: smsDetails.optouturlLength }}
+                />
+              </CapHeading>
+            )}
+            {channel?.toLowerCase() === WHATSAPP.toLowerCase() ? (
+              <>
+                <WhatsappStatusContainer template={templateData} />
+                <CapHeading type="h3" className="margin-t-12">
                   <FormattedMessage
-                    {...messages.optoutCharactersTotal}
-                    values={{ optoutUrlLength: smsDetails.optouturlLength }}
+                    {...messages.whatsappMessageLength}
+                    values={{ length: whatsappUpdatedLen }}
                   />
                 </CapHeading>
-              )}
-              {channel?.toLowerCase() === WHATSAPP.toLowerCase() ? (
-                <>
-                  <WhatsappStatusContainer template={templateData} />
-                  <CapHeading type="h3" className="margin-t-12">
-                    <FormattedMessage
-                      {...messages.whatsappMessageLength}
-                      values={{ length: whatsappUpdatedLen }}
-                    />
-                  </CapHeading>
-                </>
-              ) : null}
-            </CapColumn>
-          )}
+              </>
+            ) : null}
+          </CapColumn>
+        )}
         <CapColumn span={this.props.showCount ? 8 : 24}>
           {showTestAndPreview && (
             <div className="test-and-preview-container">
@@ -628,9 +640,9 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         )}
                         {content.actions.filter((action) => action.label)
                           .length ? (
-                          <div className="actions">
-                            {_.map(
-                              content.actions,
+                            <div className="actions">
+                              {_.map(
+                                content.actions,
                               (action) =>
                                 !!action.label && (
                                   <span
@@ -640,11 +652,11 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                                     {action.label && action.label.toUpperCase()}
                                   </span>
                                 )
-                            )}
-                          </div>
-                        ) : (
-                          ""
-                        )}
+                              )}
+                            </div>
+                          ) : (
+                            ""
+                          )}
                       </div>
                     ) : (
                       <div className="message-pop align-left">
@@ -980,14 +992,14 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                   <CapLabel className="whatsapp-brand-name">
                     {whatsappUpdatedAccountName || ""}
                   </CapLabel>
-                  <div className="msg-container whatsapp-message-container">
+                  <div className={`msg-container whatsapp-message-container ${content?.carouselData && 'msg-container-carousel'}`}>
                     <div
-                      className="message-pop align-left"
+                      className={`message-pop align-left ${content?.carouselData && 'message-pop-carousel'}`}
                       style={whatsappSectionStyle}
                     >
                       <div className="whatsapp-content">
-                        {content?.showUrlPreview &&
-                          renderUrlPreview(content?.metaTagsDetails)}
+                        {content?.showUrlPreview
+                          && renderUrlPreview(content?.metaTagsDetails)}
                         {content?.whatsappImageSrc && (
                           <CapImage
                             src={content.whatsappImageSrc}
@@ -1026,6 +1038,49 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                         {renderQuickReplyPreview()}
                       </div>
                     </div>
+                    {content?.carouselData && (
+                      <div className="scroll-container">
+                        {content?.carouselData?.map((data, index) => (
+                          <div
+                            key={`carousel-${index}-${data?.bodyText}`}
+                            className="message-pop align-left message-pop-carousel"
+                            style={carouselWhatsappSectionStyle}>
+                            <div className="whatsapp-content">
+                              {content?.carouselMediaType === "image" && (
+                                <CapImage
+                                  src={data?.imageSrc ? data?.imageSrc : whatsappImageEmptyPreview}
+                                  className="whatsapp-image"
+                                  alt={formatMessage(messages.previewGenerated)}
+                                />
+                              )}
+                              {content?.carouselMediaType === "video" && (
+                                <CapTooltip
+                                  title={formatMessage(messages.videoPreviewTooltip)}
+                                >
+                                  <div className="video-preview">
+                                    <CapImage
+                                      src={data?.videoPreviewImg ? data?.videoPreviewImg : whatsappVideoEmptyPreview}
+                                      className="whatsapp-image"
+                                      alt={formatMessage(messages.previewGenerated)}
+                                    />
+                                    <div className="icon-position">
+                                      <CapImage
+                                        className="video-icon"
+                                        src={videoPlay}
+                                      />
+                                    </div>
+                                  </div>
+                                </CapTooltip>
+                              )}
+                              <CapLabel type="label5">
+                                {content?.isEditFlow ? data?.updatedBodyText?.join("") : data?.bodyText}
+                              </CapLabel>
+                              {getWhatsappCarouselButtonView(data?.buttons, true)}
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    )}
                   </div>
                 </div>
                 <CapHeading
@@ -1205,21 +1260,21 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                       {ctaData &&
                         !isEmpty(ctaData) &&
                         ctaData[0]?.text !== "" && (
-                          <CapButton
-                            type="primary"
-                            className={`inapp-button-${templateLayoutType}-${device} ${
+                        <CapButton
+                          type="primary"
+                          className={`inapp-button-${templateLayoutType}-${device} ${
                               mediaPreview?.inAppImageSrcAndroid
                                 ? ""
                                 : `without-image-button-${templateLayoutType}-android`
-                            } ${
+                          } ${
                               mediaPreview?.inAppImageSrcIos
                                 ? ""
                                 : `without-image-button-${templateLayoutType}-ios`
-                            }`}
-                          >
-                            {ctaData[0]?.text}
-                          </CapButton>
-                        )}
+                          }`}
+                        >
+                          {ctaData[0]?.text}
+                        </CapButton>
+                      )}
                     </div>
                   </div>
                 </div>

package/v2Components/TemplatePreview/tests/__snapshots__/index.test.js.snap

@@ -66,10 +66,10 @@ exports[`Test Templates container Should render correct preview component for wh
           test
         </CapLabel>
         <div
-          className="msg-container whatsapp-message-container"
+          className="msg-container whatsapp-message-container undefined"
         >
           <div
-            className="message-pop align-left"
+            className="message-pop align-left undefined"
             style={
               Object {
                 "background-color": "#ffffff",
@@ -163,10 +163,10 @@ exports[`Test Templates container Should render correct preview component for wh
           test
         </CapLabel>
         <div
-          className="msg-container whatsapp-message-container"
+          className="msg-container whatsapp-message-container undefined"
         >
           <div
-            className="message-pop align-left"
+            className="message-pop align-left undefined"
             style={
               Object {
                 "background-color": "#ffffff",
@@ -235,10 +235,10 @@ exports[`Test Templates container Should render correct preview component for wh
           test
         </CapLabel>
         <div
-          className="msg-container whatsapp-message-container"
+          className="msg-container whatsapp-message-container undefined"
         >
           <div
-            className="message-pop align-left"
+            className="message-pop align-left undefined"
             style={
               Object {
                 "background-color": "#ffffff",

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -517,7 +517,6 @@ export function SlideBoxContent(props) {
           onCreateComplete={onCreateComplete}
           smsRegister={smsRegister}
           eventContextTags={eventContextTags}
-          messageDetails={messageDetails}
         />
       )}
       {isEditFTP && (
@@ -586,7 +585,6 @@ export function SlideBoxContent(props) {
         smsRegister={smsRegister}
         onShowTemplates={onShowTemplates}
         eventContextTags={eventContextTags}
-        messageDetails={messageDetails}
       />
         )}
 
@@ -620,7 +618,6 @@ export function SlideBoxContent(props) {
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         eventContextTags={eventContextTags}
         isLoyaltyModule={isLoyaltyModule}
-        messageDetails={messageDetails}
       />
         )}
       {(isEditEmailWithId || isEmailEditWithContent) && (
@@ -651,7 +648,6 @@ export function SlideBoxContent(props) {
         showLiquidErrorInFooter={showLiquidErrorInFooter}
         eventContextTags={eventContextTags}
         isLoyaltyModule={isLoyaltyModule}
-        messageDetails={messageDetails}
       />
         )}
       {isEditMPush &&
@@ -678,7 +674,6 @@ export function SlideBoxContent(props) {
           hideTestAndPreviewBtn={hideTestAndPreviewBtn}
           creativesMode={creativesMode}
           eventContextTags={eventContextTags}
-          messageDetails={messageDetails}
         />
         }
       {isCreateMPush &&
@@ -708,7 +703,6 @@ export function SlideBoxContent(props) {
           hideTestAndPreviewBtn={hideTestAndPreviewBtn}
           onTestContentClicked={onTestContentClicked}
           eventContextTags={eventContextTags}
-          messageDetails={messageDetails}
         />
       }
       {

package/v2Containers/CreativesContainer/index.js

@@ -44,7 +44,7 @@ import {
 import { IMAGE, VIDEO } from '../Facebook/Advertisement/constant';
 import { CREATIVE } from '../Facebook/constants';
 import { LOYALTY } from '../App/constants';
-import { WHATSAPP_STATUSES, WHATSAPP_MEDIA_TYPES } from '../Whatsapp/constants';
+import { WHATSAPP_STATUSES, WHATSAPP_MEDIA_TYPES, PHONE_NUMBER, URL } from '../Whatsapp/constants';
 
 import { updateImagesInHtml } from '../../utils/cdnTransformation';
 import { IOS } from '../InApp/constants';
@@ -58,6 +58,7 @@ import {
   CAP_SPACE_32, CAP_SPACE_56, CAP_SPACE_64,
 } from '@capillarytech/cap-ui-library/styled/variables';
 import { DAEMON } from '@capillarytech/vulcan-react-sdk/utils/sagaInjectorTypes';
+import { DYNAMIC_URL } from '../../v2Components/CapWhatsappCTA/constants';
 
 import {
   transformChannelPayload,
@@ -234,6 +235,39 @@ export class Creatives extends React.Component {
     this.setState({ isGetFormData: false });
   };
 
+  mapCarouselDataToCreatives = (cards) => {
+    return cards.map((card) => {
+      const { cardVarMapped, bodyTemplate, media, buttons, mediaType } = card || {};
+      const buttonData = buttons?.map((button) => {
+        const { type, text, phoneNumber, url, dynamicUrlPayload } = button || {};
+        const buttonObj = { type, text };
+        if (type === PHONE_NUMBER) {
+          buttonObj.phone_number = phoneNumber;
+        }
+        if (type === URL) {
+          buttonObj.url = url;
+          if (dynamicUrlPayload) {
+            buttonObj.urlType = DYNAMIC_URL;
+          }
+        }
+        return buttonObj;
+      });
+      return {
+        bodyText: bodyTemplate,
+        varMap: cardVarMapped,
+        ...(mediaType === IMAGE && {
+          imageUrl: media?.url,
+        }),
+        ...(mediaType === VIDEO && {
+          videoUrl: media?.url,
+          videoPreviewImg: media?.previewUrl,
+        }),
+        buttons: buttonData,
+        mediaType: mediaType?.toLowerCase(),
+      };
+    });
+  }
+
   getTemplateData = (templateData) => { //from consumers to creatives
     const { isFullMode, messageDetails = {}, smsRegister } = this.props;
     const { additionalProperties = {} } = messageDetails;
@@ -476,6 +510,7 @@ export class Creatives extends React.Component {
               mediaType = 'TEXT',
               whatsappMedia = {},
               isPreviewUrl = false,
+              cards = [],
             } = {},
           } = templateData;
           const mediaParams = {};
@@ -498,7 +533,7 @@ export class Creatives extends React.Component {
             default:
               break;
           }
-          const modifiedButtons = cloneDeep(buttons).map((btn) => {
+          const modifiedButtons = cloneDeep(buttons)?.map((btn) => {
             if (btn.type === 'PHONE_NUMBER') {
               btn.phone_number = btn.phoneNumber;
               delete btn.phoneNumber;
@@ -542,6 +577,10 @@ export class Creatives extends React.Component {
                       },
                     ],
                     isPreviewUrl,
+                    carouselData: this.mapCarouselDataToCreatives(cards),
+                    ...(cards?.length && {
+                      mediaType: WHATSAPP_MEDIA_TYPES.CAROUSEL,
+                    }),
                   },
                 },
               },
@@ -588,6 +627,47 @@ export class Creatives extends React.Component {
     return templateData || null;
   }
 
+  getCarouselMappedData = (carouselData = []) => {
+    return carouselData.map((carousel) => {
+      const { bodyText, imageUrl, videoUrl, videoPreviewImg, buttons, mediaType, cardVarMapped, bodyTemplate } = carousel || {};
+      const buttonData = buttons.map((button, index) => {
+        const { type, text, phone_number, urlType, url } = button || {};
+        const buttonObj = {
+          type,
+          text,
+          index,
+        };
+        if (type === PHONE_NUMBER) {
+          buttonObj.phoneNumber = phone_number;
+        }
+        if (type === URL) {
+          buttonObj.url = url;
+          if (urlType === DYNAMIC_URL) {
+            const dynamicUrlPayload = url?.match(/{{(.*?)}}/g);
+            buttonObj.dynamicUrlPayload = dynamicUrlPayload?.length === 1 ? dynamicUrlPayload[0] : '';
+          }
+        }
+        return buttonObj;
+      });
+      return {
+        body: bodyText,
+        cardVarMapped,
+        bodyTemplate,
+        media: {
+          ...(mediaType?.toLowerCase() === IMAGE.toLowerCase() && {
+            url: imageUrl,
+          }),
+          ...(mediaType?.toLowerCase() === VIDEO.toLowerCase() && {
+            url: videoUrl,
+            previewUrl: videoPreviewImg,
+          }),
+        },
+        buttons: buttonData,
+        mediaType: mediaType?.toUpperCase(),
+      };
+    });
+  };
+
   getCreativesData = async (channel, template, templateRecords) => { //from creatives to consumers
     let templateData = { channel };
     switch (channel) {
@@ -666,7 +746,10 @@ export class Creatives extends React.Component {
             forEach(androidContent.custom, (customKeyValue) => {
               custom[customKeyValue.key] = customKeyValue.value;
             });
-            androidContent.custom = custom;
+            //skipping it for MPUSH as custom key is already in the reqd format for hydra sdk
+            if (channel !== constants.MOBILE_PUSH) {
+              androidContent.custom = custom;
+            }
             templateData.androidContent = androidContent;
             templateData.androidContent.type = get(channelTemplate, 'definition.mode', '').toUpperCase();
             templateData.androidContent.deviceType = 'ANDROID';
@@ -682,7 +765,10 @@ export class Creatives extends React.Component {
             forEach(iosContent.custom, (customKeyValue) => {
               custom[customKeyValue.key] = customKeyValue.value;
             });
-            iosContent.custom = custom;
+            //skipping it for MPUSH as custom key is already in the reqd format for hydra sdk
+            if (channel !== constants.MOBILE_PUSH) {
+              iosContent.custom = custom;
+            }
             templateData.iosContent = iosContent;
             templateData.iosContent.type = get(channelTemplate, 'definition.mode').toUpperCase();
             templateData.iosContent.deviceType = IOS.toUpperCase();
@@ -760,6 +846,7 @@ export class Creatives extends React.Component {
               headerTemplate = '',
             } = {},
             isPreviewUrl = false,
+            carouselData = [],
           } = cloneDeep(versions.base.content.whatsapp);
 
           const modifiedButtons = cloneDeep(buttons).map((btn) => {
@@ -826,11 +913,17 @@ export class Creatives extends React.Component {
               varMapped,
               category,
               language: languages[0].language,
-              buttonType,
-              buttons: modifiedButtons,
+              ...(mediaType !== WHATSAPP_MEDIA_TYPES.CAROUSEL && {
+                buttonType,
+                buttons: modifiedButtons,
+                whatsappMedia,
+              }),
               mediaType,
-              whatsappMedia,
               isPreviewUrl,
+              ...(mediaType === WHATSAPP_MEDIA_TYPES.CAROUSEL && {
+                cards: this.getCarouselMappedData(carouselData),
+                mediaType: carouselData[0]?.mediaType?.toUpperCase(),
+              }),
             },
           };
         }

package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap

@@ -651,6 +651,7 @@ exports[`Test SlideBoxContent container Should render correct component for rcs
         "search": "",
       }
     }
+    loyaltyMetaData={Object {}}
     messageDetails={Object {}}
     onCreateComplete={[MockFunction]}
     slidBoxContent="templates"
@@ -935,6 +936,7 @@ exports[`Test SlideBoxContent container Should render correct component for what
     charCounterEnabled={false}
     content={
       Object {
+        "carouselData": Array [],
         "charCount": 151,
         "ctaData": Array [
           Object {
@@ -1041,6 +1043,7 @@ exports[`Test SlideBoxContent container Should render correct component for what
         "search": "",
       }
     }
+    loyaltyMetaData={Object {}}
     messageDetails={Object {}}
     onCreateComplete={[MockFunction]}
     slidBoxContent="templates"

package/v2Containers/Email/index.js

@@ -2747,7 +2747,6 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                   eventContextTags={this.props?.eventContextTags}
                   forwardedTags={this.props?.forwardedTags}
                   isLoyaltyModule={this.props?.isLoyaltyModule}
-                  messageDetails={this.props?.messageDetails}
               /> : ''}
             </Col>
           </Row>