@capillarytech/creatives-library 8.0.168 → 8.0.170-beta.1

package/v2Containers/Viber/index.js

@@ -4,7 +4,6 @@ import { createStructuredSelector } from 'reselect';
 import { injectIntl, FormattedMessage } from 'react-intl';
 import isEmpty from 'lodash/isEmpty';
 import get from 'lodash/get';
-import * as globalActions from '../Cap/actions';
 import CapHeader from '@capillarytech/cap-ui-library/CapHeader';
 import CapRow from '@capillarytech/cap-ui-library/CapRow';
 import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
@@ -19,6 +18,7 @@ import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
 import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
 import CapAskAira from '@capillarytech/cap-ui-library/CapAskAira';
 import { GA } from '@capillarytech/cap-ui-utils';
+import * as globalActions from '../Cap/actions';
 import { makeSelectViber, makeSelectCreateViber } from './selectors';
 import * as viberActions from './actions';
 import { validateTags } from '../../utils/tagValidations';
@@ -26,6 +26,7 @@ import TemplatePreview from '../../v2Components/TemplatePreview';
 import { isUrl } from '../Line/Container/Wrapper/utils';
 import messages from './messages';
 import TagList from '../TagList';
+import CapTagListWithInput from '../../v2Components/CapTagListWithInput';
 import { makeSelectMetaEntities, setInjectedTags, selectCurrentOrgDetails } from '../Cap/selectors';
 import {
   ALLOWED_IMAGE_EXTENSIONS_REGEX_VIBER,
@@ -43,7 +44,9 @@ import {
   AI_CONTENT_BOT_DISABLED,
 } from './constants';
 import withCreatives from '../../hoc/withCreatives';
-import { CREATE, EDIT, TRACK_CREATE_VIBER, TRACK_EDIT_VIBER } from '../App/constants';
+import {
+  CREATE, EDIT, TRACK_CREATE_VIBER, TRACK_EDIT_VIBER,
+} from '../App/constants';
 import { gtmPush } from '../../utils/gtmTrackers';
 import { VIBER } from '../CreativesContainer/constants';
 import { getCdnUrl } from '../../utils/cdnTransformation';
@@ -55,6 +58,7 @@ import { ViberFooter } from './style';
 import injectReducer from '../../utils/injectReducer';
 import v2ViberReducer from './reducer';
 
+
 const { TextArea } = CapInput;
 
 export const Viber = (props) => {
@@ -64,7 +68,7 @@ export const Viber = (props) => {
     injectedTags,
     location,
     metaEntities,
-    globalActions,
+    globalActions: globalActionsProps,
     handleClose,
     onCreateComplete,
     params,
@@ -130,12 +134,10 @@ export const Viber = (props) => {
 
   useEffect(() => {
     if ((params && params.id) || (templateData || {}).edit) {
-      const { content: editViberContent = {} } =
-        get(templateData, `versions.base.content`) ||
-        get(viber, `templateDetails.versions.base.content`) ||
-        {};
-      const editMessageTitle =
-        (templateData || {}).name || get(viber, "templateDetails.name");
+      const { content: editViberContent = {} } = get(templateData, `versions.base.content`)
+        || get(viber, `templateDetails.versions.base.content`)
+        || {};
+      const editMessageTitle = (templateData || {}).name || get(viber, "templateDetails.name");
       const {
         text = "",
         button = {},
@@ -172,7 +174,7 @@ export const Viber = (props) => {
         setTemplateMediaType(VIBER_MEDIA_TYPES.TEXT);
       }
     }
-  }, [viber[`templateDetails`] || templateData]);
+  }, [viber.templateDetails || templateData]);
 
   // Text area Code start here
 
@@ -185,15 +187,22 @@ export const Viber = (props) => {
       context: type ? 'outbound' : 'default',
       embedded: type || 'full',
     };
-    globalActions.fetchSchemaForEntity(getTagsQuery);
+    globalActionsProps.fetchSchemaForEntity(getTagsQuery);
   }, []);
 
   const onTagSelect = (data) => {
+    // update message content
     const messageData = `${messageContent}{{${data}}}`;
     updateTextMessageContent(messageData);
     updateTextContentError(messageData);
   };
 
+  const onButtonTagSelect = (data) => {
+    const newUrl = `${buttonURL}{{${data}}}`;
+    updateButtonUrl(newUrl);
+    onChangeButtonUrl({ target: { value: newUrl } });
+  };
+
   const handleOnTagsContextChange = (data) => {
     const query = {
       layout: 'LINE',
@@ -202,16 +211,14 @@ export const Viber = (props) => {
             (data || '').toLowerCase() === 'all' ? 'default' : (data || '').toLowerCase(),
       embedded:
             location.query.type === 'embedded'
-            ? location.query.type
-            : 'full',
+              ? location.query.type
+              : 'full',
     };
-    globalActions.fetchSchemaForEntity(query);
+    globalActionsProps.fetchSchemaForEntity(query);
   };
 
-  const tags = metaEntities && metaEntities.tags
-  ? metaEntities.tags.standard
-  : [];
-// tags Code end here
+  const tags = metaEntities?.tags?.standard || [];
+  // tags Code end here
 
   // validation on Text area and tags validation
   const updateTextContentError = (value) => {
@@ -261,10 +268,10 @@ export const Viber = (props) => {
           {formatMessage(messages.message)}
         </CapHeading>
         <TagList
-          key={"viber_tags"}
+          key="viber_tags"
           className="tag-list-viber"
           moduleFilterEnabled={
-            location && location.query && location.query.type !== "embedded"
+            location?.query?.type !== "embedded"
           }
           label={formatMessage(messages.addLabels)}
           onTagSelect={onTagSelect}
@@ -272,7 +279,7 @@ export const Viber = (props) => {
           location={location}
           tags={tags}
           injectedTags={injectedTags || {}}
-          id={"viber_tags"}
+          id="viber_tags"
           userLocale={localStorage.getItem("jlocale") || "en"}
           selectedOfferDetails={selectedOfferDetails}
           eventContextTags={eventContextTags}
@@ -280,7 +287,7 @@ export const Viber = (props) => {
       </CapColumn>
       <div className="viber-textarea-wrapper">
         <TextArea
-          id={"viber_textarea"}
+          id="viber_textarea"
           autosize={false}
           onChange={onTextContentChange}
           className={`${errorMessageTextarea ? "error" : ""}`}
@@ -292,25 +299,28 @@ export const Viber = (props) => {
           placeholder={formatMessage(messages.enterMessage)}
         />
         {!isAiContentBotDisabled && (
-        <CapAskAira.ContentGenerationBot
-          text={messageContent || ""}
-          setText={(text) => {
-            onTextContentChange({ target: { value: text } });
-          }}
-          iconPlacement="float-br"
-          iconSize="1.6rem"
-          rootStyle={{
-            bottom: "0.2rem",
-            right: "0.2rem",
-            left: "auto",
-            position: "absolute",
-          }}
-        />
-      )}
+          <CapAskAira.ContentGenerationBot
+            text={messageContent || ""}
+            setText={(text) => {
+              onTextContentChange({ target: { value: text } });
+            }}
+            iconPlacement="float-br"
+            iconSize="1.6rem"
+            rootStyle={{
+              bottom: "0.2rem",
+              right: "0.2rem",
+              left: "auto",
+              position: "absolute",
+            }}
+          />
+        )}
       </div>
       <CapLabel type="label1" className="char-count-viber">
         <FormattedMessage {...messages.charCount} />
-        {(messageContent || "").length}/{charLimit}{" "}
+        {(messageContent || "").length}
+/
+        {charLimit}
+        {" "}
       </CapLabel>
     </>
   );
@@ -399,7 +409,7 @@ export const Viber = (props) => {
       onVideoUploadUpdateAssestList={setUpdateViberVideoSrc}
       videoData={viber}
       className="cap-custom-video-upload"
-      formClassName={"viber-video-upload"}
+      formClassName="viber-video-upload"
       channel={VIBER}
       errorMessage={formatMessage(messages.videoErrorMessage)}
       showVideoNameAndDuration
@@ -465,15 +475,14 @@ export const Viber = (props) => {
     }
   };
 
-  const isCtaSaveDisabled =
-    isEmpty(buttonText.trim()) ||
-    isEmpty(buttonURL.trim()) ||
-    buttonURLErrorMessage;
+  const isCtaSaveDisabled = isEmpty(buttonText.trim())
+    || isEmpty(buttonURL.trim())
+    || buttonURLErrorMessage;
 
   const ButtonViber = !isCtaSaved ? (
     <div className="cta-section">
       <CapHeading type="h4" className="button-text">
-        {formatMessage(messages.buttonText)}{" "}
+        {formatMessage(messages.buttonText)}
         <CapTooltip title={formatMessage(messages.buttonTextTooltip)}>
           <CapIcon type="info" size="s" />
         </CapTooltip>
@@ -488,15 +497,24 @@ export const Viber = (props) => {
         maxLength={20}
         placeholder={formatMessage(messages.enterButtonText)}
       />
-      <CapInput
-        id="viber-button-url"
-        type="input"
-        onChange={onChangeButtonUrl}
-        defaultValue={buttonURL}
-        value={buttonURL}
-        label={formatMessage(messages.buttonUrl)}
-        errorMessage={buttonURLErrorMessage}
-        placeholder={formatMessage(messages.enterButtonUrl)}
+      <CapTagListWithInput
+        inputId="viber-button-url"
+        inputValue={buttonURL}
+        inputOnChange={onChangeButtonUrl}
+        inputPlaceholder={formatMessage(messages.enterButtonUrl)}
+        inputErrorMessage={buttonURLErrorMessage}
+        headingText={formatMessage(messages.buttonUrl)}
+        headingStyle={{ marginTop: '3%', marginRight: '68%'}}
+        className="tag-list-viber"
+        moduleFilterEnabled={location?.query?.type !== "embedded"}
+        onTagSelect={onButtonTagSelect}
+        onContextChange={handleOnTagsContextChange}
+        location={location}
+        tags={tags}
+        injectedTags={injectedTags || {}}
+        userLocale={localStorage.getItem("jlocale") || "en"}
+        selectedOfferDetails={selectedOfferDetails}
+        eventContextTags={eventContextTags}
       />
       <CapColumn className="cta-actions">
         <CapButton
@@ -537,7 +555,7 @@ export const Viber = (props) => {
     <div className="button-section">
       <CapHeader
         className="viber-render-heading"
-        title={
+        title={(
           <CapRow type="flex">
             <CapHeading type="h4">
               {formatMessage(messages.btnLabel)}
@@ -546,7 +564,7 @@ export const Viber = (props) => {
               {formatMessage(messages.optional)}
             </CapHeading>
           </CapRow>
-        }
+        )}
         description={
           <CapLabel type="label3">{formatMessage(messages.btnDesc)}</CapLabel>
         }
@@ -578,8 +596,7 @@ export const Viber = (props) => {
       messageData.image.url = imageSrc;
     }
     if (isMediaTypeVideo) {
-      const { viberVideoSrc, duration, viberVideoPreviewImg } =
-        viberVideoSrcAndPreview;
+      const { viberVideoSrc, duration, viberVideoPreviewImg } = viberVideoSrcAndPreview;
       messageData.video = {};
       messageData.video.url = viberVideoSrc;
       messageData.video.thumbnailUrl = viberVideoPreviewImg;
@@ -642,13 +659,13 @@ export const Viber = (props) => {
 
   const onCreateViber = () => {
     actions.createTemplate(
-        formatSubmitPayload(),
-        (resp, errorMessage) => {
-          createCallback({resp, errorMessage});
-          if (!errorMessage) {
-            onCreateComplete();
-          }
+      formatSubmitPayload(),
+      (resp, errorMessage) => {
+        createCallback({resp, errorMessage});
+        if (!errorMessage) {
+          onCreateComplete();
         }
+      }
     );
   };
 
@@ -658,12 +675,13 @@ export const Viber = (props) => {
         ...formatSubmitPayload(),
         _id: params.id,
       },
-        (resp, errorMessage) => {
-          createCallback({resp, errorMessage}, true);
-          if (!errorMessage) {
-            onCreateComplete();
-          }
-        });
+      (resp, errorMessage) => {
+        createCallback({resp, errorMessage}, true);
+        if (!errorMessage) {
+          onCreateComplete();
+        }
+      }
+    );
   };
 
   const onDoneCallback = () => {
@@ -692,8 +710,8 @@ export const Viber = (props) => {
     }
     // if media type is image/video than image/video should be uploaded
     if (
-      (isMediaTypeImage && !imageSrc) ||
-      (isMediaTypeVideo && !viberVideoSrcAndPreview.viberVideoSrc)
+      (isMediaTypeImage && !imageSrc)
+      || (isMediaTypeVideo && !viberVideoSrcAndPreview.viberVideoSrc)
     ) {
       return true;
     }
@@ -710,7 +728,7 @@ export const Viber = (props) => {
           <CapColumn span={14}>
             {isFullMode ? (
               <CapInput
-                id={`viber_input`}
+                id="viber_input"
                 onChange={onTextTitleChange}
                 errorMessage={errorMessageTitle}
                 placeholder={formatMessage(
@@ -727,7 +745,7 @@ export const Viber = (props) => {
             {renderMediaComponent()}
             {renderTextAreaViber()}
             {renderButtonsSection()}
-            <div style={{marginBottom: '100px'}}/>
+            <div style={{marginBottom: '100px'}} />
           </CapColumn>
           <CapColumn span={6}>
             <CapRow>
@@ -737,9 +755,17 @@ export const Viber = (props) => {
                   type="h3"
                   style={{margin: '24px 0px 0px 28px'}}
                 >
-                  <FormattedMessage {...messages.message} />: {" "}
-                  ({(messageContent || '').length}/{charLimit} {" "}
-                  <FormattedMessage {...messages.characters} />)
+                  <FormattedMessage {...messages.message} />
+:
+                  {" "}
+                  (
+                  {(messageContent || '').length}
+/
+                  {charLimit}
+                  {' '}
+                  {" "}
+                  <FormattedMessage {...messages.characters} />
+)
                 </CapHeading>
               </CapColumn>
             </CapRow>