@capillarytech/creatives-library 9.0.13-alpha.0 → 9.0.13-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.0.13-alpha.0",
+  "version": "9.0.13-beta.0",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/v2Components/FormBuilder/Functional/FormBuilderShell.js

@@ -176,29 +176,29 @@ const FormBuilderShell = (props) => {
   // Full mode submits directly; outside it, liquid-supported channels run liquid-tag
   // validation first — a clean result submits, an error goes to the footer and blocks.
   const submitValidForm = (legacy, validErrorData) => {
-    const p = propsRef.current;
+    const currentProps = propsRef.current;
     const runLiquid = liquidEnabled && !isFullMode;
-    const getLiquidTags = p.actions?.getLiquidTags;
+    const getLiquidTags = currentProps.actions?.getLiquidTags;
     if (!runLiquid || typeof getLiquidTags !== 'function') {
-      if (p.onSubmit) p.onSubmit(adapter.buildSubmitPayload(legacy));
+      if (currentProps.onSubmit) currentProps.onSubmit(adapter.buildSubmitPayload(legacy));
       return;
     }
     const content = adapter.getLiquidContent
-      ? adapter.getLiquidContent(legacy, { baseLanguage: p.baseLanguage })
+      ? adapter.getLiquidContent(legacy, { baseLanguage: currentProps.baseLanguage })
       : adapter.buildSubmitPayload(legacy);
     validateLiquidTemplateContent(content, {
       getLiquidTags,
-      formatMessage: p.intl.formatMessage,
+      formatMessage: currentProps.intl.formatMessage,
       messages: formMessages,
       onError: ({ standardErrors, liquidErrors }) => {
         pushFooter({ STANDARD_ERROR_MSG: standardErrors, LIQUID_ERROR_MSG: liquidErrors });
-        if (p.stopValidation) p.stopValidation();
+        if (currentProps.stopValidation) currentProps.stopValidation();
         // Classic passes the (clean) sync errorData here: the footer carries the
         // liquid error, not a per-field error.
-        if (p.onFormValidityChange) p.onFormValidityChange(false, validErrorData);
+        if (currentProps.onFormValidityChange) currentProps.onFormValidityChange(false, validErrorData);
       },
       onSuccess: () => {
-        if (p.onSubmit) p.onSubmit(adapter.buildSubmitPayload(legacy));
+        if (currentProps.onSubmit) currentProps.onSubmit(adapter.buildSubmitPayload(legacy));
       },
     });
   };

package/v2Components/FormBuilder/Functional/constants.js

@@ -37,3 +37,6 @@ export const MEMOIZED_TYPES = new Set([FIELD_TYPE.INPUT, FIELD_TYPE.TEXTAREA, FI
 export const ACTIVE_TAB_INDEX = 0;
 
 export const HIGH_FREQ_FIELDS = ['template-name', 'template-subject'];
+
+export const ASCII = 'ASCII';
+export const UNICODE = 'Unicode';

package/v2Components/FormBuilder/Functional/layout/Section.js

@@ -67,9 +67,7 @@ const Section = ({ section, renderContext }) => {
     return (
       <CapRow useLegacy style={section?.rowStyle || {}}>
         {section?.childSections?.map((childSection, index) => (
-          // Schema layout is a frozen, never-reordered descriptor -> index is a stable key.
-          // eslint-disable-next-line react/no-array-index-key
-          <CapColumn key={index} span={childSection?.width} offset={childSection?.offset} style={childSection?.colStyle || {}}>
+          <CapColumn key={`${childSection}-${index}`} span={childSection?.width} offset={childSection?.offset} style={childSection?.colStyle || {}}>
             <Section section={childSection} renderContext={renderContext} />
           </CapColumn>
         ))}

package/v2Components/FormBuilder/Functional/renderers/smsRenderers.js

@@ -18,7 +18,7 @@ import { isAiContentBotDisabled } from '../../../../utils/common';
 import { SMS } from '../../../../v2Containers/CreativesContainer/constants';
 import { EMBEDDED } from '../../../../constants/unified';
 import { createFieldRegistry } from '../core/schema/fieldRegistry';
-import { FIELD_TYPE } from '../constants';
+import { ASCII, FIELD_TYPE, UNICODE } from '../constants';
 import { fieldIds, SMS_TAB } from '../channels/sms/config';
 
 const { TextArea } = CapInput;
@@ -40,10 +40,6 @@ const dataFieldDefaultProps = {
 export const InputField = ({
   field, value, error, onChange, onBlur, renderContext,
 }) => {
-  // Errors show only after validation is triggered (checkValidation). We drive the
-  // border via `status` and render the message in our own span rather than passing
-  // CapInput's errorMessage: toggling its antd suffix remounts the <input> and drops
-  // focus mid-keystroke.
   const showError = Boolean(renderContext?.checkValidation && error);
   return (
     <CapColumn key={field.id} span={field.width} offset={field.offset} style={field.style || {}}>
@@ -51,7 +47,7 @@ export const InputField = ({
         id={field.id}
         label={field.label}
         placeholder={field.placeholder}
-        status={showError ? 'error' : undefined}
+        errorMessage={showError && field.errorMessage ? field.errorMessage : ''}
         className={`input-primary chart-name-input${showError ? ' error' : ''}`}
         value={value || ''}
         onChange={(e) => onChange(e.target.value)}
@@ -59,9 +55,6 @@ export const InputField = ({
         disabled={field.disabled}
         size={field.size || 'default'}
       />
-      {showError && field.errorMessage ? (
-        <span className="component-with-label-error-message">{field.errorMessage}</span>
-      ) : null}
     </CapColumn>
   );
 };
@@ -214,7 +207,7 @@ export const SmsPreviewField = ({ field, renderContext }) => {
         showDeviceToggle={false}
         showHeader={false}
         formatMessage={renderContext?.intl?.formatMessage}
-        senderId={unicodeEnabled ? 'Unicode' : 'ASCII'}
+        senderId={unicodeEnabled ? UNICODE : ASCII}
       />
     </CapColumn>
   );

package/v2Components/FormBuilder/Functional/tests/smsRenderers.test.js

@@ -22,22 +22,20 @@ describe('InputField', () => {
     id: 'template-name', type: 'input', width: 18, errorMessage: 'Name required',
   };
 
-  it('shows the error span + status=error when validation triggered and error present', () => {
+  it('passes errorMessage to CapInput (warning icon + status + message) when validation triggered and error present', () => {
     const el = InputField({
       field, value: '', error: true, onChange: () => {}, onBlur: () => {}, renderContext: { checkValidation: true },
     });
-    const [input, span] = kids(el);
-    expect(input.props.status).toBe('error');
-    expect(span.props.children).toBe('Name required');
+    const [input] = kids(el);
+    expect(input.props.errorMessage).toBe('Name required');
   });
 
-  it('no error span when validation not triggered', () => {
+  it('no errorMessage when validation not triggered', () => {
     const el = InputField({
       field, value: 'x', error: true, onChange: () => {}, onBlur: () => {}, renderContext: { checkValidation: false },
     });
-    const [input, span] = kids(el);
-    expect(input.props.status).toBeUndefined();
-    expect(span).toBeUndefined();
+    const [input] = kids(el);
+    expect(input.props.errorMessage).toBe('');
   });
 });
 

package/v2Components/FormBuilder/_formBuilder.scss

@@ -46,13 +46,10 @@
 .error .error-message{
   top: revert;
 }
-// SMS message-body error ("Invalid label, please close all curly braces"):
-// drop the default top gap and add breathing room below the message box.
-.sms-message-content {
-  .component-with-label-error-message {
-    margin-top: 0 !important;
-    margin-bottom: 8px !important;
-  }
+
+.sms-message-content .component-with-label-error-message {
+  margin-top:  -$CAP_SPACE_04;
+  margin-bottom: $CAP_SPACE_08;
 }
 .tabs-error {
   .ant-tabs-ink-bar .ant-tabs-ink-bar-animated {

package/v2Components/TemplatePreview/coderabbits_comments

@@ -1,171 +0,0 @@
-@coderabbitai
-coderabbitai Bot
-2 days ago
-⚠️ Potential issue | 🟠 Major | ⚡ Quick win
-
-Guard non-string channel values before calling toUpperCase().
-
-Current normalization crashes for truthy non-string channel values instead of returning null.
-
-Proposed fix
--export const getChannelAdapter = (channel) => adapters[(channel || '').toUpperCase()] || null;
-+export const getChannelAdapter = (channel) => {
-+  const key = typeof channel === 'string' ? channel.toUpperCase() : '';
-+  return adapters[key] || null;
-+};
-🤖 Prompt for AI Agents
-Verify each finding against current code. Fix only still-valid issues, skip the
-rest with a brief reason, keep changes minimal, and validate.
-
-In `@app/v2Components/FormBuilder/Functional/channels/registry.js` at line 12, The
-getChannelAdapter function does not guard against non-string values for the
-channel parameter. When a truthy non-string value (like a number or object) is
-passed, calling toUpperCase() on it will crash. Add a type check to ensure the
-channel value is a string before attempting to call toUpperCase() on it. If
-channel is not a string, return null directly. This prevents the crash while
-maintaining the existing behavior for null, undefined, and string values.
-
- 
-
-
-coderabbitai Bot
-2 days ago
-⚠️ Potential issue | 🟠 Major | ⚡ Quick win
-
-Guard MULTICOLS row dereference to prevent schema-driven crashes.
-
-Line 38/39 assumes every row exists. A null row from schema data will throw before form initialization completes.
-
-Proposed fix
--      (section.inputFields || []).forEach((row) => (row.cols || []).forEach(visit));
--      (section.actionFields || []).forEach((row) => (row.cols || []).forEach(visit));
-+      (section.inputFields || []).forEach((row) => (row?.cols || []).forEach(visit));
-+      (section.actionFields || []).forEach((row) => (row?.cols || []).forEach(visit));
-🤖 Prompt for AI Agents
-Verify each finding against current code. Fix only still-valid issues, skip the
-rest with a brief reason, keep changes minimal, and validate.
-
-In `@app/v2Components/FormBuilder/Functional/core/schema/initializeFormState.js`
-around lines 37 - 40, The MULTICOLS case in the section type handling does not
-guard against null or undefined row values before accessing the cols property,
-which will cause a crash if schema data contains null rows. Add a null check for
-each row within the forEach callbacks for both inputFields and actionFields
-processing to ensure the row exists before attempting to access row.cols,
-preventing dereferencing of null values during form initialization.
-
-
-
-
-coderabbitai Bot
-2 days ago
-⚠️ Potential issue | 🟠 Major | ⚡ Quick win
-
-Preserve original numeric tab indices when decoding legacy formData.
-
-Line 52 compacts tab keys into a dense array. For sparse legacy keys (e.g., only 1 present), toLegacy writes them back as 0, changing payload shape and base-tab addressing.
-
-Proposed fix
-📝 Committable suggestion
-‼️ IMPORTANT
-Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
-
-Suggested change
-  const orderedIndices = Object.keys(tabsByIndex)
-    .map(Number)
-    .sort((a, b) => a - b);
-  const tabs = orderedIndices.map((index) => tabsByIndex[index]);
-  const foundBase = tabs.findIndex((tab) => tab?.base);
-  const baseTabIndex = foundBase === -1 ? 0 : foundBase;
-  const orderedIndices = Object.keys(tabsByIndex)
-    .map(Number)
-    .sort((a, b) => a - b);
-  const tabs = [];
-  orderedIndices.forEach((index) => {
-    tabs[index] = tabsByIndex[index];
-  });
-  const foundBase = orderedIndices.find((index) => tabsByIndex[index]?.base);
-  const baseTabIndex = foundBase === undefined ? 0 : foundBase;
-🤖 Prompt for AI Agents
-Verify each finding against current code. Fix only still-valid issues, skip the
-rest with a brief reason, keep changes minimal, and validate.
-
-In `@app/v2Components/FormBuilder/Functional/core/store/toLegacyFormData.js`
-around lines 49 - 56, The issue is that the code compacts sparse tab indices
-into a dense array by mapping orderedIndices to a new tabs array, which loses
-the original numeric indices and changes the payload shape when converting back
-to legacy format. Instead of creating a compacted tabs array using
-orderedIndices.map, preserve the sparse structure by keeping the original
-numeric keys from tabsByIndex and adjusting the baseTabIndex calculation to work
-with the actual tab indices rather than array positions.
-
-
-@coderabbitai
-coderabbitai Bot
-2 days ago
-⚠️ Potential issue | 🟡 Minor | ⚡ Quick win
-
-Fix TagList prop contract types/defaults in FormBuilderShell.
-
-selectedOfferDetails and waitEventContextTags are typed opposite to how app/v2Containers/TagList/index.js consumes them (array and object respectively), which weakens contract checks and can hide wrong-shape regressions.
-
-Suggested fix
- FormBuilderShell.propTypes = {
-@@
--  selectedOfferDetails: PropTypes.object,
-+  selectedOfferDetails: PropTypes.array,
-@@
--  waitEventContextTags: PropTypes.array,
-+  waitEventContextTags: PropTypes.object,
-@@
- FormBuilderShell.defaultProps = {
-@@
--  selectedOfferDetails: undefined,
-+  selectedOfferDetails: [],
-@@
--  waitEventContextTags: [],
-+  waitEventContextTags: {},
-Also applies to: 361-364
-
-🤖 Prompt for AI Agents
-Verify each finding against current code. Fix only still-valid issues, skip the
-rest with a brief reason, keep changes minimal, and validate.
-
-In `@app/v2Components/FormBuilder/Functional/FormBuilderShell.js` around lines 348
-- 350, The PropTypes definitions for selectedOfferDetails and
-waitEventContextTags in the FormBuilderShell propTypes are typed incorrectly
-compared to how they are consumed in the TagList component. Change
-selectedOfferDetails from PropTypes.object to PropTypes.array, and change
-waitEventContextTags from PropTypes.array to PropTypes.object. Apply the same
-type corrections to any other instances of these props mentioned in the file
-(lines 361-364).
-
-
-@coderabbitai
-coderabbitai Bot
-2 days ago
-⚠️ Potential issue | 🟠 Major | ⚡ Quick win
-
-Characterization can unintentionally run Functional instead of Classic.
-
-Line 22 imports the entry-gated FormBuilder (../index), and that gate can route SMS to Functional based on feature access. For a Classic golden suite, this makes the target non-deterministic and can hide Classic regressions.
-
-Suggested fix
--import FormBuilder from '../index';
-+import ClassicFormBuilder from '../Classic';
-@@
--const ComponentToRender = injectIntl(FormBuilder);
-+const ComponentToRender = injectIntl(ClassicFormBuilder);
-Also applies to: 47-47
-
-🤖 Prompt for AI Agents
-Verify each finding against current code. Fix only still-valid issues, skip the
-rest with a brief reason, keep changes minimal, and validate.
-
-In `@app/v2Components/FormBuilder/tests/sms.characterization.test.js` around lines
-22 - 23, The imports on line 22 and line 47 use the entry-gated FormBuilder from
-../index which can route SMS to Functional based on feature access. For the
-Classic characterization test to be deterministic and properly test Classic
-behavior, import the Classic FormBuilder implementation directly rather than
-going through the gated entry point. Replace the imports from ../index with
-direct imports to the Classic FormBuilder implementation to ensure the test
-always uses the Classic version.