@capillarytech/creatives-library 7.17.81 → 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.81",
+  "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",
@@ -25,6 +25,7 @@
     "jest-date-mock": "^1.0.8",
     "jquery": "^3.3.1",
     "load-script": "^1.0.0",
+    "ml-matrix": "6.10.8",
     "node-html-parser": "^5.4.2-0",
     "normalizr": "^3.2.3",
     "papaparse": "^5.3.1",

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

@@ -0,0 +1,243 @@
+import React from "react";
+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";
+import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
+import CapTooltipWithInfo from "@capillarytech/cap-ui-library/CapTooltipWithInfo";
+import CapInput from "@capillarytech/cap-ui-library/CapInput";
+import CapError from "@capillarytech/cap-ui-library/CapError";
+import CapTooltip from "@capillarytech/cap-ui-library/CapTooltip";
+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 messages from "./messages";
+import "./index.scss";
+import globalMessages from "../../v2Containers/Cap/messages";
+import { BUTTON_TEXT, INITIAL_QUICK_REPLY_DATA } from "../../v2Containers/Whatsapp/constants";
+import ctaMessages from "../CapWhatsappCTA/messages";
+
+export const CapWhatsappQuickReply = (props) => {
+  const { quickReplyData = [], renderMessageLength, setQuickReplyData, isEditFlow, intl } = props;
+  const { TextArea } = CapInput;
+  const { formatMessage } = intl;
+  const quickReplyDataLength = quickReplyData?.length;
+  //this function is used for handle text field value change
+  const handleTextChange = ({target: {value = ''} = {}}, index) => {
+    let error = false;
+    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) => {
+        if (quickReply?.index === index) {
+          return {
+            ...quickReply,
+            text: value,
+            error,
+          };
+        }
+        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) => {
+        if (quickReply?.index === index) {
+          return {
+            ...quickReply,
+            isSaved: value,
+          };
+        }
+        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
+      );
+      return filteredQuickReplyData.map((quickReply, i) => ({
+        ...quickReply,
+        index: i,
+      }));
+    });
+  };
+
+  const addQuickReply = () => {
+    INITIAL_QUICK_REPLY_DATA[0].index = quickReplyDataLength || 0;
+    const clonedQuickReplyData = [
+      ...quickReplyData,
+      ...INITIAL_QUICK_REPLY_DATA,
+    ];
+    setQuickReplyData(clonedQuickReplyData);
+  };
+
+  const isQuickReplyDisable =
+    quickReplyDataLength === 1 && !quickReplyData?.[0]?.isSaved;
+  return (
+    <>
+      {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
+                    className="whatsapp-button-text-container"
+                    key={index}
+                  >
+                    <CapHeader
+                      title={
+                        <CapHeading
+                          type="h4"
+                          className="whatsapp-button-text-heading"
+                        >
+                          {formatMessage(messages.buttonText)}
+                            <CapTooltipWithInfo
+                              placement="right"
+                              className="whatsapp-button-text-tooltip"
+                              autoAdjustOverflow
+                          />
+                        </CapHeading>
+                      }
+                    />
+                      <CapRow className="whatsapp-button-text-input">
+                        <TextArea
+                          autosize={{ minRows: 1, maxRows: 5 }}
+                          placeholder={formatMessage(
+                          messages.buttonTextPlaceholder
+                        )}
+                          onChange={(e) => handleTextChange(e, index)}
+                          errorMessage={
+                          error && (
+                            <CapError className="whatsapp-template-message-error">
+                              {error}
+                            </CapError>
+                          )
+                        }
+                          value={text || ""}
+                      />
+                      </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"}
+                      >
+                        <div className="button-disabled-tooltip-wrapper">
+                          <CapButton
+                            onClick={() => {
+                              handleSaveAndEditBtn(index, true);
+                            }}
+                            disabled={text === "" || error}
+                            className="whatsapp-cta-save-btn"
+                          >
+                            {formatMessage(globalMessages.save)}
+                          </CapButton>
+                        </div>
+                        </CapTooltip>
+                          <CapButton
+                            onClick={() => {
+                              handleDelete(index);
+                            }}
+                            className="whatsapp-cta-delete-btn whatsapp-quick-reply-delete-button"
+                            type="secondary"
+                      >
+                            {formatMessage(globalMessages.delete)}
+                          </CapButton>
+                      </CapRow>
+                  </CapRow>
+                </CapRow>
+              );
+            }
+            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"
+                          data-testid="quick-reply-edit"
+                      />
+                        <CapIcon
+                          onClick={() => handleDelete(index)}
+                          type="delete"
+                          data-testid="quick-reply-delete"
+                      />
+                      </CapColumn>
+                </CapRow>
+              </CapRow>
+              );
+          })}
+        </CapRow>
+      )}
+      {/* 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>
+        ))
+      }
+      {/* this section render add button section with condition */}
+      {quickReplyDataLength < 3 && !isEditFlow && (
+        <CapRow>
+          <CapTooltip
+            title={
+              isQuickReplyDisable ? formatMessage(ctaMessages.ctaAddDisabled) : ""
+            }
+            placement={"right"}
+          >
+            <div className="button-disabled-tooltip-wrapper">
+              <CapButton
+                type="flat"
+                id="whatsapp-quick-reply-add-button"
+                disabled={isQuickReplyDisable}
+                className="margin-t-12 margin-l-24"
+                isAddBtn
+                onClick={addQuickReply}
+              >
+                {formatMessage(ctaMessages.addButton)}
+              </CapButton>
+            </div>
+          </CapTooltip>
+        </CapRow>
+      )}
+    </>
+  );
+};
+
+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

@@ -0,0 +1,43 @@
+@import "~@capillarytech/cap-ui-library/styles/_variables";
+
+.cap-whatsapp-quick-reply {
+    border: solid 0.063rem $CAP_G06;
+    margin-left: $CAP_SPACE_24;
+    margin-top: $CAP_SPACE_24;
+    border-radius: 0.285rem;
+    .whatsapp-button-text-container {
+        padding: $CAP_SPACE_16 $CAP_SPACE_24;
+    }
+    .whatsapp-button-text-heading {
+        display: flex;
+        text-align: center;
+    }
+    .whatsapp-quick-reply-delete-button {
+        margin-left: $CAP_SPACE_12;
+    }
+    .whatsapp-button-text-input {
+        margin-top: $CAP_SPACE_08;
+        margin-bottom: $CAP_SPACE_12;
+    }
+    .whatsapp-quick-reply-save-container {
+        display: flex;
+        align-items: center;
+        padding: $CAP_SPACE_08 $CAP_SPACE_12;
+        .text-conatiner {
+            padding-left: $CAP_SPACE_12;
+        }
+        .quick-reply-icon {
+            position: absolute;
+            right: $CAP_SPACE_12;
+        }
+    }
+    .whatsapp-button-text-tooltip {
+        margin-left: $CAP_SPACE_04;
+    }
+}
+
+.whatsapp-quick-reply-edit-container {
+    padding: $CAP_SPACE_12;
+    margin-left: 0;
+    margin-top: $CAP_SPACE_16;
+}

package/v2Components/CapWhatsappQuickReply/messages.js

@@ -0,0 +1,24 @@
+import { defineMessages } from 'react-intl';
+const prefix = `creatives.componentsV2.CapWhatsappQuickReply`;
+export default defineMessages({
+  buttonText: {
+    id: `${prefix}.buttonText`,
+    defaultMessage: 'Button text',
+  },
+  buttonTextPlaceholder: {
+    id: `${prefix}.buttonTextPlaceholder`,
+    defaultMessage: 'Enter button text',
+  },
+  templateButtonTextError: {
+    id: `${prefix}.templateButtonTextError`,
+    defaultMessage: 'Template footer length cannot exceed 20',
+  },
+  templateButtonTextLengthError: {
+    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>,
@@ -330,6 +332,48 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       return renderArray;
     };
 
+    const renderQuickReplyPreview = () => {
+      const { quickReplyData = [] } = content || {};
+      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;
       handlePreviewInNewTab(templatePreviewUrl);
@@ -744,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}
@@ -772,8 +819,11 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                               {content?.docPreview}
                             </div>
                           )}
+                          {content?.templateHeaderPreview || ''}
                           {content?.templateMsg || ''}
+                          {content?.templateFooterPreview || ''}
                           {renderWhatsappCtaPreview()}
+                          {renderQuickReplyPreview()}
                         </div>
                       </div>
                     </div>

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',
+  },
 });

package/v2Components/TemplatePreview/tests/__snapshots__/index.test.js.snap

@@ -98,13 +98,6 @@ exports[`Test Templates container Should render correct preview component for wh
               >
                 <CapIcon
                   size="xs"
-                  svgProps={
-                    Object {
-                      "style": Object {
-                        "marginRight": "4px",
-                      },
-                    }
-                  }
                   type="call"
                 />
                 Call
@@ -115,13 +108,6 @@ exports[`Test Templates container Should render correct preview component for wh
               >
                 <CapIcon
                   size="xs"
-                  svgProps={
-                    Object {
-                      "style": Object {
-                        "marginRight": "4px",
-                      },
-                    }
-                  }
                   type="launch"
                 />
                 Visit