@capillarytech/creatives-library 7.17.81 → 7.17.82-alpha.1

package/v2Containers/CreativesContainer/index.js

@@ -411,10 +411,11 @@ export class Creatives extends React.Component {
               buttons = [],
               mediaType = 'TEXT',
               whatsappMedia = {},
+              isPreviewUrl = false,
             } = {},
           } = templateData;
           const mediaParams = {};
-          const { url = '', previewUrl = '', docParams = {}} = whatsappMedia;
+          const { url = '', previewUrl = '', docParams = {}, footer = '', headerVarMapped = {}, headerTemplate = ''} = whatsappMedia;
           switch (mediaType) {
             case (WHATSAPP_MEDIA_TYPES.IMAGE):
               mediaParams.imageUrl = url;
@@ -462,6 +463,11 @@ export class Creatives extends React.Component {
                     ...mediaParams,
                     buttonType,
                     buttons: modifiedButtons,
+                    whatsappMedia: {
+                      header: headerTemplate,
+                      footer,
+                      headerVarMapped,
+                    },
                     languages: [
                       {
                         language,
@@ -471,6 +477,7 @@ export class Creatives extends React.Component {
                             : template,
                       },
                     ],
+                    isPreviewUrl,
                   },
                 },
               },
@@ -667,6 +674,13 @@ export class Creatives extends React.Component {
             documentUrl = '',
             videoPreviewImg = '',
             whatsappDocParams = {},
+            whatsappMedia: {
+              header = '',
+              headerVarMapped = {},
+              footer = '',
+              headerTemplate = '',
+            } = {},
+            isPreviewUrl = false,
           } = cloneDeep(versions.base.content.whatsapp);
 
           const modifiedButtons = cloneDeep(buttons).map((btn) => {
@@ -691,7 +705,12 @@ export class Creatives extends React.Component {
             varMapped[`{{${Object.keys(varMapped).length + 1}}}_unsubscribe`] =
               "{{unsubscribe}}";
           }
-          const whatsappMedia = {};
+          const whatsappMedia = {
+            header,
+            footer,
+            headerVarMapped,
+            headerTemplate
+          };
           const {
             whatsappDocName = '', whatsappDocSize, whatsappDocPages, whatsappDocImg = ''
           } = whatsappDocParams;
@@ -731,6 +750,7 @@ export class Creatives extends React.Component {
               buttons: modifiedButtons,
               mediaType,
               whatsappMedia,
+              isPreviewUrl,
             },
           };
         }

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

@@ -725,6 +725,8 @@ exports[`Test SlideBoxContent container Should render correct component for what
             "url": "https://docs.google.com/{{1}}",
           },
         ],
+        "templateFooterPreview": "",
+        "templateHeaderPreview": "",
         "templateMsg": <CapLabel
           type="label5"
         >

package/v2Containers/Templates/index.js

@@ -107,7 +107,7 @@ import {
   HOST_GUPSHUP,
 } from '../Whatsapp/constants';
 import { ZALO_STATUS_OPTIONS, ZALO_STATUSES } from '../Zalo/constants';
-import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory, getWhatsappCta } from '../Whatsapp/utils';
+import { getWhatsappContent, getWhatsappStatus, getWhatsappCategory, getWhatsappCta, getWhatsappQuickReply } from '../Whatsapp/utils';
 import { getRCSContent } from '../Rcs/utils';
 import zaloMessages from '../Zalo/messages';
 import globalMessages from '../../v2Containers/Cap/messages';
@@ -1174,7 +1174,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           break;
         }
         case WHATSAPP: {
-          const { whatsappImageSrc = '', templateMsg, docPreview, whatsappVideoPreviewImg = ''} = getWhatsappContent(template);
+          const { whatsappImageSrc = '', templateMsg, docPreview, whatsappVideoPreviewImg = '', templateHeaderPreview, templateFooterPreview} = getWhatsappContent(template);
           templateData.title = (
             <CapRow>
               <CapLabel className="whatsapp-rcs-template-name">{template?.name}</CapLabel>
@@ -1205,9 +1205,12 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                     : 'whatsapp-message-without-media'
                 }`}
               >
+                {templateHeaderPreview}
                 {templateMsg}
+                {templateFooterPreview}
               </span>
               {getWhatsappCta(template)}
+              {getWhatsappQuickReply(template)}
             </>
           );
           break;

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

@@ -1389,12 +1389,14 @@ exports[`Test Templates container Test max templates exceeded 1`] = `
                           <span
                             className="whatsapp-message-with-media"
                           >
+                            
                             <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={
@@ -1830,12 +1832,14 @@ exports[`Test Templates container Test max templates not exceeded 1`] = `
                           <span
                             className="whatsapp-message-with-media"
                           >
+                            
                             <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={
@@ -2271,12 +2275,14 @@ exports[`Test Templates container Test max templates warning 1`] = `
                           <span
                             className="whatsapp-message-with-media"
                           >
+                            
                             <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={

package/v2Containers/Whatsapp/actions.js

@@ -6,6 +6,8 @@ import {
   WHATSAPP,
   UPLOAD_WHATSAPP_ASSET_REQUEST,
   CLEAR_WHATSAPP_ASSET,
+  URL_META_TAGS_REQUEST,
+  URL_META_TAGS_RESET,
 } from './constants';
 
 export function createWhatsappTemplate(payload, callback, gupshupMediaFile) {
@@ -55,3 +57,17 @@ export const clearWhatsappAsset = (templateType) => ({
   type: CLEAR_WHATSAPP_ASSET,
   templateType,
 });
+
+export function getMetaTags({previewUrl, callBack}) {
+  return {
+    type: URL_META_TAGS_REQUEST,
+    previewUrl,
+    callBack,
+  };
+}
+
+export function resetMetaTags() {
+  return {
+    type: URL_META_TAGS_RESET,
+  };
+}

package/v2Containers/Whatsapp/constants.js

@@ -12,6 +12,8 @@ import messages from './messages';
 export const UNSUBSCRIBE_TEXT_LENGTH = 36;
 export const TEMPLATE_MESSAGE_MAX_LENGTH = 1024;
 export const WHATSAPP = 'WHATSAPP';
+export const TEMPLATE_HEADER_MAX_LENGTH = 60;
+export const QUICK_REPLY_BUTTON_TEXT_MAX_LENGTH = 20;
 
 const prefix = 'app/v2Containers/Whatsapp';
 export const TEMPLATE_CREATE_REQUEST = `${prefix}/TEMPLATE_CREATE_REQUEST`;
@@ -29,6 +31,12 @@ export const UPLOAD_WHATSAPP_ASSET_SUCCESS = `${prefix}/UPLOAD_WHATSAPP_ASSET_SU
 export const UPLOAD_WHATSAPP_ASSET_FAILURE = `${prefix}/UPLOAD_WHATSAPP_ASSET_FAILURE`;
 export const CLEAR_WHATSAPP_ASSET = `${prefix}/CLEAR_WHATSAPP_ASSET`;
 
+//For meta tags
+export const URL_META_TAGS_REQUEST = `${prefix}/URL_META_TAGS_REQUEST`;
+export const URL_META_TAGS_SUCCESS = `${prefix}/URL_META_TAGS_SUCCESS`;
+export const URL_META_TAGS_FAILURE = `${prefix}/URL_META_TAGS_FAILURE`;
+export const URL_META_TAGS_RESET = `${prefix}/URL_META_TAGS_RESET`;
+
 export const STATUS = 'status';
 export const CATEGORY = 'category';
 
@@ -178,6 +186,10 @@ export const WHATSAPP_MEDIA_TYPES = {
 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 MESSAGE_TEXT = 'message';
+export const BUTTON_TEXT = 'buttonText'
 export const WHATSAPP_BUTTON_TYPES = {
   NONE,
   CTA,
@@ -197,6 +209,16 @@ export const INITIAL_CTA_DATA = [
   },
 ];
 
+export const INITIAL_QUICK_REPLY_DATA = [
+  {
+    index: 0,
+    text: "",
+    type: "QUICK_REPLY",
+    isSaved: false,
+    error: "",
+  },
+];
+
 export const ALLOWED_IMAGE_EXTENSIONS_REGEX = /\.(jpe?g|png)$/i;
 export const ALLOWED_EXTENSIONS_VIDEO_REGEX = (/\.(mp4)$/i);
 export const ALLOWED_EXTENSIONS_DOCUMENT_REGEX = (/\.(pdf)$/i);