@capillarytech/creatives-library 8.0.87-alpha.21 → 8.0.87-alpha.22

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;

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

@@ -1115,68 +1115,75 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
                     Array [
                       Object {
                         "content": <React.Fragment>
-                          <CapImage
-                            className="whatsapp-image"
-                            src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg"
-                          />
-                          
-                          <span
-                            className="whatsapp-message-with-media"
+                          <div
+                            className="whatsapp-container"
                           >
+                            <CapImage
+                              className="whatsapp-image"
+                              src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg"
+                            />
                             
-                            <CapLabel
-                              type="label9"
+                            <span
+                              className="whatsapp-message-with-media"
                             >
-                              Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
+                              
+                              <CapLabel
+                                type="label9"
+                              >
+                                Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
 Click {{unsubscribe}} to unsubscribe
-                            </CapLabel>
-                            
-                          </span>
-                          <CapLabel
-                            style={
-                              Object {
-                                "marginTop": "12px",
-                                "textAlign": "center",
-                              }
-                            }
-                            type="label21"
-                          >
-                            <CapIcon
-                              size="xs"
-                              svgProps={
+                              </CapLabel>
+                              
+                            </span>
+                            <CapLabel
+                              style={
                                 Object {
-                                  "style": Object {
-                                    "marginRight": "4px",
-                                  },
+                                  "marginTop": "12px",
+                                  "textAlign": "center",
                                 }
                               }
-                              type="call"
-                            />
-                            Call
-                          </CapLabel>
-                          <CapLabel
-                            style={
-                              Object {
-                                "marginTop": "12px",
-                                "textAlign": "center",
-                              }
-                            }
-                            type="label21"
-                          >
-                            <CapIcon
-                              size="xs"
-                              svgProps={
+                              type="label21"
+                            >
+                              <CapIcon
+                                size="xs"
+                                svgProps={
+                                  Object {
+                                    "style": Object {
+                                      "marginRight": "4px",
+                                    },
+                                  }
+                                }
+                                type="call"
+                              />
+                              Call
+                            </CapLabel>
+                            <CapLabel
+                              style={
                                 Object {
-                                  "style": Object {
-                                    "marginRight": "4px",
-                                  },
+                                  "marginTop": "12px",
+                                  "textAlign": "center",
                                 }
                               }
-                              type="launch"
-                            />
-                            Visit
-                          </CapLabel>
-                          <React.Fragment />
+                              type="label21"
+                            >
+                              <CapIcon
+                                size="xs"
+                                svgProps={
+                                  Object {
+                                    "style": Object {
+                                      "marginRight": "4px",
+                                    },
+                                  }
+                                }
+                                type="launch"
+                              />
+                              Visit
+                            </CapLabel>
+                            <React.Fragment />
+                          </div>
+                          <div
+                            className="scroll-container"
+                          />
                         </React.Fragment>,
                         "extra": Array [
                           <React.Fragment>
@@ -1594,68 +1601,75 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
                     Array [
                       Object {
                         "content": <React.Fragment>
-                          <CapImage
-                            className="whatsapp-image"
-                            src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg"
-                          />
-                          
-                          <span
-                            className="whatsapp-message-with-media"
+                          <div
+                            className="whatsapp-container"
                           >
+                            <CapImage
+                              className="whatsapp-image"
+                              src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg"
+                            />
                             
-                            <CapLabel
-                              type="label9"
+                            <span
+                              className="whatsapp-message-with-media"
                             >
-                              Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
+                              
+                              <CapLabel
+                                type="label9"
+                              >
+                                Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
 Click {{unsubscribe}} to unsubscribe
-                            </CapLabel>
-                            
-                          </span>
-                          <CapLabel
-                            style={
-                              Object {
-                                "marginTop": "12px",
-                                "textAlign": "center",
-                              }
-                            }
-                            type="label21"
-                          >
-                            <CapIcon
-                              size="xs"
-                              svgProps={
+                              </CapLabel>
+                              
+                            </span>
+                            <CapLabel
+                              style={
                                 Object {
-                                  "style": Object {
-                                    "marginRight": "4px",
-                                  },
+                                  "marginTop": "12px",
+                                  "textAlign": "center",
                                 }
                               }
-                              type="call"
-                            />
-                            Call
-                          </CapLabel>
-                          <CapLabel
-                            style={
-                              Object {
-                                "marginTop": "12px",
-                                "textAlign": "center",
-                              }
-                            }
-                            type="label21"
-                          >
-                            <CapIcon
-                              size="xs"
-                              svgProps={
+                              type="label21"
+                            >
+                              <CapIcon
+                                size="xs"
+                                svgProps={
+                                  Object {
+                                    "style": Object {
+                                      "marginRight": "4px",
+                                    },
+                                  }
+                                }
+                                type="call"
+                              />
+                              Call
+                            </CapLabel>
+                            <CapLabel
+                              style={
                                 Object {
-                                  "style": Object {
-                                    "marginRight": "4px",
-                                  },
+                                  "marginTop": "12px",
+                                  "textAlign": "center",
                                 }
                               }
-                              type="launch"
-                            />
-                            Visit
-                          </CapLabel>
-                          <React.Fragment />
+                              type="label21"
+                            >
+                              <CapIcon
+                                size="xs"
+                                svgProps={
+                                  Object {
+                                    "style": Object {
+                                      "marginRight": "4px",
+                                    },
+                                  }
+                                }
+                                type="launch"
+                              />
+                              Visit
+                            </CapLabel>
+                            <React.Fragment />
+                          </div>
+                          <div
+                            className="scroll-container"
+                          />
                         </React.Fragment>,
                         "extra": Array [
                           <React.Fragment>
@@ -2073,68 +2087,75 @@ exports[`Test Templates container Test max templates warning 1`] = `
                     Array [
                       Object {
                         "content": <React.Fragment>
-                          <CapImage
-                            className="whatsapp-image"
-                            src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg"
-                          />
-                          
-                          <span
-                            className="whatsapp-message-with-media"
+                          <div
+                            className="whatsapp-container"
                           >
+                            <CapImage
+                              className="whatsapp-image"
+                              src="https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/c9edc114-923b-4ac7-82d0-d6682213.jpg"
+                            />
                             
-                            <CapLabel
-                              type="label9"
+                            <span
+                              className="whatsapp-message-with-media"
                             >
-                              Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
+                              
+                              <CapLabel
+                                type="label9"
+                              >
+                                Hey {{1}}, Easier implementation, tracking, reporting and planning of promotions is now live! Check it out at {{2}}
 Click {{unsubscribe}} to unsubscribe
-                            </CapLabel>
-                            
-                          </span>
-                          <CapLabel
-                            style={
-                              Object {
-                                "marginTop": "12px",
-                                "textAlign": "center",
-                              }
-                            }
-                            type="label21"
-                          >
-                            <CapIcon
-                              size="xs"
-                              svgProps={
+                              </CapLabel>
+                              
+                            </span>
+                            <CapLabel
+                              style={
                                 Object {
-                                  "style": Object {
-                                    "marginRight": "4px",
-                                  },
+                                  "marginTop": "12px",
+                                  "textAlign": "center",
                                 }
                               }
-                              type="call"
-                            />
-                            Call
-                          </CapLabel>
-                          <CapLabel
-                            style={
-                              Object {
-                                "marginTop": "12px",
-                                "textAlign": "center",
-                              }
-                            }
-                            type="label21"
-                          >
-                            <CapIcon
-                              size="xs"
-                              svgProps={
+                              type="label21"
+                            >
+                              <CapIcon
+                                size="xs"
+                                svgProps={
+                                  Object {
+                                    "style": Object {
+                                      "marginRight": "4px",
+                                    },
+                                  }
+                                }
+                                type="call"
+                              />
+                              Call
+                            </CapLabel>
+                            <CapLabel
+                              style={
                                 Object {
-                                  "style": Object {
-                                    "marginRight": "4px",
-                                  },
+                                  "marginTop": "12px",
+                                  "textAlign": "center",
                                 }
                               }
-                              type="launch"
-                            />
-                            Visit
-                          </CapLabel>
-                          <React.Fragment />
+                              type="label21"
+                            >
+                              <CapIcon
+                                size="xs"
+                                svgProps={
+                                  Object {
+                                    "style": Object {
+                                      "marginRight": "4px",
+                                    },
+                                  }
+                                }
+                                type="launch"
+                              />
+                              Visit
+                            </CapLabel>
+                            <React.Fragment />
+                          </div>
+                          <div
+                            className="scroll-container"
+                          />
                         </React.Fragment>,
                         "extra": Array [
                           <React.Fragment>

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,
@@ -227,6 +280,9 @@ export const WHATSAPP_BUTTON_TYPES = {
 };
 export const PHONE_NUMBER = 'PHONE_NUMBER';
 export const STATIC_URL = 'STATIC_URL';
+export const URL = 'URL';
+export const IMAGE = 'IMAGE';
+export const VIDEO = 'VIDEO';
 export const INITIAL_CTA_DATA = [
   {
     index: 0,
@@ -558,6 +614,36 @@ 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: '',
+    },
+  ],
+}];
+
+// WhatsApp supports a maximum of 10 items in a carousel
+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";