@capillarytech/creatives-library 8.0.123-alpha.0 → 8.0.124

package/v2Containers/MobilePushNew/tests/utils.test.js

@@ -0,0 +1,322 @@
+import {
+  validateLink,
+  validateExternalLink,
+  validateDeepLink,
+} from "../utils";
+import { isUrl } from "../../Line/Container/Wrapper/utils";
+
+// Mock the isUrl utility function
+jest.mock("../../Line/Container/Wrapper/utils", () => ({
+  isUrl: jest.fn(),
+}));
+
+describe("utils.js", () => {
+  const mockFormatMessage = jest.fn();
+  const mockMessages = {
+    invalidUrl: {
+      id: "invalidUrl",
+      defaultMessage: "Invalid URL format",
+    },
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockFormatMessage.mockImplementation((msg) => msg.defaultMessage);
+  });
+
+  describe("validateLink", () => {
+    describe("Valid scenarios", () => {
+      it("should return null for valid URL", () => {
+        isUrl.mockReturnValue(true);
+
+        const result = validateLink("https://example.com", mockFormatMessage, mockMessages);
+
+        expect(result).toBeNull();
+        expect(isUrl).toHaveBeenCalledWith("https://example.com");
+        expect(mockFormatMessage).not.toHaveBeenCalled();
+      });
+
+      it("should return null for valid URL with whitespace", () => {
+        isUrl.mockReturnValue(true);
+
+        const result = validateLink("  https://example.com  ", mockFormatMessage, mockMessages);
+
+        expect(result).toBeNull();
+        expect(isUrl).toHaveBeenCalledWith("https://example.com");
+        expect(mockFormatMessage).not.toHaveBeenCalled();
+      });
+
+      it("should return null for empty URL", () => {
+        const result = validateLink("", mockFormatMessage, mockMessages);
+
+        expect(result).toBeNull();
+        expect(isUrl).not.toHaveBeenCalled();
+        expect(mockFormatMessage).not.toHaveBeenCalled();
+      });
+
+      it("should return null for null URL", () => {
+        const result = validateLink(null, mockFormatMessage, mockMessages);
+
+        expect(result).toBeNull();
+        expect(isUrl).not.toHaveBeenCalled();
+        expect(mockFormatMessage).not.toHaveBeenCalled();
+      });
+
+      it("should return null for undefined URL", () => {
+        const result = validateLink(undefined, mockFormatMessage, mockMessages);
+
+        expect(result).toBeNull();
+        expect(isUrl).not.toHaveBeenCalled();
+        expect(mockFormatMessage).not.toHaveBeenCalled();
+      });
+
+      it("should return null for whitespace-only URL", () => {
+        const result = validateLink("   ", mockFormatMessage, mockMessages);
+
+        expect(result).toBeNull();
+        expect(isUrl).not.toHaveBeenCalled();
+        expect(mockFormatMessage).not.toHaveBeenCalled();
+      });
+
+      it("should return null for tab and newline whitespace", () => {
+        const result = validateLink("\t\n\r", mockFormatMessage, mockMessages);
+
+        expect(result).toBeNull();
+        expect(isUrl).not.toHaveBeenCalled();
+        expect(mockFormatMessage).not.toHaveBeenCalled();
+      });
+    });
+
+    describe("Invalid scenarios", () => {
+      it("should return error message for invalid URL", () => {
+        isUrl.mockReturnValue(false);
+
+        const result = validateLink("invalid-url", mockFormatMessage, mockMessages);
+
+        expect(result).toBe("Invalid URL format");
+        expect(isUrl).toHaveBeenCalledWith("invalid-url");
+        expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.invalidUrl);
+      });
+
+      it("should return error message for invalid URL with whitespace", () => {
+        isUrl.mockReturnValue(false);
+
+        const result = validateLink("  invalid-url  ", mockFormatMessage, mockMessages);
+
+        expect(result).toBe("Invalid URL format");
+        expect(isUrl).toHaveBeenCalledWith("invalid-url");
+        expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.invalidUrl);
+      });
+
+      it("should return error message for malformed URL", () => {
+        isUrl.mockReturnValue(false);
+
+        const result = validateLink("htp://malformed", mockFormatMessage, mockMessages);
+
+        expect(result).toBe("Invalid URL format");
+        expect(isUrl).toHaveBeenCalledWith("htp://malformed");
+        expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.invalidUrl);
+      });
+
+      it("should return error message for URL without protocol", () => {
+        isUrl.mockReturnValue(false);
+
+        const result = validateLink("example.com", mockFormatMessage, mockMessages);
+
+        expect(result).toBe("Invalid URL format");
+        expect(isUrl).toHaveBeenCalledWith("example.com");
+        expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.invalidUrl);
+      });
+
+      it("should handle special characters in invalid URL", () => {
+        isUrl.mockReturnValue(false);
+
+        const result = validateLink("http://ex@mple.com", mockFormatMessage, mockMessages);
+
+        expect(result).toBe("Invalid URL format");
+        expect(isUrl).toHaveBeenCalledWith("http://ex@mple.com");
+        expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.invalidUrl);
+      });
+    });
+
+    describe("Edge cases", () => {
+      it("should handle custom formatMessage function", () => {
+        const customFormatMessage = jest.fn().mockReturnValue("Custom error message");
+        isUrl.mockReturnValue(false);
+
+        const result = validateLink("invalid", customFormatMessage, mockMessages);
+
+        expect(result).toBe("Custom error message");
+        expect(customFormatMessage).toHaveBeenCalledWith(mockMessages.invalidUrl);
+      });
+
+      it("should handle different message object structure", () => {
+        const customMessages = {
+          invalidUrl: {
+            id: "custom.invalidUrl",
+            defaultMessage: "Custom invalid URL message",
+          },
+        };
+        isUrl.mockReturnValue(false);
+
+        const result = validateLink("invalid", mockFormatMessage, customMessages);
+
+        expect(result).toBe("Custom invalid URL message");
+        expect(mockFormatMessage).toHaveBeenCalledWith(customMessages.invalidUrl);
+      });
+
+      it("should trim very long whitespace strings", () => {
+        const longWhitespace = " ".repeat(100);
+
+        const result = validateLink(longWhitespace, mockFormatMessage, mockMessages);
+
+        expect(result).toBeNull();
+        expect(isUrl).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe("validateExternalLink", () => {
+    it("should call validateLink with correct parameters for valid URL", () => {
+      isUrl.mockReturnValue(true);
+
+      const result = validateExternalLink("https://external.com", mockFormatMessage, mockMessages);
+
+      expect(result).toBeNull();
+      expect(isUrl).toHaveBeenCalledWith("https://external.com");
+    });
+
+    it("should call validateLink with correct parameters for invalid URL", () => {
+      isUrl.mockReturnValue(false);
+
+      const result = validateExternalLink("invalid-external", mockFormatMessage, mockMessages);
+
+      expect(result).toBe("Invalid URL format");
+      expect(isUrl).toHaveBeenCalledWith("invalid-external");
+      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.invalidUrl);
+    });
+
+    it("should handle empty external link", () => {
+      const result = validateExternalLink("", mockFormatMessage, mockMessages);
+
+      expect(result).toBeNull();
+      expect(isUrl).not.toHaveBeenCalled();
+    });
+
+    it("should handle null external link", () => {
+      const result = validateExternalLink(null, mockFormatMessage, mockMessages);
+
+      expect(result).toBeNull();
+      expect(isUrl).not.toHaveBeenCalled();
+    });
+
+    it("should trim whitespace in external link", () => {
+      isUrl.mockReturnValue(true);
+
+      const result = validateExternalLink("  https://external.com  ", mockFormatMessage, mockMessages);
+
+      expect(result).toBeNull();
+      expect(isUrl).toHaveBeenCalledWith("https://external.com");
+    });
+  });
+
+  describe("validateDeepLink", () => {
+    it("should call validateLink with correct parameters for valid deep link", () => {
+      isUrl.mockReturnValue(true);
+
+      const result = validateDeepLink("myapp://deeplink", mockFormatMessage, mockMessages);
+
+      expect(result).toBeNull();
+      expect(isUrl).toHaveBeenCalledWith("myapp://deeplink");
+    });
+
+    it("should call validateLink with correct parameters for invalid deep link", () => {
+      isUrl.mockReturnValue(false);
+
+      const result = validateDeepLink("invalid-deeplink", mockFormatMessage, mockMessages);
+
+      expect(result).toBe("Invalid URL format");
+      expect(isUrl).toHaveBeenCalledWith("invalid-deeplink");
+      expect(mockFormatMessage).toHaveBeenCalledWith(mockMessages.invalidUrl);
+    });
+
+    it("should handle empty deep link", () => {
+      const result = validateDeepLink("", mockFormatMessage, mockMessages);
+
+      expect(result).toBeNull();
+      expect(isUrl).not.toHaveBeenCalled();
+    });
+
+    it("should handle undefined deep link", () => {
+      const result = validateDeepLink(undefined, mockFormatMessage, mockMessages);
+
+      expect(result).toBeNull();
+      expect(isUrl).not.toHaveBeenCalled();
+    });
+
+    it("should trim whitespace in deep link", () => {
+      isUrl.mockReturnValue(true);
+
+      const result = validateDeepLink("  myapp://deeplink  ", mockFormatMessage, mockMessages);
+
+      expect(result).toBeNull();
+      expect(isUrl).toHaveBeenCalledWith("myapp://deeplink");
+    });
+
+    it("should handle custom scheme deep links", () => {
+      isUrl.mockReturnValue(true);
+
+      const result = validateDeepLink("customscheme://action/path", mockFormatMessage, mockMessages);
+
+      expect(result).toBeNull();
+      expect(isUrl).toHaveBeenCalledWith("customscheme://action/path");
+    });
+  });
+
+  describe("Function independence", () => {
+    it("should ensure validateExternalLink and validateDeepLink are independent", () => {
+      isUrl.mockReturnValue(true);
+
+      validateExternalLink("https://external.com", mockFormatMessage, mockMessages);
+      validateDeepLink("myapp://deeplink", mockFormatMessage, mockMessages);
+
+      expect(isUrl).toHaveBeenCalledTimes(2);
+      expect(isUrl).toHaveBeenNthCalledWith(1, "https://external.com");
+      expect(isUrl).toHaveBeenNthCalledWith(2, "myapp://deeplink");
+    });
+
+    it("should handle mixed valid and invalid calls", () => {
+      isUrl.mockReturnValueOnce(true).mockReturnValueOnce(false);
+
+      const result1 = validateExternalLink("https://valid.com", mockFormatMessage, mockMessages);
+      const result2 = validateDeepLink("invalid", mockFormatMessage, mockMessages);
+
+      expect(result1).toBeNull();
+      expect(result2).toBe("Invalid URL format");
+      expect(mockFormatMessage).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe("Error handling", () => {
+    it("should handle isUrl throwing an error", () => {
+      isUrl.mockImplementation(() => {
+        throw new Error("isUrl error");
+      });
+
+      expect(() => {
+        validateLink("https://example.com", mockFormatMessage, mockMessages);
+      }).toThrow("isUrl error");
+    });
+
+    it("should handle formatMessage throwing an error", () => {
+      isUrl.mockReturnValue(false);
+      mockFormatMessage.mockImplementation(() => {
+        throw new Error("formatMessage error");
+      });
+
+      expect(() => {
+        validateLink("invalid", mockFormatMessage, mockMessages);
+      }).toThrow("formatMessage error");
+    });
+  });
+});

package/v2Containers/MobilePushNew/utils.js

@@ -0,0 +1,33 @@
+import { isUrl } from "../Line/Container/Wrapper/utils";
+
+/**
+ * Common link validation function using isUrl utility
+ * @param {string} url - The URL to validate
+ * @param {Function} formatMessage - Function to format error messages
+ * @param {Object} messages - Messages object containing invalidUrl message
+ * @returns {string|null} - Error message if invalid, null if valid
+ */
+export const validateLink = (url, formatMessage, messages) => {
+  if (!url || url.trim() === "") {
+    return null; // Empty URL is valid (optional field)
+  }
+  return isUrl(url.trim()) ? null : formatMessage(messages.invalidUrl);
+};
+
+/**
+ * Validate external link specifically
+ * @param {string} url - The external URL to validate
+ * @param {Function} formatMessage - Function to format error messages
+ * @param {Object} messages - Messages object containing invalidUrl message
+ * @returns {string|null} - Error message if invalid, null if valid
+ */
+export const validateExternalLink = (url, formatMessage, messages) => validateLink(url, formatMessage, messages);
+
+/**
+ * Validate deep link specifically
+ * @param {string} linkValue - The deep link to validate
+ * @param {Function} formatMessage - Function to format error messages
+ * @param {Object} messages - Messages object containing invalidUrl message
+ * @returns {string|null} - Error message if invalid, null if valid
+ */
+export const validateDeepLink = (linkValue, formatMessage, messages) => validateLink(linkValue, formatMessage, messages); 

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

@@ -95634,7 +95634,7 @@ new message content.",
                                 >
                                   <input
                                     accept="image/*"
-                                    id="fileName"
+                                    id="imageFileName"
                                     key="imgFile"
                                     onChange={[Function]}
                                     style={
@@ -116555,7 +116555,7 @@ new message content.",
                                 >
                                   <input
                                     accept="image/*"
-                                    id="fileName"
+                                    id="imageFileName"
                                     key="imgFile"
                                     onChange={[Function]}
                                     style={
@@ -137370,7 +137370,7 @@ new message content.",
                                 >
                                   <input
                                     accept="image/*"
-                                    id="fileName"
+                                    id="imageFileName"
                                     key="imgFile"
                                     onChange={[Function]}
                                     style={
@@ -158291,7 +158291,7 @@ new message content.",
                                 >
                                   <input
                                     accept="image/*"
-                                    id="fileName"
+                                    id="imageFileName"
                                     key="imgFile"
                                     onChange={[Function]}
                                     style={
@@ -199200,7 +199200,7 @@ new message content.",
                                 >
                                   <input
                                     accept="image/*"
-                                    id="fileName"
+                                    id="imageFileName"
                                     key="imgFile"
                                     onChange={[Function]}
                                     style={

package/v2Containers/TagList/index.js

@@ -39,12 +39,14 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
       loading: false,
       tags: [],
       tagsError: false,
+      currentContext: null, // Track current context to detect changes
     };
     this.renderTags = this.renderTags.bind(this);
     this.populateTags = this.populateTags.bind(this);
     this.populateTagForChildren = this.populateTagForChildren.bind(this);
     this.transformInjectedTags = this.transformInjectedTags.bind(this);
     this.transformCouponTags = this.transformCouponTags.bind(this);
+    this.loadingTimeout = null; // Add timeout reference
   }
 
   componentDidMount() {
@@ -52,33 +54,72 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
   }
 
   componentWillReceiveProps(nextProps) {
-    if (_.isEmpty(this.props.injectedTags) && _.isEmpty(this.props.tags)) {
+    // Set loading to true in these scenarios:
+    // 1. Both injectedTags and tags are empty (initial load)
+    // 2. Context change is happening (detected by different tag arrays)
+    const { injectedTags: currentInjectedTags, tags: currentTags } = this.props;
+    const { injectedTags: nextInjectedTags, tags: nextTags, fetchingSchemaError } = nextProps;
+    
+    const isInitialLoad = _.isEmpty(currentInjectedTags) && _.isEmpty(currentTags);
+    const isContextChange = !_.isEqual(nextTags, currentTags) && !_.isEmpty(currentTags);
+    
+    if (isInitialLoad || isContextChange) {
       this.setState({loading: true});
     }
-    if (!_.isEqual(nextProps.injectedTags, this.props.injectedTags)) {
+    
+    // Only reset loading for injectedTags changes if we're not currently loading due to context change
+    if (!_.isEqual(nextInjectedTags, currentInjectedTags) && !this.state.loading) {
       this.setState({loading: false});
+      this.clearLoadingTimeout();
     }
-    if (!_.isEqual(nextProps.tags, this.props.tags)) {
+    
+    if (!_.isEqual(nextTags, currentTags)) {
       this.setState({loading: false});
+      this.clearLoadingTimeout();
     }
-    if (nextProps?.fetchingSchemaError) {
-      this.setState({tagsError: nextProps?.fetchingSchemaError});
+    if (fetchingSchemaError) {
+      this.setState({tagsError: fetchingSchemaError, loading: false});
+      this.clearLoadingTimeout();
     }
   }
 
   componentDidUpdate(prevProps) {
-    if (this.props.tags !== prevProps.tags || this.props.injectedTags !== prevProps.injectedTags || this.props.selectedOfferDetails !== prevProps.selectedOfferDetails) {
+    const { tags, injectedTags, selectedOfferDetails } = this.props;
+    const { tags: prevTags, injectedTags: prevInjectedTags, selectedOfferDetails: prevSelectedOfferDetails } = prevProps;
+    
+    if (tags !== prevTags || injectedTags !== prevInjectedTags || selectedOfferDetails !== prevSelectedOfferDetails) {
       this.generateTags(this.props);
     }
   }
 
+  componentWillUnmount() {
+    this.clearLoadingTimeout();
+  }
+
+  clearLoadingTimeout = () => {
+    if (this.loadingTimeout) {
+      clearTimeout(this.loadingTimeout);
+      this.loadingTimeout = null;
+    }
+  };
+
   onSelect = (selectedKeys) => {
-    this.props.onTagSelect(selectedKeys[0]);
+    const { onTagSelect } = this.props;
+    onTagSelect(selectedKeys[0]);
   };
 
   getTagsforContext = (data) => {
-    //this.setState({loading: true});
-    this.props.onContextChange(data);
+    // Set loading state when context change is requested
+    this.setState({loading: true, currentContext: data});
+    
+    // Set a timeout to prevent infinite loading (fallback safety)
+    this.clearLoadingTimeout();
+    this.loadingTimeout = setTimeout(() => {
+      this.setState({loading: false});
+    }, 5000); // Reduced timeout to 5 seconds for better UX
+    
+    const { onContextChange } = this.props;
+    onContextChange(data);
   }
 
   generateTags = (props) => {
@@ -159,7 +200,8 @@ export class TagList extends React.Component { // eslint-disable-line react/pref
     //Form tags object with tag headers
     _.forEach(tagsList, (temp) => {
       const tag = temp.definition;
-      const { locale: userLocale } = this.props?.intl || {};
+      const { intl } = this.props;
+    const { locale: userLocale } = intl || {};
 
       // Check if the tag.value should be skipped based on feature control
       if (_.includes(excludedTags, tag.value)) {
@@ -360,6 +402,10 @@ TagList.propTypes = {
   disabled: PropTypes.bool,
   fetchingSchemaError: PropTypes.bool,
   eventContextTags: PropTypes.array,
+  intl: PropTypes.shape({
+    formatMessage: PropTypes.func.isRequired,
+    locale: PropTypes.string,
+  }).isRequired,
 };
 
 const mapStateToProps = createStructuredSelector({

package/v2Containers/Templates/_templates.scss

@@ -219,6 +219,106 @@
         }
       }
     }
+
+    .MOBILEPUSH {
+        .ant-card-body {
+          padding: 0;
+          background-color: $CAP_WHITE;
+          border-top: 1px solid $CAP_COLOR_16;
+          .ant-card-meta {
+            background-color: $CAP_G09;
+            padding: 0;
+            .ant-card-meta-description {
+              .mobilepush-container {
+                background-color: $CAP_WHITE;
+                padding: $CAP_SPACE_12;
+                .app-header {
+                  color: #5D5D5D;
+                  font-weight: 600;
+                  padding: 0.285rem 0.571rem 0.285rem 0.571rem;
+                  display: flex;
+                  align-items: center;
+                  justify-content: space-between;
+                  .app-header-left{
+                    display: flex;
+                    align-items: center;
+                    div {
+                      word-break: break-word;
+                    }
+                    .app-icon {
+                      width: 0.857rem;
+                      height: 0.857rem;
+                      border-radius: 50%;
+                      background-color: #737070;
+                    }
+                  }
+                }
+                .mobilepush-message {
+                  padding-left: 1.65rem;
+                }
+                .mobilepush-image {
+                  width: 100%;
+                  height: 120px;
+                  margin-top: 10px;
+                }
+                .mobilepush-image-padding {
+                  padding-left: 1.65rem;
+                }
+                .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
+                  }
+                  overflow: hidden;
+                  height: 100%;
+                  width: 100%;
+                  margin-left: 1.65rem;
+                  .whatsapp-carousel-container {
+                    padding: $CAP_SPACE_04 0px $CAP_SPACE_08;
+                    border-radius: $CAP_SPACE_06;
+                    background-color: $CAP_WHITE;
+                    width: 80%;
+                    flex-shrink: 0;
+                    white-space: pre-wrap;
+                    word-break: break-word;
+                    overflow: auto;
+                    text-align: left;
+                    margin: 0;
+                    .whatsapp-carousel-card {
+                        margin: $CAP_SPACE_02 $CAP_SPACE_02 $CAP_SPACE_01 $CAP_SPACE_02;
+                        .whatsapp-carousel-body {
+                          margin-bottom: $CAP_SPACE_08;
+                        }
+                    }
+                  }
+                }
+                .actions{
+                  background-color: #ffffff;
+                  height: auto;
+                  padding: $CAP_SPACE_08;
+                  text-align: center;
+                  display: flex;
+                  flex-direction: column;
+                  align-items: center;
+                  justify-content: center;
+                  gap: $CAP_SPACE_08;
+                  .action{
+                    font-size: $FONT_SIZE_S;
+                    font-weight: 600;
+                    color: #1970DA;
+                    height: 1.25rem;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
   }
 
   .create-new-link{
@@ -502,7 +602,7 @@
     }
   }
   .iphone-push-message-Container{
-    top: 8%;
+    top: 10%;
     .message-pop{
       border-radius: 4px;
       word-wrap: break-word;