@capillarytech/creatives-library 7.17.116 → 7.17.118-alpha.0

package/v2Containers/CreativesContainer/tests/__snapshots__/SlideBoxContent.test.js.snap

@@ -658,6 +658,231 @@ exports[`Test SlideBoxContent container Should render correct component for rcs
 </SlideBoxContent__CreativesWrapper>
 `;
 
+exports[`Test SlideBoxContent container Should render correct component for viber channel preview mode 1`] = `
+<SlideBoxContent__CreativesWrapper>
+  <InjectIntl(TemplatePreview)
+    channel="viber"
+    charCounterEnabled={false}
+    content={
+      Object {
+        "viberPreviewContent": Object {
+          "buttonText": undefined,
+          "messageContent": "",
+          "videoParams": Object {
+            "viberVideoPreviewImg": "https://crm-nightly-new-fileservice.s3.amazonaws.com/video_screenshot_assets__1715924855107.png/1040",
+            "viberVideoSrc": "https://crm-nightly-new-fileservice.s3.amazonaws.com/video_screenshot_assets__1715924855107.png/1040",
+          },
+        },
+      }
+    }
+    showCount={true}
+    templateData={
+      Object {
+        "_id": "6646ef8af3c82f686462cf91",
+        "createdAt": "2024-05-17T05:47:54.636Z",
+        "createdBy": "50685415",
+        "isActive": true,
+        "name": "test temp_2",
+        "orgId": 1231,
+        "type": "VIBER",
+        "updatedAt": "2024-05-17T12:05:52.950Z",
+        "updatedBy": "50685415",
+        "versions": Object {
+          "base": Object {
+            "content": Object {
+              "content": Object {
+                "video": Object {
+                  "duration": "",
+                  "thumbnailUrl": "https://crm-nightly-new-fileservice.s3.amazonaws.com/video_screenshot_assets__1715924855107.png/1040",
+                  "url": "https://crm-nightly-new-fileservice.s3.amazonaws.com/video_screenshot_assets__1715924855107.png/1040",
+                },
+              },
+              "destinations": Array [
+                Object {
+                  "to": Object {
+                    "phoneNumber": "{{viber_user_id}}",
+                  },
+                },
+              ],
+            },
+          },
+          "history": Array [],
+        },
+      }
+    }
+    viberBrandName=""
+  />
+</SlideBoxContent__CreativesWrapper>
+`;
+
+exports[`Test SlideBoxContent container Should render correct component for viber channel preview mode 2`] = `
+<SlideBoxContent__CreativesWrapper>
+  <InjectIntl(TemplatePreview)
+    channel="viber"
+    charCounterEnabled={false}
+    content={
+      Object {
+        "viberPreviewContent": Object {
+          "buttonText": "test button",
+          "imageURL": "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/19e1c698-7be8-4f03-beb5-c96b11a3.jpg",
+          "messageContent": "test msg",
+        },
+      }
+    }
+    showCount={true}
+    templateData={
+      Object {
+        "_id": "664670d929ce5e6fd17c355f",
+        "createdAt": "2024-05-16T20:47:21.488Z",
+        "createdBy": "50685415",
+        "isActive": true,
+        "name": "test temp_1",
+        "orgId": 1231,
+        "type": "VIBER",
+        "updatedAt": "2024-05-17T13:25:49.078Z",
+        "updatedBy": "50685415",
+        "versions": Object {
+          "base": Object {
+            "content": Object {
+              "content": Object {
+                "button": Object {
+                  "text": "test button",
+                  "url": "https://www.figma.com/file/2iksCNafQinyHxqAoKYR0z/Badges-in-Campaigns-and-Journeys?type=design&node-id=10-66632&mode=design&t=J0LMbSnho0paUjJK-0",
+                },
+                "image": Object {
+                  "url": "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/19e1c698-7be8-4f03-beb5-c96b11a3.jpg",
+                },
+                "text": "test msg",
+              },
+              "destinations": Array [
+                Object {
+                  "to": Object {
+                    "phoneNumber": "{{viber_user_id}}",
+                  },
+                },
+              ],
+            },
+          },
+          "history": Array [],
+        },
+      }
+    }
+    viberBrandName=""
+  />
+</SlideBoxContent__CreativesWrapper>
+`;
+
+exports[`Test SlideBoxContent container Should render correct component for viber channel preview mode 3`] = `
+<SlideBoxContent__CreativesWrapper>
+  <InjectIntl(TemplatePreview)
+    channel="viber"
+    charCounterEnabled={false}
+    content={
+      Object {
+        "viberPreviewContent": Object {
+          "buttonText": "test button",
+          "messageContent": "test video message test video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest video message test video message test video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest overrrrrrrrr",
+          "videoParams": Object {
+            "viberVideoPreviewImg": "https://crm-nightly-new-fileservice.s3.amazonaws.com/video_screenshot_assets__1715924855107.png/1040",
+            "viberVideoSrc": "https://crm-nightly-new-fileservice.s3.amazonaws.com/video_screenshot_assets__1715924855107.png/1040",
+          },
+        },
+      }
+    }
+    showCount={true}
+    templateData={
+      Object {
+        "_id": "6646ef8af3c82f686462cf91",
+        "createdAt": "2024-05-17T05:47:54.636Z",
+        "createdBy": "50685415",
+        "isActive": true,
+        "name": "test temp_2",
+        "orgId": 1231,
+        "type": "VIBER",
+        "updatedAt": "2024-05-17T12:05:52.950Z",
+        "updatedBy": "50685415",
+        "versions": Object {
+          "base": Object {
+            "content": Object {
+              "content": Object {
+                "button": Object {
+                  "text": "test button",
+                  "url": "https://www.test.com/file/",
+                },
+                "text": "test video message test video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest video message test video message test video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest video messagetest overrrrrrrrr",
+                "video": Object {
+                  "duration": "",
+                  "thumbnailUrl": "https://crm-nightly-new-fileservice.s3.amazonaws.com/video_screenshot_assets__1715924855107.png/1040",
+                  "url": "https://crm-nightly-new-fileservice.s3.amazonaws.com/video_screenshot_assets__1715924855107.png/1040",
+                },
+              },
+              "destinations": Array [
+                Object {
+                  "to": Object {
+                    "phoneNumber": "{{viber_user_id}}",
+                  },
+                },
+              ],
+            },
+          },
+          "history": Array [],
+        },
+      }
+    }
+    viberBrandName=""
+  />
+</SlideBoxContent__CreativesWrapper>
+`;
+
+exports[`Test SlideBoxContent container Should render correct component for viber channel preview mode 4`] = `
+<SlideBoxContent__CreativesWrapper>
+  <InjectIntl(TemplatePreview)
+    channel="viber"
+    charCounterEnabled={false}
+    content={
+      Object {
+        "viberPreviewContent": Object {
+          "buttonText": undefined,
+          "messageContent": "test",
+        },
+      }
+    }
+    showCount={true}
+    templateData={
+      Object {
+        "_id": "6646ef8af3c82f686462cf91",
+        "createdAt": "2024-05-17T05:47:54.636Z",
+        "createdBy": "50685415",
+        "isActive": true,
+        "name": "test temp_2",
+        "orgId": 1231,
+        "type": "VIBER",
+        "updatedAt": "2024-05-17T12:05:52.950Z",
+        "updatedBy": "50685415",
+        "versions": Object {
+          "base": Object {
+            "content": Object {
+              "content": Object {
+                "text": "test",
+              },
+              "destinations": Array [
+                Object {
+                  "to": Object {
+                    "phoneNumber": "{{viber_user_id}}",
+                  },
+                },
+              ],
+            },
+          },
+          "history": Array [],
+        },
+      }
+    }
+    viberBrandName=""
+  />
+</SlideBoxContent__CreativesWrapper>
+`;
+
 exports[`Test SlideBoxContent container Should render correct component for whatsapp channel create mode 1`] = `
 <SlideBoxContent__CreativesWrapper>
   <Connect(UserIsAuthenticated(Connect(InjectIntl(CreativesCommon))))

package/v2Containers/Rcs/tests/__snapshots__/index.test.js.snap

@@ -52033,17 +52033,20 @@ new message content.",
                                   </span>
                                 </CapHeading__CapHeadingSpan>
                                 <CapHeading__CapHeadingSpan
-                                  className="image-size"
                                   type="label2"
                                 >
                                   <span
-                                    className="image-size CapHeading__CapHeadingSpan-vrvcag-1 gVHIPQ"
+                                    className="CapHeading__CapHeadingSpan-vrvcag-1 gVHIPQ"
                                     type="label2"
                                   >
                                     <FormattedMessage
-                                      defaultMessage="Size upto: 2MB"
+                                      defaultMessage="Size upto: {size}MB"
                                       id="creatives.componentsV2.CapImageUpload.imageSize"
-                                      values={Object {}}
+                                      values={
+                                        Object {
+                                          "size": 2,
+                                        }
+                                      }
                                     >
                                       <span>
                                         Size upto: 2MB
@@ -67476,17 +67479,20 @@ new message content.",
                                   </span>
                                 </CapHeading__CapHeadingSpan>
                                 <CapHeading__CapHeadingSpan
-                                  className="image-size"
                                   type="label2"
                                 >
                                   <span
-                                    className="image-size CapHeading__CapHeadingSpan-vrvcag-1 gVHIPQ"
+                                    className="CapHeading__CapHeadingSpan-vrvcag-1 gVHIPQ"
                                     type="label2"
                                   >
                                     <FormattedMessage
-                                      defaultMessage="Size upto: 2MB"
+                                      defaultMessage="Size upto: {size}MB"
                                       id="creatives.componentsV2.CapImageUpload.imageSize"
-                                      values={Object {}}
+                                      values={
+                                        Object {
+                                          "size": 2,
+                                        }
+                                      }
                                     >
                                       <span>
                                         Size upto: 2MB
@@ -82813,17 +82819,20 @@ new message content.",
                                   </span>
                                 </CapHeading__CapHeadingSpan>
                                 <CapHeading__CapHeadingSpan
-                                  className="image-size"
                                   type="label2"
                                 >
                                   <span
-                                    className="image-size CapHeading__CapHeadingSpan-vrvcag-1 gVHIPQ"
+                                    className="CapHeading__CapHeadingSpan-vrvcag-1 gVHIPQ"
                                     type="label2"
                                   >
                                     <FormattedMessage
-                                      defaultMessage="Size upto: 2MB"
+                                      defaultMessage="Size upto: {size}MB"
                                       id="creatives.componentsV2.CapImageUpload.imageSize"
-                                      values={Object {}}
+                                      values={
+                                        Object {
+                                          "size": 2,
+                                        }
+                                      }
                                     >
                                       <span>
                                         Size upto: 2MB
@@ -98256,17 +98265,20 @@ new message content.",
                                   </span>
                                 </CapHeading__CapHeadingSpan>
                                 <CapHeading__CapHeadingSpan
-                                  className="image-size"
                                   type="label2"
                                 >
                                   <span
-                                    className="image-size CapHeading__CapHeadingSpan-vrvcag-1 gVHIPQ"
+                                    className="CapHeading__CapHeadingSpan-vrvcag-1 gVHIPQ"
                                     type="label2"
                                   >
                                     <FormattedMessage
-                                      defaultMessage="Size upto: 2MB"
+                                      defaultMessage="Size upto: {size}MB"
                                       id="creatives.componentsV2.CapImageUpload.imageSize"
-                                      values={Object {}}
+                                      values={
+                                        Object {
+                                          "size": 2,
+                                        }
+                                      }
                                     >
                                       <span>
                                         Size upto: 2MB
@@ -122750,17 +122762,20 @@ new message content.",
                                   </span>
                                 </CapHeading__CapHeadingSpan>
                                 <CapHeading__CapHeadingSpan
-                                  className="image-size"
                                   type="label2"
                                 >
                                   <span
-                                    className="image-size CapHeading__CapHeadingSpan-vrvcag-1 gVHIPQ"
+                                    className="CapHeading__CapHeadingSpan-vrvcag-1 gVHIPQ"
                                     type="label2"
                                   >
                                     <FormattedMessage
-                                      defaultMessage="Size upto: 2MB"
+                                      defaultMessage="Size upto: {size}MB"
                                       id="creatives.componentsV2.CapImageUpload.imageSize"
-                                      values={Object {}}
+                                      values={
+                                        Object {
+                                          "size": 2,
+                                        }
+                                      }
                                     >
                                       <span>
                                         Size upto: 2MB

package/v2Containers/Templates/_templates.scss

@@ -117,7 +117,7 @@
     }
     .VIBER {
       &.cap-custom-card{
-        height: 241px;
+        height: 21.125rem;
         .ant-card-body {
          padding:0px 24px 0px;
           .button-content {    
@@ -137,18 +137,18 @@
           .truncate-text-viber{
             .ant-card-meta-description{
               display: -webkit-box;
-              -webkit-line-clamp: 9;
+              -webkit-line-clamp: 13;
               -webkit-box-orient: vertical; 
             }
           }
           .truncate-text-with-button{
             .ant-card-meta-description{
-            -webkit-line-clamp: 8;
+            -webkit-line-clamp: 13;
             }
           }
           .truncate-text-with-image{
             .ant-card-meta-description{
-            -webkit-line-clamp: 2;
+            -webkit-line-clamp: 3;
             }
           }
         
@@ -620,6 +620,11 @@
   max-height: 123px;
   margin-bottom: 4px;
 }
+.viber-image{
+  width: 100%;
+  max-height: 11rem;
+  margin-bottom: $CAP_SPACE_04;
+}
 .whatsapp-doc {
   width: 100%;
   max-height: 123px;

package/v2Containers/Templates/index.js

@@ -1232,20 +1232,41 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         case VIBER: {
           const {
             content: {
-              viber: {
+              content: {
                 text = '',
-                imageURL = '',
-                buttonURL = '',
-                buttonText = '',
+                image = {},
+                button = {},
+                video = {},
               } = {},
             } = {},
           } = template.versions.base;
           templateData.content = text;
-          if (imageURL) {
-            templateData.url = imageURL;
+          if (!isEmpty(image)) {
+            const { url = '' } = image;
+            templateData.url = url;
+            templateData.mediaContent = (
+              <CapImage src={url} className="viber-image" />
+            );
+          }
+          if (!isEmpty(video)) {
+            const { thumbnailUrl = '' } = video;
+            templateData.url = thumbnailUrl;
+            templateData.mediaContent = (
+              <>
+                <div className="video-preview">
+                  <CapImage
+                    src={thumbnailUrl}
+                    className="viber-image"
+                  />
+                  <div className="icon-position">
+                    <CapImage className="video-icon" src={videoPlay} />
+                  </div>
+                </div>
+              </>
+            );
           }
-          if (buttonURL && buttonText) {
-            templateData.buttonText = buttonText;
+          if (!isEmpty(button)) {
+            templateData.buttonText = button?.text;
           }
           break;
         }

package/v2Containers/Viber/constants.js

@@ -1,8 +1,15 @@
+import { FormattedMessage } from "react-intl";
+import React from 'react';
+import CapHeading from "@capillarytech/cap-ui-library/CapHeading";
+import CapLabel from "@capillarytech/cap-ui-library/CapLabel";
+import messages from "./messages";
+
 export const DEFAULT_ACTION = 'app/v2Containers/Viber/DEFAULT_ACTION';
 export const ALLOWED_EXTENSIONS_REGEX = (/\.(jpe?g|png)$/i);
 export const VIBER_IMG_HEIGHT = 400;
 export const VIBER_IMG_WIDTH = 300;
 export const VIBER_IMG_SIZE = 10000000;
+export const VIBER_VIDEO_SIZE = 209715200;
 export const charLimit = 1000;
 
 export const UPLOAD_VIBER_ASSET_REQUEST = 'app/v2Containers/Viber/UPLOAD_ASSET_REQUEST';
@@ -28,3 +35,54 @@ export const CLEAR_VIBER_DATA = 'app/v2Containers/VIBER/Edit/CLEAR_DATA';
 export const CLEAR_VIBER_CREATE_RESPONSE_REQUEST = 'app/v2Containers/VIBER/Create/CLEAR_EDIT_RESPONSE_REQUEST';
 export const CLEAR_VIBER_ASSET = 'app/v2Containers/Viber/CLEAR_ASSET';
 
+export const VIBER_MEDIA_TYPES = {
+  TEXT: 'TEXT',
+  IMAGE: 'IMAGE',
+  VIDEO: 'VIDEO',
+};
+export const ALLOWED_IMAGE_EXTENSIONS_REGEX_VIBER = /\.(jpe?g|png)$/i;
+export const ALLOWED_EXTENSIONS_VIDEO_REGEX_VIBER = /\.(mp4|3gp|m4v|mov)$/i;
+export const NONE = 'NONE';
+export const CTA = 'CTA';
+export const VIBER_BUTTON_TYPES = {
+  NONE,
+  CTA,
+};
+export const mediaRadioOptions = [
+  {
+    value: VIBER_MEDIA_TYPES.TEXT,
+    label: <FormattedMessage {...messages.mediaText} />,
+  },
+  {
+    value: VIBER_MEDIA_TYPES.IMAGE,
+    label: <FormattedMessage {...messages.mediaImage} />,
+  },
+  {
+    value: VIBER_MEDIA_TYPES.VIDEO,
+    label: <FormattedMessage {...messages.mediaVideo} />,
+  },
+];
+
+export const buttonRadioOptions = [
+  {
+    value: VIBER_BUTTON_TYPES.NONE,
+    label: (
+      <CapHeading type="h4" className="viber-button-none">
+        {<FormattedMessage {...messages.btnTypeNone} />}
+      </CapHeading>
+    ),
+  },
+  {
+    value: VIBER_BUTTON_TYPES.CTA,
+    label: (
+      <>
+        <div className="viber-button-cta">
+          <CapHeading type="h4">
+            {<FormattedMessage {...messages.btnTypeCTA} />}
+          </CapHeading>
+          <CapLabel>{<FormattedMessage {...messages.ctaDesc} />}</CapLabel>
+        </div>
+      </>
+    ),
+  },
+];