npm - @capillarytech/creatives-library - Versions diffs - 7.12.72 → 7.12.74 - Mend

@capillarytech/creatives-library 7.12.72 → 7.12.74

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/package.json +1 -1
package/utils/cdnTransformation.js +142 -79
package/v2Containers/CreativesContainer/index.js +18 -40
package/v2Containers/Rcs/index.js +4 -1

package/package.json CHANGED Viewed

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

package/utils/cdnTransformation.js CHANGED Viewed

@@ -1,91 +1,154 @@
+import cloneDeep from 'lodash/cloneDeep';
+/* eslint-disable no-unused-expressions */
 import { parse } from 'node-html-parser';
-// const sample = {
-//   versions: {
-//     base: {
-//       activeTab: "en",
-//       en: {
-//         "lang_id": 69,
-//         "iso_code": "en",
-//         "language": "English",
-//         "template-content": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional //EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n<html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\" xmlns:v=\"urn:schemas-microsoft-com:vml\">\n<head><!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"><meta name=\"viewport\" content=\"width=device-width\"><!--[if !mso]><!--><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><!--<![endif]-->\n\t<title></title>\n\t<!--[if !mso]><!--><!--<![endif]-->\n\t<style type=\"text/css\">body {\n  margin: 0;\n  padding: 0; }\n\ntable,\ntd,\ntr {\n  vertical-align: top;\n  border-collapse: collapse; }\n\n* {\n  line-height: inherit; }\n\na[x-apple-data-detectors=true] {\n  color: inherit !important;\n  text-decoration: none !important; }\n\t</style>\n\t<style id=\"media-query\" type=\"text/css\">@media (max-width: 520px) {\n  .block-grid,\n.col {\n    min-width: 320px !important;\n    max-width: 100% !important;\n    display: block !important;\n  }\n\n  .block-grid {\n    width: 100% !important;\n  }\n\n  .col {\n    width: 100% !important;\n  }\n\n  .col > div {\n    margin: 0 auto;\n  }\n\n  img.fullwidth,\nimg.fullwidthOnMobile {\n    max-width: 100% !important;\n  }\n\n  .no-stack .col {\n    min-width: 0 !important;\n    display: table-cell !important;\n  }\n\n  .no-stack.two-up .col {\n    width: 50% !important;\n  }\n\n  .no-stack .col.num4 {\n    width: 33% !important;\n  }\n\n  .no-stack .col.num8 {\n    width: 66% !important;\n  }\n\n  .no-stack .col.num4 {\n    width: 33% !important;\n  }\n\n  .no-stack .col.num3 {\n    width: 25% !important;\n  }\n\n  .no-stack .col.num6 {\n    width: 50% !important;\n  }\n\n  .no-stack .col.num9 {\n    width: 75% !important;\n  }\n\n  .video-block {\n    max-width: none !important;\n  }\n\n  .mobile_hide {\n    min-height: 0px;\n    max-height: 0px;\n    max-width: 0px;\n    display: none;\n    overflow: hidden;\n    font-size: 0px;\n  }\n\n  .desktop_hide {\n    display: block !important;\n    max-height: none !important;\n  }\n}\n\t</style>\n</head>\n<body class=\"clean-body\" style=\"margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: #FFFFFF;\"><!--[if IE]><div class=\"ie-browser\"><![endif]-->\n<p>asdf</p>\n\n<table bgcolor=\"#FFFFFF\" cellpadding=\"0\" cellspacing=\"0\" class=\"nl-container\" role=\"presentation\" style=\"background-color:#ffffff; border-collapse:collapse; border-spacing:0; margin:0 auto; min-width:320px; mso-table-lspace:0pt; mso-table-rspace:0pt; table-layout:fixed; vertical-align:top; width:100%\" valign=\"top\">\n\t<tbody>\n\t\t<tr style=\"vertical-align:top\" valign=\"top\">\n\t\t\t<td style=\"vertical-align:top; word-break:break-word\"><!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td align=\"center\" style=\"background-color:#FFFFFF\"><![endif]-->\n\t\t\t<div style=\"background-color:transparent\">\n\t\t\t<div class=\"block-grid\" style=\"background-color:transparent; margin-bottom:0px; margin-left:0px; margin-right:0px; margin-top:0px; max-width:500px; min-width:320px; overflow-wrap:break-word; word-break:break-word; word-wrap:break-word\">\n\t\t\t<div style=\"background-color:transparent; border-collapse:collapse; display:table; width:100%\"><!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"background-color:transparent;\"><tr><td align=\"center\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width:500px\"><tr class=\"layout-full-width\" style=\"background-color:transparent\"><![endif]--><!--[if (mso)|(IE)]><td align=\"center\" width=\"500\" style=\"background-color:transparent;width:500px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;\" valign=\"top\"><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;\"><![endif]-->\n\t\t\t<div class=\"col num12\" style=\"display:table-cell; max-width:500px; min-width:320px; vertical-align:top; width:500px\">\n\t\t\t<div style=\"width:100% !important\"><!--[if (!mso)&(!IE)]><!-->\n\t\t\t<div style=\"border-bottom:0px solid transparent; border-left:0px solid transparent; border-right:0px solid transparent; border-top:0px solid transparent; padding-bottom:5px; padding-left:0px; padding-right:0px; padding-top:5px\"><!--<![endif]--><!--[if (!mso)&(!IE)]><!--></div>\n\t\t\t<!--<![endif]--></div>\n\t\t\t</div>\n\t\t\t<!--[if (mso)|(IE)]></td></tr></table><![endif]--><!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]--></div>\n\t\t\t</div>\n\t\t\t</div>\n\t\t\t<!--[if (mso)|(IE)]></td></tr></table><![endif]--></td>\n\t\t</tr>\n\t</tbody>\n</table>\n<!--[if (IE)]></div><![endif]--></body>\n</html>\n",
-//         "drag_drop_id": "",
-//         "tabKey": "5",
-//       },
-//       selectedLanguages: [
-//         "en",
-//       ],
-//       base: true,
-//       tabKey: "5",
-//       subject: "asdf",
-//     },
-//     history: [
-//       {
-//         activeTab: "en",
-//         en: {
-//           "lang_id": 69,
-//           "iso_code": "en",
-//           "language": "English",
-//           "template-content": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional //EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">\n<html xmlns=\"http://www.w3.org/1999/xhtml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\" xmlns:v=\"urn:schemas-microsoft-com:vml\">\n<head><!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--><meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"><meta name=\"viewport\" content=\"width=device-width\"><!--[if !mso]><!--><meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"><!--<![endif]-->\n\t<title></title>\n\t<!--[if !mso]><!--><!--<![endif]-->\n\t<style type=\"text/css\">body {\n  margin: 0;\n  padding: 0; }\n\ntable,\ntd,\ntr {\n  vertical-align: top;\n  border-collapse: collapse; }\n\n* {\n  line-height: inherit; }\n\na[x-apple-data-detectors=true] {\n  color: inherit !important;\n  text-decoration: none !important; }\n\t</style>\n\t<style id=\"media-query\" type=\"text/css\">@media (max-width: 520px) {\n  .block-grid,\n.col {\n    min-width: 320px !important;\n    max-width: 100% !important;\n    display: block !important;\n  }\n\n  .block-grid {\n    width: 100% !important;\n  }\n\n  .col {\n    width: 100% !important;\n  }\n\n  .col > div {\n    margin: 0 auto;\n  }\n\n  img.fullwidth,\nimg.fullwidthOnMobile {\n    max-width: 100% !important;\n  }\n\n  .no-stack .col {\n    min-width: 0 !important;\n    display: table-cell !important;\n  }\n\n  .no-stack.two-up .col {\n    width: 50% !important;\n  }\n\n  .no-stack .col.num4 {\n    width: 33% !important;\n  }\n\n  .no-stack .col.num8 {\n    width: 66% !important;\n  }\n\n  .no-stack .col.num4 {\n    width: 33% !important;\n  }\n\n  .no-stack .col.num3 {\n    width: 25% !important;\n  }\n\n  .no-stack .col.num6 {\n    width: 50% !important;\n  }\n\n  .no-stack .col.num9 {\n    width: 75% !important;\n  }\n\n  .video-block {\n    max-width: none !important;\n  }\n\n  .mobile_hide {\n    min-height: 0px;\n    max-height: 0px;\n    max-width: 0px;\n    display: none;\n    overflow: hidden;\n    font-size: 0px;\n  }\n\n  .desktop_hide {\n    display: block !important;\n    max-height: none !important;\n  }\n}\n\t</style>\n</head>\n<body class=\"clean-body\" style=\"margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: #FFFFFF;\"><!--[if IE]><div class=\"ie-browser\"><![endif]-->\n<p>asdf</p>\n\n<table bgcolor=\"#FFFFFF\" cellpadding=\"0\" cellspacing=\"0\" class=\"nl-container\" role=\"presentation\" style=\"background-color:#ffffff; border-collapse:collapse; border-spacing:0; margin:0 auto; min-width:320px; mso-table-lspace:0pt; mso-table-rspace:0pt; table-layout:fixed; vertical-align:top; width:100%\" valign=\"top\">\n\t<tbody>\n\t\t<tr style=\"vertical-align:top\" valign=\"top\">\n\t\t\t<td style=\"vertical-align:top; word-break:break-word\"><!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td align=\"center\" style=\"background-color:#FFFFFF\"><![endif]-->\n\t\t\t<div style=\"background-color:transparent\">\n\t\t\t<div class=\"block-grid\" style=\"background-color:transparent; margin-bottom:0px; margin-left:0px; margin-right:0px; margin-top:0px; max-width:500px; min-width:320px; overflow-wrap:break-word; word-break:break-word; word-wrap:break-word\">\n\t\t\t<div style=\"background-color:transparent; border-collapse:collapse; display:table; width:100%\"><!--[if (mso)|(IE)]><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"background-color:transparent;\"><tr><td align=\"center\"><table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width:500px\"><tr class=\"layout-full-width\" style=\"background-color:transparent\"><![endif]--><!--[if (mso)|(IE)]><td align=\"center\" width=\"500\" style=\"background-color:transparent;width:500px; border-top: 0px solid transparent; border-left: 0px solid transparent; border-bottom: 0px solid transparent; border-right: 0px solid transparent;\" valign=\"top\"><table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\"><tr><td style=\"padding-right: 0px; padding-left: 0px; padding-top:5px; padding-bottom:5px;\"><![endif]-->\n\t\t\t<div class=\"col num12\" style=\"display:table-cell; max-width:500px; min-width:320px; vertical-align:top; width:500px\">\n\t\t\t<div style=\"width:100% !important\"><!--[if (!mso)&(!IE)]><!-->\n\t\t\t<div style=\"border-bottom:0px solid transparent; border-left:0px solid transparent; border-right:0px solid transparent; border-top:0px solid transparent; padding-bottom:5px; padding-left:0px; padding-right:0px; padding-top:5px\"><!--<![endif]--><!--[if (!mso)&(!IE)]><!--></div>\n\t\t\t<!--<![endif]--></div>\n\t\t\t</div>\n\t\t\t<!--[if (mso)|(IE)]></td></tr></table><![endif]--><!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]--></div>\n\t\t\t</div>\n\t\t\t</div>\n\t\t\t<!--[if (mso)|(IE)]></td></tr></table><![endif]--></td>\n\t\t</tr>\n\t</tbody>\n</table>\n<!--[if (IE)]></div><![endif]--></body>\n</html>\n",
-//           "drag_drop_id": "",
-//           "tabKey": "5",
-//         },
-//         selectedLanguages: [
-//           "en",
-//         ],
-//         base: true,
-//         tabKey: "5",
-//         subject: "asdf",
-//       },
-//     ],
-//   },
-//   type: "EMAIL",
-//   name: "asdf",
-// };
 // 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/cdn-cgi/image`;
+const CDN_BASE_URL = `https://storage.crm.n.content-cdn.io`;
+const CDN_TRANSFORMATION_URL_SUFFIX = `/cdn-cgi/image/`;
 const QUALITY = 75;
-const regex = /intouch_creative_assets/;
+const regex = /https:\/\/.*intouch_creative_assets.*(?:jpg|png|jpeg|gif)$/;
+const INTOUCH_CREATIVE_ASSETS = 'intouch_creative_assets';
-const updateImagesInHtml = (htmlContents) => {
-  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 [, assetKey] = imageSrc.split(regex);
+/**
+ * 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;
-      let newUrl = `${CDN_BASE_URL}/`;
-      if (height) {
-        newUrl += `height=${height},`;
-      }
-      if (width) {
-        newUrl += `width=${width},`;
-      }
-      newUrl += `quality=${QUALITY}`;
-      newUrl += `/intouch_creative_assets${assetKey}`;
-      element.setAttribute('src', newUrl);
+  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},`;
     }
-  });
-  return root.toString();
+    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) => {
-  console.log('hello contents', contents);
-  console.log('hello history', contents?.versions?.history);
-  const history = contents?.versions?.history;
-  const languages = history?.[0]?.selectedLanguages;
-  console.log('hello languages', languages);
-  languages?.forEach((lang) => {
-    const htmlContents = history?.[0]?.[lang]?.['template-content'];
-    const newHtmlContents = updateImagesInHtml(htmlContents);
-    history[0][lang]['template-content'] = newHtmlContents;
-    console.log('hello template contents', history?.[0]?.[lang]?.['template-content']);
-  });
-  return 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/v2Containers/CreativesContainer/index.js CHANGED Viewed

@@ -33,6 +33,7 @@ import { CREATIVE } from '../Facebook/constants';
 import { LOYALTY } from '../App/constants';
 import { WHATSAPP_STATUSES } from '../Whatsapp/constants';
+import {updateImagesInHtml} from '../../utils/cdnTransformation';
 const classPrefix = 'add-creatives-section';
 const CREATIVES_CONTAINER = 'creativesContainer';
@@ -369,15 +370,15 @@ export class Creatives extends React.Component {
           const {
             messageBody = '',
             templateConfigs: {
+              id,
               name,
               template,
               varMapped,
-              category,
               language,
+              category,
+              mediaType,
               buttonType = 'NONE',
               buttons = [],
-              mediaType = 'TEXT',
-              whatsappMedia: { url: imageUrl = '' } = {},
             } = {},
           } = templateData;
           const modifiedButtons = cloneDeep(buttons).map((btn) => {
@@ -388,13 +389,9 @@ export class Creatives extends React.Component {
             }
             return btn;
           });
-          for (const key in varMapped) {
-            if (key.includes('_unsubscribe')) {
-              delete varMapped[key];
-            }
-          }
           const unsubscribeRegex = /Click {{unsubscribe}} to unsubscribe/g;
           creativesTemplateData = {
+            _id: id,
             type: constants.WHATSAPP,
             edit: true,
             name,
@@ -406,7 +403,6 @@ export class Creatives extends React.Component {
                     category,
                     varMapped,
                     mediaType,
-                    imageUrl,
                     buttonType,
                     buttons: modifiedButtons,
                     languages: [
@@ -456,7 +452,8 @@ export class Creatives extends React.Component {
     return templateData || null;
   }
-  getCreativesData = (channel, template, templateRecords) => { //from creatives to consumers
+  getCreativesData = (channel, template, templateRecords) => {
+     //from creatives to consumers
     let templateData = { channel };
     switch (channel) {
       case constants.SMS:
@@ -495,7 +492,8 @@ export class Creatives extends React.Component {
           if (!html_content) {
             emailBase = templateRecords.base;
           }
-          templateData = {...templateData, ...emailBase, emailBody: html_content, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : ''};
+          const newHtmlContent = updateImagesInHtml(html_content);
+          templateData = {...templateData, ...emailBase, emailBody: newHtmlContent, emailSubject: (emailBase && emailBase.subject) ? emailBase.subject : ''};
           delete templateData.html_content;
           delete templateData.subject;
         }
@@ -587,63 +585,43 @@ export class Creatives extends React.Component {
       case constants.WHATSAPP:
         if (template.value) {
           const { Templates, templateData: templateDataProps } = this.props;
-          const selectedWhatsappAccount = Templates?.selectedWhatsappAccount;
           const { accountDetails: selectedAccountDetails, accountId: selectedAccountId } = templateDataProps || {};
+          const selectedWhatsappAccount = Templates?.selectedWhatsappAccount;
           const accountDetails = (selectedWhatsappAccount ? selectedWhatsappAccount : selectedAccountDetails);
           const accountId = selectedAccountId || (selectedWhatsappAccount?.id || '');
           const { versions } = template.value;
           const {
             languages = [{}],
-            mediaType = 'TEXT',
-            category = '',
-            templateEditor = '',
-            varMapped = {},
+            mediaType,
+            category,
+            templateEditor,
+            varMapped,
             buttonType = 'NONE',
             buttons = [],
-            imageUrl = '',
           } = cloneDeep(versions.base.content.whatsapp);
           const modifiedButtons = cloneDeep(buttons).map((btn) => {
             if (btn.type === 'PHONE_NUMBER') {
               btn.phoneNumber = btn.phone_number;
               delete btn.phone_number;
-            } else if (btn.type === 'DYNAMIC_URL') {
-              const dynamicUrlPayload = btn.url.match(/{{(.*?)}}/g);
-              btn.dynamicUrlPayload = dynamicUrlPayload.length === 1 ? dynamicUrlPayload[0] : '';
+              return btn;
             }
             return btn;
           });
-          //to send {{unsubscribe}} to backend inside varMapped
-          const unsubscribeRegex = /Click {{unsubscribe}} to unsubscribe/g;
-          if (
-            languages[0].content?.match(unsubscribeRegex)?.length > 0 &&
-            Object.keys(varMapped)?.every(
-              (key) => !key?.includes("_unsubscribe")
-            )
-          ) {
-            varMapped[`{{${Object.keys(varMapped).length + 1}}}_unsubscribe`] =
-              "{{unsubscribe}}";
-          }
           templateData = {
             channel,
             accountId,
             accountName: accountDetails?.name || '',
             messageBody: languages[0].content,
             templateConfigs: {
-              id: template?.value?.name,
+              id: template._id,
               name: template?.value?.name,
               template: templateEditor,
               varMapped,
               category,
               language: languages[0].language,
-              buttonType,
-              buttons: modifiedButtons,
               mediaType,
-              whatsappMedia: {
-                url: imageUrl,
-              },
+              buttonType,
+              buttons : modifiedButtons,
             },
           };
         }

package/v2Containers/Rcs/index.js CHANGED Viewed

@@ -81,6 +81,9 @@ import Templates from '../Templates';
 import SmsTraiEdit from '../SmsTrai/Edit';
 import TagList from '../TagList';
 import { validateTags } from '../../utils/tagValidations';
+import { getCdnUrl } from '../../utils/cdnTransformation';
 const { Group: CapCheckboxGroup } = CapCheckbox;
 export const Rcs = (props) => {
   const {
@@ -900,7 +903,7 @@ export const Rcs = (props) => {
                   ...(suggestions.length > 0 && { suggestions }),
                   ...(!isMediaTypeNone && {
                     media: {
-                      mediaUrl: rcsImageSrc,
+                      mediaUrl: getCdnUrl({url: rcsImageSrc}),
                       height: MEDIUM,
                     },
                   }),