@capillarytech/creatives-library 7.12.35 → 7.12.37

package/config/app.js

@@ -17,6 +17,7 @@ const config = {
   },
   development: {
     api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
+    //api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
     campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
     campaigns_api_org_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/org/campaign',
     auth_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/auth',

package/package.json

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

package/v2Components/CapWhatsappCTA/index.js

@@ -13,6 +13,7 @@ import CapInput from '@capillarytech/cap-ui-library/CapInput';
 import CapButton from '@capillarytech/cap-ui-library/CapButton';
 import CapLabel from '@capillarytech/cap-ui-library/CapLabel';
 import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
 import globalMessages from '../../v2Containers/Cap/messages';
 import whatsappMsg from '../../v2Containers/Whatsapp/messages';
 import messages from './messages';
@@ -194,7 +195,7 @@ export const CapWhatsappCTA = (props) => {
             <CapRow>
               <CapColumn span={12}>
                 {/* Type of action */}
-                <CapHeading type="h4">
+                <CapHeading type="h4" className="cta-label">
                   {formatMessage(messages.ctaType)}
                 </CapHeading>
                 <CapSelect
@@ -206,7 +207,7 @@ export const CapWhatsappCTA = (props) => {
               </CapColumn>
               <CapColumn span={12}>
                 {/* Button text */}
-                <CapHeading type="h4">
+                <CapHeading type="h4" className="cta-label">
                   {formatMessage(messages.ctaButtonText)}
                 </CapHeading>
                 <CapInput
@@ -225,7 +226,7 @@ export const CapWhatsappCTA = (props) => {
               <CapRow>
                 <CapColumn span={11}>
                   {/* phone number */}
-                  <CapHeading type="h4">
+                  <CapHeading type="h4" className="cta-label">
                     {formatMessage(messages.ctaPhoneNo)}
                   </CapHeading>
                   <PhoneInput
@@ -245,7 +246,7 @@ export const CapWhatsappCTA = (props) => {
               <CapRow>
                 <CapColumn span={12}>
                   {/* URL Type */}
-                  <CapHeading type="h4">
+                  <CapHeading type="h4" className="cta-label">
                     {formatMessage(messages.ctaWebsiteType)}
                   </CapHeading>
                   <CapSelect
@@ -256,7 +257,7 @@ export const CapWhatsappCTA = (props) => {
                 </CapColumn>
                 <CapColumn span={12}>
                   {/* cta url */}
-                  <CapHeading type="h4">
+                  <CapHeading type="h4" className="cta-label">
                     {formatMessage(messages.ctaWebsiteUrl)}
                   </CapHeading>
                   <CapInput
@@ -274,13 +275,24 @@ export const CapWhatsappCTA = (props) => {
               </CapRow>
             )}
             <CapRow className="whatsapp-cta-save-delete-btn">
-              <CapButton
-                onClick={() => saveCta(index)}
-                disabled={ctaSaveDisabled(index)}
-                className="whatsapp-cta-save-btn"
+              <CapTooltip
+                title={
+                  ctaSaveDisabled(index)
+                    ? formatMessage(messages.ctaSaveDisabled)
+                    : ''
+                }
+                placement={'bottom'}
               >
-                {formatMessage(globalMessages.save)}
-              </CapButton>
+                <div className="button-disabled-tooltip-wrapper">
+                  <CapButton
+                    onClick={() => saveCta(index)}
+                    disabled={ctaSaveDisabled(index)}
+                    className="whatsapp-cta-save-btn"
+                  >
+                    {formatMessage(globalMessages.save)}
+                  </CapButton>
+                </div>
+              </CapTooltip>
               <CapButton
                 onClick={() => deleteHandler(index)}
                 className="whatsapp-cta-delete-btn"
@@ -299,16 +311,27 @@ export const CapWhatsappCTA = (props) => {
       ctaData.length < 2 &&
         renderArray.push(
           <CapRow>
-            <CapButton
-              type="flat"
-              id="whatsapp-cta-add-button"
-              disabled={ctaData?.length === 1 && !ctaData[0].isSaved}
-              className="margin-t-12 margin-l-24"
-              isAddBtn
-              onClick={addCta}
+            <CapTooltip
+              title={
+                ctaData.length === 1 && !ctaData[0].isSaved
+                  ? formatMessage(messages.ctaAddDisabled)
+                  : ''
+              }
+              placement={'right'}
             >
-              {formatMessage(messages.addButton)}
-            </CapButton>
+              <div className="button-disabled-tooltip-wrapper">
+                <CapButton
+                  type="flat"
+                  id="whatsapp-cta-add-button"
+                  disabled={ctaData.length === 1 && !ctaData[0].isSaved}
+                  className="margin-t-12 margin-l-24"
+                  isAddBtn
+                  onClick={addCta}
+                >
+                  {formatMessage(messages.addButton)}
+                </CapButton>
+              </div>
+            </CapTooltip>
           </CapRow>,
         );
     }

package/v2Components/CapWhatsappCTA/index.scss

@@ -3,7 +3,7 @@
 .cap-whatsapp-saved-cta {
     border: solid 1px $CAP_G06;
     margin-left: 24px;
-    padding: 0 20px;
+    padding: 10px;
     border-radius: 4px;
 
     div:not(:last-child) {
@@ -12,7 +12,9 @@
 
     .url,
     .phone {
+        white-space: nowrap;
         overflow: hidden;
+        text-overflow: ellipsis;
     }
 
     .url-type {
@@ -30,6 +32,10 @@
     padding: 20px;
     border-radius: 4px;
 
+    .cta-label {
+        margin-bottom: 4px;
+    }
+
     .whatsapp-cta-save-delete-btn {
         .ant-btn {
             margin-right: $CAP_SPACE_16;

package/v2Components/CapWhatsappCTA/messages.js

@@ -53,4 +53,13 @@ export default defineMessages({
     id: `${prefix}.addButton`,
     defaultMessage: 'Add button',
   },
+  ctaSaveDisabled: {
+    id: `${prefix}.ctaSaveDisabled`,
+    defaultMessage: 'Please complete the above fields to enable button',
+  },
+  ctaAddDisabled: {
+    id: `${prefix}.ctaAddDisabled`,
+    defaultMessage:
+      'Please save the first button before proceeding to create second button',
+  },
 });

package/v2Containers/CreativesContainer/index.js

@@ -375,7 +375,7 @@ export class Creatives extends React.Component {
               language,
               category,
               mediaType,
-              whatsappButtonType : buttonType = 'NONE',
+              buttonType = 'NONE',
               buttons = [],
             } = {},
           } = templateData;
@@ -588,7 +588,7 @@ export class Creatives extends React.Component {
             category,
             templateEditor,
             varMapped,
-            buttonType : whatsappButtonType = 'NONE',
+            buttonType = 'NONE',
             buttons = [],
           } = cloneDeep(versions.base.content.whatsapp);
           const modifiedButtons = cloneDeep(buttons).map((btn) => {
@@ -612,7 +612,7 @@ export class Creatives extends React.Component {
               category,
               language: languages[0].language,
               mediaType,
-              whatsappButtonType,
+              buttonType,
               buttons : modifiedButtons,
             },
           };

package/v2Containers/Whatsapp/index.js

@@ -451,7 +451,7 @@ export const Whatsapp = (props) => {
     setCtadata((prevState) => {
       const clonedCta = cloneDeep(prevState);
       const filteredCta = clonedCta.filter((i) => i.index !== index);
-      if(filteredCta.length === 1){
+      if (filteredCta.length === 1) {
         filteredCta[0].index = 0;
       }
       return filteredCta;
@@ -461,19 +461,21 @@ export const Whatsapp = (props) => {
   const buttonRadioOptions = [
     {
       value: WHATSAPP_BUTTON_TYPES.NONE,
-      label: formatMessage(messages.btnTypeNone),
+      label: (
+        <CapHeading type="h4" className="whatsapp-button-none">
+          {formatMessage(messages.btnTypeNone)}
+        </CapHeading>
+      ),
     },
     {
       value: WHATSAPP_BUTTON_TYPES.CTA,
       label: (
         <>
-          <div className="whatsapp-button">
+          <div className="whatsapp-button-cta">
             <CapHeading type="h4">
               {formatMessage(messages.btnTypeCTA)}
             </CapHeading>
-            <CapLabel className="whatsapp-cta-desc">
-              {formatMessage(messages.ctaDesc)}
-            </CapLabel>
+            <CapLabel>{formatMessage(messages.ctaDesc)}</CapLabel>
           </div>
           {buttonType === WHATSAPP_BUTTON_TYPES.CTA && (
             <CapWhatsappCTA
@@ -492,7 +494,13 @@ export const Whatsapp = (props) => {
           placement="bottom"
           title={!isEditFlow && formatMessage(messages.disabledFeatureTooltip)}
         >
-          <div className="whatsapp-button">
+          <div
+            className="whatsapp-button-quick-reply"
+            style={{
+              marginTop:
+                buttonType === WHATSAPP_BUTTON_TYPES.CTA ? '0px' : '24px',
+            }}
+          >
             <CapHeading type="h4">
               {formatMessage(messages.btnTypeQuickReply)}
             </CapHeading>

package/v2Containers/Whatsapp/index.scss

@@ -80,13 +80,19 @@
     display: grid;
   }
 
-  .whatsapp-btn-radio-group>.ant-radio-wrapper {
-    line-height: 45px;
-    font-weight: 500;
+  .whatsapp-button-none{
+    display: inline-grid;
+    margin-top: 16px;
+  }
+
+  .whatsapp-button-cta {
+    display: inline-grid;
+    margin-top: 24px;
   }
 
-  .whatsapp-btn-radio-edit>label.ant-radio-wrapper.ant-radio-wrapper-disabled {
-    margin-top: -32px;
+  .whatsapp-button-quick-reply {
+    display: inline-grid;
+    opacity: 0.4;
   }
 
   .whatsapp-optional-label {
@@ -95,12 +101,4 @@
     font-weight: normal;
     font-size: 12px;
   }
-
-  .whatsapp-button {
-    display: inline-grid;
-  }
-
-  .whatsapp-cta-desc {
-    margin-bottom: 17px;
-  }
 }