@capillarytech/creatives-library 8.0.87-alpha.2 → 8.0.87-alpha.20

package/v2Containers/CreativesContainer/index.js

@@ -58,7 +58,11 @@ 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,
+  // getTemplateDiffState
+} from "../../utils/transformerUtils";
 
 const classPrefix = 'add-creatives-section';
 const CREATIVES_CONTAINER = 'creativesContainer';
@@ -230,39 +234,6 @@ export class Creatives extends React.Component {
     this.setState({ isGetFormData: false });
   };
 
-  mapCarouselDataToCreatives = (cards) => {
-    return cards.map((card) => {
-      const { cardVarMapped, cardTemplate, 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: cardTemplate,
-        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;
@@ -490,7 +461,8 @@ export class Creatives extends React.Component {
           };
           break;
         }
-        case constants.WHATSAPP: {
+        case constants.WHATSAPP:
+        case constants.WHATSAPP?.toLowerCase(): {
           const {
             messageBody = '',
             templateConfigs: {
@@ -504,7 +476,6 @@ export class Creatives extends React.Component {
               mediaType = 'TEXT',
               whatsappMedia = {},
               isPreviewUrl = false,
-              cards = [],
             } = {},
           } = templateData;
           const mediaParams = {};
@@ -571,7 +542,6 @@ export class Creatives extends React.Component {
                       },
                     ],
                     isPreviewUrl,
-                    carouselData: this.mapCarouselDataToCreatives(cards),
                   },
                 },
               },
@@ -618,47 +588,6 @@ export class Creatives extends React.Component {
     return templateData || null;
   }
 
-  getCarouselMappedData = (carouselData = []) => {
-    return carouselData.map((carousel) => {
-      const { bodyText, imageUrl, videoUrl, videoPreviewImg, buttons, mediaType, cardVarMapped, cardTemplate } = 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,
-        cardTemplate,
-        media: {
-          ...(mediaType === 'image' && {
-            url: imageUrl,
-          }),
-          ...(mediaType === 'video' && {
-            url: videoUrl,
-            previewUrl: videoPreviewImg,
-          }),
-        },
-        buttons: buttonData,
-        mediaType: mediaType?.toUpperCase(),
-      };
-    });
-  };
-
   getCreativesData = async (channel, template, templateRecords) => { //from creatives to consumers
     let templateData = { channel };
     switch (channel) {
@@ -831,7 +760,6 @@ export class Creatives extends React.Component {
               headerTemplate = '',
             } = {},
             isPreviewUrl = false,
-            carouselData= [],
           } = cloneDeep(versions.base.content.whatsapp);
 
           const modifiedButtons = cloneDeep(buttons).map((btn) => {
@@ -898,15 +826,10 @@ export class Creatives extends React.Component {
               varMapped,
               category,
               language: languages[0].language,
-              ...(mediaType !== WHATSAPP_MEDIA_TYPES.CAROUSEL && {
-                buttonType,
-                buttons: modifiedButtons,
-                whatsappMedia,
-              }),
-              ...(mediaType === WHATSAPP_MEDIA_TYPES.CAROUSEL && {
-                cards: this.getCarouselMappedData(carouselData),
-              }),
+              buttonType,
+              buttons: modifiedButtons,
               mediaType,
+              whatsappMedia,
               isPreviewUrl,
             },
           };
@@ -1099,11 +1022,75 @@ export class Creatives extends React.Component {
           const creativesData = this.getCreativesData(channel, template, templateData);// convers data to consumer understandable format
           creativesData.then((data) => {
             this.logGTMEvent(channel, data);
-            this.props.getCreativesData(data);// send data to consumer
+            this.processCentralCommsMetaId(channel, data);
           });
         },
       );
     }
+  }
+  
+  processCentralCommsMetaId = (channel, creativesData) => {
+    // Create the payload for the centralcommnsmetaId API call
+    const { isLoyaltyModule, loyaltyMetaData } = this.props;
+    const { actionName, setMetaData = () => {} } = this.props.loyaltyMetaData || {};
+    const { formatMessage } = this.props.intl;
+
+    // const isTemplateModified = getTemplateDiffState(
+    //   channel,
+    //   loyaltyMetaData,
+    //   creativesData
+    // );
+    if (
+      loyaltyMetaData
+      && isLoyaltyModule
+      // && isTemplateModified
+      && actionName === constants.LOYALTY_SUPPORTED_ACTION
+    ) {
+      const payload = transformChannelPayload(creativesData, {
+        channel,
+        loyaltyMetaData,
+      });
+
+      // Callback function to handle API response
+      const handleMetaIDResult = (result) => {
+        if (result?.status?.code === 200) {
+          setMetaData(result);
+          this.props.getCreativesData(creativesData);
+        } else {
+          this.setState(
+            (prevState) => ({
+              liquidErrorMessage: {
+                ...prevState.liquidErrorMessage,
+                STANDARD_ERROR_MSG:
+                  result?.errors?.length > 0
+                    ? [
+                      ...(prevState.liquidErrorMessage
+                        ?.STANDARD_ERROR_MSG || []),
+                      formatMessage(messages.emailBodyEmptyError)
+                    ]
+                    : prevState.liquidErrorMessage?.STANDARD_ERROR_MSG,
+                LIQUID_ERROR_MSG: result?.errors?.map(
+                  (error) => error?.message
+                ) ?? [formatMessage(messages.somethingWentWrong)]
+              }
+            }),
+            () => {
+              this.showLiquidErrorInFooter(
+                this.state.liquidErrorMessage
+              );
+            }
+          );
+          this.props.stopValidation();
+          return;
+        }
+      };
+
+      // Call the action to create central comms meta ID
+      this.props.globalActions.createCentralCommsMetaId(payload, handleMetaIDResult);
+    } else {
+      // If not a loyalty module or different action, should work as usual
+      this.props.getCreativesData(creativesData);
+    }
   };
 
   setIsLoadingContent = (isLoadingContent) => {
@@ -1355,6 +1342,7 @@ export class Creatives extends React.Component {
       enableNewChannels,
       eventContextTags,
       isLoyaltyModule,
+      loyaltyMetaData = {},
     } = this.props;
     const mapTemplateCreate =
       slidBoxContent === "createTemplate" &&
@@ -1460,6 +1448,7 @@ export class Creatives extends React.Component {
               hostName={this.props?.hostName || ''}
               eventContextTags={eventContextTags}
               isLoyaltyModule={isLoyaltyModule}
+              loyaltyMetaData={loyaltyMetaData}
             />
           )}
           footer={this.shouldShowFooter() && (

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

@@ -15,6 +15,11 @@ exports[`Test SlideBoxContent container campaign message, add creative click rcs
         getFormData={[Function]}
         handleClose={[Function]}
         hostName=""
+        loyaltyMetaData={
+          Object {
+            "actionName": "SEND_COMMUNICATION_ACTION",
+          }
+        }
         onCallTaskSubmit={[Function]}
         onChannelChange={[Function]}
         onCreateComplete={[MockFunction]}
@@ -92,6 +97,11 @@ exports[`Test SlideBoxContent container campaign message, add creative click wha
         getFormData={[Function]}
         handleClose={[Function]}
         hostName=""
+        loyaltyMetaData={
+          Object {
+            "actionName": "SEND_COMMUNICATION_ACTION",
+          }
+        }
         onCallTaskSubmit={[Function]}
         onChannelChange={[Function]}
         onCreateComplete={[MockFunction]}
@@ -169,6 +179,11 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit all data
         getFormData={[Function]}
         handleClose={[Function]}
         hostName=""
+        loyaltyMetaData={
+          Object {
+            "actionName": "SEND_COMMUNICATION_ACTION",
+          }
+        }
         onCallTaskSubmit={[Function]}
         onChannelChange={[Function]}
         onCreateComplete={[MockFunction]}
@@ -250,6 +265,11 @@ exports[`Test SlideBoxContent container campaign message, whatsapp edit min data
         getFormData={[Function]}
         handleClose={[Function]}
         hostName=""
+        loyaltyMetaData={
+          Object {
+            "actionName": "SEND_COMMUNICATION_ACTION",
+          }
+        }
         onCallTaskSubmit={[Function]}
         onChannelChange={[Function]}
         onCreateComplete={[MockFunction]}
@@ -331,6 +351,11 @@ exports[`Test SlideBoxContent container it should clear the url, on channel chan
         getFormData={[Function]}
         handleClose={[Function]}
         hostName=""
+        loyaltyMetaData={
+          Object {
+            "actionName": "SEND_COMMUNICATION_ACTION",
+          }
+        }
         onCallTaskSubmit={[Function]}
         onChannelChange={[Function]}
         onCreateComplete={[MockFunction]}

package/v2Containers/CreativesContainer/tests/index.test.js

@@ -16,6 +16,7 @@ const {
   smsTemplates,
   emailEditTemplateData,
   emailTemplates,
+  loyaltyMetaData,
 } = mockdata;
 
 jest.mock('../../../v2Components/FormBuilder', () => ({
@@ -40,6 +41,7 @@ describe('Test SlideBoxContent container', () => {
   const renderFunction = (channel, mode, templates, templateData) => {
     renderedComponent = shallowWithIntl(
       <Creatives
+        loyaltyMetaData={loyaltyMetaData}
         Templates={templates}
         channel={channel}
         slidBoxContent={mode}

package/v2Containers/Email/index.js

@@ -2747,6 +2747,7 @@ 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>

package/v2Containers/EmailWrapper/index.js

@@ -229,6 +229,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
       eventContextTags,
       // Flag to enable loyalty module specific features in the email editor
       isLoyaltyModule,
+      messageDetails = {},
     } = this.props;
     const {
       templateName,
@@ -303,6 +304,7 @@ export class EmailWrapper extends React.Component { // eslint-disable-line react
                 moduleType={moduleType}
                 eventContextTags={eventContextTags}
                 isLoyaltyModule={isLoyaltyModule}
+                messageDetails={messageDetails}
               />}
               {!isShowEmailCreate && (
                 <CmsTemplatesComponent

package/v2Containers/MobilePush/Create/index.js

@@ -1809,6 +1809,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
                 isFullMode={this.props.isFullMode}
                 eventContextTags={this.props?.eventContextTags}
+                messageDetails={this.props?.messageDetails}
               />
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&

package/v2Containers/MobilePush/Edit/index.js

@@ -1991,6 +1991,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
                 isFullMode={this.props.isFullMode}
                 eventContextTags={this.props?.eventContextTags}
+                messageDetails={this.props?.messageDetails}
               />}
             </CapColumn>
             {this.props.iosCtasData && this.state.showIosCtaTable &&

package/v2Containers/MobilepushWrapper/index.js

@@ -72,7 +72,7 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
   }
 
   render() {
-    const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type, onValidationFail, onPreviewContentClicked, onTestContentClicked, templateData, eventContextTags = []} = this.props;
+    const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type, onValidationFail, onPreviewContentClicked, onTestContentClicked, templateData, eventContextTags = [], messageDetails = {}} = this.props;
     const {templateName} = this.state;
     const isShowMobilepushCreate = !isEmpty(mobilePushCreateMode);
     return (
@@ -120,6 +120,7 @@ export class MobilepushWrapper extends React.Component { // eslint-disable-line
               templateData={templateData}
               hideTestAndPreviewBtn={this.props.hideTestAndPreviewBtn}
               eventContextTags={eventContextTags}
+              messageDetails={messageDetails}
           />
 
 

package/v2Containers/Sms/Create/index.js

@@ -994,6 +994,7 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
                 onTestContentClicked={this.props.onTestContentClicked}
                 onPreviewContentClicked={this.props.onPreviewContentClicked}
                 eventContextTags={this.props?.eventContextTags}
+                messageDetails={this.props?.messageDetails}
               />
             </CapColumn>
           </CapRow>

package/v2Containers/Sms/Edit/index.js

@@ -992,6 +992,7 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
                 onPreviewContentClicked={this.props.onPreviewContentClicked}
                 onTestContentClicked={this.props.onTestContentClicked}
                 eventContextTags={this.props?.eventContextTags}
+                messageDetails={this.props?.messageDetails}
               />
             </CapColumn>
           </CapRow>

package/v2Containers/SmsWrapper/index.js

@@ -30,6 +30,7 @@ const SmsWrapper = (props) => {
     smsRegister,
     onShowTemplates,
     eventContextTags,
+    messageDetails = {},
   } = props;
 
   const smsProps = {
@@ -46,6 +47,7 @@ const SmsWrapper = (props) => {
     onPreviewContentClicked,
     onTestContentClicked,
     eventContextTags,
+    messageDetails,
   };
   const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
   return <>

package/v2Containers/Templates/_templates.scss

@@ -172,41 +172,6 @@
     }
 
     }
-
-    .WHATSAPP {
-      .cap-custom-card {
-        .ant-card-body {
-          .ant-card-meta {
-            background-color: #f4f5f7;
-            padding: 0;
-            .ant-card-meta-description {
-              .whatsapp-container {
-                background-color: #FFFFFF;
-                padding: 0.857rem;
-              }
-              .whatsapp-carousel-container {
-                padding: 4px 0px 0.571rem;
-                border-radius: 6px;
-                background-color: rgb(255, 255, 255);
-                width: 80%;
-                flex-shrink: 0;
-                margin-right: 4px;
-                white-space: pre-wrap;
-                word-break: break-word;
-                overflow: auto;
-                text-align: left;
-                .whatsapp-carosuel-card {
-                    margin: 2px 6px 1px 7px;
-                    .whatsapp-carousel-body {
-                      margin-bottom: 0.571rem;
-                    }
-                }
-              }
-            }
-          }
-        }
-      }
-    }
   }
 
   .create-new-link{

package/v2Containers/Templates/index.js

@@ -116,7 +116,7 @@ import {
 } from '../Whatsapp/constants';
 import { INAPP_LAYOUT_DETAILS } from '../InApp/constants';
 import { ZALO_STATUS_OPTIONS, ZALO_STATUSES } from '../Zalo/constants';
-import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory, getWhatsappCta, getWhatsappQuickReply, getWhatsappAutoFill, getWhatsappCarouselButtonView } from '../Whatsapp/utils';
+import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory, getWhatsappCta, getWhatsappQuickReply, getWhatsappAutoFill } from '../Whatsapp/utils';
 import { getRCSContent } from '../Rcs/utils';
 import zaloMessages from '../Zalo/messages';
 import globalMessages from '../../v2Containers/Cap/messages';
@@ -134,8 +134,7 @@ import whatsappOrZaloAccountIllustration from '../Assets/images/whatsappOrZaloAc
 import rcsIllustration from '../Assets/images/rcsIllustration.png';
 import zaloillustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
 import inAppIllustration from '@capillarytech/cap-ui-library/assets/images/featureUiNotEnabledIllustration.svg';
-import whatsappImageEmptyPreview from '../../v2Components/TemplatePreview/assets/images/empty_image_preview.svg';
-import whatsappVideoEmptyPreview from '../../v2Components/TemplatePreview/assets/images/empty_video_preview.svg';
+
 import { CAP_SPACE_16 } from '@capillarytech/cap-ui-library/styled/variables';
 import { GA } from '@capillarytech/cap-ui-utils';
 import { MAPP_SDK } from '../InApp/constants';
@@ -1111,7 +1110,8 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         ? this.getCreativesEditText(channelLowerCase)
         : messages.selectButton
       );
-      const cardDataList = filteredTemplates && filteredTemplates.length ? map(filteredTemplates, (template) => {
+    
+    const cardDataList = filteredTemplates && filteredTemplates.length ? map(filteredTemplates, (template) => {
       const androidBodyType = get(template, 'versions.base.content.ANDROID.bodyType');
       const iosBodyType = get(template, 'versions.base.content.IOS.bodyType');
       const inappBodyType = androidBodyType || iosBodyType;
@@ -1366,7 +1366,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           break;
         }
         case WHATSAPP: {
-          const { whatsappImageSrc = '', templateMsg, docPreview, whatsappVideoPreviewImg = '', templateHeaderPreview, templateFooterPreview, carouselData = [] } = getWhatsappContent(template);
+          const { whatsappImageSrc = '', templateMsg, docPreview, whatsappVideoPreviewImg = '', templateHeaderPreview, templateFooterPreview} = getWhatsappContent(template);
           templateData.title = (
             <CapRow>
               <CapLabel className="whatsapp-rcs-template-name">{template?.name}</CapLabel>
@@ -1375,7 +1375,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           );
           templateData.content = (
             <>
-            <div className='whatsapp-container'>
               {whatsappImageSrc && (
                 <CapImage src={whatsappImageSrc} className="whatsapp-image" />
               )}
@@ -1405,64 +1404,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               {getWhatsappCta(template)}
               {getWhatsappQuickReply(template)}
               {getWhatsappAutoFill(template)}
-              </div>
-              <div
-                style={{
-                  overflowX: "auto",
-                  display: "flex",
-                  paddingTop: "5px",
-                  paddingRight: "5px",
-                  whiteSpace: "nowrap",
-                  scrollbarWidth: "none", // Hide scrollbar in Firefox
-                  msOverflowStyle: "none", // Hide scrollbar in IE/Edge
-                  overflow: "hidden",
-                }}
-                className="scroll-container"
-              >
-                {carouselData.map((data, index) => {
-                  return (
-                    <div
-                            key={`carousel-${index}`}
-                            className="whatsapp-carousel-container"
-                            >
-                    <div className="whatsapp-carosuel-card">
-                      {data?.mediaType === "image" && (
-                        <CapImage
-                          src={data?.imageUrl ? data?.imageUrl : whatsappImageEmptyPreview}
-                          className="whatsapp-image"
-                        />
-                      )}
-                      {data?.mediaType === "video" && (
-                        <div className="video-preview">
-                          <CapImage
-                            src={data?.videoPreviewImg ? data?.videoPreviewImg : whatsappVideoEmptyPreview}
-                            className="whatsapp-image"
-                          />
-                          <div className="icon-position">
-                            <CapImage
-                              className="video-icon"
-                              src={videoPlay}
-                            />
-                          </div>
-                        </div>
-                      )}
-                      <span
-                        className={`${
-                          (data?.imageUrl || data?.videoPreviewImg)
-                            ? 'whatsapp-message-with-media'
-                            : 'whatsapp-message-without-media'
-                        }`}
-                      >
-                        <CapLabel type="label9" className='whatsapp-carousel-body'>
-                          {data?.bodyText}
-                        </CapLabel>
-                      </span>
-                      {getWhatsappCarouselButtonView(data?.buttons, false)}
-                    </div>
-                    </div>
-                  )
-                })}
-              </div>
             </>
           );
           break;

package/v2Containers/TemplatesV2/index.js

@@ -56,6 +56,8 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       enableNewChannels = [],
       currentOrgDetails = {},
       cap = {},
+      loyaltyMetaData = {},
+      isLoyaltyModule = false,
     } = props;
 
     const defaultPanes = {
@@ -98,6 +100,11 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       }
       const commonChannels = ['sms', 'email', 'wechat', 'mobilepush', 'line', 'viber', 'facebook', 'call_task', 'ftp', 'assets'];
 
+      const { actionName = ''} = loyaltyMetaData;
+      if (isLoyaltyModule && actionName === 'SEND_COMMUNICATION_ACTION') {
+        commonChannels.push('whatsapp', 'zalo');
+      }
+
       // we only show channels which other than commonChannels
       // if it is coming in enableNewChannels array
       filteredPanes = filteredPanes.filter((item) => {