@capillarytech/creatives-library 7.17.82 → 7.17.84

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.17.82",
+  "version": "7.17.84",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/services/api.js

@@ -504,3 +504,8 @@ export const getTemplateInfoById = ({id, username, oa_id, token}) => {
   const url = `${API_ENDPOINT}/templates/${id}/Zalo?username=${username}&oa_id=${oa_id}&token=${token}`;
   return request(url, getAPICallObject('GET'));
 };
+
+export const getMetaTags = ({previewUrl}) => {
+  const url = `${API_ENDPOINT}/common/getMetaTags?url=${previewUrl}`;
+  return request(url, getAPICallObject('GET'));
+};

package/services/tests/api.test.js

@@ -2,7 +2,8 @@ import {
   getSenderDetails,
   uploadFile,
   getCdnTransformationConfig,
-  createWhatsappTemplate
+  createWhatsappTemplate,
+  getMetaTags,
 } from '../api';
 import { mockData } from './mockData';
 const sampleFile = require('../../assets/line.png');
@@ -44,3 +45,10 @@ describe('createWhatsappTemplate -- Test with valid responses', () => {
       createWhatsappTemplate(sampleFile, mockData.createWhatsappPayload),
     ).toEqual(Promise.resolve()));
 });
+
+describe('getMetaTags -- Test with valid responses', () => {
+  it('Should return correct response', () =>
+    expect(
+      getMetaTags({previewUrl: 'https://capillarytech.com'}),
+    ).toEqual(Promise.resolve()));
+});

package/v2Components/CapWhatsappQuickReply/index.scss

@@ -3,7 +3,7 @@
 .cap-whatsapp-quick-reply {
     border: solid 0.063rem $CAP_G06;
     margin-left: $CAP_SPACE_24;
-    margin-top: $CAP_SPACE_24;
+    margin-top: 0.75rem;
     border-radius: 0.285rem;
     .whatsapp-button-text-container {
         padding: $CAP_SPACE_16 $CAP_SPACE_24;
@@ -39,5 +39,5 @@
 .whatsapp-quick-reply-edit-container {
     padding: $CAP_SPACE_12;
     margin-left: 0;
-    margin-top: $CAP_SPACE_16;
+    margin-top: 0.75rem;
 }

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -276,6 +276,7 @@
     align-content: center;
     justify-content: center;
     margin-bottom: 4px;
+    align-items: center;
     svg {
       margin-right: $CAP_SPACE_04;
     }
@@ -520,4 +521,24 @@
 .zalo-preview-container-campaign {
   padding-left: 0px;
   padding-right: 4.563rem;
+}
+
+.url-preview-image {
+  width: 100%;
+  height: 100%;
+  background-color: hsl(0, 0%, 90%);
+}
+
+.url-preview-description {
+  font-size: 0.6rem;
+  font-weight: $FONT_WEIGHT_REGULAR;
+  color: $FONT_COLOR_01;
+  margin: 0.13rem 0;
+}
+
+.url-preview {
+  font-size: 0.5rem;
+  font-weight: $FONT_WEIGHT_REGULAR;
+  color: $FONT_COLOR_02;
+  margin-bottom: $CAP_SPACE_08;
 }

package/v2Components/TemplatePreview/index.js

@@ -11,6 +11,7 @@ import _ from 'lodash';
 import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
 // import styled from 'styled-components';
 import { CapColumn, CapRow, CapHeading, CapIcon, CapButton, CapImage, CapLabel, CapDivider, CapTooltip } from '@capillarytech/cap-ui-library';
+import { isEmpty } from 'lodash';
 import './_templatePreview.scss';
 import {updateCharCount} from '../../utils/smsCharCountV2';
 import messages from './messages';
@@ -342,6 +343,38 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       );
     };
 
+    const renderUrlPreview = (metaTags) => {
+      const renderArray = [];
+      if (!isEmpty(metaTags)) {
+        const { image = '', title = '', description = '', url = '' } = metaTags || {};
+        if (image) {
+          renderArray.push(
+            <CapImage
+              src={image}
+              alt={formatMessage(messages.previewUrlMetaImage)}
+              className="url-preview-image"
+            />
+          );
+        }
+        if (title) {
+          renderArray.push(
+            <CapLabel type="label8">{title}</CapLabel>
+          );
+        }
+        if (description) {
+          renderArray.push(
+            <CapLabel className="url-preview-description">{description}</CapLabel>
+          );
+        }
+        if (url) {
+          renderArray.push(
+            <CapLabel className="url-preview">{url}</CapLabel>
+          );
+        }
+      }
+      return renderArray;
+    };
+
     const handlePreview = () => {
       const {templatePreviewUrl = ''} = templateData;
       handlePreviewInNewTab(templatePreviewUrl);
@@ -756,6 +789,9 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                     <div className="msg-container whatsapp-message-container">
                       <div className="message-pop align-left" style={whatsappSectionStyle}>
                         <div className="whatsapp-content">
+                          {content?.showUrlPreview && (
+                            renderUrlPreview(content?.metaTagsDetails)
+                          )}
                           {content?.whatsappImageSrc && (
                             <CapImage
                               src={content.whatsappImageSrc}

package/v2Components/TemplatePreview/messages.js

@@ -82,4 +82,8 @@ export default defineMessages({
     id: 'creatives.componentsV2.TemplatePreview.videoPreviewTooltip',
     defaultMessage: "This is just for preview purposes, video cannot be played here",
   },
+  previewUrlMetaImage: {
+    id: 'creatives.componentsV2.TemplatePreview.previewUrlMetaImage',
+    defaultMessage: 'Preview url meta image',
+  },
 });

package/v2Containers/CreativesContainer/index.js

@@ -411,6 +411,7 @@ export class Creatives extends React.Component {
               buttons = [],
               mediaType = 'TEXT',
               whatsappMedia = {},
+              isPreviewUrl = false,
             } = {},
           } = templateData;
           const mediaParams = {};
@@ -476,6 +477,7 @@ export class Creatives extends React.Component {
                             : template,
                       },
                     ],
+                    isPreviewUrl,
                   },
                 },
               },
@@ -677,7 +679,8 @@ export class Creatives extends React.Component {
               headerVarMapped = {},
               footer = '',
               headerTemplate = '',
-            } = {}
+            } = {},
+            isPreviewUrl = false,
           } = cloneDeep(versions.base.content.whatsapp);
 
           const modifiedButtons = cloneDeep(buttons).map((btn) => {
@@ -747,6 +750,7 @@ export class Creatives extends React.Component {
               buttons: modifiedButtons,
               mediaType,
               whatsappMedia,
+              isPreviewUrl,
             },
           };
         }

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

@@ -31,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';
 

package/v2Containers/Whatsapp/index.js

@@ -25,6 +25,7 @@ import CapAlert from '@capillarytech/cap-ui-library/CapAlert';
 import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
 import CapLink from '@capillarytech/cap-ui-library/CapLink';
 import moment from 'moment';
+import debounce from 'lodash/debounce';
 import {
   CAP_SPACE_04,
   CAP_SPACE_16,
@@ -181,9 +182,12 @@ export const Whatsapp = (props) => {
   const [headerTextAreaId, setHeaderTextAreaId] = useState('');
   const [isHeaderTagValidationError, updateIsHeaderTagValidationError] =
     useState(false);
+  const [showUrlPreview, setShowUrlPreview] = useState(false);
+  const [previewUrl, setPreviewUrl] = useState('');
 
   const validVarRegex = /{{([1-9]|1[0-9])}}/g;
   const headerValidVarRegex = /{{(1)}}/g;
+  const previewUrlMatchingRegex = /(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])/g;
 
   const isBtnTypeCta = buttonType === WHATSAPP_BUTTON_TYPES.CTA;
   const isBtnTypeQuickReply = buttonType === WHATSAPP_BUTTON_TYPES.QUICK_REPLY;
@@ -268,6 +272,7 @@ export const Whatsapp = (props) => {
         videoPreviewImg = '',
         whatsappDocParams = {},
         whatsappMedia: { header = '', footer = '' } = {},
+        isPreviewUrl = false,
       } = editContent;
       setTemplateCategory(category);
       setTemplateStatus(status);
@@ -291,6 +296,7 @@ export const Whatsapp = (props) => {
       setButtonType(btnType);
       setTemplateFooter(footer);
       setTemplateHeader(header);
+      setShowUrlPreview(isPreviewUrl);
       if (btnType === WHATSAPP_BUTTON_TYPES.CTA && buttons.length > 0) {
         setCtadata(
           buttons.map((cta) => {
@@ -425,6 +431,11 @@ export const Whatsapp = (props) => {
           arr[key.slice(key.indexOf('_') + 1)] = varMap[key];
         }
       }
+      // extract preview url from message
+      if (arr?.length) {
+        const validUrls = arr.join("").match(previewUrlMatchingRegex) || [];
+        setPreviewUrl(validUrls?.[0] || '')
+      }
       setUpdatedSmsEditor(arr);
     }
   }, [tempMsgArray]);
@@ -467,7 +478,7 @@ export const Whatsapp = (props) => {
 
   const tagValidation = (contentData, regex, type) => {
     if (contentData?.length > 0 && !contentData.join("").match(regex)) {
-      tagValidationResponse =
+      const validationResponse =
         validateTags({
           content: contentData.join(""),
           tagsParam: tags,
@@ -475,16 +486,49 @@ export const Whatsapp = (props) => {
           location,
           tagModule: getDefaultTags,
         }) || {};
-      type === HEADER_TEXT
-        ? updateIsHeaderTagValidationError(
-            tagValidationResponse?.unsupportedTags?.length > 0
-          )
-        : updateIsTagValidationError(
-            tagValidationResponse?.unsupportedTags?.length > 0
-          );
+      const unsupportedTagsLengthCheck =
+        validationResponse?.unsupportedTags?.length > 0;
+      if (type === HEADER_TEXT) {
+        headerTagValidationResponse = validationResponse;
+        updateIsHeaderTagValidationError(unsupportedTagsLengthCheck);
+      } else {
+        tagValidationResponse = validationResponse;
+        updateIsTagValidationError(unsupportedTagsLengthCheck);
+      }
     }
   };
 
+  // as per change in message body we filter out url using regex
+  useEffect(() => {
+    if (updatedSmsEditor?.length > 0) {
+      const previewUrlArr = updatedSmsEditor.join("").match(previewUrlMatchingRegex) || [];
+      if (previewUrlArr?.length > 0) {
+        setPreviewUrl(previewUrlArr[0]);
+      } else {
+        setPreviewUrl('');
+      }
+    } 
+  }, [updatedSmsEditor])
+
+  const debounceFn = useCallback(
+    debounce(url => {
+      actions.getMetaTags({
+        previewUrl: url,
+        callBack: actionCallback,
+      })
+    }, 500),
+    [],
+  );
+
+  // as per change in url and preview checkbox we call api and extract the meta information of url
+  useEffect(() => {
+    if (!isEmpty(previewUrl) && showUrlPreview) {
+      debounceFn(previewUrl);
+    } else {
+      actions.resetMetaTags();
+    }
+  }, [previewUrl, showUrlPreview])
+
   //performs tag validation
   useEffect(() => {
     if (!isFullMode)
@@ -787,6 +831,10 @@ export const Whatsapp = (props) => {
     setTemplateMessageError(error);
   };
 
+  const previewUrlHandler = ({ target: { checked } }) => {
+    setShowUrlPreview(checked);
+  }
+
   const renderUnsubscribeText = () => {
     const isDisabled =
       isEditFlow ||
@@ -1246,6 +1294,9 @@ export const Whatsapp = (props) => {
                   footer: templateFooter || ""
                 }),
               },
+              ...(isEditFlow && !isFullMode && {
+                isPreviewUrl: showUrlPreview
+              })
             },
           },
         },
@@ -1812,7 +1863,7 @@ export const Whatsapp = (props) => {
           {isHeaderTagValidationError && tagValidationErrorMessage(HEADER_TEXT)}
           {computeTextLength(HEADER_TEXT) > TEMPLATE_HEADER_MAX_LENGTH && (
             <CapError>
-              {formatMessage(messages.templateMessageLengthError)}
+              {formatMessage(messages.templateHeaderLengthError)}
             </CapError>
           )}
         </>
@@ -1859,6 +1910,19 @@ export const Whatsapp = (props) => {
       ) : (
         ""
       )}
+      <CapRow>
+        <CapCheckbox
+          className={`whatsapp-unsubscribe-checkbox ${'whatsapp-create-unsubscribe-checkbox'}`}
+          onChange={previewUrlHandler}
+          checked={showUrlPreview}
+          disabled={!isMediaTypeText}
+          autoFocus={true}
+        >
+          <span className="whatsapp-render-url-preview-text">
+            {formatMessage(messages.showUrlPreview)}
+          </span>
+        </CapCheckbox>
+      </CapRow>
       {templateFooter && isHostIsNotTwilio && (
         <>
           <CapHeader
@@ -1922,6 +1986,7 @@ export const Whatsapp = (props) => {
 
   //used by create and edit
   const getPreviewSection = () => {
+    const { metaTagsDetails = {} } = editData || {};
     const templateMsg = (
       <>
         <CapLabel type="label5">
@@ -1973,6 +2038,10 @@ export const Whatsapp = (props) => {
           ...(isBtnTypeQuickReply && {
             quickReplyData,
           }),
+          ...(isMediaTypeText && showUrlPreview && {
+            showUrlPreview,
+            metaTagsDetails,
+          }),
         }}
         whatsappContentLen={computeTextLength()}
         whatsappAccountName={accountName}

package/v2Containers/Whatsapp/index.scss

@@ -130,6 +130,7 @@
   .whatsapp-button-quick-reply {
     display: inline-grid;
     margin-top: $CAP_SPACE_24;
+    margin-bottom: 0.75rem;
   }
 
   .whatsapp-optional-label {
@@ -190,11 +191,17 @@
   .whatsapp-template-footer-preview {
     color: $CAP_G04;
     font-weight: $FONT_WEIGHT_REGULAR;
-    font-size: 0.571rem;
+    font-size: 0.5rem;
     margin-top: $CAP_SPACE_08;
   }
 
   .whatsapp-text-field_spacing {
     margin-left: $CAP_SPACE_04;
   }
+
+  .whatsapp-render-url-preview-text {
+    color: $CAP_G01;
+    font-size: $FONT_SIZE_M;
+    font-weight: $FONT_WEIGHT_MEDIUM;
+  }
 }

package/v2Containers/Whatsapp/messages.js

@@ -659,5 +659,9 @@ export default defineMessages({
   quickReplyButtons: {
     id: `${prefix}.quickReplyButtons`,
     defaultMessage: 'Quick reply buttons',
-  }
+  },
+  showUrlPreview: {
+    id: `${prefix}.showUrlPreview`,
+    defaultMessage: 'Show URL preview',
+  },
 });

package/v2Containers/Whatsapp/reducer.js

@@ -12,11 +12,18 @@ import {
   UPLOAD_WHATSAPP_ASSET_SUCCESS,
   UPLOAD_WHATSAPP_ASSET_FAILURE,
   CLEAR_WHATSAPP_ASSET,
+  URL_META_TAGS_REQUEST,
+  URL_META_TAGS_SUCCESS,
+  URL_META_TAGS_FAILURE,
+  URL_META_TAGS_RESET,
 } from './constants';
 
 const initialState = fromJS({
   uploadedAssetData: {},
   createTemplateInProgress: false,
+  getMetaTagsRequest: false,
+  metaTagsDetails: {},
+  getMetaTagsError: '',
 });
 
 function whatsappReducer(state = initialState, action) {
@@ -51,6 +58,18 @@ function whatsappReducer(state = initialState, action) {
         .set('templateDetails', action.data);
     case GET_TEMPLATE_DETAILS_FAILURE:
       return state.set('getTemplateDetailsInProgress', false);
+    case URL_META_TAGS_REQUEST:
+      return state.set('getMetaTagsRequest', true)
+        .set('metaTagsDetails', {});
+    case URL_META_TAGS_SUCCESS:
+      return state.set('getMetaTagsRequest', false)
+        .set('metaTagsDetails', action?.data);
+    case URL_META_TAGS_FAILURE:
+      return state.set('getMetaTagsRequest', false)
+      .set('getMetaTagsError', action?.error)
+      .set('metaTagsDetails', {});
+    case URL_META_TAGS_RESET:
+      return state.set('metaTagsDetails', {});
     case RESET_EDIT_TEMPLATE:
       return state.set('templateDetails', {});
     case UPLOAD_WHATSAPP_ASSET_REQUEST:

package/v2Containers/Whatsapp/sagas.js

@@ -12,6 +12,9 @@ import {
   UPLOAD_WHATSAPP_ASSET_REQUEST,
   UPLOAD_WHATSAPP_ASSET_SUCCESS,
   UPLOAD_WHATSAPP_ASSET_FAILURE,
+  URL_META_TAGS_REQUEST,
+  URL_META_TAGS_SUCCESS,
+  URL_META_TAGS_FAILURE,
 } from './constants';
 
 export function* uploadWhatsappAsset(params) {
@@ -90,11 +93,46 @@ export function* getTemplateDetails({ id }) {
   }
 }
 
+//For getMetaTags
+export function* getMetaTagsDetails({ previewUrl, callBack }) {
+  try {
+    const result = yield call(Api.getMetaTags, {
+      previewUrl,
+    });
+    if (result?.success) {
+      yield put({
+        type: URL_META_TAGS_SUCCESS,
+        data: result?.response,
+      });
+    } else {
+      if (callBack) {
+        callBack({errorMessage: result?.message});
+      }
+      yield put({
+        type: URL_META_TAGS_FAILURE,
+        error: result?.message,
+      });
+    }
+  } catch (error) {
+    if (callBack) {
+      callBack({errorMessage: error});
+    }
+    yield put({ type: URL_META_TAGS_FAILURE, error });
+  }
+}
+
 function* watchGetTemplateDetails() {
-  const watcher = yield takeLatest(
+  yield takeLatest(
     GET_TEMPLATE_DETAILS_REQUEST,
     getTemplateDetails,
   );
+}
+
+export function* watchGetMetaTagsDetails() {
+  const watcher = yield takeLatest(
+    URL_META_TAGS_REQUEST,
+    getMetaTagsDetails,
+  );
   yield take(LOCATION_CHANGE);
   yield cancel(watcher);
 }
@@ -103,4 +141,5 @@ export default [
   watchCreateTemplate,
   watchGetTemplateDetails,
   watchUploadWhatsappAsset,
+  watchGetMetaTagsDetails,
 ];

package/v2Containers/Whatsapp/styles.scss

@@ -61,6 +61,7 @@
   display: flex;
   justify-content: center;
   font-size: $FONT_SIZE_M;
+  align-items: center;
   svg {
     margin-right: $CAP_SPACE_04;
   }