@capillarytech/creatives-library 8.0.91 → 8.0.93

package/package.json

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

package/v2Components/CapWhatsappCarouselButton/index.js

@@ -73,7 +73,7 @@ export const CapWhatsappCarouselButton = (props) => {
   const onValueChange = (buttonIndex, fields = []) => {
     const updatedButtonData = cloneDeep(buttonData);
     fields.forEach((field) => {
-      updatedButtonData[buttonIndex][field.fieldName] = field.value;
+      updatedButtonData[buttonIndex][field?.fieldName] = field?.value;
     });
     setCarouselData(
       carouselData.map((item, index) => index === carouselIndex
@@ -309,10 +309,9 @@ export const CapWhatsappCarouselButton = (props) => {
           return (
             <CapRow
               key={`${button.buttonType}_${index}`}
-              className="cap-whatsapp-saved-cta cap-whatsapp-saved-carousel-button margin-t-12"
+              className={`cap-whatsapp-saved-cta cap-whatsapp-saved-carousel-button margin-t-12 ${isEditFlow ? 'margin-l-0' : ''}`}
               align="middle"
               type="flex"
-              style={{ marginLeft: isEditFlow ? 0 : '' }}
             >
               <CapColumn
                 span={1}
@@ -345,7 +344,7 @@ export const CapWhatsappCarouselButton = (props) => {
                     </CapLabel>
                   </CapColumn>
                   <CapTooltip title={button?.url} placement="top">
-                    <CapColumn span={7} style={{ marginRight: '0px' }}>
+                    <CapColumn span={7} className="margin-r-0">
                       <CapLabel className="url">{button?.url}</CapLabel>
                     </CapColumn>
                   </CapTooltip>
@@ -415,6 +414,7 @@ export const CapWhatsappCarouselButton = (props) => {
         );
       })}
       <CapRow>
+        {/* user can add only two button in the first carousel in other carousel user dont allow to add buttons */}
         {buttonData?.length < 2 && !isEditFlow && parseInt(carouselIndex, 10) === 0 && (
           <CapRow>
             <CapTooltip

package/v2Components/TemplatePreview/_templatePreview.scss

@@ -755,6 +755,17 @@
   .msg-container-carousel {
     display: flex;
     flex-direction: column;
+    .scroll-container {
+      overflow-x: auto;
+      display: flex;
+      padding-top: $CAP_SPACE_06;
+      padding-right: $CAP_SPACE_06;
+      white-space: nowrap;
+      scrollbar-width: none; // Hide scrollbar in Firefox
+      &::-webkit-scrollbar {
+        display: none; // Hide scrollbar in Chrome/Safari/Opera
+      }
+    }
   }
 }
 

package/v2Components/TemplatePreview/index.js

@@ -260,7 +260,7 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
       'padding': `${CAP_SPACE_04} 0 ${CAP_SPACE_08}`,
       'border-radius': '0.428rem',
       'background-color': CAP_WHITE,
-      'width': '11.857rem',
+      'width': '10.4rem',
       'cursor': 'pointer',
       'flex-shrink': 0,
       'left': 0,
@@ -1039,21 +1039,10 @@ export class TemplatePreview extends React.Component { // eslint-disable-line re
                       </div>
                     </div>
                     {content?.carouselData && (
-                      <div
-                        style={{
-                          overflowX: "auto",
-                          display: "flex",
-                          paddingTop: "5px",
-                          paddingRight: "5px",
-                          whiteSpace: "nowrap",
-                          scrollbarWidth: "none", // Hide scrollbar in Firefox
-                          msOverflowStyle: "none", // Hide scrollbar in IE/Edge
-                        }}
-                        className="scroll-container"
-                      >
+                      <div className="scroll-container">
                         {content?.carouselData?.map((data, index) => (
                           <div
-                            key={`carousel-${index}`}
+                            key={`carousel-${index}-${data?.bodyText}`}
                             className="message-pop align-left message-pop-carousel"
                             style={carouselWhatsappSectionStyle}>
                             <div className="whatsapp-content">

package/v2Containers/CreativesContainer/index.js

@@ -527,7 +527,7 @@ export class Creatives extends React.Component {
             default:
               break;
           }
-          const modifiedButtons = cloneDeep(buttons).map((btn) => {
+          const modifiedButtons = cloneDeep(buttons)?.map((btn) => {
             if (btn.type === 'PHONE_NUMBER') {
               btn.phone_number = btn.phoneNumber;
               delete btn.phoneNumber;
@@ -910,7 +910,7 @@ export class Creatives extends React.Component {
               isPreviewUrl,
               ...(mediaType === WHATSAPP_MEDIA_TYPES.CAROUSEL && {
                 cards: this.getCarouselMappedData(carouselData),
-                mediaType: carouselData[0]?.mediaType,
+                mediaType: carouselData[0]?.mediaType?.toUpperCase(),
               }),
             },
           };

package/v2Containers/Whatsapp/index.js

@@ -1311,7 +1311,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
 	const carouselBodyTextErrorHandler = (value, carouselIndex) => {
 		let errorMessage = false;
 		if (value === "") {
-			errorMessage = formatMessage(messages.emptyCardBodyeErrorMessage);
+			errorMessage = formatMessage(messages.emptyCardBodyErrorMessage);
 		} else if(value?.length > TEMPLATE_MESSAGE_MAX_LENGTH) {
       errorMessage = formatMessage(messages.templateMessageLengthError);
     } else {
@@ -2784,8 +2784,8 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
 					data.carouselTagValidationErr || 
 					Object.values(data.varMap).some((inputValue) => inputValue === "") || 
           computeTextLength(CAROUSEL_TEXT, data) > TEMPLATE_MESSAGE_MAX_LENGTH ||
-          (carouselMediaType === "image" && !data.imageSrc) || 
-					(carouselMediaType === "video" && !data.videoSrc) ||
+          (carouselMediaType === IMAGE.toLowerCase() && !data.imageSrc) || 
+					(carouselMediaType === VIDEO.toLowerCase() && !data.videoSrc) ||
 					data?.buttons.some((btn) => btn?.url?.includes("{{1}}"))
 				);
 			});
@@ -2840,7 +2840,7 @@ const isAuthenticationTemplate = isEqual(templateCategory, WHATSAPP_CATEGORIES.a
             </CapButton>
           </>
         )}
-        {isEditFlow && isEditFlow && (
+        {!isFullMode && isEditFlow && (
           <CapTooltip
             title={
               isEditDoneDisabled()

package/v2Containers/Whatsapp/index.scss

@@ -111,11 +111,11 @@
   }
 
   #select-whatsapp-category {
-    padding-right: 5px;
+    padding-right: 0.357rem;
   }
 
   #select-whatsapp-media {
-    padding-left: 5px;
+    padding-left: 0.357rem;
   }
 
   #select-whatsapp-category,
@@ -271,12 +271,12 @@
     padding: 0;
     line-height: normal;
     .add-carousel-content-button {
-      padding: 9px 0px;
+      padding: 0.642rem 0px;
       margin: 0;
     }
     .cap-divider-v2{
       height: 1.5rem;
-      margin-bottom: 7px;
+      margin-bottom: 0.499rem;
     }
   }
 }

package/v2Containers/Whatsapp/messages.js

@@ -757,8 +757,8 @@ export default defineMessages({
     id: `${prefix}.buttonType`,
     defaultMessage: 'Button type',
   },
-  emptyCardBodyeErrorMessage: {
-    id: `${prefix}.emptyCardBodyeErrorMessage`,
+  emptyCardBodyErrorMessage: {
+    id: `${prefix}.emptyCardBodyErrorMessage`,
     defaultMessage: 'Card body text cannot be empty',
   },
   carouselButtonInfo: {

package/v2Containers/Whatsapp/styles.scss

@@ -71,6 +71,11 @@
   margin: 0;
 }
 
+.whatsapp-list-view-text-align {
+  text-align: center;
+  margin-top: $CAP_SPACE_12;
+}
+
 .whatsapp-autofill-btn {
   text-align: center;
   margin-top: $CAP_SPACE_12;