@capillarytech/creatives-library 7.12.36 → 7.12.37

package/package.json

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

package/v2Components/CapWhatsappCTA/index.js

@@ -195,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
@@ -207,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
@@ -226,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
@@ -246,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
@@ -257,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

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/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;
-  }
 }