@capillarytech/creatives-library 7.18.0-beta.0 → 8.0.0

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,8 @@
 
   .whatsapp-button-quick-reply {
     display: inline-grid;
+    margin-top: $CAP_SPACE_24;
+    margin-bottom: 0.75rem;
   }
 
   .whatsapp-optional-label {
@@ -148,5 +168,75 @@
       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.5rem;
+    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;
+  }
+  .whatsapp-extra-security-footer {
+    margin-bottom: 1rem;
+    display: flex;
+    justify-content: flex-start;
+    flex-direction: column;
+    padding-left: $CAP_SPACE_16;
+    gap: $CAP_SPACE_08;
+
+    .whatsapp-extra-security-footer-note {
+      font-size: small;
+      margin-top: $CAP_SPACE_04;
+      display: inline-flex;
+      padding-left: $CAP_SPACE_12;
+      border-radius: $CAP_SPACE_04 0px 0px 0px;
+      background: #D4E1FC;
+      align-items: center;
+      justify-content: space-between;
+
+      .add-btn {
+        display: flex;
+        background-color: inherit;
+        align-items: center;
+      }
+    }
+
+    .whatsapp-extra-security-footer-input {
+      display: inline-flex;
+      align-items: center;
+      gap: $CAP_SPACE_04;
+    }
+  }
+
+}
+.whatsapp-tooltip-header{
+  color: $CAP_G10;
 }

package/v2Containers/Whatsapp/messages.js

@@ -15,6 +15,10 @@ export default defineMessages({
     defaultMessage:
       'Template name can only contain lowercase alphanumeric characters and underscores',
   },
+  templateNameMinCharacters: {
+    id: `${prefix}.templateNameMinCharacters`,
+    defaultMessage: 'Template name should contain atleast 3 characters',
+  },
   templateCategoryLabel: {
     id: `${prefix}.templateCategoryLabel`,
     defaultMessage: 'Template category',
@@ -180,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:
@@ -189,6 +198,10 @@ export default defineMessages({
     id: `${prefix}.noContentBetweenVars`,
     defaultMessage: 'Add atleast 1 character between 2 variables',
   },
+  noPercentSign: {
+    id: `${prefix}.noPercentSign`,
+    defaultMessage: 'Please remove % sign from the message content',
+  },
   sequenceVars: {
     id: `${prefix}.sequenceVars`,
     defaultMessage:
@@ -292,7 +305,7 @@ export default defineMessages({
   },
   btnDesc: {
     id: `${prefix}.btnDesc`,
-    defaultMessage: 'These will be show clickable buttons below your message.',
+    defaultMessage: 'These will be clickable buttons below your message.',
   },
   btnTypeNone: {
     id: `${prefix}.btnTypeNone`,
@@ -619,4 +632,88 @@ 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',
+  },
+  templateSecurityDisclaimer: {
+    id: `${prefix}.templateSecurityDisclaimer`,
+    defaultMessage: 'Add security disclaimer to your message',
+  },
+  expirationWarning: {
+    id: `${prefix}.expirationWarning`,
+    defaultMessage: 'Add expiry warning for code',
+  },
+  checkExpiryCode: {
+    id: `${prefix}.checkExpiryCode`,
+    defaultMessage: 'OTP settings',
+  },
+  expiryCodeNote:{
+    id: `${prefix}.expiryCodeNote`,
+    defaultMessage: 'We suggest using the same expiry time as specified in the OTP settings.',
+  },
+  codeExpiresIn:{
+    id: `${prefix}.codeExpiresIn`,
+    defaultMessage: 'This code expires in',
+  },
+  minutes:{
+    id: `${prefix}.minutes`,
+    defaultMessage: 'minutes',
+  },
+  codeExpiryNumMinutes:{
+    id: `${prefix}.codeExpiryNumMinutes`,
+    defaultMessage: 'This code expires in <num_minutes> minutes.',
+  },
+  authenticationMsg:{
+    id: `${prefix}.authenticationMsg`,
+    defaultMessage: "{{verification_code}} is your verification code.",
+  },
+  securitySuffix:{
+    id: `${prefix}.securitySuffix`,
+    defaultMessage: 'For your security, do not share this code.',
+  },
+  numMinutes:{
+    id: `${prefix}.numMinutes`,
+    defaultMessage: '<num_minutes>',
+  },
+  enterExpiryTime:{
+    id: `${prefix}.enterExpiryTime`,
+    defaultMessage: "Enter expiry time"
+  },
+  checkExpiryTooltipHeader: {
+    id: `${prefix}.checkExpiryTooltipHeader`,
+    defaultMessage: 'Open OTP settings in new tab',
+  },
+  checkExpiryTooltipDesc: {
+    id: `${prefix}.checkExpiryTooltipDesc`,
+    defaultMessage: 'To check the configured expiry time that is same for all OTPs',
+  },
 });

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

@@ -1,5 +1,6 @@
-import { take, cancel, call, put, takeLatest } from 'redux-saga/effects';
-import { LOCATION_CHANGE } from 'react-router-redux';
+import { take, cancel, call, put, takeLatest, all } from 'redux-saga/effects';
+import isEmpty from 'lodash/isEmpty';
+import get from 'lodash/get';
 import * as Api from '../../services/api';
 import {
   TEMPLATE_CREATE_REQUEST,
@@ -12,6 +13,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) {
@@ -28,12 +32,10 @@ export function* uploadWhatsappAsset(params) {
   }
 }
 function* watchUploadWhatsappAsset() {
-  const watcher = yield takeLatest(
+  yield takeLatest(
     UPLOAD_WHATSAPP_ASSET_REQUEST,
     uploadWhatsappAsset,
   );
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
 }
 
 export function* sendForApprovalCreate({ payload, callback, gupshupMediaFile }) {
@@ -41,7 +43,19 @@ export function* sendForApprovalCreate({ payload, callback, gupshupMediaFile })
   try {
     const result = yield call(Api.createWhatsappTemplate, { payload, gupshupMediaFile });
     if (result?.status?.code && result.status.code >= 400) {
-      errorMsg = result?.message || result.status.code;
+      const { message, status } = result || {};
+      const errorMessageObj = get(message?.error, 'errorMessage', {});
+      if (!isEmpty(errorMessageObj)) {
+        try {
+          // If the errorMessageObj is plain JS and JSON.parse fails, catch block will assign the error msg
+          const parsedErrorMsgObj = JSON.parse(errorMessageObj);
+          errorMsg = parsedErrorMsgObj?.error?.message;
+        } catch (error) {
+          errorMsg = message;
+        }
+      } else {
+        errorMsg = message || status.code;
+      }
       throw errorMsg;
     }
     yield put({
@@ -66,12 +80,10 @@ export function* sendForApprovalCreate({ payload, callback, gupshupMediaFile })
 }
 
 function* watchCreateTemplate() {
-  const watcher = yield takeLatest(
+  yield takeLatest(
     TEMPLATE_CREATE_REQUEST,
     sendForApprovalCreate,
   );
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
 }
 
 // FOR EDIT
@@ -90,17 +102,60 @@ 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,
   );
-  yield take(LOCATION_CHANGE);
-  yield cancel(watcher);
+}
+
+export function* watchGetMetaTagsDetails() {
+  yield takeLatest(
+    URL_META_TAGS_REQUEST,
+    getMetaTagsDetails,
+  );
 }
 
 export default [
   watchCreateTemplate,
   watchGetTemplateDetails,
   watchUploadWhatsappAsset,
+  watchGetMetaTagsDetails,
 ];
+
+export function* v2WhatsappSagas() {
+  yield all([
+    watchCreateTemplate(),
+    watchGetTemplateDetails(),
+    watchUploadWhatsappAsset(),
+    watchGetMetaTagsDetails(),
+  ]);
+}

package/v2Containers/Whatsapp/styles.scss

@@ -39,4 +39,39 @@
       }
     }
   }
+}
+
+.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;
+  align-items: center;
+  svg {
+    margin-right: $CAP_SPACE_04;
+  }
+}
+
+.whatsapp-list-view-divider {
+  margin: 0;
+}
+
+.whatsapp-autofill-btn {
+  text-align: center;
+  margin-top: $CAP_SPACE_12;
 }