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

package/v2Containers/Whatsapp/index.scss

@@ -73,7 +73,7 @@
   }
 
   .whatsapp-footer-edit-container {
-    background-color: #fafbfc;
+    background-color: $CAP_G10;
     margin: $CAP_SPACE_08 0;
     padding: $CAP_SPACE_12;
     .whatsapp-footer-edit-text {
@@ -129,6 +129,7 @@
 
   .whatsapp-button-quick-reply {
     display: inline-grid;
+    margin-top: $CAP_SPACE_24;
   }
 
   .whatsapp-optional-label {
@@ -192,4 +193,14 @@
     font-size: 0.571rem;
     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

@@ -184,6 +184,11 @@ export default defineMessages({
     defaultMessage:
       'Variable name should be numeric value from {one} to {nineteen}',
   },
+  headerUnknownVars: {
+    id: `${prefix}.headerUnknownVars`,
+    defaultMessage:
+      'Variable name should be numeric value and its always {{1}}',
+  },
   removeMultinewlineChars: {
     id: `${prefix}.removeMultinewlineChars`,
     defaultMessage:
@@ -654,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

@@ -41,14 +41,14 @@
   }
 }
 
-.whatsapp-template-header-preview { 
+.whatsapp-template-list-header-preview { 
   color: $CAP_G01;
   font-weight: $FONT_WEIGHT_MEDIUM;
   font-size: $FONT_SIZE_M;
   margin-bottom: $CAP_SPACE_08;
 }
 
-.whatsapp-template-footer-preview {
+.whatsapp-template-list-footer-preview {
   color: $CAP_G04;
   font-weight: $FONT_WEIGHT_REGULAR;
   font-size: $FONT_SIZE_VS;
@@ -56,11 +56,14 @@
   margin-bottom: $CAP_SPACE_08;
 }
 
-.whatsapp-list-cta-preview {
+.whatsapp-list-quick-reply-preview {
   margin: $CAP_SPACE_12 0;
   display: flex;
   justify-content: center;
   font-size: $FONT_SIZE_M;
+  svg {
+    margin-right: $CAP_SPACE_04;
+  }
 }
 
 .whatsapp-list-view-divider {