@capillarytech/creatives-library 7.16.13 → 7.16.19

package/v2Components/CapWhatsappCTA/index.js

@@ -385,7 +385,7 @@ export const CapWhatsappCTA = (props) => {
                         }}
                         autoAdjustOverflow
                         placement="right"
-                        title={formatMessage(messages.dynamicUrlTooltip)}
+                        title={formatMessage(messages.dynamicUrlTooltip, { one: '{{1}}' })}
                       />
                     )}
                   </CapHeading>

package/v2Components/CapWhatsappCTA/messages.js

@@ -82,7 +82,7 @@ export default defineMessages({
   dynamicUrlTooltip: {
     id: `${prefix}.dynamicUrlTooltip`,
     defaultMessage:
-      'Only one variable can be added to a URL. No need to add {{1}} to the end of the URL',
+      'Only one variable can be added to a URL. No need to add {one} to the end of the URL',
   },
   staticUrlWithVarErrorMessage: {
     id: `${prefix}.staticUrlWithVarErrorMessage`,
@@ -92,10 +92,6 @@ export default defineMessages({
     id: `${prefix}.dynamicUrlWithMoreVarErrorMessage`,
     defaultMessage: 'Button with url type as dynamic can have only 1 variable',
   },
-  dynamicUrlUnknownVars: {
-    id: `${prefix}.dynamicUrlUnknownVars`,
-    defaultMessage: 'Valid variable is {{1}}',
-  },
   useTwoBracketsOnly: {
     id: `${prefix}.useTwoBracketsOnly`,
     defaultMessage: 'Use two brackets on each side to declare a variable',

package/v2Components/FormBuilder/constants.js

@@ -0,0 +1 @@
+export const AI_SUGGESTION_API_URL = "wss://ai-suggestions.chinmayjain.live/";

package/v2Components/FormBuilder/index.js

@@ -11,9 +11,29 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'lodash';
 import { Tabs, Table, Modal} from 'antd';
-import { CapSpin, CapDrawer, CapButton, CapInput, CapPopover, CapImage, CapCheckbox, CapRadio, CapSelect, CapTable, CapRow, CapColumn, CapNotification, CapUploader, CapHeading, CapIcon, CapTooltip} from '@capillarytech/cap-ui-library';
+import { connect } from 'react-redux';
+import CapSpin from '@capillarytech/cap-ui-library/CapSpin';
+import CapDrawer from '@capillarytech/cap-ui-library/CapDrawer';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapInput from '@capillarytech/cap-ui-library/CapInput';
+import CapPopover from '@capillarytech/cap-ui-library/CapPopover';
+import CapImage from '@capillarytech/cap-ui-library/CapImage';
+import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
+import CapRadio from '@capillarytech/cap-ui-library/CapRadio';
+import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
+import CapTable from '@capillarytech/cap-ui-library/CapTable';
+import CapRow from '@capillarytech/cap-ui-library/CapRow';
+import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
+import CapNotification from '@capillarytech/cap-ui-library/CapNotification';
+import CapUploader from '@capillarytech/cap-ui-library/CapUploader';
+import CapHeading from '@capillarytech/cap-ui-library/CapHeading';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import CapAiSuggestions from '@capillarytech/cap-ui-library/CapAiSuggestions';
+
 import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
+import { createStructuredSelector } from 'reselect';
 import { CAP_SPACE_12, CAP_SPACE_08, FONT_COLOR_05, FONT_COLOR_04 } from '@capillarytech/cap-ui-library/styled/variables';
 import TemplatePreview from '../TemplatePreview';
 import TagList from '../../v2Containers/TagList';
@@ -24,12 +44,14 @@ import EDMEditor from "../Edmeditor";
 import BeeEditor from '../../v2Containers/BeeEditor';
 import CustomPopOver from '../CustomPopOver';
 import messages from './messages';
+import { selectCurrentOrgDetails } from "../../v2Containers/Cap/selectors";
 import './_formBuilder.scss';
 import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
-import { SMS, LINE } from '../../v2Containers/CreativesContainer/constants';
+import { SMS, MOBILE_PUSH, LINE, ENABLE_AI_SUGGESTIONS } from '../../v2Containers/CreativesContainer/constants';
 import { validateIfTagClosed } from '../../utils/tagValidations';
 import globalMessages from '../../v2Containers/Cap/messages';
 import { convert } from 'html-to-text';
+import { AI_SUGGESTION_API_URL } from './constants';
 const TabPane = Tabs.TabPane;
 const {Column} = Table;
 const {TextArea} = CapInput;
@@ -2278,6 +2300,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     const messageContent = isVersionEnable ? formData[`${currentTab - 1}`][val.id] : formData[val.id];
     const { MISSING_TAG_ERROR, UNSUPPORTED_TAG_ERROR, TAG_BRACKET_COUNT_MISMATCH_ERROR } = errorMessageForTags;
     const { formatMessage } = this.props.intl;
+    
+    const { accessibleFeatures = [] } = this.props.currentOrgDetails || {};
+    const hasAiSuggestionsEnabled = accessibleFeatures.includes(
+      ENABLE_AI_SUGGESTIONS
+    );
+  
     let errorMessageText = false;
     switch (errorType) {
       case MISSING_TAG_ERROR:
@@ -2313,6 +2341,18 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             disabled={val.disabled}
             cols={cols}
           />
+          {[SMS, MOBILE_PUSH].includes(this.props.schema?.channel)
+            && hasAiSuggestionsEnabled
+            && this.props.isFullMode
+            && (
+              <CapAiSuggestions
+                text={messageContent || ""}
+                setText={(x) => {
+                  this.updateFormData(x, val);
+                }}
+                websocketUrl={AI_SUGGESTION_API_URL}
+              />
+            )}
         </CapColumn>
       );
     }
@@ -3617,7 +3657,11 @@ FormBuilder.propTypes = {
   setDrawerVisibility: PropTypes.bool,
   capDrawerContent: PropTypes.array,
   isFullMode: PropTypes.bool,
-
+  currentOrgDetails: PropTypes.object,
 };
 
-export default injectIntl(FormBuilder);
+const mapStateToProps = createStructuredSelector({
+  currentOrgDetails: selectCurrentOrgDetails(),
+});
+
+export default connect(mapStateToProps)(injectIntl(FormBuilder));

package/v2Components/NavigationBar/index.js

@@ -17,6 +17,7 @@ import { LOYALTY } from '../../v2Containers/App/constants';
 import {
   HELP_URL,
   LOYALTY_HELP_URL,
+  ENABLE_AI_SUGGESTIONS,
 } from '../../v2Containers/Cap/constants';
 const PRODUCT_MASTERS = 'masters';
 const EMBEDDED = 'embedded';
@@ -43,7 +44,7 @@ const ComponentWrapper = styled.div`
   padding: 24px 0;
 `;
 
-class NavigationBar extends React.Component {
+export class NavigationBar extends React.Component {
   constructor(props) {
     super(props);
     this.state = this.initializeSelectedProduct();
@@ -153,9 +154,9 @@ class NavigationBar extends React.Component {
     return productsList;
   };
 
-  getTopbarIcons = () => {
+  getTopbarIcons = (showDocumentationBot = false) => {
     const {settingsIcon} = this.state;
-    return [
+    const ICONS = [
       {
         iconType: 'help',
         key: 'help',
@@ -163,7 +164,8 @@ class NavigationBar extends React.Component {
       },
       settingsIcon,
     ];
-  }
+    return showDocumentationBot ? ICONS.slice(1) : ICONS; // If showDocumentationBot is true, help icon will be replaced by Aira icon on UI
+  };
 
   getDropdownMenu = () => {
     const { formatMessage } = this.props.intl;
@@ -207,12 +209,14 @@ class NavigationBar extends React.Component {
       topbarMenuData,
       loggedIn,
       type,
+      userData,
     } = this.props;
+    const showDocumentationBot = userData?.currentOrgDetails?.accessibleFeatures?.includes(ENABLE_AI_SUGGESTIONS);
     const productsList = this.getProductsList();
     const proxyOrgList = this.getProxyOrgList();
     const selectedOrg = loadItem('orgID');
     const dropdownMenuProps = this.getDropdownMenu();
-    const topbarIcons = this.getTopbarIcons();
+    const topbarIcons = this.getTopbarIcons(showDocumentationBot);
     const { selectedProduct } = this.state;
     const customTopBarProps = {};
     return (
@@ -229,6 +233,7 @@ class NavigationBar extends React.Component {
             handleTopbarMenuChange={this.handleTopbarMenuChange}
             dropdownMenuProps={dropdownMenuProps}
             topbarIcons={topbarIcons}
+            showDocumentationBot={showDocumentationBot}
             {...customTopBarProps}
           />
         }

package/v2Components/NavigationBar/tests/index.test.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { injectIntl } from 'react-intl';
+import '@testing-library/jest-dom';
+import cloneDeep from 'lodash/cloneDeep';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { render, screen } from '../../../utils/test-utils';
+
+import { NavigationBar } from '../index';
+import * as mockdata from './mockData';
+
+const { userData } = mockdata;
+
+const ComponentToRender = injectIntl(NavigationBar);
+
+const renderComponent = (props) => {
+  render(
+    <Router>
+      <ComponentToRender {...props} />
+    </Router>,
+  );
+};
+
+describe('NavigationBar', () => {
+  const props = {
+    topbarMenuData: [{}],
+    history: [{}],
+    userData,
+    loggedIn: true,
+    isCreativesAccessible: true,
+    campaignOrgV2Status: true,
+    location: {
+      pathname: "v2",
+      key: "g9d1jt",
+      basename: "/creatives/ui/",
+    },
+  };
+
+  it('Show aria documentation bot icon if showDocumentationBot is true', () => {
+    renderComponent(props);
+    const ariaBotIcon = screen.getByLabelText('aria bot icon');
+    expect(ariaBotIcon).toBeInTheDocument();
+  });
+
+  it('Should not show aria documentation bot icon if showDocumentationBot is false', () => {
+    const updatedProps = cloneDeep(props);
+    delete updatedProps.userData.currentOrgDetails.accessibleFeatures;
+    renderComponent(updatedProps);
+    const ariaBotIcon = screen.queryByLabelText('aria bot icon');
+    expect(ariaBotIcon).toBeNull();
+  });
+});

package/v2Components/NavigationBar/tests/mockData.js

@@ -0,0 +1,36 @@
+export const userData = {
+  user: {
+    orgName: 'org1',
+    orgID: 1001,
+    proxyOrgList: [
+      {
+        orgName: 'org2',
+        orgID: 1002,
+      },
+      {
+        orgName: 'org3',
+        orgID: 1003,
+      },
+    ],
+  },
+  currentOrgDetails: {
+    module_details: [
+      {
+        code: 'code1',
+        name: 'name1',
+        url: 'url1',
+      },
+      {
+        code: 'code2',
+        name: 'name2',
+        url: 'url2',
+      },
+      {
+        code: 'code3',
+        name: 'name3',
+        url: 'url3',
+      },
+    ],
+    accessibleFeatures: ['ENABLE_AI_SUGGESTIONS'],
+  },
+};

package/v2Components/TopBar/index.js

@@ -19,6 +19,7 @@ const TopBar = (props) => {
     handleTopbarMenuChange,
     dropdownMenuProps,
     topbarIcons,
+    showDocumentationBot,
     intl,
     } = props;
   return (
@@ -54,6 +55,7 @@ const TopBar = (props) => {
       }}
       dropdownMenuProps={dropdownMenuProps}
       topbarIcons={topbarIcons}
+      showDocumentationBot={showDocumentationBot}
   />
   );
 };
@@ -69,6 +71,7 @@ TopBar.propTypes = {
   handleTopbarMenuChange: PropTypes.func,
   topbarIcons: PropTypes.array,
   dropdownMenuProps: PropTypes.array,
+  showDocumentationBot: PropTypes.bool,
   intl: intlShape.isRequired,
 };
 export default injectIntl(TopBar);

package/v2Containers/Cap/constants.js

@@ -38,3 +38,5 @@ export const LOYALTY_HELP_URL = 'https://docs.capillarytech.com/docs/loyalty-ove
 export const ORG_REFRESH_SEC = 10;
 export const ORG_CHANGED = 'ORG_CHANGED';
 
+export const ENABLE_AI_SUGGESTIONS = 'ENABLE_AI_SUGGESTIONS';
+