@capillarytech/creatives-library 8.0.91 → 8.0.92

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "8.0.91",
+  "version": "8.0.92",
   "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

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 {

package/v2Containers/Whatsapp/index.scss

@@ -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: {