@capillarytech/creatives-library 8.0.86 → 8.0.87-alpha.1

package/v2Containers/Templates/_templates.scss

@@ -172,6 +172,42 @@
     }
 
     }
+
+    .WHATSAPP {
+      .cap-custom-card {
+        color: red;
+        .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/Whatsapp/constants.js

@@ -54,6 +54,56 @@ export const WHATSAPP_CATEGORIES = {
   transactional: 'TRANSACTIONAL',
 };
 
+export const mediaTypeOptions = ({host, templateCategory}) => {
+  return [
+    {
+      key: 'TEXT',
+      value: WHATSAPP_MEDIA_TYPES.TEXT,
+      label: <FormattedMessage {...messages.none} />,
+      tagColor: CAP_PURPLE03,
+      tagTextColor: CAP_PURPLE02,
+    },
+    ...(host === HOST_TWILIO
+      ? []
+      : [
+        {
+          key: 'IMAGE',
+          value: WHATSAPP_MEDIA_TYPES.IMAGE,
+          label: <FormattedMessage {...messages.mediaImage} />,
+          tagColor: CAP_ORANGE01,
+          tagTextColor: CAP_ORANGE,
+        },
+        {
+          key: 'VIDEO',
+          value: WHATSAPP_MEDIA_TYPES.VIDEO,
+          label: <FormattedMessage {...messages.mediaVideo} />,
+          tagColor: CAP_GREEN02,
+          tagTextColor: CAP_GREEN01,
+        },
+        ...(templateCategory === WHATSAPP_CATEGORIES.marketing
+          ? [
+            {
+              key: 'CAROUSEL',
+              value: WHATSAPP_MEDIA_TYPES.CAROUSEL,
+              label: <FormattedMessage {...messages.mediaCarousel} />,
+              tagColor: CAP_PURPLE03,
+              tagTextColor: CAP_PURPLE02,
+            },
+          ]
+          : []
+        ),
+        {
+          key: 'DOCUMENT',
+          value: WHATSAPP_MEDIA_TYPES.DOCUMENT,
+          label: <FormattedMessage {...messages.mediaDocument} />,
+          tagColor: CAP_ORANGE01,
+          tagTextColor: CAP_ORANGE,
+        },
+      ]
+    ),
+  ];
+};
+
 export const KARIX_GUPSHUP_CATEGORY_OPTIONS = [
   {
     key: 'utility',
@@ -212,14 +262,17 @@ export const WHATSAPP_MEDIA_TYPES = {
   IMAGE: 'IMAGE',
   VIDEO: 'VIDEO',
   DOCUMENT: 'DOCUMENT',
+  CAROUSEL: 'CAROUSEL',
 };
 export const NONE = 'NONE';
 export const CTA = 'CTA';
 export const QUICK_REPLY = 'QUICK_REPLY';
 export const HEADER_TEXT = 'header';
 export const FOOTER_TEXT = 'footer';
+export const CAROUSEL_TEXT = 'carouselText';
 export const MESSAGE_TEXT = 'message';
-export const BUTTON_TEXT = 'buttonText'
+export const BODY_TEXT = 'body';
+export const BUTTON_TEXT = 'buttonText';
 export const WHATSAPP_BUTTON_TYPES = {
   NONE,
   CTA,
@@ -558,6 +611,35 @@ export const LANGUAGE_OPTIONS = [
   },
 ];
 
+export const carouselMediaOptions = [
+  {
+    value: 'image',
+    label: <FormattedMessage {...messages.mediaImage} />,
+  },
+  {
+    value: 'video',
+    label: <FormattedMessage {...messages.mediaVideo} />,
+  },
+];
+
+export const CAROUSEL_INITIAL_DATA = [{
+  mediaType: '',
+  bodyText: '',
+  bodyError: '',
+  addedVarCount: 0,
+  buttons: [
+    {
+      buttonType: PHONE_NUMBER,
+      text: '',
+      phone_number: '',
+      isSaved: false,
+      textError: '',
+    },
+  ],
+}];
+
+export const MAX_CAROUSEL_ALLOWED = 10;
+
 export const OTP_CONFIG_URI = "/org/setup/configurations/OTPConfigurations";
 export const AI_CONTENT_BOT_DISABLED = "AI_CONTENT_BOT_DISABLED";
 export const CORRECT_TEMPLATE_FORMAT_URL = "https://developers.facebook.com/docs/whatsapp/updates-to-pricing/new-template-guidelines";