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

package/v2Containers/CreativesContainer/index.js

@@ -58,11 +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 {
-  transformChannelPayload,
-  // getTemplateDiffState
-} from "../../utils/transformerUtils";
+import { DYNAMIC_URL } from '../../v2Components/CapWhatsappCTA/constants';
 
 const classPrefix = 'add-creatives-section';
 const CREATIVES_CONTAINER = 'creativesContainer';
@@ -93,7 +89,6 @@ export class Creatives extends React.Component {
       weChatMaptemplateStep: 0,
       isLiquidValidationError: false,
       errorMessages: [],
-      metaId: null,
     };
     this.creativesTemplateSteps = {
       1: 'modeSelection',
@@ -235,6 +230,39 @@ 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;
@@ -462,8 +490,7 @@ export class Creatives extends React.Component {
           };
           break;
         }
-        case constants.WHATSAPP:
-        case constants.WHATSAPP?.toLowerCase(): {
+        case constants.WHATSAPP: {
           const {
             messageBody = '',
             templateConfigs: {
@@ -477,6 +504,7 @@ export class Creatives extends React.Component {
               mediaType = 'TEXT',
               whatsappMedia = {},
               isPreviewUrl = false,
+              cards = [],
             } = {},
           } = templateData;
           const mediaParams = {};
@@ -543,6 +571,7 @@ export class Creatives extends React.Component {
                       },
                     ],
                     isPreviewUrl,
+                    carouselData: this.mapCarouselDataToCreatives(cards),
                   },
                 },
               },
@@ -589,6 +618,47 @@ 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) {
@@ -761,6 +831,7 @@ export class Creatives extends React.Component {
               headerTemplate = '',
             } = {},
             isPreviewUrl = false,
+            carouselData= [],
           } = cloneDeep(versions.base.content.whatsapp);
 
           const modifiedButtons = cloneDeep(buttons).map((btn) => {
@@ -827,10 +898,15 @@ 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 === WHATSAPP_MEDIA_TYPES.CAROUSEL && {
+                cards: this.getCarouselMappedData(carouselData),
+              }),
               mediaType,
-              whatsappMedia,
               isPreviewUrl,
             },
           };
@@ -1023,75 +1099,11 @@ 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.processCentralCommsMetaId(channel, data);
+            this.props.getCreativesData(data);// send data to consumer
           });
         },
       );
     }
-  }
-  
-  processCentralCommsMetaId = (channel, creativesData) => {
-    // Create the payload for the centralcommnsmetaId API call
-    const { isLoyaltyModule, loyaltyMetaData } = this.props;
-    const { actionName, setMetaId = () => {} } = 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) {
-          setMetaId(result?.response?.data?.id);
-          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) => {
@@ -1343,7 +1355,6 @@ export class Creatives extends React.Component {
       enableNewChannels,
       eventContextTags,
       isLoyaltyModule,
-      loyaltyMetaData = {},
     } = this.props;
     const mapTemplateCreate =
       slidBoxContent === "createTemplate" &&
@@ -1449,7 +1460,6 @@ 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,11 +15,6 @@ 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]}
@@ -97,11 +92,6 @@ 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]}
@@ -179,11 +169,6 @@ 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]}
@@ -265,11 +250,6 @@ 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]}
@@ -351,11 +331,6 @@ 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,7 +16,6 @@ const {
   smsTemplates,
   emailEditTemplateData,
   emailTemplates,
-  loyaltyMetaData,
 } = mockdata;
 
 jest.mock('../../../v2Components/FormBuilder', () => ({
@@ -41,7 +40,6 @@ 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,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>

package/v2Containers/EmailWrapper/index.js

@@ -229,7 +229,6 @@ 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,
@@ -304,7 +303,6 @@ 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,7 +1809,6 @@ 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,7 +1991,6 @@ 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 = [], messageDetails = {}} = this.props;
+    const {mobilePushCreateMode, step, getFormData, setIsLoadingContent, isGetFormData, query, isFullMode, showTemplateName, type, onValidationFail, onPreviewContentClicked, onTestContentClicked, templateData, eventContextTags = []} = this.props;
     const {templateName} = this.state;
     const isShowMobilepushCreate = !isEmpty(mobilePushCreateMode);
     return (
@@ -120,7 +120,6 @@ 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,7 +994,6 @@ 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,7 +992,6 @@ 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,7 +30,6 @@ const SmsWrapper = (props) => {
     smsRegister,
     onShowTemplates,
     eventContextTags,
-    messageDetails = {},
   } = props;
 
   const smsProps = {
@@ -47,7 +46,6 @@ const SmsWrapper = (props) => {
     onPreviewContentClicked,
     onTestContentClicked,
     eventContextTags,
-    messageDetails,
   };
   const isTraiDlt = isTraiDLTEnable(isFullMode, smsRegister);
   return <>

package/v2Containers/Templates/_templates.scss

@@ -172,6 +172,41 @@
     }
 
     }
+
+    .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 } from '../Whatsapp/utils';
+import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory, getWhatsappCta, getWhatsappQuickReply, getWhatsappAutoFill, getWhatsappCarouselButtonView } from '../Whatsapp/utils';
 import { getRCSContent } from '../Rcs/utils';
 import zaloMessages from '../Zalo/messages';
 import globalMessages from '../../v2Containers/Cap/messages';
@@ -134,7 +134,8 @@ 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';
@@ -1110,8 +1111,7 @@ 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} = getWhatsappContent(template);
+          const { whatsappImageSrc = '', templateMsg, docPreview, whatsappVideoPreviewImg = '', templateHeaderPreview, templateFooterPreview, carouselData = [] } = getWhatsappContent(template);
           templateData.title = (
             <CapRow>
               <CapLabel className="whatsapp-rcs-template-name">{template?.name}</CapLabel>
@@ -1375,6 +1375,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           );
           templateData.content = (
             <>
+            <div className='whatsapp-container'>
               {whatsappImageSrc && (
                 <CapImage src={whatsappImageSrc} className="whatsapp-image" />
               )}
@@ -1404,6 +1405,64 @@ 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,8 +56,6 @@ export class TemplatesV2 extends React.Component { // eslint-disable-line react/
       enableNewChannels = [],
       currentOrgDetails = {},
       cap = {},
-      loyaltyMetaData = {},
-      isLoyaltyModule = false,
     } = props;
 
     const defaultPanes = {
@@ -100,11 +98,6 @@ 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) => {