@capillarytech/creatives-library 8.0.92 → 8.0.94

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 undefined"
+          className="msg-container whatsapp-message-container"
         >
           <div
-            className="message-pop align-left undefined"
+            className="message-pop align-left"
             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 undefined"
+          className="msg-container whatsapp-message-container"
         >
           <div
-            className="message-pop align-left undefined"
+            className="message-pop align-left"
             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 undefined"
+          className="msg-container whatsapp-message-container"
         >
           <div
-            className="message-pop align-left undefined"
+            className="message-pop align-left"
             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, PHONE_NUMBER, URL } from '../Whatsapp/constants';
+import { WHATSAPP_STATUSES, WHATSAPP_MEDIA_TYPES } from '../Whatsapp/constants';
 
 import { updateImagesInHtml } from '../../utils/cdnTransformation';
 import { IOS } from '../InApp/constants';
@@ -58,7 +58,6 @@ 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';
@@ -230,39 +229,6 @@ 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;
@@ -504,7 +470,6 @@ export class Creatives extends React.Component {
               mediaType = 'TEXT',
               whatsappMedia = {},
               isPreviewUrl = false,
-              cards = [],
             } = {},
           } = templateData;
           const mediaParams = {};
@@ -527,7 +492,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;
@@ -571,10 +536,6 @@ export class Creatives extends React.Component {
                       },
                     ],
                     isPreviewUrl,
-                    carouselData: this.mapCarouselDataToCreatives(cards),
-                    ...(cards?.length && {
-                      mediaType: WHATSAPP_MEDIA_TYPES.CAROUSEL,
-                    }),
                   },
                 },
               },
@@ -621,47 +582,6 @@ 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) {
@@ -834,7 +754,6 @@ export class Creatives extends React.Component {
               headerTemplate = '',
             } = {},
             isPreviewUrl = false,
-            carouselData = [],
           } = cloneDeep(versions.base.content.whatsapp);
 
           const modifiedButtons = cloneDeep(buttons).map((btn) => {
@@ -901,17 +820,11 @@ export class Creatives extends React.Component {
               varMapped,
               category,
               language: languages[0].language,
-              ...(mediaType !== WHATSAPP_MEDIA_TYPES.CAROUSEL && {
-                buttonType,
-                buttons: modifiedButtons,
-                whatsappMedia,
-              }),
+              buttonType,
+              buttons: modifiedButtons,
               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

@@ -935,7 +935,6 @@ 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,53 +172,6 @@
     }
 
     }
-
-    .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,12 +113,10 @@ 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, 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';
@@ -136,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';
@@ -1113,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;
@@ -1368,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>
@@ -1377,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" />
               )}
@@ -1407,53 +1404,6 @@ 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;