@capillarytech/creatives-library 7.8.0 → 7.9.0

package/utils/gtmTrackers/index.js

@@ -5,13 +5,17 @@ const gtmEvents = require.context('./gtmEvents', true, /\.js$/, 'lazy');
 export const gtmPush = (eventType, eventObject) => {
   try {
     gtmEvents(`./${eventType}.js`)
-      .then(event => {
+      .then((event) => {
         event.default(eventObject);
       })
-      .catch(err => {
-        Bugsnag.notify(err);
+      .catch((err) => {
+        if (err) {
+          Bugsnag.notify(err);
+        }
       });
   } catch (e) {
-    Bugsnag.notify(e);
+    if (e) {
+      Bugsnag.notify(e);
+    }
   }
 };

package/v2Components/CapImageUpload/index.js

@@ -85,6 +85,12 @@ function CapImageUpload(props) {
       };
       submitAction({file, type: 'image', fileParams}, incorrectFile);
     };
+    img.onerror = () => {
+      const fileParams = {
+        error: true,
+      };
+      submitAction({fileParams}, incorrectFile);
+    }
     if (e) {
       const event = e;
       event.target.value = null;
@@ -93,13 +99,12 @@ function CapImageUpload(props) {
 
   const submitAction = useCallback((data, incorrectFile) => {
     const {
-      file: {size},
-      fileParams: {
-          height,
-          width,
-      },
-    } = data;
-    if (incorrectFile || size > imgSize || height > imgHeight || width > imgWidth) {
+      file,
+      fileParams
+    } = data || {};
+    const { size } = file || {};
+    const { height, width, error } = fileParams || {}; 
+    if (incorrectFile || size > imgSize || height > imgHeight || width > imgWidth || error) {
       updateImageErrorMessage(formatMessage(messages.imageIncorrectSize));
     } else {
       updateImageErrorMessage('');
@@ -166,6 +171,7 @@ function CapImageUpload(props) {
         <CapUploader.CapDragger
           customRequest={capUploaderCustomRequest}
           className="form-builder-dragger"
+          showUploadList={!isImageError}
         >
           <CapHeading className="dragger-title" type="h7">
             <FormattedMessage {...messages.dragAndDrop} />
@@ -198,7 +204,7 @@ function CapImageUpload(props) {
         <FormattedMessage {...messages.imageReUpload} />
       </CapButton>
     );
-  }, []);
+  }, [isImageError]);
 
   return (
     <div style={style} className="cap-custom-image-upload">

package/v2Components/FormBuilder/index.js

@@ -2854,7 +2854,16 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                     name={val.name ? val.name : `${val.id}-name`}
                     disabled={val.disabled}
                   >
-                    {val.options.map((option, index) => <CapRadio value={option} inductiveText={val.inductiveText && val.inductiveText[index]}>{option}</CapRadio>) }
+                    {val.options.map((option, index) => {
+                      const isMappedTemplateWechat = val.id === "template-redirect-options-radio";
+                      return (
+                        <CapRadio
+                          value={ isMappedTemplateWechat ? option.value : option } 
+                          inductiveText={val.inductiveText && val.inductiveText[index]}>{ isMappedTemplateWechat ? option.label : option } 
+                        </CapRadio>
+                      )
+                    }
+                    )}
 
                   </CapRadioGroup>
                   {/*{ifError ?*/}

package/v2Components/NavigationBar/index.js

@@ -10,11 +10,23 @@ import styled from 'styled-components';
 import { isEmpty, forEach } from 'lodash';
 import { loadItem } from 'services/localStorageApi';
 import { intlShape, injectIntl } from 'react-intl';
+import { FONT_COLOR_04 } from '@capillarytech/cap-ui-library/styled/variables';
 import TopBar from '../TopBar';
 import messages from './messages';
+import { LOYALTY } from '../../v2Containers/App/constants';
+import {
+  HELP_URL,
+  LOYALTY_HELP_URL,
+} from '../../v2Containers/Cap/constants';
 const PRODUCT_MASTERS = 'masters';
 const EMBEDDED = 'embedded';
 
+const AppWrapper = styled.div`
+  .navigation-setting-icon {
+    color: ${FONT_COLOR_04};
+  }
+`;
+
 const CapWrapper = styled.div`
   position: absolute;
   padding: 0;
@@ -34,9 +46,37 @@ const ComponentWrapper = styled.div`
 class NavigationBar extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {
-      selectedProduct: '',
-    };
+    this.state = this.initializeSelectedProduct();
+  }
+
+  initializeSelectedProduct = () => {
+    const {location, intl: {formatMessage}} = this.props;
+    const { pathname } = location;
+    const parentModule = pathname.substring(pathname.lastIndexOf('/') + 1);
+    switch (parentModule) {
+      case LOYALTY:
+        return {
+          selectedProduct: formatMessage(messages.loyaltyProgram),
+          helpUrl: LOYALTY_HELP_URL,
+          settingsIcon: {
+            iconType: 'settings',
+            key: 'settings',
+            placement: 'bottomRight',
+            className: 'navigation-setting-icon',
+            toolTip: formatMessage(messages.noProductSetting),
+          },
+        };
+      default:
+        return {
+          selectedProduct: formatMessage(messages.selectedProductDefault),
+          helpUrl: HELP_URL,
+          settingsIcon: {
+            iconType: 'settings',
+            key: 'settings',
+            onClickHandler: this.onSettingsIconClick,
+          },
+        };
+    }
   }
 
   onOrgSettingsClick = () => {
@@ -57,7 +97,7 @@ class NavigationBar extends React.Component {
   };
 
   onHelpIconClick = () => {
-    const { helpUrl } = this.props;
+    const {helpUrl} = this.state;
     if (helpUrl) {
       window.open(helpUrl, '_blank');
     }
@@ -113,18 +153,17 @@ class NavigationBar extends React.Component {
     return productsList;
   };
 
-  getTopbarIcons = () => [
-    {
-      iconType: 'help',
-      key: 'help',
-      onClickHandler: this.onHelpIconClick,
-    },
-    {
-      iconType: 'settings',
-      key: 'settings',
-      onClickHandler: this.onSettingsIconClick,
-    },
-  ];
+  getTopbarIcons = () => {
+    const {settingsIcon} = this.state;
+    return [
+      {
+        iconType: 'help',
+        key: 'help',
+        onClickHandler: this.onHelpIconClick,
+      },
+      settingsIcon,
+    ];
+  }
 
   getDropdownMenu = () => {
     const { formatMessage } = this.props.intl;
@@ -168,7 +207,6 @@ class NavigationBar extends React.Component {
       topbarMenuData,
       loggedIn,
       type,
-      intl,
     } = this.props;
     const productsList = this.getProductsList();
     const proxyOrgList = this.getProxyOrgList();
@@ -178,14 +216,11 @@ class NavigationBar extends React.Component {
     const { selectedProduct } = this.state;
     const customTopBarProps = {};
     return (
-      <div>
+      <AppWrapper>
         {loggedIn && type !== EMBEDDED &&
           <TopBar
             productsList={productsList}
-            selectedProduct={
-              selectedProduct ||
-              intl.formatMessage(messages.selectedProductDefault)
-            }
+            selectedProduct={selectedProduct}
             handleProductChange={this.handleProductChange}
             proxyOrgList={proxyOrgList}
             selectedOrg={selectedOrg}
@@ -197,12 +232,12 @@ class NavigationBar extends React.Component {
             {...customTopBarProps}
           />
         }
-          <CapWrapper isEmbedded={type === EMBEDDED}>
-            <ComponentWrapper>
-              {React.Children.toArray(this.props.children)}
-            </ComponentWrapper>
-          </CapWrapper>
-      </div>
+        <CapWrapper isEmbedded={type === EMBEDDED}>
+          <ComponentWrapper>
+            {React.Children.toArray(this.props.children)}
+          </ComponentWrapper>
+        </CapWrapper>
+      </AppWrapper>
     );
   }
 }
@@ -214,7 +249,6 @@ NavigationBar.propTypes = {
   changeOrg: PropTypes.func,
   settingsUrl: PropTypes.string,
   children: PropTypes.node,
-  helpUrl: PropTypes.string,
   orgSettingsUrl: PropTypes.string,
   loggedIn: PropTypes.bool,
   intl: intlShape.isRequired,

package/v2Components/NavigationBar/messages.js

@@ -57,4 +57,9 @@ export default defineMessages({
     id: `${scope}.storeCare`,
     defaultMessage: 'Store Care',
   },
+  "noProductSetting": {
+    id: `${scope}.noProductSetting`,
+    defaultMessage:
+      'There are no product settings. Organisation settings are available under profile on the right.',
+  },
 });