@capillarytech/creatives-library 7.12.3 → 7.12.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "7.12.3",
+  "version": "7.12.5",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/TemplatePreview/index.js

@@ -726,40 +726,38 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
             }
             {
               channel?.toUpperCase() === RCS && (
-                <>
-                  <div className='shell-v2 align-center'>
-                    <CapImage
-                      className='preview-image'
-                      src={smsMobileAndroid}
-                      alt={formatMessage(messages.previewGenerated)}
-                    />
-                    <div className='msg-container sms'>
-                      <div className='message-pop sms'>
-                        {rcsImageSrc && (
-                          <CapImage
-                            src={rcsImageSrc}
-                            className='rcs-image'
-                            alt={formatMessage(messages.previewGenerated)}
-                          />
-                        )}
-                        {rcsTitle && (
-                          <CapLabel
-                            type="label5"
-                            className='message-pop-item align-left rcs-content'
-                            fontWeight='bold'
-                          >
-                            {rcsTitle}
-                          </CapLabel>
-                        )}
-                        {rcsDesc && (
-                          <CapLabel type="label5" className='message-pop-item align-left rcs-content rcs-desc'>
-                            {rcsDesc}
-                          </CapLabel>
-                        )}
-                      </div>
+                <div className='shell-v2 align-center'>
+                  <CapImage
+                    className='preview-image'
+                    src={smsMobileAndroid}
+                    alt={formatMessage(messages.previewGenerated)}
+                  />
+                  <div className='msg-container sms'>
+                    <div className='message-pop sms'>
+                      {rcsImageSrc && (
+                        <CapImage
+                          src={rcsImageSrc}
+                          className='rcs-image'
+                          alt={formatMessage(messages.previewGenerated)}
+                        />
+                      )}
+                      {rcsTitle && (
+                        <CapLabel
+                          type="label5"
+                          className='message-pop-item align-left rcs-content'
+                          fontWeight='bold'
+                        >
+                          {rcsTitle}
+                        </CapLabel>
+                      )}
+                      {rcsDesc && (
+                        <CapLabel type="label5" className='message-pop-item align-left rcs-content rcs-desc'>
+                          {rcsDesc}
+                        </CapLabel>
+                      )}
                     </div>
                   </div>
-                </>
+                </div>
               )
             }
             {channel && channel.toLowerCase() === FACEBOOK && (

package/v2Containers/CreativesContainer/SlideBoxContent.js

@@ -339,7 +339,7 @@ export function SlideBoxContent(props) {
       }
       case constants.RCS: {
         const template = cloneDeep(templateDataObject);
-        const { description = "", media: {mediaUrl = ""}, title} = get(template, 'versions.base.content.RCS.cardContent[0]', {});
+        const { description = "", media: { mediaUrl = "" } = {}, title = "" } = get(template, 'versions.base.content.RCS.cardContent[0]', {});
         return {
           rcsPreviewContent: {
             rcsImageSrc: mediaUrl,

package/v2Containers/CreativesContainer/SlideBoxHeader.js

@@ -7,6 +7,7 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import messages from './messages';
 import whatsppMsg from '../Whatsapp/messages';
+import { LANGUAGE_OPTIONS } from '../Whatsapp/constants'
 import globalMessages from '../Cap/messages'
 import { MAP_TEMPLATE } from '../WeChat/Wrapper/constants';
 import { NO_COMMUNICATION, FTP, WHATSAPP } from '../App/constants';
@@ -43,10 +44,11 @@ export function SlideBoxHeader(props) {
   const {
     whatsappTemplateName,
     whatsappTemplateCategory,
+    whatsappTemplateLanguageCode,
   } = templateData || {};
   const whatsappName = whatsappTemplateName || templateData?.name;
   const whatsappCategory = whatsappTemplateCategory || get(templateData, `versions.base.content.whatsapp.category`, '');
-
+  const whatsappLanguageCode = whatsappTemplateLanguageCode || get(templateData, `versions.base.content.whatsapp.languages[0].language`, '');
 
   const getChannelLabel = (currentChannel = '') => {
     const labels = {
@@ -103,7 +105,7 @@ export function SlideBoxHeader(props) {
                 {renderWhatsappData("label2", formatString(whatsappCategory))}
                 {renderWhatsappData("label3", <FormattedMessage {...whatsppMsg.labelSeperator} />)}
                 {renderWhatsappData("label1", <FormattedMessage {...whatsppMsg.languageLabel} />)}
-                {renderWhatsappData("label2", <FormattedMessage {...whatsppMsg.templateLanguageEnglish} />)}
+                {renderWhatsappData("label2", LANGUAGE_OPTIONS?.find(option => option.value === whatsappLanguageCode)?.label)}
               </>)
           }
         prefix={creativesMode !== 'edit' && !isFullMode && showPrefix &&

package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxHeader.test.js.snap

@@ -190,7 +190,7 @@ exports[`Test SlideBoxHeader container Should render correct component for whats
         >
           <FormattedMessage
             defaultMessage="English"
-            id="creatives.containersV2.Whatsapp.templateLanguageEnglish"
+            id="creatives.containersV2.Whatsapp.english"
             values={Object {}}
           />
         </SlideBoxHeader__StyledLabel>

package/v2Containers/Rcs/constants.js

@@ -14,8 +14,9 @@ export const RCS_DLT_MODE = {
   TEMPLATES: 'templates',
   EDIT: 'editTemplate',
 };
-export const TEMPLATE_MESSAGE_MAX_LENGTH = 1000;
+export const TEMPLATE_DESC_MAX_LENGTH = 1000;
 export const FALLBACK_MESSAGE_MAX_LENGTH = 160;
+export const TEMPLATE_TITLE_MAX_LENGTH = 200;
 export const TAG = 'TAG';
 export const EMBEDDED = 'embedded';
 export const DEFAULT = 'default';

package/v2Containers/Rcs/index.js

@@ -1,6 +1,4 @@
 /* eslint-disable no-unused-expressions */
-/* eslint-disable indent */
-/* eslint-disable no-unused-vars */
 import React, { useState, useEffect, useCallback } from 'react';
 import { bindActionCreators } from 'redux';
 import { createStructuredSelector } from 'reselect';
@@ -44,13 +42,14 @@ import {
   setInjectedTags,
 } from '../Cap/selectors';
 import * as RcsActions from './actions';
-import * as TemplatesActions from '../Templates/actions'
+import * as TemplatesActions from '../Templates/actions';
 import './index.scss';
 import {
   RCS,
   SMS,
   RCS_MEDIA_TYPES,
-  TEMPLATE_MESSAGE_MAX_LENGTH,
+  TEMPLATE_TITLE_MAX_LENGTH,
+  TEMPLATE_DESC_MAX_LENGTH,
   FALLBACK_MESSAGE_MAX_LENGTH,
   TAG,
   EMBEDDED,
@@ -172,11 +171,9 @@ export const Rcs = (props) => {
   const paramObj = params || {};
   useEffect(() => {
     const { id } = paramObj;
-    if (id) {
-      if (isFullMode) {
-        setSpin(true);
-        actions.getTemplateDetails(id, setSpin);
-      }
+    if (id && isFullMode) {
+      setSpin(true);
+      actions.getTemplateDetails(id, setSpin);
     }
     //cleanup code
     return () => {
@@ -189,21 +186,21 @@ export const Rcs = (props) => {
       ? rcsData.templateDetails || {}
       : templateData || {};
     const editContent = get(versions, `base.content.RCS`, {});
-    if (editContent && !isEmpty(editContent)) {
+    if (!isEmpty(editContent)) {
       const { cardContent = [], smsFallBackContent = {} } = editContent;
       const {
-        media = { mediaUrl: '' },
-        mediaType,
-        title,
-        description,
+        media: { mediaUrl = '' } = {},
+        mediaType = '',
+        title = '',
+        description = '',
       } = cardContent[0] || {};
       const { message, templateConfigs = {} } = smsFallBackContent;
       setTemplateName(name);
-      setFallbackMessage(message);
-      setTemplateDesc(description);
-      setTemplateTitle(title);
       setTemplateMediaType(mediaType);
-      updateRcsImageSrc(media.mediaUrl);
+      updateRcsImageSrc(mediaUrl);
+      setTemplateTitle(title);
+      setTemplateDesc(description);
+      setFallbackMessage(message);
       setEditFlow(true);
       // for DLT Fallback message
       if (isDltEnabled) {
@@ -217,11 +214,10 @@ export const Rcs = (props) => {
         if (header.length > 0) {
           const tempData = {
             versions: {
-              // eslint-disable-next-line no-undef
               base: {
                 header,
-                "template_id": templateId,
-                "template_name": tmpName,
+                'template_id': templateId,
+                'template_name': tmpName,
                 'sms-editor': template,
                 'var-mapped': templateVariableMapping,
               },
@@ -361,7 +357,7 @@ export const Rcs = (props) => {
       }) || {};
     if (value === '' && isMediaTypeNone) {
       errorMessage = formatMessage(messages.emptyTemplateDescErrorMessage);
-    } else if (value?.length > TEMPLATE_MESSAGE_MAX_LENGTH) {
+    } else if (value?.length > TEMPLATE_DESC_MAX_LENGTH) {
       errorMessage = formatMessage(messages.templateDescLengthError);
     } else if (unsupportedTags?.length > 0) {
       errorMessage = formatMessage(
@@ -408,21 +404,21 @@ export const Rcs = (props) => {
       {/* template title */}
       {renderLabel('templateTitle', true)}
       <CapInput
-        id={`rcs-template-title-input`}
+        id="rcs-template-title-input"
         onChange={onTemplateTitleChange}
         placeholder={formatMessage(messages.templateTitlePlaceholder)}
         value={templateTitle || ''}
         size="default"
-        maxLength={200}
+        maxLength={TEMPLATE_TITLE_MAX_LENGTH}
         suffix={
-          <CapLabel type="label1">{`${templateTitle.length} / 200`}</CapLabel>
+          <CapLabel type="label1">{`${templateTitle.length} / ${TEMPLATE_TITLE_MAX_LENGTH}`}</CapLabel>
         }
       />
       {/* template message */}
-      <CapRow id={`rcs-template-message-label`}>
+      <CapRow id="rcs-template-message-label">
         <CapHeader
           title={
-            <CapRow style={{ display: 'flex' }}>
+            <CapRow type="flex">
               <CapHeading type="h4">
                 {formatMessage(messages.templateDescLabel)}
               </CapHeading>
@@ -446,7 +442,7 @@ export const Rcs = (props) => {
         />
       </CapRow>
       <TextArea
-        id={`rcs_template_message_textarea`}
+        id="rcs_template_message_textarea"
         autosize={{ minRows: 3, maxRows: 5 }}
         placeholder={formatMessage(messages.templateDescPlaceholder)}
         onChange={onTemplateDescChange}
@@ -460,7 +456,9 @@ export const Rcs = (props) => {
   const fallbackSmsLength = () => (
     <CapLabel type="label1" className="fallback-sms-length">
       {formatMessage(messages.totalCharacters, {
-        smsCount: Math.ceil(fallbackMessage.length / 160),
+        smsCount: Math.ceil(
+          fallbackMessage.length / FALLBACK_MESSAGE_MAX_LENGTH,
+        ),
         number: fallbackMessage.length,
       })}
     </CapLabel>
@@ -477,7 +475,7 @@ export const Rcs = (props) => {
   const closeDltContainerHandler = () => {
     setShowDltContainer(false);
     setDltMode('');
-    templatesActions.getAllTemplates('Rcs', { page: 1, perPage: 25 })
+    templatesActions.getAllTemplates('Rcs', { page: 1, perPage: 25 });
   };
 
   const rcsDltEditSelectHandler = (data) => {
@@ -618,7 +616,7 @@ export const Rcs = (props) => {
       >
         <CapHeader
           title={
-            <CapRow style={{ display: 'flex' }}>
+            <CapRow type="flex">
               <CapHeading type="h4">
                 {formatMessage(messages.fallbackLabel)}
               </CapHeading>
@@ -712,7 +710,7 @@ export const Rcs = (props) => {
             />
           </CapRow>
           <TextArea
-            id={`rcs_fallback_message_textarea`}
+            id="rcs_fallback_message_textarea"
             autosize={{ minRows: 3, maxRows: 5 }}
             placeholder={formatMessage(messages.fallbackMsgPlaceholder)}
             onChange={onFallbackMessageChange}
@@ -762,8 +760,8 @@ export const Rcs = (props) => {
               updateImageSrc={setUpdateRcsImageSrc}
               updateOnReUpload={updateOnRcsImageReUpload}
               index={0}
-              className={'cap-custom-image-upload'}
-              key={`rcs-uploaded-image`}
+              className="cap-custom-image-upload"
+              key="rcs-uploaded-image"
               imageData={rcsData}
               channel={RCS}
             />
@@ -949,7 +947,7 @@ export const Rcs = (props) => {
             {/* template name */}
             {isFullMode && (
               <CapInput
-                id={`rcs_template_name_input`}
+                id="rcs_template_name_input"
                 onChange={onTemplateNameChange}
                 errorMessage={templateNameError}
                 placeholder={formatMessage(
@@ -966,7 +964,7 @@ export const Rcs = (props) => {
               options={mediaRadioOptions || []}
               value={templateMediaType}
               onChange={onTemplateMediaTypeChange}
-              className={'rcs-radio'}
+              className="rcs-radio"
             />
             {getMediaBasedComponent()}
             <CapDivider style={{ margin: `${CAP_SPACE_28} 0` }} />
@@ -983,8 +981,8 @@ export const Rcs = (props) => {
             title={
               isDisableDone()
                 ? formatMessage(messages.rcsDoneBtnToolTip, {
-                    type: formatMessage(messages[mediaTypeMsg]),
-                  })
+                  type: formatMessage(messages[mediaTypeMsg]),
+                })
                 : ''
             }
             placement={'right'}
@@ -1026,7 +1024,9 @@ export const Rcs = (props) => {
                   className="margin-t-16"
                 >
                   {formatMessage(messages.totalCharacters, {
-                    smsCount: Math.ceil(tempMsg.length / 160),
+                    smsCount: Math.ceil(
+                      tempMsg.length / FALLBACK_MESSAGE_MAX_LENGTH,
+                    ),
                     number: tempMsg.length,
                   })}
                 </CapHeading>

package/v2Containers/Rcs/sagas.js

@@ -23,7 +23,7 @@ export function* uploadRcsAsset(file, assetType, fileParams) {
     yield put({
       type: UPLOAD_RCS_ASSET_SUCCESS,
       data: result.response.asset,
-      statusCode: result.status ? result.status.code : '',
+      statusCode: result?.status?.code || '',
       templateType: file.templateType,
     });
   } catch (error) {
@@ -50,7 +50,7 @@ export function* createRCSTemplate({ template, callback }) {
     yield put({
       type: CREATE_RCS_TEMPLATE_SUCCESS,
       data: result.response,
-      statusCode: result.status ? result.status.code : '',
+      statusCode: result?.status?.code || '',
       errorMsg,
     });
     if (callback) {
@@ -87,7 +87,7 @@ export function* editTemplate({ template, callback }) {
     yield put({
       type: EDIT_RCS_TEMPLATE_SUCCESS,
       data: result.response,
-      statusCode: result.status ? result.status.code : '',
+      statusCode: result?.status?.code || '',
       errorMsg,
     });
     if (callback) {

package/v2Containers/Templates/index.js

@@ -662,6 +662,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             const { name = '', versions = {} } = whatsappSelectedTemplateData;
             creativesParams.whatsappTemplateName = name;
             creativesParams.whatsappTemplateCategory = get(versions, `base.content.whatsapp.category`, '');
+            creativesParams.whatsappTemplateLanguageCode = get(versions, `base.content.whatsapp.languages[0].language`, '');
           }
         }
         creativesParams.type = this.state.channel.toUpperCase();

package/v2Containers/Whatsapp/constants.js

@@ -129,3 +129,290 @@ export const WHATSAPP_MEDIA_TYPES = {
   IMAGE: 'IMAGE',
   VIDEO: 'VIDEO',
 };
+
+export const LANGUAGE_OPTIONS = [
+  {
+    value: 'af',
+    label: <FormattedMessage {...messages.afrikaans} />,
+  },
+  {
+    value: 'sq',
+    label: <FormattedMessage {...messages.albanian} />,
+  },
+  {
+    value: 'ar',
+    label: <FormattedMessage {...messages.arabic} />,
+  },
+  {
+    value: 'az',
+    label: <FormattedMessage {...messages.azerbaijani} />,
+  },
+  {
+    value: 'bn',
+    label: <FormattedMessage {...messages.bengali} />,
+  },
+  {
+    value: 'bg',
+    label: <FormattedMessage {...messages.bulgarian} />,
+  },
+  {
+    value: 'ca',
+    label: <FormattedMessage {...messages.catalan} />,
+  },
+  {
+    value: 'zh_CN',
+    label: <FormattedMessage {...messages.chineseCHN} />,
+  },
+  {
+    value: 'zh_HK',
+    label: <FormattedMessage {...messages.chineseHKG} />,
+  },
+  {
+    value: 'zh_TW',
+    label: <FormattedMessage {...messages.chineseTAI} />,
+  },
+  {
+    value: 'hr',
+    label: <FormattedMessage {...messages.croatian} />,
+  },
+  {
+    value: 'cs',
+    label: <FormattedMessage {...messages.czech} />,
+  },
+  {
+    value: 'da',
+    label: <FormattedMessage {...messages.danish} />,
+  },
+  {
+    value: 'nl',
+    label: <FormattedMessage {...messages.dutch} />,
+  },
+  {
+    value: 'en',
+    label: <FormattedMessage {...messages.english} />,
+  },
+  {
+    value: 'en_GB',
+    label: <FormattedMessage {...messages.englishUK} />,
+  },
+  {
+    value: 'en_US',
+    label: <FormattedMessage {...messages.englishUS} />,
+  },
+  {
+    value: 'et',
+    label: <FormattedMessage {...messages.estonian} />,
+  },
+  {
+    value: 'fil',
+    label: <FormattedMessage {...messages.filipino} />,
+  },
+  {
+    value: 'fi',
+    label: <FormattedMessage {...messages.finnish} />,
+  },
+  {
+    value: 'fr',
+    label: <FormattedMessage {...messages.french} />,
+  },
+  {
+    value: 'ka',
+    label: <FormattedMessage {...messages.georgian} />,
+  },
+  {
+    value: 'de',
+    label: <FormattedMessage {...messages.german} />,
+  },
+  {
+    value: 'el',
+    label: <FormattedMessage {...messages.greek} />,
+  },
+  {
+    value: 'gu',
+    label: <FormattedMessage {...messages.gujarati} />,
+  },
+  {
+    value: 'ha',
+    label: <FormattedMessage {...messages.hausa} />,
+  },
+  {
+    value: 'he',
+    label: <FormattedMessage {...messages.hebrew} />,
+  },
+  {
+    value: 'hi',
+    label: <FormattedMessage {...messages.hindi} />,
+  },
+  {
+    value: 'hu',
+    label: <FormattedMessage {...messages.hungarian} />,
+  },
+  {
+    value: 'id',
+    label: <FormattedMessage {...messages.indonesian} />,
+  },
+  {
+    value: 'ga',
+    label: <FormattedMessage {...messages.irish} />,
+  },
+  {
+    value: 'it',
+    label: <FormattedMessage {...messages.italian} />,
+  },
+  {
+    value: 'ja',
+    label: <FormattedMessage {...messages.japanese} />,
+  },
+  {
+    value: 'kn',
+    label: <FormattedMessage {...messages.kannada} />,
+  },
+  {
+    value: 'kk',
+    label: <FormattedMessage {...messages.kazakh} />,
+  },
+  {
+    value: 'rw_RW',
+    label: <FormattedMessage {...messages.kinyarwanda} />,
+  },
+  {
+    value: 'ko',
+    label: <FormattedMessage {...messages.korean} />,
+  },
+  {
+    value: 'ky_KG',
+    label: <FormattedMessage {...messages.kyrgyz} />,
+  },
+  {
+    value: 'lo',
+    label: <FormattedMessage {...messages.lao} />,
+  },
+  {
+    value: 'lv',
+    label: <FormattedMessage {...messages.latvian} />,
+  },
+  {
+    value: 'lt',
+    label: <FormattedMessage {...messages.lithuanian} />,
+  },
+  {
+    value: 'mk',
+    label: <FormattedMessage {...messages.macedonian} />,
+  },
+  {
+    value: 'ms',
+    label: <FormattedMessage {...messages.malay} />,
+  },
+  {
+    value: 'ml',
+    label: <FormattedMessage {...messages.malayalam} />,
+  },
+  {
+    value: 'mr',
+    label: <FormattedMessage {...messages.marathi} />,
+  },
+  {
+    value: 'nb',
+    label: <FormattedMessage {...messages.norwegian} />,
+  },
+  {
+    value: 'fa',
+    label: <FormattedMessage {...messages.persian} />,
+  },
+  {
+    value: 'pl',
+    label: <FormattedMessage {...messages.polish} />,
+  },
+  {
+    value: 'pt_BR',
+    label: <FormattedMessage {...messages.portugueseBR} />,
+  },
+  {
+    value: 'pt_PT',
+    label: <FormattedMessage {...messages.portuguesePOR} />,
+  },
+  {
+    value: 'pa',
+    label: <FormattedMessage {...messages.punjabi} />,
+  },
+  {
+    value: 'ro',
+    label: <FormattedMessage {...messages.romanian} />,
+  },
+  {
+    value: 'ru',
+    label: <FormattedMessage {...messages.russian} />,
+  },
+  {
+    value: 'sr',
+    label: <FormattedMessage {...messages.serbian} />,
+  },
+  {
+    value: 'sk',
+    label: <FormattedMessage {...messages.slovak} />,
+  },
+  {
+    value: 'sl',
+    label: <FormattedMessage {...messages.slovenian} />,
+  },
+  {
+    value: 'es',
+    label: <FormattedMessage {...messages.spanish} />,
+  },
+  {
+    value: 'es_AR',
+    label: <FormattedMessage {...messages.spanishARG} />,
+  },
+  {
+    value: 'es_ES',
+    label: <FormattedMessage {...messages.spanishSPA} />,
+  },
+  {
+    value: 'es_MX',
+    label: <FormattedMessage {...messages.spanishMEX} />,
+  },
+  {
+    value: 'sw',
+    label: <FormattedMessage {...messages.swahili} />,
+  },
+  {
+    value: 'sv',
+    label: <FormattedMessage {...messages.swedish} />,
+  },
+  {
+    value: 'ta',
+    label: <FormattedMessage {...messages.tamil} />,
+  },
+  {
+    value: 'te',
+    label: <FormattedMessage {...messages.telugu} />,
+  },
+  {
+    value: 'th',
+    label: <FormattedMessage {...messages.thai} />,
+  },
+  {
+    value: 'tr',
+    label: <FormattedMessage {...messages.turkish} />,
+  },
+  {
+    value: 'uk',
+    label: <FormattedMessage {...messages.ukrainian} />,
+  },
+  {
+    value: 'ur',
+    label: <FormattedMessage {...messages.urdu} />,
+  },
+  {
+    value: 'uz',
+    label: <FormattedMessage {...messages.uzbek} />,
+  },
+  {
+    value: 'vi',
+    label: <FormattedMessage {...messages.vietnamese} />,
+  },
+  {
+    value: 'zu',
+    label: <FormattedMessage {...messages.zulu} />,
+  },
+];