@capillarytech/creatives-library 7.12.18 → 7.12.20

package/package.json

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

package/v2Components/CapActionButton/index.js

@@ -0,0 +1,116 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
+import {
+    CapRow,
+    CapHeading,
+    CapInput,
+    CapDivider,
+    CapButton,
+    CapTooltip,
+    CapLabel,
+  } from '@capillarytech/cap-ui-library';
+
+import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';
+import globalMessages from '../../v2Containers/Cap/messages';
+import messages from './messages';
+import './index.scss';
+const CapActionButton = (props) => {
+  const {
+    intl,
+    buttonTextlen,
+    type,
+    updateButtonChange,
+    suggestions = [],
+} = props;
+  const {text = "", url = "" } = suggestions[0] || {};
+  const [buttonText, setButtonText] = useState(text || '');
+  const [buttonLink, setButtonLink] = useState(url || '');
+  const [buttonURLErrorMessage, updateButtonURLErrorMessage] = useState(false);
+
+  const { formatMessage } = intl;
+
+  const onButtonTextChange = (e) => {
+    const val = e.target.value;
+    setButtonText(val);
+    updateButtonChange([{
+      type,
+      text: val,
+      url: buttonLink,
+    }]);
+  };
+
+  const onButtonLinkChange = (e) => {
+    const val = e.target.value;
+    setButtonLink(val);
+    let errorMessage = false;
+    if (!isUrl(val)) {
+      errorMessage = formatMessage(messages.inValidUrliErrorMessage);
+    } else {
+      updateButtonChange([{
+        type,
+        text: buttonText,
+        url: val,
+      }]);
+    }
+    updateButtonURLErrorMessage(errorMessage);
+  };
+
+  return (<CapRow
+    className="cap-action-button"
+    >
+    {/* Button text */}
+    <CapHeading type="h4">
+      <FormattedMessage {...messages.templateButtonText} />
+    </CapHeading>
+    <CapInput
+      id="rcs-template-Button-Text"
+      onChange={onButtonTextChange}
+      placeholder={formatMessage(messages.templateButtonTextPlaceholder)}
+      value={buttonText}
+      size="default"
+      maxLength={buttonTextlen}
+      suffix={
+        <CapLabel type="label1">{`${buttonText?.length} / ${buttonTextlen}`}</CapLabel>
+        }
+    />
+
+    {/* button Link */}
+    <CapHeading
+      type="h4"
+      style={{paddingTop: "20px"}}
+    ><FormattedMessage {...messages.templateButtonLink} /></CapHeading>
+    <CapInput
+      id="rcs-template-Button-link"
+      onChange={onButtonLinkChange}
+      placeholder={formatMessage(messages.templateButtonLinkPlaceholder)}
+      value={buttonLink}
+      size="default"
+      errorMessage={buttonURLErrorMessage}
+          />
+
+    {/* divider */}
+    <CapDivider style={{ marginBottom: 16, marginTop: 23 }}/>
+
+    {/* Add button */}
+    <CapTooltip
+      placement="topLeft"
+      title={formatMessage(globalMessages.comingSoonTooltip)}
+    >
+      <CapButton
+        type="flat" style={{ opacity: "0.5",
+          cursor: "not-allowed"}} isAddBtn>
+        {formatMessage(messages.addButton)}
+      </CapButton>
+    </CapTooltip>
+  </CapRow>);
+};
+
+CapActionButton.propTypes = {
+  intl: intlShape.isRequired,
+  buttonTextlen: intlShape.isRequired,
+  type: PropTypes.string,
+  updateButtonChange: PropTypes.fun,
+  suggestions: PropTypes.array,
+};
+export default injectIntl(CapActionButton);

package/v2Components/CapActionButton/index.scss

@@ -0,0 +1,12 @@
+
+@import'~@capillarytech/cap-ui-library/styles/_variables';
+
+
+.cap-action-button {
+    border: solid 1px $CAP_G06;
+    margin-left: 20px;
+    width: 478px;
+    height: 246px;
+    padding: 20px 20px 55px;
+    border-radius: 4px;
+}

package/v2Components/CapActionButton/messages.js

@@ -0,0 +1,29 @@
+import { defineMessages } from 'react-intl';
+const prefix = `creatives.componentsV2.CapActionButton`;
+
+export default defineMessages({
+  templateButtonText: {
+    id: `${prefix}.templateButtonText`,
+    defaultMessage: 'Button text',
+  },
+  templateButtonTextPlaceholder: {
+    id: `${prefix}.templateButtonTextPlaceholder`,
+    defaultMessage: 'Enter button text',
+  },
+  templateButtonLink: {
+    id: `${prefix}.templateButtonLink`,
+    defaultMessage: 'Button link',
+  },
+  templateButtonLinkPlaceholder: {
+    id: `${prefix}.templateButtonLinkPlaceholder`,
+    defaultMessage: 'Enter button link',
+  },
+  addButton: {
+    id: `${prefix}.addButton`,
+    defaultMessage: 'Add button',
+  },
+  inValidUrliErrorMessage: {
+    id: `${prefix}.inValidUrliErrorMessage`,
+    defaultMessage: 'Button URL is not valid',
+  },
+});

package/v2Containers/Cap/messages.js

@@ -185,5 +185,9 @@ export default defineMessages({
     defaultMessage:
       'Unsupported tags: {unsupportedTags}. Please remove them from this message.',
   },
+  "comingSoonTooltip": {
+    id: `creatives.containersV2.comingSoonTooltip`,
+    defaultMessage: 'Not enabled yet. Coming soon!',
+  },
 });
 

package/v2Containers/Rcs/constants.js

@@ -1,3 +1,4 @@
+
 export const RCS = 'RCS';
 export const SMS = 'SMS';
 export const MEDIUM = 'MEDIUM';
@@ -17,6 +18,8 @@ export const RCS_DLT_MODE = {
 export const TEMPLATE_DESC_MAX_LENGTH = 1000;
 export const FALLBACK_MESSAGE_MAX_LENGTH = 160;
 export const TEMPLATE_TITLE_MAX_LENGTH = 200;
+export const TEMPLATE_BUTTON_TEXT_MAX_LENGTH = 20;
+
 export const TAG = 'TAG';
 export const EMBEDDED = 'embedded';
 export const DEFAULT = 'default';

package/v2Containers/Rcs/index.js

@@ -26,6 +26,9 @@ 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 CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
+import CapActionButton from '../../v2Components/CapActionButton';
+
 import {
   CAP_G01,
   CAP_SPACE_16,
@@ -49,6 +52,7 @@ import {
   SMS,
   RCS_MEDIA_TYPES,
   TEMPLATE_TITLE_MAX_LENGTH,
+  TEMPLATE_BUTTON_TEXT_MAX_LENGTH,
   TEMPLATE_DESC_MAX_LENGTH,
   FALLBACK_MESSAGE_MAX_LENGTH,
   TAG,
@@ -64,7 +68,6 @@ import {
   RCS_DLT_MODE,
   MEDIUM,
   VERTICAL,
-  RIGHT,
   STANDALONE,
   RICHCARD,
 } from './constants';
@@ -78,6 +81,7 @@ import Templates from '../Templates';
 import SmsTraiEdit from '../SmsTrai/Edit';
 import TagList from '../TagList';
 import { validateTags } from '../../utils/tagValidations';
+const { Group: CapCheckboxGroup } = CapCheckbox;
 export const Rcs = (props) => {
   const {
     intl,
@@ -126,7 +130,8 @@ export const Rcs = (props) => {
   const [showDltCard, setShowDltCard] = useState(false);
   const [fallbackPreviewmode, setFallbackPreviewmode] = useState(false);
   const [dltPreviewData, setDltPreviewData] = useState('');
-
+  const [suggestions, setSuggestions] = useState([]);
+  const [buttonType, setButtonType] = useState('');
   const mediaRadioOptions = [
     {
       value: RCS_MEDIA_TYPES.NONE,
@@ -161,12 +166,49 @@ export const Rcs = (props) => {
     }
     }
 `;
-
+  const updateButtonChange = (val) => {
+    setSuggestions(val);
+  };
   const RcsLabel = styled.div`
     display: flex;
     margin-top: 20px;
-    margin-bottom: 6px;
   `;
+  const rcsButtonTypeOptions = [
+    {
+      label: <>
+        <div style={{display: "inline-grid"}}>
+          <CapHeading type="h4"><FormattedMessage {...messages.templateCTAButton} /></CapHeading>
+          <CapLabel type="label3" style={{ marginBottom: "17px"}}>
+            <FormattedMessage {...messages.templateCTAButtonDesc} />
+          </CapLabel>
+        </div>
+        {buttonType && <CapActionButton
+          type="CTA"
+          buttonTextlen={TEMPLATE_BUTTON_TEXT_MAX_LENGTH}
+          updateButtonChange={updateButtonChange}
+          suggestions={suggestions}
+          />}
+      </>,
+      value: "CTA",
+    },
+    {
+      label: <CapTooltip
+        placement="topLeft"
+        title={<FormattedMessage {...globalMessages.comingSoonTooltip} />}
+    >
+        <div style={{display: "inline-grid", opacity: "0.5"}}>
+          <CapHeading type="h4" disabled>
+            <FormattedMessage {...messages.templateQRButton} />
+          </CapHeading>
+          <CapLabel type="label3" style={{ marginBottom: "17px"}} disabled>
+            <FormattedMessage {...messages.templateQRButtonDesc} />
+          </CapLabel>
+        </div>
+      </CapTooltip>,
+      value: "QR",
+      disabled: "true",
+    },
+  ];
 
   //gets template details
   const paramObj = params || {};
@@ -194,6 +236,7 @@ export const Rcs = (props) => {
         mediaType = RCS_MEDIA_TYPES.NONE,
         title = '',
         description = '',
+        suggestions: rcsSuggestions = [],
       } = cardContent[0] || {};
       const { message, templateConfigs = {} } = smsFallBackContent;
       setTemplateName(name);
@@ -203,6 +246,11 @@ export const Rcs = (props) => {
       setTemplateDesc(description);
       setFallbackMessage(message);
       setEditFlow(true);
+      if (rcsSuggestions.length > 0) {
+        setSuggestions(rcsSuggestions);
+        setButtonType(["CTA"]);
+      }
+
       // for DLT Fallback message
       if (isDltEnabled) {
         const {
@@ -303,7 +351,7 @@ export const Rcs = (props) => {
   };
   // tag Code end
 
-  const renderLabel = (value, showLabel) => (
+  const renderLabel = (value, showLabel, desc) => (<>
     <RcsLabel>
       <CapHeading type="h4">{formatMessage(messages[value])}</CapHeading>
       {showLabel && (
@@ -312,6 +360,12 @@ export const Rcs = (props) => {
         </CapHeading>
       )}
     </RcsLabel>
+    {desc && (
+    <CapLabel type="label3" style={{ marginBottom: "17px"}}>
+      {formatMessage(messages[desc])}
+    </CapLabel>
+    )}
+    </>
   );
 
   const onTemplateNameChange = ({ target: { value } }) => {
@@ -399,7 +453,10 @@ export const Rcs = (props) => {
     }
     return errorMessage;
   };
-
+  const onChangeButtonTypes = (val) => {
+    setButtonType(val[0]);
+    setSuggestions([]);
+  };
   const renderTextComponent = (
     <>
       {/* template title */}
@@ -452,6 +509,14 @@ export const Rcs = (props) => {
         value={templateDesc || ''}
         maxLength={1000}
       />
+      {renderLabel("templateButton", true, "templateButtonDesc")}
+      <CapCheckboxGroup
+        style={{display: "grid"}}
+        options={rcsButtonTypeOptions}
+        value={buttonType}
+        onChange={onChangeButtonTypes}
+      />
+
     </>
   );
 
@@ -815,6 +880,7 @@ export const Rcs = (props) => {
                   title: templateTitle,
                   description: templateDesc,
                   mediaType: templateMediaType,
+                  ...(suggestions.length > 0 && {suggestions}),
                   ...(!isMediaTypeNone && {
                     media: {
                       mediaUrl: rcsImageSrc,
@@ -930,6 +996,12 @@ export const Rcs = (props) => {
     if (!isMediaTypeNone && rcsImageSrc === '') {
       return true;
     }
+
+    // if call to action (Button text & link) is not added
+    const {text, url} = suggestions[0] || {};
+    if (buttonType && !(text && url) ) {
+      return true;
+    }
     if (templateDescError || fallbackMessageError) {
       return true;
     }
@@ -951,7 +1023,12 @@ export const Rcs = (props) => {
       );
     }
     const tempMsg = dltPreviewData === '' ? fallbackMessage : dltPreviewData;
-    const mediaTypeMsg = isMediaTypeNone ? 'textMessage' : 'image';
+    let mediaTypeMsg = isMediaTypeNone ? 'textMessage' : 'image';
+    mediaTypeMsg = formatMessage(messages[mediaTypeMsg]);
+    const {text, url} = suggestions[0] || {};
+    if (buttonType && !(text && url) ) {
+      mediaTypeMsg = `${formatMessage(messages.buttonTextAndUrl)} ${mediaTypeMsg} `;
+    }
     return (
       <>
         <CapRow className="cap-rcs-creatives">
@@ -993,7 +1070,7 @@ export const Rcs = (props) => {
             title={
               isDisableDone()
                 ? formatMessage(messages.rcsDoneBtnToolTip, {
-                  type: formatMessage(messages[mediaTypeMsg]),
+                  type: mediaTypeMsg,
                 })
                 : ''
             }

package/v2Containers/Rcs/messages.js

@@ -16,7 +16,7 @@ export default defineMessages({
   },
   image: {
     id: `${prefix}.image`,
-    defaultMessage: 'image',
+    defaultMessage: 'and image',
   },
   mediaVideo: {
     id: `${prefix}.mediaVideo`,
@@ -52,7 +52,7 @@ export default defineMessages({
   },
   textMessage: {
     id: `${prefix}.textMessage`,
-    defaultMessage: 'text message',
+    defaultMessage: 'and text message',
   },
   templateDescLengthError: {
     id: `${prefix}.templateDescLengthError`,
@@ -60,7 +60,7 @@ export default defineMessages({
   },
   rcsDoneBtnToolTip: {
     id: `${prefix}.rcsDoneBtnToolTip`,
-    defaultMessage: 'Please add template name & {type} to proceed further',
+    defaultMessage: 'Please add template name {type} to proceed further',
   },
   fallbackLabel: {
     id: `${prefix}.fallbackLabel`,
@@ -119,4 +119,32 @@ export default defineMessages({
     id: `${prefix}.fallbackPreviewtitle`,
     defaultMessage: 'Preview of fallback SMS',
   },
+  templateButton: {
+    id: `${prefix}.templateTitle`,
+    defaultMessage: 'Buttons',
+  },
+  templateButtonDesc: {
+    id: `${prefix}.templateButtonDesc`,
+    defaultMessage: 'These will be show clickable buttons below your message.',
+  },
+  templateCTAButton: {
+    id: `${prefix}.templateCTAButton`,
+    defaultMessage: 'Call to action',
+  },
+  templateCTAButtonDesc: {
+    id: `${prefix}.templateCTAButtonDesc`,
+    defaultMessage: 'Create up to 3 buttons that let customers respond to your messages or take action.',
+  },
+  templateQRButton: {
+    id: `${prefix}.templateQRButton`,
+    defaultMessage: 'Quick reply',
+  },
+  templateQRButtonDesc: {
+    id: `${prefix}.templateQRButtonDesc`,
+    defaultMessage: 'Create up to 3 buttons that let customers respond to your messages or take action.',
+  },
+  buttonTextAndUrl: {
+    id: `${prefix}.buttonTextAndUrl`,
+    defaultMessage: ', CTA button text & url ',
+  },
 });