@capillarytech/creatives-library 8.0.254 → 8.0.255-alpha.0

package/v2Components/ErrorInfoNote/messages.js

@@ -6,6 +6,28 @@
 import { defineMessages } from "react-intl";
 const scope = "creatives.componentsV2.ErrorInfoNote";
 export default defineMessages({
+  // Tab labels for new tabbed interface
+  htmlIssues: {
+    id: `${scope}.htmlIssues`,
+    defaultMessage: "HTML issues",
+  },
+  labelIssues: {
+    id: `${scope}.labelIssues`,
+    defaultMessage: "Label issues",
+  },
+  liquidIssues: {
+    id: `${scope}.liquidIssues`,
+    defaultMessage: "Liquid issues",
+  },
+  navigateToError: {
+    id: `${scope}.navigateToError`,
+    defaultMessage: "Go to error location",
+  },
+  closePanel: {
+    id: `${scope}.closePanel`,
+    defaultMessage: "Close validation panel",
+  },
+  // Legacy messages (kept for backwards compatibility)
   dynamicErrorHeader: {
     id: `${scope}.dynamicErrorHeader`,
     defaultMessage:
@@ -24,31 +46,39 @@ export default defineMessages({
   ariaFooter: {
     id: `${scope}.ariaFooter`,
     defaultMessage:
-      "Aira can make mistakes. Please verify the suggestions before applying them"
+      "Aira can make mistakes. Please verify the suggestions before applying them",
   },
   liquidDocLink: {
     id: `${scope}.liquidDocLink`,
     defaultMessage:
-      "https://docs.capillarytech.com/docs/liquid-language-in-messages"
+      "https://docs.capillarytech.com/docs/liquid-language-in-messages",
   },
   androidDynamicErrorHeader: {
     id: `${scope}.androidDynamicErrorHeader`,
     defaultMessage:
-      "Errors found in Android Dynamic Tags"
+      "Errors found in Android Dynamic Tags",
   },
   iosDynamicErrorHeader: {
     id: `${scope}.iosDynamicErrorHeader`,
     defaultMessage:
-      "Errors found in iOS Dynamic Tags"
+      "Errors found in iOS Dynamic Tags",
   },
   androidStandardErrorHeader: {
     id: `${scope}.androidStandardErrorHeader`,
     defaultMessage:
-      "Errors found in Android Standard Tags"
+      "Errors found in Android Standard Tags",
   },
   iosStandardErrorHeader: {
     id: `${scope}.iosStandardErrorHeader`,
     defaultMessage:
-      "Errors found in iOS Standard Tags"
+      "Errors found in iOS Standard Tags",
+  },
+  line: {
+    id: `${scope}.line`,
+    defaultMessage: "Line",
+  },
+  char: {
+    id: `${scope}.char`,
+    defaultMessage: "Char",
   },
 });

package/v2Components/ErrorInfoNote/style.scss

@@ -1,23 +1,260 @@
 @import "~@capillarytech/cap-ui-library/styles/_variables.scss";
 
 .error-container {
-  width: max-content;
+  width: 100%;
   margin-bottom: $CAP_SPACE_08;
-  margin-top: $CAP_SPACE_12;
+  margin-top: -3.143rem;
   background-color: $CAP_COLOR_05;
   border-radius: $CAP_SPACE_04;
   padding: $CAP_SPACE_08 $CAP_SPACE_12 $CAP_SPACE_08 $CAP_SPACE_08;
-  gap: $CAP_SPACE_08;
   box-sizing: border-box;
+
+  // New tabbed interface styles
+  &--tabs {
+    padding: 0.5rem 0.75rem;
+  }
 }
 
+// Header with tabs and actions
+.error-info-note {
+  &__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  &__tabs {
+    flex: 1;
+    
+    // Override Ant Design Tabs styles
+    .ant-tabs-nav {
+      margin-bottom: 0;
+      
+      &::before {
+        border-bottom: none;
+      }
+    }
+
+    .ant-tabs-tab {
+      padding: 0.5rem 0;
+      margin-right: 1.5rem;
+      color: $CAP_G03;
+      font-size: 0.875rem;
+      font-weight: $FONT_WEIGHT_MEDIUM;
+      
+      &:hover {
+        color: $CAP_G01;
+      }
+
+      &.ant-tabs-tab-active {
+        .ant-tabs-tab-btn {
+          color: $CAP_G01;
+          font-weight: 600;
+        }
+      }
+    }
+
+    .ant-tabs-ink-bar {
+      background-color: $CAP_G01;
+      height: 0.125rem;
+    }
+
+    .ant-tabs-content-holder {
+      padding-top: 0.5rem;
+    }
+  }
+
+  &__tab-label {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+
+  &__tab-count {
+    color: inherit;
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-shrink: 0;
+    padding-top: 0.5rem;
+  }
+
+  &__liquid-doc {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    color: $CAP_BLUE;
+    font-size: 0.875rem;
+    font-weight: $FONT_WEIGHT_MEDIUM;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+
+    &:hover {
+      color: $CAP_BLUE01;
+    }
+
+    .cap-icon-v2 {
+      margin-left: 0.25rem;
+    }
+  }
+
+  &__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    color: $CAP_G03;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: rgba($CAP_G01, 0.1);
+      color: $CAP_G01;
+    }
+
+    .anticon {
+      font-size: 0.875rem;
+    }
+  }
+
+  &__content {
+    max-height: 12.5rem;
+    overflow-y: auto;
+    padding-right: 0.25rem;
+
+    // Custom scrollbar
+    &::-webkit-scrollbar {
+      width: 0.375rem;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: $CAP_G06;
+      border-radius: 0.1875rem;
+
+      &:hover {
+        background-color: $CAP_G04;
+      }
+    }
+  }
+
+  &__item {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.5rem;
+    padding: 0.375rem 0;
+    border-bottom: 1px solid rgba($CAP_G06, 0.3);
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    &--error {
+      .error-info-note__icon--error {
+        color: $CAP_RED;
+      }
+    }
+
+    &--warning {
+      .error-info-note__icon--warning {
+        color: $CAP_YELLOW;
+      }
+    }
+  }
+
+  &__item-icon {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    padding-top: 0.125rem;
+  }
+
+  &__icon {
+    font-size: 0.875rem;
+
+    &--error {
+      color: $CAP_RED;
+    }
+
+    &--warning {
+      color: $CAP_YELLOW;
+    }
+  }
+
+  &__item-content {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 0.25rem;
+    font-size: 0.75rem;
+    line-height: 2;
+    color: $CAP_G01;
+  }
+
+  &__item-message {
+    color: $CAP_G01;
+  }
+
+  &__item-location {
+    color: $CAP_G03;
+    white-space: nowrap;
+  }
+
+  &__item-rule {
+    color: $CAP_G04;
+    font-family: monospace;
+    font-size: 0.6875rem;
+  }
+
+  &__item-navigate {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    color: $CAP_G04;
+    transition: all 0.2s ease;
+
+    &:hover {
+      background-color: rgba($CAP_G01, 0.1);
+      color: $CAP_G01;
+    }
+
+    .anticon {
+      font-size: 0.75rem;
+    }
+  }
+}
+
+// Legacy styles (kept for backwards compatibility)
 .error-header {
   width: 100%;
   height: $CAP_SPACE_32;
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
-  font-weight: 500;
+  font-weight: $FONT_WEIGHT_MEDIUM;
 
   .ant-btn.cap-button-v2.flat-btn {
     display: flex;
@@ -60,6 +297,25 @@
   }
 }
 
+// Legacy error list for platform-specific errors
+.error-list-legacy {
+  max-height: 10rem;
+  overflow-y: auto;
+  padding: 0;
+
+  &__item {
+    padding: $CAP_SPACE_04 0;
+  }
+
+  .cap-list-v2-error-item {
+    color: $CAP_G01;
+    font-size: $CAP_SPACE_12;
+    display: flex;
+    margin-left: $CAP_SPACE_04;
+    gap: $CAP_SPACE_04;
+  }
+}
+
 .liquid-divider {
   &.ant-divider.cap-divider-v2 {
     background: $FONT_COLOR_04;
@@ -82,5 +338,25 @@
 
 .error-header-sub-title {
   margin-left: $CAP_SPACE_04;
-  font-weight: 500;
-}
+  font-weight: $FONT_WEIGHT_MEDIUM;
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  .error-info-note {
+    &__tabs {
+      .ant-tabs-tab {
+        margin-right: 1rem;
+        font-size: 0.8125rem;
+      }
+    }
+
+    &__content {
+      max-height: 10rem;
+    }
+
+    &__item-content {
+      font-size: 0.6875rem;
+    }
+  }
+}

package/v2Components/FormBuilder/tests/index.test.js

@@ -10,7 +10,8 @@ import {
     render,
     screen,
     fireEvent,
-    waitFor
+    waitFor,
+    act
   } from '../../../utils/test-utils';
 import { mockData } from './mockData';
 
@@ -35,9 +36,17 @@ describe("test for checkbox form builder",() => {
     it("add action button to notification disabled in ios", async () => {
       const addNotifBtn=screen.getByLabelText("Add action buttons to notification")
       expect(addNotifBtn).toBeDisabled();
-      fireEvent.mouseOver(addNotifBtn);
+      // Use mouseEnter instead of mouseOver for tooltip, and wait longer for tooltip to appear
+      // Tooltips typically have a delay and are rendered in a portal, so we need to wait for them to appear
+      await act(async () => {
+        fireEvent.mouseEnter(addNotifBtn);
+        // Also trigger mouseOver as some tooltip implementations use both
+        fireEvent.mouseOver(addNotifBtn);
+      });
+      // Wait for tooltip to appear - it might be in a portal, so query document body
       await waitFor(() => {
-        expect(screen.getByText("This section is being revamped. Till then it will remain disabled.")).toBeInTheDocument();
-      })
+        const tooltip = screen.getByText("This section is being revamped. Till then it will remain disabled.");
+        expect(tooltip).toBeInTheDocument();
+      }, { timeout: 3000 });
     })
 })