@capillarytech/creatives-library 9.0.56 → 9.0.57-alpha.0

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

@@ -0,0 +1,447 @@
+/**
+ * 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 { FIELD_TYPE } from '../constants';
+import { ButtonField, TagListField } from './smsRenderers';
+import { ERROR_VALUE } from '../channels/mobilepush/config';
+
+const { TextArea } = CapInput;
+
+// Image types the upload accepts (Classic.js:2746 wrong-file check).
+const ALLOWED_IMAGE_EXTENSIONS = /(\.bmp|\.jpeg|\.png|\.gif|\.avif|\.jpg)$/i;
+
+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) { 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)) {
+      // Classic fires the wrong-file event and CONTINUES (no early return) — preserved.
+      onEvent(field.submitAction, { file, type: 'wrong file' });
+    }
+    const objectUrl = (window.URL || window.webkitURL).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)
+      };
+      onEvent(field.submitAction, { file, type: 'image', fileParams });
+    };
+    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 file input on purpose — openFileDialog clicks it via #fileName;
+            CapInput wraps antd's text Input (affix wrapper + suffix), which cannot
+            host type="file". Hidden: the visible control is the CapButton below. */}
+        <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');
   });