@capillarytech/creatives-library 7.17.99 → 7.17.101

package/containers/App/constants.js

@@ -14,6 +14,7 @@ export const CUSTOMER_EXTENDED_FIELD = 'Customer extended fields';
 export const EXTENDED_TAG = 'ExtendedTagMessage';
 export const BADGES_UI_ENABLED = 'BADGES_UI_ENABLED';
 export const JP_LOCALE_HIDE_FEATURE = 'JP_LOCALE_HIDE_FEATURE';
+export const ENABLE_WECHAT = 'ENABLE_WECHAT';
 export const ENABLE_CUSTOMER_BARCODE_TAG = "ENABLE_CUSTOMER_BARCODE_TAG";
 
 export const CARD_RELATED_TAGS = [

package/package.json

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

package/utils/common.js

@@ -18,6 +18,7 @@ import {
   BADGES_UI_ENABLED,
   BADGES_ENROLL,
   BADGES_ISSUE,
+  ENABLE_WECHAT,
 } from '../containers/App/constants';
 import { apiMessageFormatHandler } from './commonUtils';
 
@@ -100,6 +101,11 @@ export const hasJPLocaleHideFeatureEnabled = Auth.hasFeatureAccess.bind(
   JP_LOCALE_HIDE_FEATURE,
 );
 
+export const hasWechatFeatureEnabled = Auth.hasFeatureAccess.bind(
+  null,
+  ENABLE_WECHAT,
+);
+
 export const hasCustomerBarcodeFeatureEnabled = Auth.hasFeatureAccess.bind(
   null,
   ENABLE_CUSTOMER_BARCODE_TAG,

package/v2Components/CapDeviceContent/index.js

@@ -297,6 +297,7 @@ const CapDeviceContent = (props) => {
           options={BUTTON_RADIO_OPTIONS}
           value={buttonType}
           onChange={onChangeButtonType}
+          disabled={!isAndroid}
           className="inapp-btn-radio-group"
         />
         {isBtnTypeCta && (

package/v2Components/CapDeviceContent/index.scss

@@ -50,7 +50,7 @@
             .dragger-button.re-upload {
                 top: 13rem;
                 position: absolute;
-                right: $CAP_SPACE_20;
+                right: -1rem;
                 color: $FONT_COLOR_05;
               }
         }

package/v2Components/CapDeviceContent/messages.js

@@ -73,7 +73,7 @@ export default defineMessages({
   },
   btnDesc: {
     id: `${prefix}.btnDesc`,
-    defaultMessage: 'These will be show clickable buttons below your message.',
+    defaultMessage: 'These will be shown as clickable buttons below your message.',
   },
   optional: {
     id: `${prefix}.optional`,

package/v2Components/CapInAppCTA/index.js

@@ -131,9 +131,9 @@ export const CapInAppCTA = (props) => {
           >
             <CapRow className="inapp-cta-row">
               <CapColumn>
-                <CapIcon size="s" type={'launch'} />
+                <CapIcon size="s" type={'launch'} className="btn-icon" />
               </CapColumn>
-              <CapColumn>
+              <CapColumn className="btn-text">
                 <CapLabel type="label2" className="inapp-saved-cta-button-text">
                   {text}
                 </CapLabel>

package/v2Components/CapInAppCTA/index.scss

@@ -90,4 +90,10 @@
 }
 .cta-del-icon {
     padding-left: 1rem;
+}
+.btn-text {
+    margin-left: $CAP_SPACE_08;
+}
+.btn-icon {
+    color: $CAP_G06;
 }

package/v2Containers/InApp/index.js

@@ -428,35 +428,17 @@ export const InApp = (props) => {
   const createModeContent = (
     <CapRow>
       {/* template name */}
-      <CapRow>
-        <CapHeading type="h4">
-          <FormattedMessage {...messages.creativeName} />
-        </CapHeading>
-        <CapInput
-          id="inapp-template-name-input"
-          className="inapp-template-name-input"
-          onChange={onTemplateNameChange}
-          placeholder={formatMessage(globalMessages.templateNamePlaceholder)}
-          value={templateName}
-          size="default"
+      <CapHeading type="h4">
+        <FormattedMessage {...messages.creativeName} />
+      </CapHeading>
+      <CapInput
+        id="inapp-template-name-input"
+        className="inapp-template-name-input"
+        onChange={onTemplateNameChange}
+        placeholder={formatMessage(globalMessages.templateNamePlaceholder)}
+        value={templateName}
+        size="default"
           />
-      </CapRow>
-      {/* Creative layout type*/}
-      <CapRow className="inapp-creative-layout">
-        <CapHeading type="h4">
-          <FormattedMessage {...messages.creativeLayout} />
-        </CapHeading>
-        <CapHeading type="h6" className="inapp-creative-layout-desc">
-          <FormattedMessage {...messages.creativeLayoutDesc} />
-        </CapHeading>
-      </CapRow>
-      <CapRadioGroup
-        id="inapp-layout-radio"
-        options={LAYOUT_RADIO_OPTIONS}
-        value={templateLayoutType}
-        onChange={onTemplateLayoutTypeChange}
-        className="inapp-layout-radio"
-        />
     </CapRow>
   );
   //create methods end
@@ -716,9 +698,31 @@ export const InApp = (props) => {
       <CapRow className="cap-inapp-creatives">
         <CapColumn span={14}>
           {isFullMode && createModeContent}
+          {/* Creative layout type*/}
+          {(isFullMode || !isEditFlow) && (
+            <>
+              <CapRow className="inapp-creative-layout">
+                <CapHeading type="h4">
+                  <FormattedMessage {...messages.creativeLayout} />
+                </CapHeading>
+                <CapHeading type="h6" className="inapp-creative-layout-desc">
+                  <FormattedMessage {...messages.creativeLayoutDesc} />
+                </CapHeading>
+              </CapRow>
+              <CapRadioGroup
+                id="inapp-layout-radio"
+                options={LAYOUT_RADIO_OPTIONS}
+                value={templateLayoutType}
+                onChange={onTemplateLayoutTypeChange}
+                className="inapp-layout-radio"
+              />
+            </>
+          )}
           {/* device tab */}
           <CapTab
-            panes={PANES.filter((devicePane) => devicePane?.isSupported === true)}
+            panes={PANES.filter(
+              (devicePane) => devicePane?.isSupported === true
+            )}
             onChange={(value) => {
               setPanes(value);
             }}
@@ -746,12 +750,10 @@ export const InApp = (props) => {
                 ) : (
                   <FormattedMessage {...globalMessages.done} />
                 )
+              ) : isFullMode ? (
+                <FormattedMessage {...messages.create} />
               ) : (
-                isFullMode ? (
-                  <FormattedMessage {...messages.create} />
-                ) : (
-                  <FormattedMessage {...globalMessages.done} />
-                )
+                <FormattedMessage {...globalMessages.done} />
               )}
             </CapButton>
           </>

package/v2Containers/Templates/index.js

@@ -263,7 +263,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         case WECHAT:
           channel = 'wechat';
           activeMode = ACCOUNT_SELECTION_MODE;
-          this.props.actions.getWeCrmAccounts();
+          commonUtil.hasWechatFeatureEnabled() && this.props.actions.getWeCrmAccounts();
           break;
         case EMAIL:
           channel = 'Email';
@@ -373,7 +373,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
       } else if (nextProps.route.name.toLowerCase() === 'wechat') {
         this.setState({defaultAccount: true});
         channel = 'wechat';
-        nextProps.actions.getWeCrmAccounts();
+        commonUtil.hasWechatFeatureEnabled() && nextProps.actions.getWeCrmAccounts();
       } else if (nextProps.route.name.toLowerCase() === 'email') {
         channel = 'Email';
       } else if (nextProps.route.name.toLowerCase() === "mobilepush" || nextProps.route.name === INAPP) {
@@ -2604,6 +2604,9 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         showNoAccountHeader = true;
       }
     }
+    if (channel === WECHAT && commonUtil?.hasWechatFeatureEnabled) {
+      showNoAccountHeader = true;
+    }
     return (<CapSpin spinning={fetchingWeCrmAccounts}>
       {showNoAccountHeader ? <FormattedMessage {...noAccountHeader} /> :
       <div style={{ overflowX: "auto", paddingBottom: CAP_SPACE_16 }}>