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

package/containers/Cap/sagas.js

@@ -1,4 +1,5 @@
 import { fork, take, call, put, cancelled, cancel, takeLatest } from 'redux-saga/effects';
+import { getRedirectionUrl } from '@capillarytech/cap-ui-utils/utils/logoutUtil';
 import { LOCATION_CHANGE } from 'react-router-redux';
 // import { normalize } from 'normalizr';
 import * as Api from '../../services/api';
@@ -51,18 +52,19 @@ export function* loginFlow() {
   }
 }
 
-function* logoutFlow() {
+export function* logoutFlow() {
   try {
     const serverLogout = yield call(Api.logout);
     if (serverLogout.success && serverLogout.success === true) {
-      const loginUrl = (process.env.NODE_ENV === 'production') ?
-        `${config.production.login_url}` : `${config.development.login_url}`;
+      const redirectUrl = getRedirectionUrl({
+        redirectUri: serverLogout?.redirectUri,
+      });
       yield [put({type: types.LOGOUT_SUCCESS})];
       yield call(LocalStorage.clearItem, 'token');
       yield call(LocalStorage.clearItem, 'orgID');
       yield call(LocalStorage.clearItem, 'user');
       yield call(LocalStorage.clearItem, 'isLoggedIn');
-      window.location.href = `${window.location.origin}${loginUrl}`;
+      window.location.href = redirectUrl;
     }
   } catch (error) {
     yield put({ type: types.LOGOUT_FAILURE, error });
@@ -128,7 +130,7 @@ function* watchForOrgChange() {
   yield takeLatest(types.SWITCH_ORG_REQUEST, switchOrg);
 }
 
-function* watchForLogoutFlow() {
+export function* watchForLogoutFlow() {
   yield takeLatest(types.LOGOUT_REQUEST, logoutFlow);
 }
 

package/containers/Cap/tests/saga.test.js

@@ -1,10 +1,18 @@
+import { expectSaga } from 'redux-saga-test-plan';
+import { throwError } from 'redux-saga-test-plan/providers';
+import * as matchers from 'redux-saga-test-plan/matchers';
 import { authorize, loginFlow } from '../sagas';
-import { take, fork, cancel } from 'redux-saga/effects';
+import * as api from '../../../services/api';
+import { take, fork, cancel, takeLatest } from 'redux-saga/effects';
 import {
   LOGIN_REQUEST,
   LOGIN_FAILURE,
   LOGOUT_REQUEST,
+  LOGOUT_SUCCESS,
+  LOGOUT_FAILURE,
 } from '../constants';
+import {logoutFlow, watchForLogoutFlow } from '../sagas';
+const error = new Error('error');
 describe('loginFlow', () => {
   it('should handle the login flow', () => {
     const generator = loginFlow();
@@ -28,4 +36,76 @@ describe('loginFlow', () => {
     }
     catch{}
   });
+});
+describe('logoutFlow [Unit Test]', () => {
+  describe('logoutFlow saga', () => {
+    it('handle valid response from api', async () => {
+      expectSaga(logoutFlow)
+        .provide([
+          [
+            matchers.call.fn(api.logout),
+            {
+              success: true,
+              message: 'message',
+            },
+          ],
+        ])
+        .put({
+          type: LOGOUT_SUCCESS,
+          result: 'message',
+        })
+        .run();
+    });
+
+    it('handle invalid response from api', async () => {
+      expectSaga(logoutFlow)
+        .provide([
+          [
+            matchers.call.fn(api.logout),
+            {
+              success: false,
+              message: 'message',
+            },
+          ],
+        ])
+        .run();
+    });
+
+    it('handle error response from api', async () => {
+      expectSaga(logoutFlow)
+        .provide([
+          [
+            matchers.call.fn(api.logout),
+            {
+              success: false,
+              error,
+            },
+          ],
+        ])
+        .put({
+          type: LOGOUT_FAILURE,
+          error,
+        })
+        .run();
+    });
+
+    it('handles error thrown from api', async () => {
+      expectSaga(logoutFlow)
+        .provide([[matchers.call.fn(api.logout), throwError(error)]])
+        .put({
+          type: LOGOUT_FAILURE,
+          error,
+        })
+        .run();
+    });
+  });
+
+  describe('watchForLogoutFlow saga', () => {
+    const generator = watchForLogoutFlow();
+    it('should call watchers functions', async () => {
+      expect(generator.next().value).toEqual(
+        takeLatest(LOGOUT_REQUEST, logoutFlow),
+      );
+    });
+  });
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.17.82-alpha.0",
+  "version": "7.17.82-alpha.1",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -15,7 +15,7 @@
     "@babel/polyfill": "7.4.3",
     "@bugsnag/js": "^7.2.1",
     "@bugsnag/plugin-react": "^7.2.1",
-    "@capillarytech/cap-ui-utils": "1.4.2",
+    "@capillarytech/cap-ui-utils": "1.4.24",
     "@mailupinc/bee-plugin": "^1.2.0",
     "babel-cli": "^6.26.0",
     "chalk": "1.1.3",

package/services/api.js

@@ -504,3 +504,8 @@ export const getTemplateInfoById = ({id, username, oa_id, token}) => {
   const url = `${API_ENDPOINT}/templates/${id}/Zalo?username=${username}&oa_id=${oa_id}&token=${token}`;
   return request(url, getAPICallObject('GET'));
 };
+
+export const getMetaTags = ({previewUrl}) => {
+  const url = `${API_ENDPOINT}/common/getMetaTags?url=${previewUrl}`;
+  return request(url, getAPICallObject('GET'));
+};

package/services/tests/api.test.js

@@ -2,7 +2,8 @@ import {
   getSenderDetails,
   uploadFile,
   getCdnTransformationConfig,
-  createWhatsappTemplate
+  createWhatsappTemplate,
+  getMetaTags,
 } from '../api';
 import { mockData } from './mockData';
 const sampleFile = require('../../assets/line.png');
@@ -44,3 +45,10 @@ describe('createWhatsappTemplate -- Test with valid responses', () => {
       createWhatsappTemplate(sampleFile, mockData.createWhatsappPayload),
     ).toEqual(Promise.resolve()));
 });
+
+describe('getMetaTags -- Test with valid responses', () => {
+  it('Should return correct response', () =>
+    expect(
+      getMetaTags({previewUrl: 'https://capillarytech.com'}),
+    ).toEqual(Promise.resolve()));
+});

package/v2Components/CapWhatsappQuickReply/index.js

@@ -1,5 +1,6 @@
 import React from "react";
-import { injectIntl } from "react-intl";
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from "react-intl";
 import cloneDeep from "lodash/cloneDeep";
 import CapRow from "@capillarytech/cap-ui-library/CapRow";
 import CapHeader from "@capillarytech/cap-ui-library/CapHeader";
@@ -12,44 +13,43 @@ import CapButton from "@capillarytech/cap-ui-library/CapButton";
 import CapColumn from "@capillarytech/cap-ui-library/CapColumn";
 import CapIcon from "@capillarytech/cap-ui-library/CapIcon";
 import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
-import { CAP_SPACE_04 } from "@capillarytech/cap-ui-library/styled/variables";
 import messages from "./messages";
 import "./index.scss";
 import globalMessages from "../../v2Containers/Cap/messages";
-import { INITIAL_QUICK_REPLY_DATA } from "../../v2Containers/Whatsapp/constants";
+import { BUTTON_TEXT, INITIAL_QUICK_REPLY_DATA } from "../../v2Containers/Whatsapp/constants";
 import ctaMessages from "../CapWhatsappCTA/messages";
 
-const CapWhatsappQuickReply = ({
-  quickReplyData,
-  renderMessageLength,
-  setQuickReplyData,
-  isEditFlow,
-  intl,
-}) => {
+export const CapWhatsappQuickReply = (props) => {
+  const { quickReplyData = [], renderMessageLength, setQuickReplyData, isEditFlow, intl } = props;
   const { TextArea } = CapInput;
   const { formatMessage } = intl;
-
-  const handleTextChange = (e, index) => {
+  const quickReplyDataLength = quickReplyData?.length;
+  //this function is used for handle text field value change
+  const handleTextChange = ({target: {value = ''} = {}}, index) => {
     let error = false;
-    const {
-      target: { value },
-    } = e;
     if (value?.length > 20) {
       error = formatMessage(messages.templateButtonTextLengthError);
     }
+    //this check is for same repeated value is not allowed in another text field of quick reply
+    const checkIsValueAvailable = quickReplyData?.find((reply) => reply?.text === value);
+    if (checkIsValueAvailable) {
+      error = formatMessage(messages.templateButtonTextSameValue);
+    }
     setQuickReplyData(
-      quickReplyData.map((quickReply) => {
+      quickReplyData?.map((quickReply) => {
         if (quickReply?.index === index) {
           return {
             ...quickReply,
             text: value,
-            error: error,
+            error,
           };
-        } else return quickReply;
+        }
+        return quickReply;
       })
     );
   };
 
+  //this function is used for save the quick reply text field data and same edit the data
   const handleSaveAndEditBtn = (index, value) => {
     setQuickReplyData(
       quickReplyData.map((quickReply) => {
@@ -58,26 +58,28 @@ const CapWhatsappQuickReply = ({
             ...quickReply,
             isSaved: value,
           };
-        } else return quickReply;
+        }
+        return quickReply;
       })
     );
   };
 
+  //This function is used for delete the quick reply data for a row
   const handleDelete = (index) => {
     setQuickReplyData((prevState) => {
       const clonedQuickReplyData = cloneDeep(prevState);
       const filteredQuickReplyData = clonedQuickReplyData.filter(
-        (i) => i.index !== index
+        (i) => i?.index !== index
       );
-      return filteredQuickReplyData.map((quickReply, index) => {
-        quickReply.index = index;
-        return quickReply;
-      });
+      return filteredQuickReplyData.map((quickReply, i) => ({
+        ...quickReply,
+        index: i,
+      }));
     });
   };
 
   const addQuickReply = () => {
-    INITIAL_QUICK_REPLY_DATA[0].index = quickReplyData?.length || 0;
+    INITIAL_QUICK_REPLY_DATA[0].index = quickReplyDataLength || 0;
     const clonedQuickReplyData = [
       ...quickReplyData,
       ...INITIAL_QUICK_REPLY_DATA,
@@ -85,14 +87,15 @@ const CapWhatsappQuickReply = ({
     setQuickReplyData(clonedQuickReplyData);
   };
 
-  const quickReplyDisable =
-    quickReplyData?.length === 1 && !quickReplyData?.[0].isSaved;
+  const isQuickReplyDisable =
+    quickReplyDataLength === 1 && !quickReplyData?.[0]?.isSaved;
   return (
     <>
-      {quickReplyData?.length > 0 && !isEditFlow && (
+      {quickReplyDataLength > 0 && !isEditFlow && (
         <CapRow>
           {quickReplyData?.map(({ index, isSaved, text, error }) => {
             if (!isSaved) {
+              //this section is render textfield when its not saved or in edit condition
               return (
                 <CapRow className="cap-whatsapp-quick-reply">
                   <CapRow
@@ -106,42 +109,40 @@ const CapWhatsappQuickReply = ({
                           className="whatsapp-button-text-heading"
                         >
                           {formatMessage(messages.buttonText)}
-                          <CapTooltipWithInfo
-                            placement="right"
-                            infoIconProps={{
-                              style: { marginLeft: CAP_SPACE_04 },
-                            }}
-                            autoAdjustOverflow
+                            <CapTooltipWithInfo
+                              placement="right"
+                              className="whatsapp-button-text-tooltip"
+                              autoAdjustOverflow
                           />
                         </CapHeading>
                       }
                     />
-                    <CapRow className="whatsapp-button-text-input">
-                      <TextArea
-                        autosize={{ minRows: 1, maxRows: 5 }}
-                        placeholder={formatMessage(
+                      <CapRow className="whatsapp-button-text-input">
+                        <TextArea
+                          autosize={{ minRows: 1, maxRows: 5 }}
+                          placeholder={formatMessage(
                           messages.buttonTextPlaceholder
                         )}
-                        onChange={(e) => handleTextChange(e, index)}
-                        errorMessage={
+                          onChange={(e) => handleTextChange(e, index)}
+                          errorMessage={
                           error && (
                             <CapError className="whatsapp-template-message-error">
                               {error}
                             </CapError>
                           )
                         }
-                        value={text || ""}
+                          value={text || ""}
                       />
-                    </CapRow>
-                    {renderMessageLength("buttonText", text?.length || 0)}
-                    <CapRow className="whatsapp-cta-save-delete-btn">
-                      <CapTooltip
-                        title={
-                          text === "" || error
-                            ? formatMessage(ctaMessages.ctaSaveDisabled)
-                            : ""
+                      </CapRow>
+                    {renderMessageLength(BUTTON_TEXT, text?.length || 0)}
+                    {/* it render save and delete button */}
+                      <CapRow className="whatsapp-cta-save-delete-btn">
+                        <CapTooltip
+                          title={
+                          (text === "" || error)
+                            && formatMessage(ctaMessages.ctaSaveDisabled)
                         }
-                        placement={"bottom"}
+                          placement={"bottom"}
                       >
                         <div className="button-disabled-tooltip-wrapper">
                           <CapButton
@@ -154,57 +155,61 @@ const CapWhatsappQuickReply = ({
                             {formatMessage(globalMessages.save)}
                           </CapButton>
                         </div>
-                      </CapTooltip>
-                      <CapButton
-                        onClick={() => {
-                          handleDelete(index);
-                        }}
-                        className="whatsapp-cta-delete-btn whatsapp-quick-reply-delete-button"
-                        type="secondary"
+                        </CapTooltip>
+                          <CapButton
+                            onClick={() => {
+                              handleDelete(index);
+                            }}
+                            className="whatsapp-cta-delete-btn whatsapp-quick-reply-delete-button"
+                            type="secondary"
                       >
-                        {formatMessage(globalMessages.delete)}
-                      </CapButton>
-                    </CapRow>
+                            {formatMessage(globalMessages.delete)}
+                          </CapButton>
+                      </CapRow>
                   </CapRow>
                 </CapRow>
               );
-            } else {
-              return (
-                <CapRow className="cap-whatsapp-quick-reply">
-                  <CapRow className="whatsapp-quick-reply-save-container">
-                    <CapColumn>
-                      <CapIcon type="six-dots" />
-                    </CapColumn>
+            }
+            return (
+                //this section render when data is saved and user can edit it
+              <CapRow className="cap-whatsapp-quick-reply">
+                <CapRow className="whatsapp-quick-reply-save-container">
+                  <CapColumn>
+                    <CapIcon type="six-dots" />
+                  </CapColumn>
                     <CapColumn className="text-conatiner">{text}</CapColumn>
-                    <CapColumn className="quick-reply-icon">
-                      <CapIcon
-                        onClick={() => handleSaveAndEditBtn(index, false)}
-                        type="edit"
+                      <CapColumn className="quick-reply-icon">
+                        <CapIcon
+                          onClick={() => handleSaveAndEditBtn(index, false)}
+                          type="edit"
+                          data-testid="quick-reply-edit"
                       />
-                      <CapIcon
-                        onClick={() => handleDelete(index)}
-                        type="delete"
+                        <CapIcon
+                          onClick={() => handleDelete(index)}
+                          type="delete"
+                          data-testid="quick-reply-delete"
                       />
-                    </CapColumn>
-                  </CapRow>
+                      </CapColumn>
                 </CapRow>
+              </CapRow>
               );
-            }
           })}
         </CapRow>
       )}
-      {quickReplyData?.length > 0 && isEditFlow && 
+      {/* this section render in edit mode from campaign side */}
+      {quickReplyDataLength > 0 && isEditFlow &&
         quickReplyData.map(({text, index}) => (
-          <CapRow className='cap-whatsapp-quick-reply whatsapp-quick-reply-edit-container' key={index}>
-            <CapLabel type='label16'>{text}</CapLabel>
+          <CapRow className="cap-whatsapp-quick-reply whatsapp-quick-reply-edit-container" key={index}>
+            <CapLabel type="label16">{text}</CapLabel>
           </CapRow>
         ))
       }
-      {quickReplyData?.length < 3 && !isEditFlow && (
+      {/* this section render add button section with condition */}
+      {quickReplyDataLength < 3 && !isEditFlow && (
         <CapRow>
           <CapTooltip
             title={
-              quickReplyDisable ? formatMessage(ctaMessages.ctaAddDisabled) : ""
+              isQuickReplyDisable ? formatMessage(ctaMessages.ctaAddDisabled) : ""
             }
             placement={"right"}
           >
@@ -212,7 +217,7 @@ const CapWhatsappQuickReply = ({
               <CapButton
                 type="flat"
                 id="whatsapp-quick-reply-add-button"
-                disabled={quickReplyDisable}
+                disabled={isQuickReplyDisable}
                 className="margin-t-12 margin-l-24"
                 isAddBtn
                 onClick={addQuickReply}
@@ -227,4 +232,12 @@ const CapWhatsappQuickReply = ({
   );
 };
 
+CapWhatsappQuickReply.propTypes = {
+  quickReplyData: PropTypes.array,
+  renderMessageLength: PropTypes.func,
+  setQuickReplyData: PropTypes.func,
+  isEditFlow: PropTypes.func,
+  intl: intlShape.isRequired,
+};
+
 export default injectIntl(CapWhatsappQuickReply);

package/v2Components/CapWhatsappQuickReply/index.scss

@@ -1,7 +1,7 @@
 @import "~@capillarytech/cap-ui-library/styles/_variables";
 
 .cap-whatsapp-quick-reply {
-    border: solid 1px $CAP_G06;
+    border: solid 0.063rem $CAP_G06;
     margin-left: $CAP_SPACE_24;
     margin-top: $CAP_SPACE_24;
     border-radius: 0.285rem;
@@ -31,6 +31,9 @@
             right: $CAP_SPACE_12;
         }
     }
+    .whatsapp-button-text-tooltip {
+        margin-left: $CAP_SPACE_04;
+    }
 }
 
 .whatsapp-quick-reply-edit-container {

package/v2Components/CapWhatsappQuickReply/messages.js

@@ -17,4 +17,8 @@ export default defineMessages({
     id: `${prefix}.templateButtonTextLengthError`,
     defaultMessage: 'Text field length cannot exceed 20',
   },
+  templateButtonTextSameValue: {
+    id: `${prefix}.templateButtonTextSameValue`,
+    defaultMessage: 'Text field value cannot be same with other text fields',
+  },
 });

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -276,6 +276,9 @@
     align-content: center;
     justify-content: center;
     margin-bottom: 4px;
+    svg {
+      margin-right: $CAP_SPACE_04;
+    }
   }
   .whatsapp-message-container{
     max-height: 292px;
@@ -517,4 +520,24 @@
 .zalo-preview-container-campaign {
   padding-left: 0px;
   padding-right: 4.563rem;
+}
+
+.url-preview-image {
+  width: 100%;
+  height: 100%;
+  background-color: hsl(0, 0%, 90%);
+}
+
+.url-preview-description {
+  font-size: 0.6rem;
+  font-weight: $FONT_WEIGHT_REGULAR;
+  color: $FONT_COLOR_01;
+  margin: 0.13rem 0;
+}
+
+.url-preview {
+  font-size: 0.5rem;
+  font-weight: $FONT_WEIGHT_REGULAR;
+  color: $FONT_COLOR_02;
+  margin-bottom: $CAP_SPACE_08;
 }

package/v2Components/TemplatePreview/index.js

@@ -11,6 +11,7 @@ import _ from 'lodash';
 import { injectIntl, FormattedMessage, intlShape } from 'react-intl';
 // import styled from 'styled-components';
 import { CapColumn, CapRow, CapHeading, CapIcon, CapButton, CapImage, CapLabel, CapDivider, CapTooltip } from '@capillarytech/cap-ui-library';
+import { isEmpty } from 'lodash';
 import './_templatePreview.scss';
 import {updateCharCount} from '../../utils/smsCharCountV2';
 import messages from './messages';
@@ -53,6 +54,8 @@ import {
 import { TEMPLATE, IMAGE_CAROUSEL, IMAGE, STICKER, TEXT, IMAGE_MAP, VIDEO } from '../../v2Containers/Line/Container/constants';
 import CapFacebookPreview from '../../v2Containers/CapFacebookPreview';
 import WhatsappStatusContainer from '../WhatsappStatusContainer';
+import { getWhatsappQuickReply } from '../../v2Containers/Whatsapp/utils';
+import { QUICK_REPLY } from '../../v2Containers/Whatsapp/constants';
 
 export class TemplatePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
   onPreviewContentClicked = (channel) => {
@@ -319,7 +322,6 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                     (ctaType || type) === 'PHONE_NUMBER' ? 'call' : 'launch'
                   }
                   size="xs"
-                  svgProps={{ style: { marginRight: '4px' } }}
                 />
                 {text}
               </CapLabel>,
@@ -331,31 +333,46 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
     };
 
     const renderQuickReplyPreview = () => {
-      const renderArray = [];
       const { quickReplyData = [] } = content || {};
-      if (quickReplyData?.length) {
-        renderArray.push(<CapDivider className="whatsapp-divider" />);
-        quickReplyData.forEach((quickReply, index) => {
-          const { text } = quickReply || {};
-          if (text) {
-            renderArray.push(
-              <CapLabel type="label21" className="whatsapp-cta-preview">
-                <CapIcon
-                  type='small-link'
-                  size="xs"
-                  svgProps={{ style: { marginRight: '4px' } }}
-                />
-                {text}
-              </CapLabel>
-            )
-          }
-          if (index < quickReplyData.length -1) {
-            renderArray.push(<CapDivider className="whatsapp-divider" />);
-          }
-        })
+      return getWhatsappQuickReply(
+        {
+          buttons: quickReplyData,
+          buttonType: QUICK_REPLY,
+        },
+        true
+      );
+    };
+
+    const renderUrlPreview = (metaTags) => {
+      const renderArray = [];
+      if (!isEmpty(metaTags)) {
+        if (metaTags?.image) {
+          renderArray.push(
+            <CapImage
+              src={metaTags?.image}
+              alt={formatMessage(messages.previewUrlMetaImage)}
+              className="url-preview-image"
+            />
+          );
+        }
+        if (metaTags?.title) {
+          renderArray.push(
+            <CapLabel type="label8">{metaTags?.title}</CapLabel>
+          );
+        }
+        if (metaTags?.description) {
+          renderArray.push(
+            <CapLabel className="url-preview-description">{metaTags?.description}</CapLabel>
+          );
+        }
+        if (metaTags?.url) {
+          renderArray.push(
+            <CapLabel className="url-preview">{metaTags?.url}</CapLabel>
+          );
+        }
       }
       return renderArray;
-    }
+    };
 
     const handlePreview = () => {
       const {templatePreviewUrl = ''} = templateData;
@@ -771,6 +788,9 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                     <div className="msg-container whatsapp-message-container">
                       <div className="message-pop align-left" style={whatsappSectionStyle}>
                         <div className="whatsapp-content">
+                          {content?.isPreviewUrl && (
+                            renderUrlPreview(content?.metaTagsDetails)
+                          )}
                           {content?.whatsappImageSrc && (
                             <CapImage
                               src={content.whatsappImageSrc}

package/v2Components/TemplatePreview/messages.js

@@ -82,4 +82,8 @@ export default defineMessages({
     id: 'creatives.componentsV2.TemplatePreview.videoPreviewTooltip',
     defaultMessage: "This is just for preview purposes, video cannot be played here",
   },
+  previewUrlMetaImage: {
+    id: 'creatives.componentsV2.TemplatePreview.previewUrlMetaImage',
+    defaultMessage: 'Preview url meta image',
+  },
 });