@capillarytech/creatives-library 7.12.81 → 7.12.83

package/package.json

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

package/utils/cdnTransformation.js

@@ -0,0 +1,155 @@
+import cloneDeep from 'lodash/cloneDeep';
+/* eslint-disable no-unused-expressions */
+import { parse } from 'node-html-parser';
+
+// https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=100,height=100,quality=75,fit=cover,g=top,format=auto/intouch_creative_assets/005710a7-6412-44fe-a19f-e72456b1.jpg
+
+const CDN_BASE_URL = `https://storage.crm.n.content-cdn.io`;
+const CDN_TRANSFORMATION_URL_SUFFIX = `/cdn-cgi/image/`;
+const QUALITY = 75;
+// const regex = /https:\/\/.*intouch_creative_assets.*(?:jpg|png|jpeg|gif)$/;
+const regex = /https:\/\/.*intouch_creative_assets.*$/;
+const INTOUCH_CREATIVE_ASSETS = 'intouch_creative_assets';
+
+/**
+ * getCdnUrl : utility function to replace and return s3/cdn url with cdn url.
+ */
+export const getCdnUrl = ({url, height, width, transformationEnabled = false, reduceQuality = true}) => {
+  if (!url.includes(INTOUCH_CREATIVE_ASSETS)) return url;
+
+  const [, assetKey] = url.split(INTOUCH_CREATIVE_ASSETS);
+  let newUrl = `${CDN_BASE_URL}`;
+  if (transformationEnabled || reduceQuality) {
+    newUrl += CDN_TRANSFORMATION_URL_SUFFIX;
+    if (height) {
+      newUrl += `height=${height},`;
+    }
+    if (width) {
+      newUrl += `width=${width},`;
+    }
+    newUrl += `quality=${QUALITY}`;
+  }
+  newUrl += `/intouch_creative_assets${assetKey}`;
+  return newUrl;
+};
+
+/**
+ *
+ * @param {*} htmlContents
+ * @returns htmlContents with updated urls in image tag
+ */
+export const updateImagesInHtml = (htmlContents) => {
+  const copiedHtmlContents = htmlContents;
+  try {
+    const root = parse(htmlContents);
+    root.querySelectorAll('img').forEach((element) => {
+      const imageSrc = element.getAttribute('src');
+      const isAsset = regex.test(imageSrc);
+      if (isAsset) {
+        const height = element.getAttribute('height');
+        const width = element.getAttribute('width');
+        const newUrl = getCdnUrl({url: imageSrc, height, width, transformationEnabled: true, reduceQuality: true});
+        element.setAttribute('src', newUrl);
+      }
+    });
+    return root.toString();
+  } catch (e) {
+    console.log('An error occured while updating images in html', e);
+    return copiedHtmlContents; //return received input directly in case an exception is thrown
+  }
+};
+
+/**
+ *
+ * @param {*} contents
+ * @returns
+ */
+export const transformEmailTemplates = (contents) => {
+  const contentsCopy = cloneDeep(contents);
+  try {
+    const base = contentsCopy?.versions?.base;
+    const languages = base?.selectedLanguages;
+    languages?.forEach((lang) => {
+      const htmlContents = base?.[lang]?.['template-content'];
+      const newHtmlContents = updateImagesInHtml(htmlContents);
+      base[lang]['template-content'] = newHtmlContents;
+    });
+    return contentsCopy;
+  } catch (e) {
+    console.log('Some error has occured while transforming email templates', e);
+    return contents; //return received input directly in case an exception is thrown
+  }
+};
+
+// export const transformRcsTemplates = (contents) => {
+//     const contentsCopy = cloneDeep(contents);
+// }
+
+
+// {
+//     "name": "test 1",
+//     "versions": {
+//       "base": {
+//         "content": {
+//           "RCS": {
+//             "cardContent": [
+//               {
+//                 "title": "asdf",
+//                 "description": "asdf",
+//                 "mediaType": "NONE"
+//               }
+//             ],
+//             "cardSettings": {
+//               "cardOrientation": "VERTICAL"
+//             },
+//             "cardType": "STANDALONE",
+//             "contentType": "RICHCARD",
+//             "smsFallBackContent": {
+//               "message": ""
+//             }
+//           }
+//         }
+//       }
+//     },
+//     "type": "RCS"
+//   }
+
+
+// {
+//     "name": "test 2",
+//     "versions": {
+//         "base": {
+//             "content": {
+//                 "RCS": {
+//                     "cardContent": [
+//                         {
+//                             "title": "asdfasdf",
+//                             "description": "asdfadsf",
+//                             "mediaType": "IMAGE",
+//                             "suggestions": [
+//                                 {
+//                                     "type": "CTA",
+//                                     "text": "fasdf",
+//                                     "url": "https://www.google.com"
+//                                 }
+//                             ],
+//                             "media": {
+//                                 "mediaUrl": "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/820a9ff9-ad5b-410e-b471-75c2e1a9.jpg",
+//                                 "height": "MEDIUM"
+//                             }
+//                         }
+//                     ],
+//                     "cardSettings": {
+//                         "cardOrientation": "VERTICAL"
+//                     },
+//                     "cardType": "STANDALONE",
+//                     "contentType": "RICHCARD",
+//                     "smsFallBackContent": {
+//                         "message": "asdf"
+//                     }
+//                 }
+//             }
+//         }
+//     },
+//     "type": "RCS"
+// }

package/v2Components/NewCallTask/index.js

@@ -99,7 +99,7 @@ class NewCallTask extends React.Component { // eslint-disable-line react/prefer-
   };
 
   render() {
-    const { intl, isLoading, metaEntities, selectedOfferDetails } = this.props;
+    const { intl, isLoading, metaEntities, selectedOfferDetails , injectedTags} = this.props;
     const { formatMessage } = intl;
     const { subject, messageBody, description, callTaskActionType } = this.state;
     const tags = metaEntities && metaEntities.tags ? metaEntities.tags.standard : [];
@@ -125,6 +125,7 @@ class NewCallTask extends React.Component { // eslint-disable-line react/prefer-
                   tags={tags}
                   onTagSelect={this.onTagSelect}
                   selectedOfferDetails={selectedOfferDetails}
+                  injectedTags={injectedTags}
                 />
                 <CapInput.TextArea
                   setInputRef={this.setInputRef}

package/v2Containers/CallTask/index.js

@@ -16,7 +16,7 @@ import {
 } from '@capillarytech/cap-ui-library';
 import { injectIntl, intlShape } from 'react-intl';
 import { createStructuredSelector } from 'reselect';
-import { makeSelectMetaEntities, isLoadingMetaEntities } from '../Cap/selectors';
+import { makeSelectMetaEntities, isLoadingMetaEntities, setInjectedTags } from '../Cap/selectors';
 import * as globalActions from '../Cap/actions';
 import * as actions from "./actions";
 import makeSelectCallTask from './selectors';
@@ -71,7 +71,7 @@ export class CallTask extends React.Component { // eslint-disable-line react/pre
     };
   }
   render() {
-    const { intl, onCallTaskSubmit, templateData, loadingMetaEntities, metaEntities, selectedOfferDetails, messageDetails } = this.props;
+    const { intl, onCallTaskSubmit, templateData, loadingMetaEntities, metaEntities, selectedOfferDetails, messageDetails, injectedTags } = this.props;
     const { formatMessage } = intl;
     const { mode } = this.state;
     return (
@@ -85,6 +85,7 @@ export class CallTask extends React.Component { // eslint-disable-line react/pre
             onCallTaskSubmit={onCallTaskSubmit}
             selectedOfferDetails={selectedOfferDetails}
             messageDetails={messageDetails}
+            injectedTags={injectedTags || {}}
           />
           :
             <div>
@@ -144,6 +145,7 @@ const mapStateToProps = createStructuredSelector({
   CallTask: makeSelectCallTask(),
   metaEntities: makeSelectMetaEntities(),
   loadingMetaEntities: isLoadingMetaEntities(),
+  injectedTags: setInjectedTags(),
 });
 
 function mapDispatchToProps(dispatch) {