@capillarytech/creatives-library 7.11.10 → 7.11.12

package/v2Containers/Rcs/index.js

@@ -1,11 +1,9 @@
 /* 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';
 import { injectIntl, FormattedMessage } from 'react-intl';
-import { get } from 'lodash';
+import { get, isEmpty, cloneDeep } from 'lodash';
 import styled from 'styled-components';
 import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
@@ -26,6 +24,8 @@ import CapCustomCard from '@capillarytech/cap-ui-library/CapCustomCard';
 import CapDropdown from '@capillarytech/cap-ui-library/CapDropdown';
 import CapMenu from '@capillarytech/cap-ui-library/CapMenu';
 import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import CapTooltipWithInfo from '@capillarytech/cap-ui-library/CapTooltipWithInfo';
+import CapError from '@capillarytech/cap-ui-library/CapError';
 import {
   CAP_G01,
   CAP_SPACE_16,
@@ -42,12 +42,15 @@ import {
   setInjectedTags,
 } from '../Cap/selectors';
 import * as RcsActions from './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,
   DEFAULT,
@@ -84,6 +87,7 @@ export const Rcs = (props) => {
     params,
     templateData = {},
     rcsData = {},
+    templatesActions,
     globalActions,
     location,
     getDefaultTags,
@@ -142,6 +146,7 @@ export const Rcs = (props) => {
     },
   ];
 
+  const isMediaTypeNone = templateMediaType === RCS_MEDIA_TYPES.NONE;
   const RcsFooter = styled.div`
     background-color: ${CAP_WHITE};
     position: fixed;
@@ -162,6 +167,71 @@ export const Rcs = (props) => {
     margin-bottom: 6px;
   `;
 
+  //gets template details
+  const paramObj = params || {};
+  useEffect(() => {
+    const { id } = paramObj;
+    if (id && isFullMode) {
+      setSpin(true);
+      actions.getTemplateDetails(id, setSpin);
+    }
+    //cleanup code
+    return () => {
+      actions.clearEditResponse();
+    };
+  }, [paramObj.id]);
+
+  useEffect(() => {
+    const { name = '', versions = {} } = isFullMode
+      ? rcsData.templateDetails || {}
+      : templateData || {};
+    const editContent = get(versions, `base.content.RCS`, {});
+    if (!isEmpty(editContent)) {
+      const { cardContent = [], smsFallBackContent = {} } = editContent;
+      const {
+        media: { mediaUrl = '' } = {},
+        mediaType = '',
+        title = '',
+        description = '',
+      } = cardContent[0] || {};
+      const { message, templateConfigs = {} } = smsFallBackContent;
+      setTemplateName(name);
+      setTemplateMediaType(mediaType);
+      updateRcsImageSrc(mediaUrl);
+      setTemplateTitle(title);
+      setTemplateDesc(description);
+      setFallbackMessage(message);
+      setEditFlow(true);
+      // for DLT Fallback message
+      if (isDltEnabled) {
+        const {
+          registeredSenderIds: header = [],
+          template = {},
+          templateId = '',
+          templateName: tmpName = '',
+          templateVariableMapping = {},
+        } = templateConfigs;
+        if (header.length > 0) {
+          const tempData = {
+            versions: {
+              base: {
+                header,
+                'template_id': templateId,
+                'template_name': tmpName,
+                'sms-editor': template,
+                'var-mapped': templateVariableMapping,
+              },
+            },
+          };
+          setDltEditData(tempData);
+          setShowDltCard(true);
+        } else {
+          setShowDltCard(false);
+        }
+      }
+    }
+  }, [rcsData.templateDetails || templateData]);
+
   // tag Code start from here
   useEffect(() => {
     if (!showDltContainer) {
@@ -220,6 +290,16 @@ export const Rcs = (props) => {
     setFallbackMessage(tempMsg);
     setFallbackMessageError(error);
   };
+
+  //removing optout tag for rcs
+  const getRcsTags = () => {
+    const tempTags = cloneDeep(tags);
+    // eslint-disable-next-line no-undef
+    if (tempTags?.length > 0 && tempTags[0]?.definition?.value === 'optout') {
+      tempTags.shift();
+    }
+    return tempTags;
+  };
   // tag Code end
 
   const renderLabel = (value, showLabel) => (
@@ -275,9 +355,9 @@ export const Rcs = (props) => {
         location,
         tagModule: getDefaultTags,
       }) || {};
-    if (value === '' && templateMediaType === RCS_MEDIA_TYPES.NONE) {
+    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(
@@ -306,7 +386,9 @@ export const Rcs = (props) => {
         location,
         tagModule: getDefaultTags,
       }) || {};
-    if (unsupportedTags?.length > 0) {
+    if (value?.length > FALLBACK_MESSAGE_MAX_LENGTH) {
+      errorMessage = formatMessage(messages.fallbackMsgLenError);
+    } else if (unsupportedTags?.length > 0) {
       errorMessage = formatMessage(
         globalMessages.unsupportedTagsValidationError,
         {
@@ -322,25 +404,25 @@ 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>
-              {templateMediaType === RCS_MEDIA_TYPES.IMAGE && (
+              {!isMediaTypeNone && (
                 <CapHeading type="h4" className="rcs-optional-label">
                   {formatMessage(messages.optional)}
                 </CapHeading>
@@ -352,7 +434,7 @@ export const Rcs = (props) => {
               label={formatMessage(globalMessages.addLabels)}
               onTagSelect={onTagSelect}
               location={location}
-              tags={tags || []}
+              tags={getRcsTags()}
               onContextChange={handleOnTagsContextChange}
               injectedTags={injectedTags || {}}
             />
@@ -360,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}
@@ -374,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>
@@ -391,6 +475,7 @@ export const Rcs = (props) => {
   const closeDltContainerHandler = () => {
     setShowDltContainer(false);
     setDltMode('');
+    templatesActions.getAllTemplates('Rcs', { page: 1, perPage: 25 });
   };
 
   const rcsDltEditSelectHandler = (data) => {
@@ -412,6 +497,7 @@ export const Rcs = (props) => {
     closeDltContainerHandler();
     setDltEditData(tempData);
     setFallbackMessage(fallMsg);
+    setFallbackMessageError(fallMsg?.length > FALLBACK_MESSAGE_MAX_LENGTH);
     setShowDltCard(true);
   };
 
@@ -419,6 +505,7 @@ export const Rcs = (props) => {
     closeDltContainerHandler();
     setDltEditData({});
     setFallbackMessage('');
+    setFallbackMessageError(false);
     setShowDltCard(false);
   };
 
@@ -508,6 +595,7 @@ export const Rcs = (props) => {
           handleClose={closeDltContainerHandler}
           templateData={dltEditData}
           getFormSubscriptionData={rcsDltEditCompletionHandler}
+          isFullMode={false}
         />
       );
     }
@@ -528,13 +616,20 @@ export const Rcs = (props) => {
       >
         <CapHeader
           title={
-            <CapRow style={{ display: 'flex' }}>
+            <CapRow type="flex">
               <CapHeading type="h4">
                 {formatMessage(messages.fallbackLabel)}
               </CapHeading>
               <CapHeading type="h4" className="rcs-optional-label">
                 {formatMessage(messages.optional)}
               </CapHeading>
+              <CapTooltipWithInfo
+                placement="right"
+                infoIconProps={{
+                  style: { marginLeft: '4px', marginTop: '3px' },
+                }}
+                title={formatMessage(messages.fallbackToolTip)}
+              />
             </CapRow>
           }
           description={formatMessage(messages.fallbackDesc)}
@@ -542,6 +637,7 @@ export const Rcs = (props) => {
             isDltEnabled ? null : (
               <CapButton
                 type="flat"
+                className="fallback-preview-btn"
                 prefix={<CapIcon type="eye" />}
                 style={{ color: CAP_SECONDARY.base }}
                 onClick={() => setFallbackPreviewmode(true)}
@@ -564,7 +660,11 @@ export const Rcs = (props) => {
               <CapImage src={addCreativesIcon} />
             </CapColumn>
             <CapColumn span={14}>
-              <CapButton type="secondary" onClick={addDltMsgHandler}>
+              <CapButton
+                className="add-dlt-btn"
+                type="secondary"
+                onClick={addDltMsgHandler}
+              >
                 {formatMessage(messages.addSmsCreative)}
               </CapButton>
             </CapColumn>
@@ -579,6 +679,11 @@ export const Rcs = (props) => {
           cardList={[getDltContentCardList(fallbackMessage, SMS)]}
           className="rcs-dlt-card"
         />,
+        fallbackMessageError && (
+          <CapError className="rcs-fallback-len-error">
+            {formatMessage(messages.fallbackMsgLenError)}
+          </CapError>
+        ),
       );
 
     //dlt is not enabled, show non dlt text area
@@ -605,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}
@@ -655,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}
             />
@@ -674,9 +779,11 @@ export const Rcs = (props) => {
       channel={RCS}
       content={{
         rcsPreviewContent: {
-          rcsImageSrc,
           rcsTitle: templateTitle,
           rcsDesc: templateDesc,
+          ...(!isMediaTypeNone && {
+            rcsImageSrc,
+          }),
         },
       }}
     />
@@ -692,8 +799,7 @@ export const Rcs = (props) => {
       header: registeredSenderIds = [],
       'var-mapped': templateVariableMapping = {},
     } = base;
-    const tempMediaSrc =
-      templateMediaType === RCS_MEDIA_TYPES.IMAGE ? rcsImageSrc : '';
+    const tempMediaSrc = !isMediaTypeNone ? rcsImageSrc : '';
 
     return {
       name: templateName,
@@ -738,14 +844,20 @@ export const Rcs = (props) => {
     };
   };
 
-  const actionCallback = ({ errorMessage, resp }) => {
+  const actionCallback = ({ errorMessage, resp }, isEdit) => {
     // eslint-disable-next-line no-undef
     const error = errorMessage?.message || errorMessage;
     if (!error) {
       CapNotification.success({
-        message: formatMessage(messages.rcsCreateNotification),
+        message: isEdit
+          ? formatMessage(messages.rcsEditNotification)
+          : formatMessage(messages.rcsCreateNotification),
       });
-      actions.clearCreateResponse();
+      if (isEdit) {
+        actions.clearEditResponse();
+      } else {
+        actions.clearCreateResponse();
+      }
     } else {
       CapNotification.error({
         message: error,
@@ -766,7 +878,21 @@ export const Rcs = (props) => {
   };
 
   const onEditRcs = () => {
-    //console.log('Edit');
+    setSpin(true);
+    actions.editTemplate(
+      {
+        ...createPayload(),
+        _id: params.id,
+      },
+      (resp, errorMessage) => {
+        actionCallback({ resp, errorMessage }, true);
+        if (!errorMessage) {
+          onCreateComplete();
+        } else {
+          setSpin(false);
+        }
+      },
+    );
   };
 
   const onDoneCallback = () => {
@@ -785,14 +911,11 @@ export const Rcs = (props) => {
       return true;
     }
     //if template message is not entered
-    if (
-      templateMediaType === RCS_MEDIA_TYPES.NONE &&
-      templateDesc.trim() === ''
-    ) {
+    if (isMediaTypeNone && templateDesc.trim() === '') {
       return true;
     }
     //if image is not uploaded
-    if (templateMediaType === RCS_MEDIA_TYPES.IMAGE && rcsImageSrc === '') {
+    if (!isMediaTypeNone && rcsImageSrc === '') {
       return true;
     }
     if (templateDescError || fallbackMessageError) {
@@ -814,48 +937,9 @@ export const Rcs = (props) => {
           size="size-xl"
         />
       );
-    } else if (fallbackPreviewmode) {
-      const tempMsg = dltPreviewData === '' ? fallbackMessage : dltPreviewData;
-      return (
-        <CapSlideBox
-          show={fallbackPreviewmode}
-          header={
-            <CapHeading type="h7" style={{ color: CAP_G01 }}>
-              {formatMessage(messages.fallbackPreviewtitle)}
-            </CapHeading>
-          }
-          content={
-            <>
-              <TemplatePreview
-                channel={RCS}
-                content={{
-                  rcsPreviewContent: {
-                    rcsDesc: tempMsg,
-                  },
-                }}
-              />
-              <CapHeading
-                type="h3"
-                style={{ textAlign: 'center' }}
-                className="margin-t-16"
-              >
-                {formatMessage(messages.totalCharacters, {
-                  smsCount: Math.ceil(tempMsg.length / 160),
-                  number: tempMsg.length,
-                })}
-              </CapHeading>
-            </>
-          }
-          handleClose={() => {
-            setFallbackPreviewmode(false);
-            setDltPreviewData('');
-          }}
-          size="size-s"
-        />
-      );
     }
-    const mediaTypeMsg =
-      templateMediaType === RCS_MEDIA_TYPES.NONE ? 'textMessage' : 'image';
+    const tempMsg = dltPreviewData === '' ? fallbackMessage : dltPreviewData;
+    const mediaTypeMsg = isMediaTypeNone ? 'textMessage' : 'image';
     return (
       <>
         <CapRow className="cap-rcs-creatives">
@@ -863,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(
@@ -880,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` }} />
@@ -897,8 +981,8 @@ export const Rcs = (props) => {
             title={
               isDisableDone()
                 ? formatMessage(messages.rcsDoneBtnToolTip, {
-                    type: formatMessage(messages[mediaTypeMsg]),
-                  })
+                  type: formatMessage(messages[mediaTypeMsg]),
+                })
                 : ''
             }
             placement={'right'}
@@ -914,6 +998,46 @@ export const Rcs = (props) => {
             </div>
           </CapTooltip>
         </RcsFooter>
+
+        {fallbackPreviewmode && (
+          <CapSlideBox
+            className="rcs-fallback-preview"
+            show={fallbackPreviewmode}
+            header={
+              <CapHeading type="h7" style={{ color: CAP_G01 }}>
+                {formatMessage(messages.fallbackPreviewtitle)}
+              </CapHeading>
+            }
+            content={
+              <>
+                <TemplatePreview
+                  channel={RCS}
+                  content={{
+                    rcsPreviewContent: {
+                      rcsDesc: tempMsg,
+                    },
+                  }}
+                />
+                <CapHeading
+                  type="h3"
+                  style={{ textAlign: 'center' }}
+                  className="margin-t-16"
+                >
+                  {formatMessage(messages.totalCharacters, {
+                    smsCount: Math.ceil(
+                      tempMsg.length / FALLBACK_MESSAGE_MAX_LENGTH,
+                    ),
+                    number: tempMsg.length,
+                  })}
+                </CapHeading>
+              </>
+            }
+            handleClose={() => {
+              setFallbackPreviewmode(false);
+              setDltPreviewData('');
+            }}
+          />
+        )}
       </>
     );
   };
@@ -929,6 +1053,7 @@ const mapStateToProps = createStructuredSelector({
 
 const mapDispatchToProps = (dispatch) => ({
   actions: bindActionCreators(RcsActions, dispatch),
+  templatesActions: bindActionCreators(TemplatesActions, dispatch),
 });
 
 export default withCreatives({

package/v2Containers/Rcs/index.scss

@@ -2,7 +2,7 @@
 
 .cap-rcs-creatives {
   .rcs-scroll-div {
-    margin-bottom: 250px;
+    margin-bottom: 150px;
   }
   .rcs-preview-container {
     .cap-row-v2 {
@@ -23,16 +23,29 @@
   .rcs-dlt-fallback-card.ant-card-bordered > div {
     padding: 12px;
   }
-  .rcs-description {
+  .rcs-listing-content {
     display: -webkit-box;
-    -webkit-line-clamp: 7;
     -webkit-box-orient: vertical;
     overflow: hidden;
+    &.title{
+      -webkit-line-clamp: 1;
+    }
+    &.desc{
+      -webkit-line-clamp: 5;
+    }
+  }
+  .rcs-listing-image {
+    margin-bottom: 8px;
+    width: 220px;
+    height: 103px;
   }
   .fallback-sms-length {
     margin-top: 13px;
     float: right;
   }
+  .rcs-fallback-len-error{
+    margin-top: 8px;
+  }
   #rcs-template-title-input {
     padding-right: 10%;
   }
@@ -52,3 +65,8 @@
     }
   }
 }
+.rcs-fallback-preview > .cap-slide-box-v2-container.size-r{
+    min-width: 430px;
+    max-width: 430px;
+    width: 430px;
+}

package/v2Containers/Rcs/messages.js

@@ -64,11 +64,20 @@ export default defineMessages({
   },
   fallbackLabel: {
     id: `${prefix}.fallbackLabel`,
-    defaultMessage: 'Fall-back SMS message',
+    defaultMessage: 'Fallback SMS message',
   },
   fallbackDesc: {
     id: `${prefix}.fallbackDesc`,
-    defaultMessage: 'We would suggest to add fall-back SMS',
+    defaultMessage: 'We would suggest to add fallback SMS',
+  },
+  fallbackToolTip: {
+    id: `${prefix}.fallbackToolTip`,
+    defaultMessage:
+      'This is to deliver an RCS message as an SMS message to end users whose phones do not support RCS',
+  },
+  fallbackMsgLenError: {
+    id: `${prefix}.fallbackMsgLenError`,
+    defaultMessage: 'Only 1 SMS (160 characters) allowed for fallback sms',
   },
   fallbackTextAreaLabel: {
     id: `${prefix}.fallbackTextAreaLabel`,
@@ -76,7 +85,7 @@ export default defineMessages({
   },
   fallbackMsgPlaceholder: {
     id: `${prefix}.fallbackMsgPlaceholder`,
-    defaultMessage: 'Enter the text message content for fall-back SMS',
+    defaultMessage: 'Enter the text message content for fallback SMS',
   },
   totalCharacters: {
     id: `${prefix}.totalCharacters`,
@@ -100,10 +109,14 @@ export default defineMessages({
   },
   rcsCreateNotification: {
     id: `${prefix}.rcsCreateNotification`,
-    defaultMessage: 'Rcs template created successfully',
+    defaultMessage: 'RCS template created successfully',
+  },
+  rcsEditNotification: {
+    id: `${prefix}.rcsEditNotification`,
+    defaultMessage: 'RCS template updated successfully',
   },
   fallbackPreviewtitle: {
     id: `${prefix}.fallbackPreviewtitle`,
-    defaultMessage: 'Preview of fall-back SMS',
+    defaultMessage: 'Preview of fallback SMS',
   },
 });