@capillarytech/creatives-library 9.0.61 → 9.0.62

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

@@ -0,0 +1,451 @@
+/**
+ * MOBILEPUSH field renderers — presentational mirrors of Classic's render cases.
+ * Prop contract: { field, value, error, resolvedError, onChange, onBlur, onEvent, renderContext }.
+ * ButtonField/TagListField are reused from the SMS set; the rest are MPUSH variants
+ * where Classic's behavior differs by channel (each notes its Classic lines).
+ */
+
+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 CapTooltip from '@capillarytech/cap-ui-library/CapTooltip';
+import CapButton from '@capillarytech/cap-ui-library/CapButton';
+import CapIcon from '@capillarytech/cap-ui-library/CapIcon';
+import CapImage from '@capillarytech/cap-ui-library/CapImage';
+import CapRadio from '@capillarytech/cap-ui-library/CapRadio';
+import CapRadioGroup from '@capillarytech/cap-ui-library/CapRadioGroup';
+import CapSelect from '@capillarytech/cap-ui-library/CapSelect';
+import CapAskAira from '@capillarytech/cap-ui-library/CapAskAira';
+import LabelHOC from '@capillarytech/cap-ui-library/assets/HOCs/ComponentWithLabelHOC';
+import { FONT_COLOR_04, FONT_COLOR_05 } from '@capillarytech/cap-ui-library/styled/variables';
+import UnifiedPreview from '../../../CommonTestAndPreview/UnifiedPreview';
+import { ANDROID } from '../../../CommonTestAndPreview/constants';
+import { MOBILE_PUSH } from '../../../../v2Containers/CreativesContainer/constants';
+import globalMessages from '../../../../v2Containers/Cap/messages';
+import formMessages from '../../messages';
+import { isAiContentBotDisabled } from '../../../../utils/common';
+import { hasPersonalizationTags } from '../../../../utils/commonUtils';
+import { createFieldRegistry } from '../core/schema/fieldRegistry';
+import { ALLOWED_IMAGE_EXTENSIONS, FIELD_TYPE } from '../constants';
+import { ButtonField, TagListField } from './smsRenderers';
+import { ERROR_VALUE } from '../channels/mobilepush/config';
+
+const { TextArea } = CapInput;
+
+
+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,
+};
+
+const formatSafe = (intl, descriptor) => (intl?.formatMessage ? intl.formatMessage(descriptor) : '');
+
+// Classic gates every field-error display on checkValidation (pre-save silence).
+const shouldShowError = (renderContext, error) => Boolean(renderContext?.checkValidation && error);
+
+/** Classic input-case error message: personalization > brace > schema errorMessage. */
+const resolveInputMessage = (field, value, error, renderContext) => {
+  const { intl, restrictPersonalization } = renderContext || {};
+  if (restrictPersonalization && value && hasPersonalizationTags(String(value))) {
+    return formatSafe(intl, formMessages.personalizationTagsErrorMessage);
+  }
+  if (error === ERROR_VALUE.BRACKET) {
+    return formatSafe(intl, globalMessages.unbalanacedCurlyBraces);
+  }
+  return field.errorMessage || '';
+};
+
+export const MpushInputField = ({
+  field, value, error, onChange, onBlur, renderContext,
+}) => {
+  const showError = shouldShowError(renderContext, error);
+  const message = showError ? resolveInputMessage(field, value, error, renderContext) : '';
+  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={message}
+        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>
+  );
+};
+
+MpushInputField.propTypes = { ...dataFieldPropTypes, onBlur: PropTypes.func };
+MpushInputField.defaultProps = { ...dataFieldDefaultProps, onBlur: undefined };
+
+export const MpushTextAreaField = ({
+  field, value, error, onChange, renderContext,
+}) => {
+  let aiDisabled = true;
+  try { aiDisabled = isAiContentBotDisabled(); } catch (e) { console.error(e); aiDisabled = true; }
+  // Classic-observable behavior: errorData is only ever computed under
+  // startValidation (Classic.js:334-345), so NO editor error — empty or tag —
+  // is visible before a save attempt. checkValidation is true exactly in the
+  // states where Classic can hold a non-false errorType, so gating display on it
+  // reproduces Classic's typing silence and also keeps the initial-hydrate
+  // errorData (computed for the parent validity emission) from leaking into the UI.
+  const showError = shouldShowError(renderContext, error);
+  // MPUSH keeps the inline message even though the channel is liquid-supported
+  // (Classic.js:2908-2915). Personalization gets its own message (2877-2879).
+  const inlineMessage = showError ? resolveInputMessage(field, value, error, renderContext) : '';
+  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={inlineMessage}
+        autosize={field.autosize ? field.autosizeParams : false}
+        value={value || ''}
+        onChange={(e) => onChange(e.target.value)}
+        style={field.style || {}}
+        disabled={field.disabled}
+      />
+      {!aiDisabled && (
+        // AskAira content bot is enabled for MOBILEPUSH textareas (Classic.js:2927).
+        <CapAskAira.ContentGenerationBot
+          text={value || ''}
+          setText={(x) => onChange(x)}
+          iconPlacement="float-br"
+          rootStyle={{ bottom: 'calc(1rem + 0.2rem)', right: '0.2rem' }}
+        />
+      )}
+    </CapColumn>
+  );
+};
+
+MpushTextAreaField.propTypes = { ...dataFieldPropTypes };
+MpushTextAreaField.defaultProps = { ...dataFieldDefaultProps };
+
+export const MpushCheckboxField = ({
+  field, value, error, onChange, onEvent, renderContext,
+}) => {
+  const showError = shouldShowError(renderContext, error);
+  const checkbox = (
+    <CapCheckbox
+      key={field.id}
+      className={`${showError ? 'error' : ''}`}
+      errorMessage={field.errorMessage && showError ? field.errorMessage : ''}
+      onChange={(e) => {
+        const { checked } = e.target;
+        onChange(checked);
+        // CTA toggles route through the injected submit-action with the
+        // performFormDataUpdate commit signature (Classic.js:3567 -> 228).
+        if (field.submitAction && onEvent) onEvent(field.submitAction, checked);
+      }}
+      checked={Boolean(value)}
+      style={field.style || {}}
+      disabled={field.disabled}
+      inductiveText={field.inductiveText}
+    >
+      {field.label}
+    </CapCheckbox>
+  );
+  return (
+    <CapColumn key={field.id} span={field.width} offset={field.offset}>
+      {field.disabled && field.hoverText
+        ? <CapTooltip title={field.hoverText}>{checkbox}</CapTooltip>
+        : checkbox}
+    </CapColumn>
+  );
+};
+
+MpushCheckboxField.propTypes = { ...dataFieldPropTypes, onEvent: PropTypes.func };
+MpushCheckboxField.defaultProps = { ...dataFieldDefaultProps, onEvent: undefined };
+
+// Direct renderer (needs the full legacy formData for the value-resolution chain).
+export const RadioGroupField = ({
+  field, error, onChange, onEvent, renderContext,
+}) => {
+  const showError = shouldShowError(renderContext, error);
+  // Classic handleSetRadioValue (2729-2736): tab value -> root value -> schema default.
+  const legacy = renderContext?.legacyFormData || {};
+  const tab = legacy[(renderContext?.paneTabIndex ?? renderContext?.activeTabIndex) || 0] || {};
+  const resolvedValue = tab[field.id] !== undefined && tab[field.id] !== ''
+    ? tab[field.id]
+    : (legacy[field.id] !== undefined && legacy[field.id] !== '' ? legacy[field.id] : field.value);
+  return (
+    <CapColumn key={`input-${field.id}`} span={field.width} offset={field.offset}>
+      <CapRadioGroup
+        key={`${field.id}-radio-group`}
+        className={`form-builder-radio-group ${showError ? 'error' : ''}`}
+        errorMessage={field.errorMessage && showError ? field.errorMessage : ''}
+        onChange={(e) => {
+          const nextValue = e.target.value;
+          onChange(nextValue);
+          onEvent('onChange', nextValue); // -> injected onLinkTypeChange (commit signature)
+        }}
+        style={field.style || {}}
+        value={resolvedValue}
+        name={field.name || `${field.id}-name`}
+        disabled={field.disabled}
+      >
+        {(field.options || []).map((option, index) => (
+          <CapRadio
+            key={`${field.id}-radio-${index}`}
+            value={option}
+            inductiveText={field.inductiveText && field.inductiveText[index]}
+          >
+            {option}
+          </CapRadio>
+        ))}
+      </CapRadioGroup>
+    </CapColumn>
+  );
+};
+
+RadioGroupField.propTypes = { ...dataFieldPropTypes, onEvent: PropTypes.func.isRequired };
+RadioGroupField.defaultProps = { ...dataFieldDefaultProps };
+
+// Direct renderer (options may be overridden through `${id}-options` in the form data).
+export const SelectField = ({
+  field, value, error, onChange, onEvent, renderContext,
+}) => {
+  const showError = shouldShowError(renderContext, error);
+  const options = renderContext?.legacyFormData?.[`${field.id}-options`] || field.options;
+  return (
+    <CapColumn key={`select-${field.id}`} style={field.colStyle || {}} span={field.width} offset={field.offset}>
+      <CapSelect
+        id={field.id}
+        options={options}
+        placeholder={field.placeholder || ''}
+        style={field.style || {}}
+        onSelect={(data) => {
+          onChange(data);
+          onEvent('onSelect', data); // -> injected showCtaKeys / onTemplateChange (commit signature)
+        }}
+        value={value}
+        disabled={field.disabled}
+        label={field.label}
+      />
+      {showError && field.errorMessage && <span className="error">{field.errorMessage}</span>}
+    </CapColumn>
+  );
+};
+
+SelectField.propTypes = { ...dataFieldPropTypes, onEvent: PropTypes.func.isRequired };
+SelectField.defaultProps = { ...dataFieldDefaultProps };
+
+// Image upload (imageSchema only), Classic.js:3657-3690 + 2737-2764: the 5 MB check
+// and dimension read happen here; the upload + formData write stay container-owned.
+export const UploadField = ({
+  field, value, error, onEvent, renderContext,
+}) => {
+  // The only field whose error display also honors startValidation (Classic.js:3666).
+  const showError = Boolean(
+    (renderContext?.checkValidation || renderContext?.startValidation) && error,
+  );
+  const isImage = Boolean(value);
+
+  const openFileDialog = (e) => {
+    if (e) e.preventDefault();
+    const fileInput = document.querySelector(`#${field.id} #fileName`);
+    if (fileInput) fileInput.click();
+  };
+
+  const onFileChange = (e) => {
+    const files = e?.target?.files;
+    const file = files && files[0];
+    if (!file) return;
+    if (field.supportedExtensions && !ALLOWED_IMAGE_EXTENSIONS.exec(file.name)) {
+      // Reject unsupported extensions here: the mapped container handler reads
+      // fileParams (absent on the 'wrong file' payload) and would throw, and
+      // continuing would let a loadable wrong-extension image reach the upload path.
+      e.target.value = null;
+      return;
+    }
+    const urlApi = window.URL || window.webkitURL;
+    const objectUrl = urlApi.createObjectURL(file);
+    const img = new Image();
+    img.src = objectUrl;
+    img.onload = () => {
+      const fileParams = {
+        width: img?.width,
+        height: img?.height,
+        error: Boolean(file && (file.size / 1e6 > 5)), // > 5 MB (Classic.js:2753)
+      };
+      urlApi.revokeObjectURL(objectUrl); // dimension read done — free the blob URL
+      onEvent(field.submitAction, { file, type: 'image', fileParams });
+    };
+    // Classic dispatches nothing on a failed image load — only release the URL.
+    img.onerror = () => urlApi.revokeObjectURL(objectUrl);
+    e.target.value = null;
+  };
+
+  const ImageComponent = (imageProps) => (
+    <div key={`${field.id}-preview`}>
+      <div className={`image-container ${imageProps.ifError ? 'error' : ''}`}>
+        {isImage
+          ? <CapImage src={value} alt={imageProps.alt} style={imageProps.style} />
+          : (
+            <div className="fb-upload-placeholder">
+              <span className="image-placeholder">{imageProps.placeholder}</span>
+            </div>
+          )}
+      </div>
+    </div>
+  );
+  const WithLabel = LabelHOC(ImageComponent);
+  const { errorMessage, ...previewRest } = field.previewProps || {};
+
+  return (
+    <CapColumn span={field.width} offset={field.offset} style={field.style}>
+      {field.showPreview && (
+        <WithLabel
+          key={`${field.id}-with-label`}
+          {...previewRest}
+          errorMessage={showError && errorMessage}
+          ifError={showError}
+        />
+      )}
+      <form encType="multipart/form-data" id={field.id}>
+        {/* Native input on purpose: openFileDialog clicks it via #fileName, and CapInput
+            (antd text Input + affix wrapper) can't host type="file". */}
+        <input
+          key={field.id}
+          className="fb-upload-file-input"
+          id="fileName"
+          type="file"
+          onChange={onFileChange}
+          accept={field.supportedExtensions ? field.supportedExtensions : 'image/*'}
+        />
+        <CapButton
+          disabled={field.disabled || false}
+          type="link"
+          prefix={<CapIcon size="s" type="add-photo" />}
+          onClick={openFileDialog}
+          // color is state-dependent and must beat CapButton's own runtime styling —
+          // kept inline (Classic.js:3399 verbatim).
+          style={{ float: 'right', color: `${field.disabled ? FONT_COLOR_04 : FONT_COLOR_05}` }}
+        >
+          {field.label}
+        </CapButton>
+      </form>
+    </CapColumn>
+  );
+};
+
+UploadField.propTypes = { ...dataFieldPropTypes, onEvent: PropTypes.func.isRequired };
+UploadField.defaultProps = { ...dataFieldDefaultProps };
+
+// Primitive div (tab headers, copy links, key labels), Classic.js:3304-3328:
+// value resolves from the ACTIVE tab; DOM id gets the legacy pane suffix (`${id}2`).
+export const MpushDivField = ({ field, onEvent, renderContext }) => {
+  const paneTabIndex = renderContext?.paneTabIndex ?? renderContext?.activeTabIndex ?? 0;
+  const activeTab = renderContext?.legacyFormData?.[renderContext?.activeTabIndex ?? 0] || {};
+  const children = activeTab[field.id] || field.value || '';
+  const domId = `${field.id}${paneTabIndex > 0 ? paneTabIndex + 1 : ''}`;
+  return (
+    <div
+      className={field.className || ''}
+      id={domId}
+      onClick={(data) => field.submitAction && onEvent(field.submitAction, data)}
+      style={field.style || {}}
+      // Classic fires the injected 'onChange' via callChildEvent's TAIL signature
+      // (data, field.id) — the shell's commit-signature branch is type-guarded to
+      // checkbox/radioGroup/select, so a div's onChange takes the tail path.
+      onInput={(e) => { e.stopPropagation(); onEvent('onChange', e.target.textContent); }}
+    >
+      {children}
+    </div>
+  );
+};
+
+MpushDivField.propTypes = {
+  field: PropTypes.object.isRequired,
+  onEvent: PropTypes.func.isRequired,
+  renderContext: PropTypes.object.isRequired,
+};
+
+// Direct renderer — CTA delete icons.
+export const IconField = ({ field, onEvent }) => (
+  <CapColumn
+    key={`icon-${field.id}`}
+    id={field.id}
+    offset={field.offset}
+    width={field.width || 1}
+    onClick={(data) => field.submitAction && onEvent(field.submitAction, data)}
+    className={field.className || ''}
+    style={field.colStyle || {}}
+  >
+    <i style={field.style || {}} className="material-icons">{field.value || ''}</i>
+  </CapColumn>
+);
+
+IconField.propTypes = {
+  field: PropTypes.object.isRequired,
+  onEvent: PropTypes.func.isRequired,
+};
+
+// Device preview, Classic.js:3897-3943 quirks preserved: both panes show the ACTIVE
+// tab's content and the frame is hardcoded to ANDROID with the toggle hidden.
+export const MobilePushPreviewField = ({ field, renderContext }) => {
+  const activeTab = renderContext?.legacyFormData?.[renderContext?.activeTabIndex ?? 0];
+  if (!activeTab) return null;
+  const header = activeTab[field.content?.title] || '';
+  const bodyText = activeTab[field.content?.message] || '';
+  const bodyImage = activeTab.image || '';
+  const actions = [];
+  if (activeTab[field.content?.secondaryCta1]) actions.push({ label: activeTab[field.content.secondaryCta1] });
+  if (activeTab[field.content?.secondaryCta2]) actions.push({ label: activeTab[field.content.secondaryCta2] });
+  const platformContent = {
+    header, bodyText, bodyImage, actions, appName: field.content?.appName || '',
+  };
+  const mobilePushContent = { androidContent: platformContent, iosContent: platformContent };
+  return (
+    <CapColumn key="input" span={23} offset={1}>
+      <UnifiedPreview
+        key={field.id}
+        style={field.customStyling || {}}
+        channel={field.channel || MOBILE_PUSH}
+        content={mobilePushContent}
+        device={ANDROID}
+        showDeviceToggle={false}
+        showHeader={false}
+        formatMessage={renderContext?.intl?.formatMessage}
+      />
+    </CapColumn>
+  );
+};
+
+MobilePushPreviewField.propTypes = {
+  field: PropTypes.object.isRequired,
+  renderContext: PropTypes.object.isRequired,
+};
+
+/** Build a registry pre-loaded with the MOBILEPUSH field renderers. */
+export const createMpushRegistry = () => createFieldRegistry({
+  [FIELD_TYPE.INPUT]: MpushInputField,
+  [FIELD_TYPE.TEXTAREA]: MpushTextAreaField,
+  [FIELD_TYPE.CHECKBOX]: MpushCheckboxField,
+  [FIELD_TYPE.BUTTON]: ButtonField,
+  // TagListField mirrors Classic's SEMANTIC tag-list path (Classic.js:3730-3769):
+  // span = field.width || '', field.style applied — the CTA splices rely on it.
+  [FIELD_TYPE.TAG_LIST]: TagListField,
+  [FIELD_TYPE.RADIO_GROUP]: RadioGroupField,
+  [FIELD_TYPE.SELECT]: SelectField,
+  [FIELD_TYPE.UPLOAD]: UploadField,
+  [FIELD_TYPE.DIV]: MpushDivField,
+  [FIELD_TYPE.ICON]: IconField,
+  [FIELD_TYPE.MOBILE_PUSH_PREVIEW]: MobilePushPreviewField,
+});
+
+export default createMpushRegistry;

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

@@ -54,7 +54,7 @@ describe('FieldSlot memoization', () => {
     expect(Renderer).toHaveBeenCalledTimes(2);
   });
 
-  it('passes a minimal renderContext ({ checkValidation, channel }) and wires onChange to its field', () => {
+  it('passes a minimal renderContext (checkValidation/channel + memo-safe intl/restrictPersonalization) and wires onChange to its field', () => {
     const onFieldChange = jest.fn();
     let captured;
     const Renderer = jest.fn((p) => { captured = p; return <div>f</div>; });
@@ -71,7 +71,14 @@ describe('FieldSlot memoization', () => {
         onEvent={noop}
       />,
     );
-    expect(captured.renderContext).toEqual({ checkValidation: true, channel: 'SMS' });
+    // intl + restrictPersonalization joined the mini-context in Phase 2 (MPUSH):
+    // both are memo-safe (stable identity / primitive) and default-empty here.
+    expect(captured.renderContext).toEqual({
+      checkValidation: true,
+      channel: 'SMS',
+      intl: undefined,
+      restrictPersonalization: false,
+    });
     captured.onChange('hello');
     expect(onFieldChange).toHaveBeenCalledWith(field, 'hello');
   });

package/v2Components/FormBuilder/Functional/tests/manual.typingPerf.test.js

@@ -0,0 +1,135 @@
+/**
+ * MANUAL perf probe (skipped by default): per-keystroke JS cost, Classic vs
+ * Functional, over the real embedded Create container. jsdom has no paint, so
+ * this measures the render+effects side of typing lag as an A/B comparison.
+ * Run: RUN_PERF=1 TZ=UTC npx jest --config internals/testing/jest.unit.config.js manual.typingPerf
+ */
+import React from 'react';
+import '@testing-library/jest-dom';
+import _ from 'lodash';
+import { Router } from 'react-router-dom';
+import { render, act, fireEvent } from '../../../../utils/test-utils';
+import history from '../../../../utils/history';
+import { response as mpushSchemaResponse } from '../../../../v2Containers/MobilePush/initialSchema';
+import { Create } from '../../../../v2Containers/MobilePush/Create';
+
+jest.mock('redux-auth-wrapper/history4/redirect', () => ({
+  connectedRouterRedirect: jest.fn(() => (Component) => Component),
+}));
+jest.mock('../../../../services/api', () => ({
+  ...jest.requireActual('../../../../services/api'),
+  getUnsubscribeUrl: () => Promise.resolve({ response: { response: '' } }),
+}));
+
+let mockMpushFlag = false;
+jest.mock('../../../../utils/common', () => ({
+  ...jest.requireActual('../../../../utils/common'),
+  hasNewFormBuilderEnabledForMpush: () => mockMpushFlag,
+}));
+
+const fullDefinition = () => _.cloneDeep(mpushSchemaResponse.metaEntities[0].definition);
+const intl = { formatMessage: (d) => (d && (d.defaultMessage || d.id)) || '', locale: 'en' };
+const DEEPLINKS = JSON.stringify([{ name: 'Home Page', link: 'app://home', keys: ['user_id'] }]);
+const selectedAccount = {
+  id: 'acc-1', name: 'Acc', sourceTypeName: 'SOME_SDK', sourceAccountIdentifier: 'lic-1',
+  configs: { android: '1', ios: '1', deeplink: DEEPLINKS },
+};
+
+const buildProps = () => ({
+  intl,
+  params: { mode: 'text' },
+  route: { name: 'create' },
+  location: { pathname: '/mobilepush/create/text', query: { module: 'default', type: 'embedded' } },
+  router: { push: jest.fn() },
+  isFullMode: false,
+  isGetFormData: false,
+  isLoadingMetaEntities: false,
+  metaEntities: {},
+  Create: { createTemplateInProgress: false },
+  Edit: {},
+  Templates: { selectedWeChatAccount: selectedAccount },
+  actions: new Proxy({}, { get: (t, n) => { if (!t[n]) t[n] = jest.fn(); return t[n]; } }), // eslint-disable-line no-param-reassign
+  globalActions: { fetchSchemaForEntity: jest.fn(), addMessageToQueue: jest.fn(), setInjectedTags: jest.fn() },
+  getFormLibraryData: jest.fn(),
+  onValidationFail: jest.fn(),
+  showLiquidErrorInFooter: jest.fn(),
+  onPersonalizationTokensChange: jest.fn(),
+  onContentValidityChange: jest.fn(),
+  getLiquidTags: jest.fn(),
+  injectedTags: {},
+});
+
+const setNativeValue = (el, value) => {
+  Object.getOwnPropertyDescriptor(Object.getPrototypeOf(el), 'value').set.call(el, value);
+};
+
+const measureFlow = (flag, { withCta = false, longContent = 0 } = {}) => {
+  mockMpushFlag = flag;
+  const props = buildProps();
+  const ui = (p) => (
+    <Router history={history}>
+      <Create {...p} />
+    </Router>
+  );
+  const utils = render(ui(props));
+  const meta = { layouts: [{ definition: fullDefinition() }], tags: { standard: [] } };
+  act(() => { utils.rerender(ui({ ...props, metaEntities: meta })); });
+
+  if (withCta) {
+    const pane = document.querySelectorAll('.ant-tabs-tabpane')[0] || document;
+    const label = Array.from(pane.querySelectorAll('label')).find((l) => /action link/i.test(l.textContent || ''));
+    const cb = (label && label.querySelector('input[type="checkbox"]')) || pane.querySelector('input[type="checkbox"]');
+    act(() => { fireEvent.click(cb); });
+  }
+
+  const editor = document.getElementById('message-editor');
+  let text = 'The quick brown fox jumped over the lazy dog and kept typing more content ';
+  if (longContent) {
+    // long-message scenario incl. personalization tags — catches superlinear
+    // per-keystroke validation/render costs that short content hides.
+    text = 'Hello {{first_name}}, your offer {{offer_id}} is waiting. '.repeat(Math.ceil(longContent / 58));
+  }
+  // warm-up keystrokes (JIT/styles)
+  for (let i = 0; i < 5; i++) {
+    text += 'w';
+    setNativeValue(editor, text);
+    act(() => { fireEvent.change(editor, { target: { value: text } }); });
+  }
+  const N = 30;
+  const t0 = performance.now();
+  for (let i = 0; i < N; i++) {
+    text += String.fromCharCode(97 + (i % 26));
+    setNativeValue(editor, text);
+    act(() => { fireEvent.change(editor, { target: { value: text } }); });
+  }
+  const perKey = (performance.now() - t0) / N;
+  utils.unmount();
+  mockMpushFlag = false;
+  return perKey;
+};
+
+const describePerf = process.env.RUN_PERF ? describe : describe.skip;
+describePerf('MANUAL typing perf (RUN_PERF=1 to enable)', () => {
+  it('per-keystroke JS cost, Classic vs Functional', () => {
+    const classicPlain = measureFlow(false);
+    const functionalPlain = measureFlow(true);
+    const classicCta = measureFlow(false, { withCta: true });
+    const functionalCta = measureFlow(true, { withCta: true });
+    const classicLong5k = measureFlow(false, { longContent: 5000 });
+    const functionalLong5k = measureFlow(true, { longContent: 5000 });
+    const classicLong20k = measureFlow(false, { longContent: 20000 });
+    const functionalLong20k = measureFlow(true, { longContent: 20000 });
+    // eslint-disable-next-line no-console
+    console.log(JSON.stringify({
+      classicPlain: `${classicPlain.toFixed(1)} ms/key`,
+      functionalPlain: `${functionalPlain.toFixed(1)} ms/key`,
+      classicWithCta: `${classicCta.toFixed(1)} ms/key`,
+      functionalWithCta: `${functionalCta.toFixed(1)} ms/key`,
+      classicLong5k: `${classicLong5k.toFixed(1)} ms/key`,
+      functionalLong5k: `${functionalLong5k.toFixed(1)} ms/key`,
+      classicLong20k: `${classicLong20k.toFixed(1)} ms/key`,
+      functionalLong20k: `${functionalLong20k.toFixed(1)} ms/key`,
+    }, null, 1));
+    expect(true).toBe(true);
+  });
+});