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

package/v2Containers/Whatsapp/index.scss

@@ -72,6 +72,24 @@
     color: $FONT_COLOR_04;
   }
 
+  .whatsapp-footer-edit-container {
+    background-color: $CAP_G10;
+    margin: $CAP_SPACE_08 0;
+    padding: $CAP_SPACE_12;
+    .whatsapp-footer-edit-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      color: $FONT_COLOR_04;
+    }
+  }
+
+  .whatsapp-create-mode-heading {
+    margin-top: $CAP_SPACE_16;
+    margin-bottom: $CAP_SPACE_06;
+    display: flex;
+    text-align: center;
+  }
+
   .whatsapp-edit-disabled {
     cursor: not-allowed;
     opacity: 0.5;
@@ -111,6 +129,7 @@
 
   .whatsapp-button-quick-reply {
     display: inline-grid;
+    margin-top: $CAP_SPACE_24;
   }
 
   .whatsapp-optional-label {
@@ -148,5 +167,40 @@
       left: 525px;
       color: $FONT_COLOR_05;
     }
-  }  
+  }
+  
+  .whatsapp-optional-label1 {
+    margin-left: $CAP_SPACE_04;
+    color: $FONT_COLOR_03;
+    font-weight: normal;
+    font-size: $CAP_SPACE_12;
+  }
+
+  .whatsapp-create-template-header-input {
+    margin-bottom: $CAP_SPACE_20;
+  }
+
+  .whatsapp-template-header-preview { 
+    color: $CAP_G01;
+    font-weight: $FONT_WEIGHT_MEDIUM;
+    font-size: $FONT_SIZE_VS;
+    margin-bottom: $CAP_SPACE_08;
+  }
+
+  .whatsapp-template-footer-preview {
+    color: $CAP_G04;
+    font-weight: $FONT_WEIGHT_REGULAR;
+    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:
@@ -627,4 +632,36 @@ export default defineMessages({
     id: `${prefix}.zulu`,
     defaultMessage: 'Zulu',
   },
+  templateHeaderLabel: {
+    id: `${prefix}.templateHeaderLabel`,
+    defaultMessage: 'Header',
+  },
+  templateFooterLabel: {
+    id: `${prefix}.templateFooterLabel`,
+    defaultMessage: 'Footer',
+  },
+  templateHeaderTooltip: {
+    id: `${prefix}.templateHeaderTooltip`,
+    defaultMessage: 'Header can usually include information such as the business name or a brief identifier to let the recipient know the source of the message',
+  },
+  templateFooterTooltip: {
+    id: `${prefix}.templateFooterTooltip`,
+    defaultMessage: 'Footer is optional text-only component that appears immediately after the body component',
+  },
+  templateHeaderLengthError: {
+    id: `${prefix}.templateHeaderLengthError`,
+    defaultMessage: 'Template header length cannot exceed 60',
+  },
+  templateFooterLengthError: {
+    id: `${prefix}.templateHeaderLengthError`,
+    defaultMessage: 'Template footer length cannot exceed 60',
+  },
+  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

@@ -39,4 +39,33 @@
       }
     }
   }
+}
+
+.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-list-footer-preview {
+  color: $CAP_G04;
+  font-weight: $FONT_WEIGHT_REGULAR;
+  font-size: $FONT_SIZE_VS;
+  margin-top: $CAP_SPACE_08;
+  margin-bottom: $CAP_SPACE_08;
+}
+
+.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 {
+  margin: 0;
 }