@capillarytech/creatives-library 8.0.90 → 8.0.91

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/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';
 
 const classPrefix = 'add-creatives-section';
 const CREATIVES_CONTAINER = 'creativesContainer';
@@ -229,6 +230,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;
@@ -470,6 +504,7 @@ export class Creatives extends React.Component {
               mediaType = 'TEXT',
               whatsappMedia = {},
               isPreviewUrl = false,
+              cards = [],
             } = {},
           } = templateData;
           const mediaParams = {};
@@ -536,6 +571,10 @@ export class Creatives extends React.Component {
                       },
                     ],
                     isPreviewUrl,
+                    carouselData: this.mapCarouselDataToCreatives(cards),
+                    ...(cards?.length && {
+                      mediaType: WHATSAPP_MEDIA_TYPES.CAROUSEL,
+                    }),
                   },
                 },
               },
@@ -582,6 +621,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) {
@@ -754,6 +834,7 @@ export class Creatives extends React.Component {
               headerTemplate = '',
             } = {},
             isPreviewUrl = false,
+            carouselData = [],
           } = cloneDeep(versions.base.content.whatsapp);
 
           const modifiedButtons = cloneDeep(buttons).map((btn) => {
@@ -820,11 +901,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,
+              }),
             },
           };
         }

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

@@ -935,6 +935,7 @@ exports[`Test SlideBoxContent container Should render correct component for what
     charCounterEnabled={false}
     content={
       Object {
+        "carouselData": Array [],
         "charCount": 151,
         "ctaData": Array [
           Object {

package/v2Containers/Templates/_templates.scss

@@ -172,6 +172,53 @@
     }
 
     }
+
+    .WHATSAPP {
+      .cap-custom-card {
+        .ant-card-body {
+          .ant-card-meta {
+            background-color: $CAP_G09;
+            padding: 0;
+            .ant-card-meta-description {
+              .whatsapp-container {
+                background-color: $CAP_WHITE;
+                padding: $CAP_SPACE_12;
+              }
+              .scroll-container {
+                overflow-x: auto;
+                display: flex;
+                padding-top: $CAP_SPACE_06;
+                padding-right: $CAP_SPACE_06;
+                white-space: nowrap;
+                scrollbar-width: none; // Hide scrollbar in Firefox
+                &::-webkit-scrollbar {
+                  display: none; // Hide scrollbar in Chrome/Safari/Opera
+                }
+                overflow: hidden;
+                .whatsapp-carousel-container {
+                  padding: $CAP_SPACE_04 0px $CAP_SPACE_08;
+                  border-radius: $CAP_SPACE_06;
+                  background-color: $CAP_WHITE;
+                  width: 80%;
+                  flex-shrink: 0;
+                  margin-right: $CAP_SPACE_04;
+                  white-space: pre-wrap;
+                  word-break: break-word;
+                  overflow: auto;
+                  text-align: left;
+                  .whatsapp-carousel-card {
+                      margin: $CAP_SPACE_02 $CAP_SPACE_06 $CAP_SPACE_01 $CAP_SPACE_08;
+                      .whatsapp-carousel-body {
+                        margin-bottom: $CAP_SPACE_08;
+                      }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
   }
 
   .create-new-link{

package/v2Containers/Templates/index.js

@@ -113,10 +113,12 @@ import {
   KARIX_GUPSHUP_CATEGORY_OPTIONS,
   ICS_CATEGORY_OPTIONS,
   HOST_ICS,
+  IMAGE,
+  VIDEO,
 } 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 +136,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 +1113,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 +1368,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 +1377,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 +1407,53 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
               {getWhatsappCta(template)}
               {getWhatsappQuickReply(template)}
               {getWhatsappAutoFill(template)}
+              </div>
+              <div className="scroll-container">
+                {carouselData.map((data, index) => {
+                  return (
+                    <div
+                      key={`carousel-${index + 1}`}
+                      className="whatsapp-carousel-container"
+                      role="group"
+                    >
+                    <div className="whatsapp-carousel-card">
+                      {data?.mediaType === IMAGE.toLowerCase() && (
+                        <CapImage
+                          src={data?.imageUrl ? data?.imageUrl : whatsappImageEmptyPreview}
+                          className="whatsapp-image"
+                        />
+                      )}
+                      {data?.mediaType === VIDEO.toLowerCase() && (
+                        <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;