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

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

@@ -1,116 +0,0 @@
-/**
- * Section — channel-agnostic recursive renderer for the schema's structural
- * section types (parent / multicols / col-label). It resolves each leaf field's
- * renderer from the registry and feeds it the field's primitive value + error +
- * handlers (computed here from the normalized state + the legacy errorData).
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import CapRow from '@capillarytech/cap-ui-library/CapRow';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import { selectFieldValue } from '../core/store/selectors';
-import { MEMOIZED_TYPES, SECTION_TYPE } from '../constants';
-import FieldSlot from './FieldSlot';
-
-const legacyError = (errorData, field, tabIndex) => {
-  if (!errorData) return undefined;
-  if (tabIndex == null) return errorData[field?.id];
-  return errorData[tabIndex]?.[field?.id];
-};
-
-export const renderField = (field, renderContext) => {
-  if (!field?.type) return null;
-  const Renderer = renderContext?.registry?.resolve(field.type);
-  if (!Renderer) return null; // unknown/unsupported type -> nothing (dead branches don't exist here)
-
-  const tabIndex = field.standalone ? null : renderContext?.activeTabIndex;
-  const value = selectFieldValue(renderContext?.state, { fieldId: field?.id, tabIndex });
-  const error = legacyError(renderContext?.errorData, field, tabIndex);
-
-  if (MEMOIZED_TYPES.has(field.type)) {
-    return (
-      <FieldSlot
-        key={field.id}
-        Renderer={Renderer}
-        field={field}
-        value={value}
-        error={error}
-        resolvedError={renderContext?.resolvedFieldErrors?.[field?.id]}
-        checkValidation={renderContext?.checkValidation}
-        channel={renderContext?.channel}
-        onFieldChange={renderContext?.onFieldChange}
-        onFieldBlur={renderContext?.onFieldBlur}
-        onEvent={renderContext?.onEvent}
-      />
-    );
-  }
-
-  return (
-    <Renderer
-      key={field.id}
-      field={field}
-      value={value}
-      error={error}
-      onChange={(newValue) => renderContext.onFieldChange(field, newValue)}
-      onBlur={() => renderContext.onFieldBlur?.(field)}
-      onEvent={(eventName, data) => renderContext.onEvent(field, eventName, data)}
-      renderContext={renderContext}
-    />
-  );
-};
-
-const Section = ({ section, renderContext }) => {
-  if (!section) return null;
-
-  if (section.type === SECTION_TYPE.PARENT) {
-    return (
-      <CapRow useLegacy style={section?.rowStyle || {}}>
-        {section?.childSections?.map((childSection, index) => (
-          <CapColumn key={`${childSection}-${index}`} span={childSection?.width} offset={childSection?.offset} style={childSection?.colStyle || {}}>
-            <Section section={childSection} renderContext={renderContext} />
-          </CapColumn>
-        ))}
-      </CapRow>
-    );
-  }
-
-  if (section.type === SECTION_TYPE.MULTICOLS) {
-    return (
-      <>
-        {section?.inputFields?.map((row, index) => (
-          <CapRow useLegacy key={`in-${index}`} className={row?.rowClassName} style={row?.rowStyle || {}}>
-            {row?.cols?.map((col) => renderField(col, renderContext))}
-          </CapRow>
-        ))}
-        {section?.actionFields?.map((row, index) => (
-          <CapRow useLegacy key={`act-${index}`} className={row?.rowClassName} style={row?.rowStyle || {}}>
-            {row?.cols?.map((col) => renderField(col, renderContext))}
-          </CapRow>
-        ))}
-      </>
-    );
-  }
-
-  if (section.type === SECTION_TYPE.COL_LABEL) {
-    return (
-      <>
-        {section?.inputFields?.map((field) => renderField(field, renderContext))}
-        {section?.actionFields?.map((field) => renderField(field, renderContext))}
-      </>
-    );
-  }
-
-  return null;
-};
-
-Section.propTypes = {
-  section: PropTypes.object,
-  renderContext: PropTypes.object.isRequired,
-};
-
-Section.defaultProps = {
-  section: null,
-};
-
-export default Section;

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

@@ -1,258 +0,0 @@
-/**
- * SMS field renderers — pure presentational components for the SMS schema field
- * types, reusing the cap-ui-library components for visual parity with the class
- * component. Prop contract: { field, value, error, resolvedError, onChange, onBlur, onEvent, renderContext }.
- */
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import CapColumn from '@capillarytech/cap-ui-library/CapColumn';
-import CapInput from '@capillarytech/cap-ui-library/CapInput';
-import CapCheckbox from '@capillarytech/cap-ui-library/CapCheckbox';
-import CapButton from '@capillarytech/cap-ui-library/CapButton';
-import CapAskAira from '@capillarytech/cap-ui-library/CapAskAira';
-import UnifiedPreview from '../../../CommonTestAndPreview/UnifiedPreview';
-import { ANDROID } from '../../../CommonTestAndPreview/constants';
-import TagList from '../../../../v2Containers/TagList';
-import { isAiContentBotDisabled } from '../../../../utils/common';
-import { SMS } from '../../../../v2Containers/CreativesContainer/constants';
-import { EMBEDDED } from '../../../../constants/unified';
-import { createFieldRegistry } from '../core/schema/fieldRegistry';
-import { ASCII, FIELD_TYPE, UNICODE } from '../constants';
-import { fieldIds, SMS_TAB } from '../channels/sms/config';
-
-const { TextArea } = CapInput;
-
-// Shared prop shapes — every renderer receives the frozen field schema and the
-// render context; data renderers also get value/error + an onChange handler.
-const dataFieldPropTypes = {
-  field: PropTypes.object.isRequired,
-  value: PropTypes.any,
-  error: PropTypes.any,
-  onChange: PropTypes.func.isRequired,
-  renderContext: PropTypes.object.isRequired,
-};
-const dataFieldDefaultProps = {
-  value: undefined,
-  error: undefined,
-};
-
-export const InputField = ({
-  field, value, error, onChange, onBlur, renderContext,
-}) => {
-  const showError = Boolean(renderContext?.checkValidation && error);
-  return (
-    <CapColumn key={field.id} span={field.width} offset={field.offset} style={field.style || {}}>
-      <CapInput
-        id={field.id}
-        label={field.label}
-        placeholder={field.placeholder}
-        errorMessage={showError && field.errorMessage ? field.errorMessage : ''}
-        className={`input-primary chart-name-input${showError ? ' error' : ''}`}
-        value={value || ''}
-        onChange={(e) => onChange(e.target.value)}
-        onBlur={onBlur}
-        disabled={field.disabled}
-        size={field.size || 'default'}
-      />
-    </CapColumn>
-  );
-};
-
-InputField.propTypes = {
-  ...dataFieldPropTypes,
-  onBlur: PropTypes.func,
-};
-InputField.defaultProps = {
-  ...dataFieldDefaultProps,
-  onBlur: undefined,
-};
-
-export const TextAreaField = ({
-  field, value, error, resolvedError, onChange, renderContext,
-}) => {
-  let aiDisabled = true;
-  try { aiDisabled = isAiContentBotDisabled(); } catch (e) { aiDisabled = true; }
-  // Match renderTextAreaContent: an EMPTY/required error shows only after
-  // validation is triggered; other errors (brace/tag) show live while typing.
-  const isContentEmpty = !value || !String(value).trim();
-  const showError = Boolean(error) && (isContentEmpty ? Boolean(renderContext?.checkValidation) : true);
-  // Inline (below-the-box) message: only the brace error is shown inline, passed in
-  // as `resolvedError` by the Shell (full mode only — the single intentional
-  // difference from Classic). Missing-tag/empty/generic body errors stay border-only
-  // here; the footer carries them.
-  const inlineMessage = resolvedError || '';
-  return (
-    <CapColumn key={field.id} span={field.width} offset={field.offset}>
-      <TextArea
-        id={field.id}
-        label={field.label}
-        placeholder={field.placeholder || ''}
-        className={`${showError ? 'error-form-builder' : ''}`}
-        errorMessage={showError && inlineMessage ? inlineMessage : ''}
-        autosize={field.autosize ? field.autosizeParams : false}
-        value={value || ''}
-        onChange={(e) => onChange(e.target.value)}
-        style={field.style || {}}
-        disabled={field.disabled}
-      />
-      {renderContext?.channel === SMS && !aiDisabled && (
-        <CapAskAira.ContentGenerationBot
-          text={value || ''}
-          setText={(x) => onChange(x)}
-          iconPlacement="float-br"
-          rootStyle={{ bottom: 'calc(1rem + 0.2rem)', right: '0.2rem' }}
-        />
-      )}
-    </CapColumn>
-  );
-};
-
-TextAreaField.propTypes = {
-  ...dataFieldPropTypes,
-  resolvedError: PropTypes.string,
-};
-TextAreaField.defaultProps = {
-  ...dataFieldDefaultProps,
-  resolvedError: '',
-};
-
-export const CheckboxField = ({
-  field, value, error, onChange, renderContext,
-}) => {
-  const showError = Boolean(renderContext?.checkValidation && error);
-  return (
-    <CapColumn key={field.id} span={field.width} offset={field.offset}>
-      <CapCheckbox
-        key={field.id}
-        className={`${showError ? 'error' : ''}`}
-        errorMessage={field.errorMessage && showError ? field.errorMessage : ''}
-        onChange={(e) => onChange(e.target.checked)}
-        checked={Boolean(value)}
-        style={field.style || {}}
-        disabled={field.disabled}
-        inductiveText={field.inductiveText}
-      >
-        {field.label}
-      </CapCheckbox>
-    </CapColumn>
-  );
-};
-
-CheckboxField.propTypes = { ...dataFieldPropTypes };
-CheckboxField.defaultProps = { ...dataFieldDefaultProps };
-
-export const ButtonField = ({ field, onEvent }) => {
-  if (field.metaType !== 'submit-button') return null;
-  return (
-    <CapColumn style={field.colStyle || {}} span={field.width} offset={field.offset}>
-      <CapButton
-        type={field.buttonType}
-        icon={field.icon}
-        disabled={field.disabled || false}
-        onClick={(data) => onEvent(field.submitAction, data)}
-      >
-        {field.value}
-      </CapButton>
-    </CapColumn>
-  );
-};
-
-ButtonField.propTypes = {
-  field: PropTypes.object.isRequired,
-  onEvent: PropTypes.func.isRequired,
-};
-
-export const TagListField = ({ field, onEvent, renderContext }) => (
-  <CapColumn key={`input-${field.id}`} offset={field.offset} span={field.width || ''} style={field.style || { marginBottom: '16px' }}>
-    <TagList
-      key={`input-${field.id}`}
-      moduleFilterEnabled={renderContext?.location?.query?.type !== EMBEDDED}
-      label={field.label || ''}
-      onTagSelect={(data) => onEvent('onTagSelect', data)}
-      onContextChange={renderContext?.onContextChange}
-      location={renderContext?.location}
-      tags={renderContext?.tags || []}
-      injectedTags={renderContext?.injectedTags || {}}
-      className={field.className || ''}
-      id={field.id}
-      userLocale={renderContext?.userLocale}
-      selectedOfferDetails={renderContext?.selectedOfferDetails}
-      channel={renderContext?.channel}
-      eventContextTags={renderContext?.eventContextTags}
-      restrictPersonalization={renderContext?.restrictPersonalization}
-      waitEventContextTags={renderContext?.waitEventContextTags}
-    />
-  </CapColumn>
-);
-
-TagListField.propTypes = {
-  field: PropTypes.object.isRequired,
-  onEvent: PropTypes.func.isRequired,
-  renderContext: PropTypes.object.isRequired,
-};
-
-export const SmsPreviewField = ({ field, renderContext }) => {
-  const tab = renderContext?.legacyFormData?.[SMS_TAB] || {};
-  const content = tab[fieldIds.editor];
-  const unicodeEnabled = tab[fieldIds.unicode];
-  return (
-    <CapColumn key="input" span={23} offset={1}>
-      <UnifiedPreview
-        key={field.id}
-        style={field.customStyling || {}}
-        channel={field.channel || SMS}
-        content={content}
-        device={ANDROID}
-        showDeviceToggle={false}
-        showHeader={false}
-        formatMessage={renderContext?.intl?.formatMessage}
-        senderId={unicodeEnabled ? UNICODE : ASCII}
-      />
-    </CapColumn>
-  );
-};
-
-SmsPreviewField.propTypes = {
-  field: PropTypes.object.isRequired,
-  renderContext: PropTypes.object.isRequired,
-};
-
-// sms-count: a display-only div whose text comes from the field value/derived state.
-// Matches the class component's renderPrimitiveElement: the field `style`
-// (e.g. float:right) goes on the inner <div>; the CapColumn gets `colStyle`
-// (not `style`) — applying the float to the column shifts the layout.
-export const DivField = ({ field, renderContext }) => {
-  const tab = renderContext?.legacyFormData?.[SMS_TAB] || {};
-  const children = tab[field.id] || field.value || '';
-  return (
-    <CapColumn key={field.id} span={field.width} offset={field.offset} style={field.colStyle || {}}>
-      <div
-        id={field.id}
-        className={field.className || ''}
-        ref={renderContext?.refs?.[field.id]}
-        style={field.style || {}}
-      >
-        {children}
-      </div>
-    </CapColumn>
-  );
-};
-
-DivField.propTypes = {
-  field: PropTypes.object.isRequired,
-  renderContext: PropTypes.object.isRequired,
-};
-
-/** Build a registry pre-loaded with the SMS field renderers. */
-export const createSmsRegistry = () => createFieldRegistry({
-  [FIELD_TYPE.INPUT]: InputField,
-  [FIELD_TYPE.TEXTAREA]: TextAreaField,
-  [FIELD_TYPE.CHECKBOX]: CheckboxField,
-  [FIELD_TYPE.BUTTON]: ButtonField,
-  [FIELD_TYPE.TAG_LIST]: TagListField,
-  [FIELD_TYPE.SMS_PREVIEW]: SmsPreviewField,
-  [FIELD_TYPE.DIV]: DivField,
-});
-
-export default createSmsRegistry;

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

@@ -1,21 +0,0 @@
-/**
- * Unit tests for the channel adapter registry lookup.
- */
-import { getChannelAdapter } from '../channels/registry';
-import smsAdapter from '../channels/sms';
-
-describe('getChannelAdapter', () => {
-  it('resolves the SMS adapter (case-insensitive)', () => {
-    expect(getChannelAdapter('SMS')).toBe(smsAdapter);
-    expect(getChannelAdapter('sms')).toBe(smsAdapter);
-  });
-
-  it('returns null for an unknown channel', () => {
-    expect(getChannelAdapter('EMAIL')).toBeNull();
-  });
-
-  it('returns null for undefined/empty channel', () => {
-    expect(getChannelAdapter(undefined)).toBeNull();
-    expect(getChannelAdapter('')).toBeNull();
-  });
-});

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

@@ -1,65 +0,0 @@
-/**
- * Unit tests for the field renderer registry (factory).
- */
-
-import { createFieldRegistry } from '../core/schema/fieldRegistry';
-
-const Input = () => null;
-const TextArea = () => null;
-const EmailCk = () => null;
-
-describe('createFieldRegistry', () => {
-  it('registers and resolves a renderer by type', () => {
-    const r = createFieldRegistry();
-    r.register('input', Input);
-    expect(r.resolve('input')).toBe(Input);
-    expect(r.has('input')).toBe(true);
-  });
-
-  it('returns null for an unregistered type', () => {
-    const r = createFieldRegistry();
-    expect(r.resolve('nope')).toBeNull();
-    expect(r.has('nope')).toBe(false);
-  });
-
-  it('registerAll adds many at once and is chainable', () => {
-    const r = createFieldRegistry();
-    const ret = r.registerAll({ input: Input, textarea: TextArea });
-    expect(ret).toBe(r);
-    expect(r.resolve('input')).toBe(Input);
-    expect(r.resolve('textarea')).toBe(TextArea);
-  });
-
-  it('registerAll() with no args is a chainable no-op (default {})', () => {
-    const r = createFieldRegistry();
-    expect(r.registerAll()).toBe(r);
-  });
-
-  it('register() is chainable', () => {
-    const r = createFieldRegistry();
-    expect(r.register('input', Input)).toBe(r);
-  });
-
-  it('accepts an initial map in the factory', () => {
-    const r = createFieldRegistry({ input: Input });
-    expect(r.resolve('input')).toBe(Input);
-  });
-
-  it('extend() shadows the base registry without mutating it (channel overrides)', () => {
-    const base = createFieldRegistry({ input: Input, ckeditor: TextArea });
-    const emailScoped = base.extend({ ckeditor: EmailCk });
-
-    // override applies only to the extended registry
-    expect(emailScoped.resolve('ckeditor')).toBe(EmailCk);
-    expect(emailScoped.resolve('input')).toBe(Input); // inherited
-    // base is untouched
-    expect(base.resolve('ckeditor')).toBe(TextArea);
-  });
-
-  it('register on the child does not leak into the parent', () => {
-    const base = createFieldRegistry({ input: Input });
-    const child = base.extend();
-    child.register('textarea', TextArea);
-    expect(base.has('textarea')).toBe(false);
-  });
-});

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

@@ -1,97 +0,0 @@
-/**
- * FieldSlot memo-boundary tests. Proves the perf contract: a field re-renders
- * only when its own primitive props (value/error/checkValidation) change, not
- * when an unrelated re-render happens or a sibling field changes.
- */
-import React from 'react';
-import { render } from '@testing-library/react';
-import FieldSlot from '../layout/FieldSlot';
-
-const field = { id: 'template-name', type: 'input', width: 18 };
-const noop = () => {};
-
-const renderSlot = (overrides = {}) => {
-  const Renderer = jest.fn(() => <div>field</div>);
-  const props = {
-    Renderer,
-    field,
-    value: 'a',
-    error: false,
-    checkValidation: false,
-    channel: 'SMS',
-    onFieldChange: noop,
-    onFieldBlur: noop,
-    onEvent: noop,
-    ...overrides,
-  };
-  const utils = render(<FieldSlot {...props} />);
-  return { Renderer, props, rerender: (next) => utils.rerender(<FieldSlot {...{ ...props, ...next }} />) };
-};
-
-describe('FieldSlot memoization', () => {
-  it('does NOT re-render the field when props are unchanged (stable handlers)', () => {
-    const { Renderer, rerender } = renderSlot();
-    expect(Renderer).toHaveBeenCalledTimes(1);
-    rerender({}); // identical props -> memo bails out
-    expect(Renderer).toHaveBeenCalledTimes(1);
-  });
-
-  it('re-renders when its own value changes', () => {
-    const { Renderer, rerender } = renderSlot();
-    rerender({ value: 'ab' });
-    expect(Renderer).toHaveBeenCalledTimes(2);
-  });
-
-  it('re-renders when its error changes', () => {
-    const { Renderer, rerender } = renderSlot();
-    rerender({ error: 'tagBracketCountMismatchError' });
-    expect(Renderer).toHaveBeenCalledTimes(2);
-  });
-
-  it('re-renders when checkValidation flips (error reveal on Save)', () => {
-    const { Renderer, rerender } = renderSlot();
-    rerender({ checkValidation: true });
-    expect(Renderer).toHaveBeenCalledTimes(2);
-  });
-
-  it('passes a minimal renderContext ({ checkValidation, channel }) and wires onChange to its field', () => {
-    const onFieldChange = jest.fn();
-    let captured;
-    const Renderer = jest.fn((p) => { captured = p; return <div>f</div>; });
-    render(
-      <FieldSlot
-        Renderer={Renderer}
-        field={field}
-        value="a"
-        error={false}
-        checkValidation
-        channel="SMS"
-        onFieldChange={onFieldChange}
-        onFieldBlur={noop}
-        onEvent={noop}
-      />,
-    );
-    expect(captured.renderContext).toEqual({ checkValidation: true, channel: 'SMS' });
-    captured.onChange('hello');
-    expect(onFieldChange).toHaveBeenCalledWith(field, 'hello');
-  });
-
-  it('wires onBlur and onEvent to the field handlers', () => {
-    const onFieldBlur = jest.fn();
-    const onEvent = jest.fn();
-    let captured;
-    const Renderer = jest.fn((p) => { captured = p; return <div>f</div>; });
-    render(<FieldSlot Renderer={Renderer} field={field} onFieldChange={noop} onFieldBlur={onFieldBlur} onEvent={onEvent} />);
-    captured.onBlur();
-    captured.onEvent('onTagSelect', { x: 1 });
-    expect(onFieldBlur).toHaveBeenCalledWith(field);
-    expect(onEvent).toHaveBeenCalledWith(field, 'onTagSelect', { x: 1 });
-  });
-
-  it('onBlur / onEvent are safe no-ops when those handlers are omitted (optional-chaining branch)', () => {
-    let captured;
-    const Renderer = jest.fn((p) => { captured = p; return <div>f</div>; });
-    render(<FieldSlot Renderer={Renderer} field={field} onFieldChange={noop} />);
-    expect(() => { captured.onBlur(); captured.onEvent('e', {}); }).not.toThrow();
-  });
-});