@capillarytech/creatives-library 8.0.136-beta.4 → 8.0.136

package/v2Containers/MobilePushNew/index.scss

@@ -38,8 +38,6 @@
   align-items: center;
   justify-content: space-between;
   margin-bottom: $CAP_SPACE_24;
-  border-bottom: 1px solid #e0e0e0;
-  padding-bottom: $CAP_SPACE_16;
 }
 
 .platform-header .platform-tabs {
@@ -226,6 +224,7 @@
 .carousel-media-selection {
   display: flex;
   align-items: center;
+
   .carousel-media-selection-heading {
     margin-right: 20px;
   }
@@ -238,30 +237,56 @@
 
 .mobile-push-carousel-tab {
   max-width: 39.063rem;
+
   .ant-tabs-extra-content {
     padding: 0;
     line-height: normal;
+
     .add-carousel-content-button {
       padding: 0.642rem 0px;
       margin: 0;
     }
-    .cap-divider-v2{
+
+    .cap-divider-v2 {
       height: 1.5rem;
       margin-bottom: 0.499rem;
     }
   }
+
   .ant-tabs-tabpane {
     min-height: unset;
   }
 }
 
+.mobile-push-carousel-message-heading {
+  margin-top: 24px;
+}
+
+.mobile-push-media-radio>label.ant-radio-wrapper {
+  margin-right: 50px;
+}
+
+.mobile-push-create-template-message-input-wrapper {
+  position: relative;
+}
+
+.cap-custom-image-upload {
+  .dragger-button.re-upload {
+    top: -150px;
+    position: relative;
+    left: 509px;
+  }
+}
+
 .mobile-push-carousel-card {
   .ant-card-head {
     border-bottom: none;
   }
+
   .ant-card-body {
     padding-top: 0px;
   }
+
   .ant-card-head-wrapper {
     .ant-card-extra {
       .cap-button-v2 {
@@ -269,40 +294,42 @@
       }
     }
   }
-}
-
-.mobile-push-carousel-message-heading {
-  margin-top: 24px;
-}
 
-.mobile-push-media-radio>label.ant-radio-wrapper {
-  margin-right: 50px;
-}
+  .cap-custom-image-upload {
 
-.mobile-push-create-template-message-input-wrapper {
-  position: relative;
-}
+    // Override FormBuilder CSS for carousel images
+    .image-container {
+      img {
+        object-fit: cover !important;
+        max-width: 300px;
+        max-height: 150px !important;
+        display: block !important;
+      }
+    }
 
-.cap-custom-image-upload {
-  .dragger-button.re-upload {
-    top: -175px;
-    position: relative;
-    left: 525px;
-    color: #666;
+    .dragger-button.re-upload {
+      top: -150px;
+      position: relative;
+      left: 400px;
+    }
   }
 }
 
 .cap-custom-video-upload {
   padding-top: 20px;
+
   .dragger-button.re-upload {
     top: -175px;
     position: relative;
     left: 525px;
-    color: #666;
   }
 }
 
 .note-message-container {
   display: flex;
   align-items: center;
+}
+
+.save-section {
+  margin-bottom: $CAP_SPACE_12;
 }

package/v2Containers/Templates/index.js

@@ -1284,29 +1284,40 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             if (isEmpty(androidData) || !androidData?.title) {
               mpushListingData = iosData;
             };
-            const { title, message, expandableDetails: { style = '', image, carouselData = [], ctas = [] } = {} } = mpushListingData || {};
+            const { title, message, expandableDetails: { style = '', image, carouselData = [], ctas = [], media = [] } = {} } = mpushListingData || {};
+            const {previewImg = ''} = media?.[0] || {};
             templateData.content = (
-              <CapCard className='mobilepush-container'>
-                <CapHeader className="app-header">
-                  <CapRow className="app-header-left">
+              <div className='mobilepush-container'>
+                <div className="app-header">
+                  <div className="app-header-left">
                     <span className="app-icon">{""}</span>
                     <CapLabel type="label4">{title}</CapLabel>
-                  </CapRow>
-                </CapHeader>
+                  </div>
+                </div>
                 <CapLabel className="mobilepush-message" type="label1">{message}</CapLabel>
                 {style === BIG_PICTURE && (
                   <CapImage src={image} className="mobilepush-image mobilepush-image-padding" />
                 )}
+                {style === VIDEO && (
+                  <div className="video-preview">
+                    <video>
+                      <source src={previewImg} type="video/mp4" />
+                    </video>
+                    <div className="icon-position">
+                      <CapImage className="video-icon" src={videoPlay} />
+                    </div>
+                  </div>
+                )}
                 {(style === MANUAL_CAROUSEL || style === AUTO_CAROUSEL || style === FILMSTRIP_CAROUSEL) && (
-                  <CapCarousel className="scroll-container">
+                  <div className="scroll-container">
                   {carouselData.map((data, index) => {
                     return (
-                      <CapCard
+                      <div
                         key={`carousel-${index + 1}`}
                         className="whatsapp-carousel-container"
                         role="group"
                       >
-                      <CapCard className="whatsapp-carousel-card">
+                      <div className="whatsapp-carousel-card">
                         {data?.mediaType === IMAGE.toLowerCase() && (
                           <CapImage
                             src={data?.imageUrl ? data?.imageUrl : whatsappImageEmptyPreview}
@@ -1314,55 +1325,38 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
                           />
                         )}
                         {data?.mediaType === VIDEO.toLowerCase() && (
-                          <CapCard className="video-preview">
+                          <div className="video-preview">
                             <CapImage
-                              src={data?.videoPreviewUrl ? data?.videoPreviewUrl : data?.videoPreviewImg ? data?.videoPreviewImg : whatsappVideoEmptyPreview}
+                              src={data?.videoPreviewImg ? data?.videoPreviewImg : whatsappVideoEmptyPreview}
                               className="whatsapp-image"
                             />
-                            <CapCard className="icon-position">
+                            <div className="icon-position">
                               <CapImage
                                 className="video-icon"
                                 src={videoPlay}
                               />
-                            </CapCard>
-                          </CapCard>
+                            </div>
+                          </div>
                         )}
-                        {
-                          data?.mediaType === GIF.toLowerCase() && (
-                          <CapCard className="image-preview">
-                            <CapImage
-                              src={data?.imageUrl ? data?.imageUrl : whatsappImageEmptyPreview}
-                              className="whatsapp-image"
-                            />
-                            <CapCard className="icon-position">
-                              <CapImage
-                                className="video-icon"
-                                src={data?.imageUrl ? data?.imageUrl : whatsappImageEmptyPreview}
-                              />
-                            </CapCard>
-                          </CapCard>
-                          )
-                        }
-                      </CapCard>
-                      </CapCard>
+                      </div>
+                      </div>
                     )
                   })}
-                </CapCarousel>
+                </div>
                 )}
                 {ctas.length > 0 && (
-                  <CapRow className="actions">
+                  <div className="actions">
                     {ctas.map((cta) => (
-                      <CapLabel
+                      <span
                         className="action"
                         key={`action-${cta?.actionText}`}
-                        type="label1"
                       >
                         {cta?.actionText && cta?.actionText.toUpperCase()}
-                      </CapLabel>
+                      </span>
                     ))}
-                  </CapRow>
+                  </div>
                 )}
-              </CapCard>
+              </div>
             );
             templateData.isNewMobilePush = commonUtil.hasNewMobilePushFeatureEnabled();
           }

package/v2Containers/Whatsapp/index.scss

@@ -163,26 +163,26 @@
 
   .cap-custom-image-upload {
     .dragger-button.re-upload {
-      top: -175px;
+      top: -9.4375rem;
       position: relative;
-      left: 525px;
+      left: 31.8125rem;
       color: $FONT_COLOR_05;
     }
   }
   .cap-custom-video-upload {
     padding-top: $CAP_SPACE_20;
     .dragger-button.re-upload {
-      top: -175px;
+      top: -10.9375rem;
       position: relative;
-      left: 525px;
+      left: 32.8125rem;
       color: $FONT_COLOR_05;
     }
   }
   .cap-custom-document-upload {
     .dragger-button.re-upload {
-      top: -150px;
+      top: -9.375rem;
       position: relative;
-      left: 525px;
+      left: 32.8125rem;
       color: $FONT_COLOR_05;
     }
   }