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

package/package.json

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

package/services/api.js

@@ -504,8 +504,3 @@ 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,8 +2,7 @@ import {
   getSenderDetails,
   uploadFile,
   getCdnTransformationConfig,
-  createWhatsappTemplate,
-  getMetaTags,
+  createWhatsappTemplate
 } from '../api';
 import { mockData } from './mockData';
 const sampleFile = require('../../assets/line.png');
@@ -45,10 +44,3 @@ 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/TemplatePreview/_templatePreview.scss

@@ -520,24 +520,4 @@
 .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,7 +11,6 @@ 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';
@@ -343,37 +342,6 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       );
     };
 
-    const renderUrlPreview = (metaTags) => {
-      const renderArray = [];
-      if (!isEmpty(metaTags)) {
-        if (metaTags?.image) {
-          renderArray.push(
-            <CapImage
-              src={metaTags?.image}
-              alt={formatMessage(messages.previewUrlMetaImage)}
-              className="url-preview-image"
-            />
-          );
-        }
-        if (metaTags?.title) {
-          renderArray.push(
-            <CapLabel type="label8">{metaTags?.title}</CapLabel>
-          );
-        }
-        if (metaTags?.description) {
-          renderArray.push(
-            <CapLabel className="url-preview-description">{metaTags?.description}</CapLabel>
-          );
-        }
-        if (metaTags?.url) {
-          renderArray.push(
-            <CapLabel className="url-preview">{metaTags?.url}</CapLabel>
-          );
-        }
-      }
-      return renderArray;
-    };
-
     const handlePreview = () => {
       const {templatePreviewUrl = ''} = templateData;
       handlePreviewInNewTab(templatePreviewUrl);
@@ -788,9 +756,6 @@ 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?.isPreviewUrl && (
-                            renderUrlPreview(content?.metaTagsDetails)
-                          )}
                           {content?.whatsappImageSrc && (
                             <CapImage
                               src={content.whatsappImageSrc}

package/v2Components/TemplatePreview/messages.js

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

package/v2Containers/Whatsapp/actions.js

@@ -6,8 +6,6 @@ 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) {
@@ -57,17 +55,3 @@ 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,12 +31,6 @@ 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

@@ -181,12 +181,9 @@ export const Whatsapp = (props) => {
   const [headerTextAreaId, setHeaderTextAreaId] = useState('');
   const [isHeaderTagValidationError, updateIsHeaderTagValidationError] =
     useState(false);
-  const [isPreviewUrl, setIsPreviewUrl] = useState(false);
-  const [previewUrl, setPreviewUrl] = useState('');
 
   const validVarRegex = /{{([1-9]|1[0-9])}}/g;
   const headerValidVarRegex = /{{(1)}}/g;
-  const urlMatchingRegex = /(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:\/~+#-]*[\w@?^=%&\/~+#-])/g;
 
   const isBtnTypeCta = buttonType === WHATSAPP_BUTTON_TYPES.CTA;
   const isBtnTypeQuickReply = buttonType === WHATSAPP_BUTTON_TYPES.QUICK_REPLY;
@@ -271,7 +268,6 @@ export const Whatsapp = (props) => {
         videoPreviewImg = '',
         whatsappDocParams = {},
         whatsappMedia: { header = '', footer = '' } = {},
-        isPreviewUrl: showUrlPreview = false,
       } = editContent;
       setTemplateCategory(category);
       setTemplateStatus(status);
@@ -295,7 +291,6 @@ export const Whatsapp = (props) => {
       setButtonType(btnType);
       setTemplateFooter(footer);
       setTemplateHeader(header);
-      setIsPreviewUrl(showUrlPreview);
       if (btnType === WHATSAPP_BUTTON_TYPES.CTA && buttons.length > 0) {
         setCtadata(
           buttons.map((cta) => {
@@ -430,12 +425,6 @@ export const Whatsapp = (props) => {
           arr[key.slice(key.indexOf('_') + 1)] = varMap[key];
         }
       }
-      if (arr?.length) {
-        const validUrls = arr.join("").match(urlMatchingRegex) || [];
-        if (validUrls && validUrls?.length) {
-          setPreviewUrl(validUrls?.[0] || '')
-        }
-      }
       setUpdatedSmsEditor(arr);
     }
   }, [tempMsgArray]);
@@ -478,7 +467,7 @@ export const Whatsapp = (props) => {
 
   const tagValidation = (contentData, regex, type) => {
     if (contentData?.length > 0 && !contentData.join("").match(regex)) {
-      let validationResponse =
+      tagValidationResponse =
         validateTags({
           content: contentData.join(""),
           tagsParam: tags,
@@ -486,45 +475,16 @@ export const Whatsapp = (props) => {
           location,
           tagModule: getDefaultTags,
         }) || {};
-      if (type === HEADER_TEXT) {
-        headerTagValidationResponse = validationResponse;
-        updateIsHeaderTagValidationError(
-          validationResponse?.unsupportedTags?.length > 0
-        );
-      } else {
-        tagValidationResponse = validationResponse;
-        updateIsTagValidationError(
-          validationResponse?.unsupportedTags?.length > 0
-        );
-      }
+      type === HEADER_TEXT
+        ? updateIsHeaderTagValidationError(
+            tagValidationResponse?.unsupportedTags?.length > 0
+          )
+        : updateIsTagValidationError(
+            tagValidationResponse?.unsupportedTags?.length > 0
+          );
     }
   };
 
-  useEffect(() => {
-    if (updatedSmsEditor?.length > 0) {
-      const previewUrlArr = updatedSmsEditor.join("").match(urlMatchingRegex) || [];
-      if (previewUrlArr && previewUrlArr?.length) {
-        setPreviewUrl(previewUrlArr[0]);
-      } else {
-        setPreviewUrl('');
-      }
-    } 
-  }, [updatedSmsEditor])
-
-  useEffect(() => {
-    if (!isEmpty(previewUrl) && isPreviewUrl) {
-      const watingTimeFn = setTimeout(() => {
-        actions.getMetaTags({
-          previewUrl,
-          callBack: actionCallback,
-        })
-      }, 1000);
-      return () => clearTimeout(watingTimeFn);
-    } else {
-      actions.resetMetaTags();
-    }
-  }, [previewUrl, isPreviewUrl])
-
   //performs tag validation
   useEffect(() => {
     if (!isFullMode)
@@ -827,10 +787,6 @@ export const Whatsapp = (props) => {
     setTemplateMessageError(error);
   };
 
-  const previewUrlHandler = ({ target: { checked } }) => {
-    setIsPreviewUrl(checked);
-  }
-
   const renderUnsubscribeText = () => {
     const isDisabled =
       isEditFlow ||
@@ -1290,9 +1246,6 @@ export const Whatsapp = (props) => {
                   footer: templateFooter || ""
                 }),
               },
-              ...(isEditFlow && !isFullMode && {
-                isPreviewUrl
-              })
             },
           },
         },
@@ -1859,7 +1812,7 @@ export const Whatsapp = (props) => {
           {isHeaderTagValidationError && tagValidationErrorMessage(HEADER_TEXT)}
           {computeTextLength(HEADER_TEXT) > TEMPLATE_HEADER_MAX_LENGTH && (
             <CapError>
-              {formatMessage(messages.templateHeaderLengthError)}
+              {formatMessage(messages.templateMessageLengthError)}
             </CapError>
           )}
         </>
@@ -1906,19 +1859,6 @@ export const Whatsapp = (props) => {
       ) : (
         ""
       )}
-      <CapRow>
-        <CapCheckbox
-          className={`whatsapp-unsubscribe-checkbox ${'whatsapp-create-unsubscribe-checkbox'}`}
-          onChange={previewUrlHandler}
-          checked={isPreviewUrl}
-          disabled={!isMediaTypeText}
-          autoFocus={true}
-        >
-          <span className="whatsapp-render-url-preview-textt">
-            {formatMessage(messages.showUrlPreview)}
-          </span>
-        </CapCheckbox>
-      </CapRow>
       {templateFooter && isHostIsNotTwilio && (
         <>
           <CapHeader
@@ -1982,7 +1922,6 @@ export const Whatsapp = (props) => {
 
   //used by create and edit
   const getPreviewSection = () => {
-    const { metaTagsDetails = {} } = editData || {};
     const templateMsg = (
       <>
         <CapLabel type="label5">
@@ -2034,10 +1973,6 @@ export const Whatsapp = (props) => {
           ...(isBtnTypeQuickReply && {
             quickReplyData,
           }),
-          ...(isMediaTypeText && isPreviewUrl && {
-            isPreviewUrl,
-            metaTagsDetails,
-          }),
         }}
         whatsappContentLen={computeTextLength()}
         whatsappAccountName={accountName}

package/v2Containers/Whatsapp/index.scss

@@ -197,10 +197,4 @@
   .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,9 +659,5 @@ 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,18 +12,11 @@ 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) {
@@ -58,18 +51,6 @@ 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,9 +12,6 @@ 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) {
@@ -93,46 +90,11 @@ 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() {
-  yield takeLatest(
+  const watcher = 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);
 }
@@ -141,5 +103,4 @@ export default [
   watchCreateTemplate,
   watchGetTemplateDetails,
   watchUploadWhatsappAsset,
-  watchGetMetaTagsDetails,
 ];