Full cleanup pass

2026-05-21 23:25:56 -06:00
parent 28de8ef3bc
commit 99f535f821
149 changed files with 2623 additions and 1242 deletions
@@ -1,364 +0,0 @@
-"use client";
-
-/**
- * Controlled field blocks for wizard-authored method cards in Create modals
- * (facet screens + final-review chip edit). When `onBlocksChange` is omitted,
- * blocks render read-only (disabled controls).
- *
- * Layout matches preset method editors ({@link CommunicationMethodEditFields},
- * {@link DecisionApproachEditFields}): {@link ModalTextAreaField},
- * {@link ApplicableScopeField} chip rows, {@link IncrementerBlock}.
- */
-
-import { memo, useCallback, useRef, useState } from "react";
-import { useMessages, useTranslation } from "../../../contexts/MessagesContext";
-import Chip from "../../../components/controls/Chip";
-import IncrementerBlock from "../../../components/controls/IncrementerBlock";
-import Upload from "../../../components/controls/Upload";
-import { ASSETS, getAssetPath } from "../../../../lib/assetUtils";
-import ApplicableScopeField from "./ApplicableScopeField";
-import InputLabel from "../../../components/type/InputLabel";
-import type { CustomMethodCardFieldBlock } from "../../../../lib/create/customMethodCardFieldBlocks";
-import ModalTextAreaField from "./ModalTextAreaField";
-import { uploadCreateFlowFile } from "../../../../lib/create/uploadToServer";
-
-const TEXT_VALUE_MAX = 8000;
-
-export interface CustomMethodCardFieldBlocksSummaryProps {
-  blocks: CustomMethodCardFieldBlock[];
-  /** When set, fields update the draft via immutable block-array replacements. */
-  onBlocksChange?: (_next: CustomMethodCardFieldBlock[]) => void;
-}
-
-function mapBlockById(
-  blocks: CustomMethodCardFieldBlock[],
-  blockId: string,
-  mapFn: (_b: CustomMethodCardFieldBlock) => CustomMethodCardFieldBlock,
-): CustomMethodCardFieldBlock[] {
-  return blocks.map((b) => (b.id === blockId ? mapFn(b) : b));
-}
-
-function CustomMethodCardUploadBlockRow({
-  block,
-  blocks,
-  patch,
-  uploadFileInputAriaLabel,
-  uploadHint,
-  clearPendingUploadAriaLabel,
-  clearPendingUploadTooltip,
-  uploadPreviewImageAlt,
-  noFileChosen,
-}: {
-  block: Extract<CustomMethodCardFieldBlock, { kind: "upload" }>;
-  blocks: CustomMethodCardFieldBlock[];
-  patch: (_next: CustomMethodCardFieldBlock[]) => void;
-  uploadFileInputAriaLabel: string;
-  uploadHint: string;
-  clearPendingUploadAriaLabel: string;
-  clearPendingUploadTooltip: string;
-  uploadPreviewImageAlt: string;
-  noFileChosen: string;
-}) {
-  const uploadInputRef = useRef<HTMLInputElement | null>(null);
-  const tUpload = useTranslation("create.upload");
-  const [busy, setBusy] = useState(false);
-  const [errorMessage, setErrorMessage] = useState<string | null>(null);
-  const displayName = block.fileName?.trim() ? block.fileName : noFileChosen;
-  const assetUrlTrimmed = block.assetUrl?.trim() ?? "";
-  const hasAsset = assetUrlTrimmed.length > 0;
-
-  const clearUpload = () =>
-    patch(
-      mapBlockById(blocks, block.id, (b) =>
-        b.kind === "upload"
-          ? { ...b, fileName: undefined, assetUrl: undefined }
-          : b,
-      ),
-    );
-
-  return (
-    <div className="flex flex-col gap-2">
-      <InputLabel
-        label={block.blockTitle}
-        helpIcon
-        size="s"
-        palette="default"
-      />
-      {!hasAsset ? (
-        <p className="font-[family-name:var(--font-body)] text-[length:var(--font-size-body-m)] text-[var(--color-content-default-secondary)]">
-          {displayName}
-        </p>
-      ) : null}
-      <input
-        ref={uploadInputRef}
-        type="file"
-        className="sr-only"
-        tabIndex={-1}
-        accept="image/jpeg,image/png,image/webp,image/gif,application/pdf"
-        aria-label={uploadFileInputAriaLabel}
-        onChange={(e) => {
-          const file = e.target.files?.[0];
-          e.target.value = "";
-          if (!file) return;
-          setErrorMessage(null);
-          setBusy(true);
-          void (async () => {
-            try {
-              const { url } = await uploadCreateFlowFile(
-                file,
-                "customMethodAttachment",
-              );
-              const name = file.name?.trim();
-              patch(
-                mapBlockById(blocks, block.id, (b) =>
-                  b.kind === "upload"
-                    ? {
-                        ...b,
-                        ...(name ? { fileName: name } : {}),
-                        assetUrl: url,
-                      }
-                    : b,
-                ),
-              );
-            } catch {
-              setErrorMessage(tUpload("errors.generic"));
-            } finally {
-              setBusy(false);
-            }
-          })();
-        }}
-      />
-      {hasAsset ? (
-        <div className="relative inline-block max-w-full">
-          <button
-            type="button"
-            onClick={clearUpload}
-            className="absolute right-[8px] top-[8px] z-[1] flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-full bg-[var(--color-surface-default-secondary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-default-primary)]"
-            aria-label={clearPendingUploadAriaLabel}
-            title={clearPendingUploadTooltip}
-          >
-            {/* eslint-disable-next-line @next/next/no-img-element -- matches ModalHeader close control */}
-            <img
-              src={getAssetPath(ASSETS.ICON_CLOSE)}
-              alt=""
-              className="h-[16px] w-[16px]"
-              style={{
-                filter: "brightness(0) invert(1)",
-              }}
-            />
-          </button>
-          {/* eslint-disable-next-line @next/next/no-img-element -- same-origin upload URL */}
-          <img
-            src={assetUrlTrimmed}
-            alt={uploadPreviewImageAlt}
-            className="max-h-[160px] max-w-full rounded-[var(--measures-radius-200,8px)] object-contain"
-          />
-        </div>
-      ) : (
-        <Upload
-          active={!busy}
-          hintText={busy ? tUpload("uploading") : uploadHint}
-          onClick={() => {
-            if (!busy) uploadInputRef.current?.click();
-          }}
-        />
-      )}
-      {errorMessage ? (
-        <p
-          className="font-[family-name:var(--font-body)] text-[length:var(--font-size-body-s)] text-[var(--color-content-default-secondary)]"
-          role="alert"
-        >
-          {errorMessage}
-        </p>
-      ) : null}
-    </div>
-  );
-}
-
-function CustomMethodCardFieldBlocksSummaryComponent({
-  blocks,
-  onBlocksChange,
-}: CustomMethodCardFieldBlocksSummaryProps) {
-  const m = useMessages();
-  const wiz = m.create.customRule.customMethodCardWizard;
-  const fm = wiz.fieldModals;
-  const em = wiz.editModal;
-  const emptyValue = em.readout.emptyValue;
-  const noFileChosen = em.readout.noFileChosen;
-  const readOnly = !onBlocksChange;
-
-  const patch = useCallback(
-    (next: CustomMethodCardFieldBlock[]) => {
-      onBlocksChange?.(next);
-    },
-    [onBlocksChange],
-  );
-
-  return (
-    <div className="flex flex-col gap-6">
-      {blocks.map((block) => {
-        if (block.kind === "text") {
-          return (
-            <ModalTextAreaField
-              key={block.id}
-              label={block.blockTitle}
-              rows={6}
-              value={block.placeholderText}
-              onChange={(v) =>
-                patch(
-                  mapBlockById(blocks, block.id, (b) =>
-                    b.kind === "text"
-                      ? { ...b, placeholderText: v.slice(0, TEXT_VALUE_MAX) }
-                      : b,
-                  ),
-                )
-              }
-              disabled={readOnly}
-            />
-          );
-        }
-
-        if (block.kind === "badges") {
-          if (readOnly) {
-            return (
-              <div key={block.id} className="flex flex-col gap-2">
-                <InputLabel
-                  label={block.blockTitle}
-                  helpIcon
-                  size="s"
-                  palette="default"
-                />
-                {block.options.length > 0 ? (
-                  <div className="flex flex-wrap items-center gap-2">
-                    {block.options.map((opt, idx) => (
-                      <Chip
-                        key={`${block.id}-${idx}`}
-                        label={opt}
-                        state="selected"
-                        palette="default"
-                        size="s"
-                        disabled
-                        ariaLabel={opt}
-                      />
-                    ))}
-                  </div>
-                ) : (
-                  <p className="font-[family-name:var(--font-body)] text-[length:var(--font-size-body-m)] text-[var(--color-content-default-secondary)]">
-                    {emptyValue}
-                  </p>
-                )}
-              </div>
-            );
-          }
-          return (
-            <ApplicableScopeField
-              key={block.id}
-              label={block.blockTitle}
-              addLabel={fm.badges.addOptionLabel}
-              scopes={block.options}
-              selectedScopes={block.options}
-              onToggleScope={(scope) =>
-                patch(
-                  mapBlockById(blocks, block.id, (b) =>
-                    b.kind === "badges"
-                      ? { ...b, options: b.options.filter((o) => o !== scope) }
-                      : b,
-                  ),
-                )
-              }
-              onAddScope={(scope) =>
-                patch(
-                  mapBlockById(blocks, block.id, (b) => {
-                    if (b.kind !== "badges") return b;
-                    if (b.options.includes(scope) || b.options.length >= 50)
-                      return b;
-                    return { ...b, options: [...b.options, scope] };
-                  }),
-                )
-              }
-            />
-          );
-        }
-
-        if (block.kind === "upload") {
-          return (
-            <div key={block.id}>
-              {readOnly ? (
-                <div className="flex flex-col gap-2">
-                  <InputLabel
-                    label={block.blockTitle}
-                    helpIcon
-                    size="s"
-                    palette="default"
-                  />
-                  {block.assetUrl?.trim() ? (
-                    // eslint-disable-next-line @next/next/no-img-element
-                    <img
-                      src={block.assetUrl.trim()}
-                      alt={
-                        block.fileName?.trim() ||
-                        block.blockTitle ||
-                        noFileChosen
-                      }
-                      className="max-h-[160px] max-w-full rounded-[var(--measures-radius-200,8px)] object-contain"
-                    />
-                  ) : (
-                    <p className="font-[family-name:var(--font-body)] text-[length:var(--font-size-body-m)] text-[var(--color-content-default-secondary)]">
-                      {noFileChosen}
-                    </p>
-                  )}
-                </div>
-              ) : (
-                <CustomMethodCardUploadBlockRow
-                  block={block}
-                  blocks={blocks}
-                  patch={patch}
-                  uploadFileInputAriaLabel={fm.upload.uploadFileInputAriaLabel}
-                  uploadHint={fm.upload.uploadHint}
-                  clearPendingUploadAriaLabel={
-                    fm.upload.clearPendingUploadAriaLabel
-                  }
-                  clearPendingUploadTooltip={
-                    fm.upload.clearPendingUploadTooltip
-                  }
-                  uploadPreviewImageAlt={fm.upload.uploadPreviewImageAlt}
-                  noFileChosen={noFileChosen}
-                />
-              )}
-            </div>
-          );
-        }
-
-        return (
-          <IncrementerBlock
-            key={block.id}
-            label={block.blockTitle}
-            value={block.defaultPercent}
-            min={1}
-            max={100}
-            step={1}
-            disabled={readOnly}
-            onChange={(v) =>
-              patch(
-                mapBlockById(blocks, block.id, (b) =>
-                  b.kind === "proportion" ? { ...b, defaultPercent: v } : b,
-                ),
-              )
-            }
-            formatValue={(v) => `${v}%`}
-            decrementAriaLabel={fm.proportion.decrementAriaLabel}
-            incrementAriaLabel={fm.proportion.incrementAriaLabel}
-          />
-        );
-      })}
-    </div>
-  );
-}
-
-const CustomMethodCardFieldBlocksSummary = memo(
-  CustomMethodCardFieldBlocksSummaryComponent,
-);
-CustomMethodCardFieldBlocksSummary.displayName =
-  "CustomMethodCardFieldBlocksSummary";
-
-export default CustomMethodCardFieldBlocksSummary;
@@ -0,0 +1,66 @@
+"use client";
+
+/**
+ * Controlled field blocks for wizard-authored method cards in Create modals
+ * (facet screens + final-review chip edit). When `onBlocksChange` is omitted,
+ * blocks render read-only (disabled controls).
+ *
+ * Layout matches preset method editors ({@link CommunicationMethodEditFields},
+ * {@link DecisionApproachEditFields}): {@link ModalTextAreaField},
+ * {@link ApplicableScopeField} chip rows, {@link IncrementerBlock}.
+ */
+
+import { memo, useCallback } from "react";
+import { useMessages } from "../../../../contexts/MessagesContext";
+import { CustomMethodCardFieldBlocksSummaryView } from "./CustomMethodCardFieldBlocksSummary.view";
+import type { CustomMethodCardFieldBlocksSummaryProps } from "./CustomMethodCardFieldBlocksSummary.types";
+
+function CustomMethodCardFieldBlocksSummaryContainerComponent({
+  blocks,
+  onBlocksChange,
+}: CustomMethodCardFieldBlocksSummaryProps) {
+  const m = useMessages();
+  const wiz = m.create.customRule.customMethodCardWizard;
+  const fm = wiz.fieldModals;
+  const em = wiz.editModal;
+  const readOnly = !onBlocksChange;
+
+  const onPatch = useCallback(
+    (next: Parameters<NonNullable<typeof onBlocksChange>>[0]) => {
+      onBlocksChange?.(next);
+    },
+    [onBlocksChange],
+  );
+
+  return (
+    <CustomMethodCardFieldBlocksSummaryView
+      blocks={blocks}
+      readOnly={readOnly}
+      emptyValue={em.readout.emptyValue}
+      noFileChosen={em.readout.noFileChosen}
+      fieldModalsCopy={{
+        badges: { addOptionLabel: fm.badges.addOptionLabel },
+        upload: {
+          uploadFileInputAriaLabel: fm.upload.uploadFileInputAriaLabel,
+          uploadHint: fm.upload.uploadHint,
+          clearPendingUploadAriaLabel: fm.upload.clearPendingUploadAriaLabel,
+          clearPendingUploadTooltip: fm.upload.clearPendingUploadTooltip,
+          uploadPreviewImageAlt: fm.upload.uploadPreviewImageAlt,
+        },
+        proportion: {
+          decrementAriaLabel: fm.proportion.decrementAriaLabel,
+          incrementAriaLabel: fm.proportion.incrementAriaLabel,
+        },
+      }}
+      onPatch={onPatch}
+    />
+  );
+}
+
+const CustomMethodCardFieldBlocksSummary = memo(
+  CustomMethodCardFieldBlocksSummaryContainerComponent,
+);
+CustomMethodCardFieldBlocksSummary.displayName =
+  "CustomMethodCardFieldBlocksSummary";
+
+export default CustomMethodCardFieldBlocksSummary;
@@ -0,0 +1,55 @@
+import type { ChangeEventHandler, RefObject } from "react";
+import type { CustomMethodCardFieldBlock } from "../../../../../lib/create/customMethodCardFieldBlocks";
+
+export interface CustomMethodCardFieldBlocksSummaryProps {
+  blocks: CustomMethodCardFieldBlock[];
+  /** When set, fields update the draft via immutable block-array replacements. */
+  onBlocksChange?: (_next: CustomMethodCardFieldBlock[]) => void;
+}
+
+export type CustomMethodCardFieldBlocksSummaryFieldModalsCopy = {
+  badges: { addOptionLabel: string };
+  upload: {
+    uploadFileInputAriaLabel: string;
+    uploadHint: string;
+    clearPendingUploadAriaLabel: string;
+    clearPendingUploadTooltip: string;
+    uploadPreviewImageAlt: string;
+  };
+  proportion: {
+    decrementAriaLabel: string;
+    incrementAriaLabel: string;
+  };
+};
+
+export interface CustomMethodCardFieldBlocksSummaryViewProps {
+  blocks: CustomMethodCardFieldBlock[];
+  readOnly: boolean;
+  emptyValue: string;
+  noFileChosen: string;
+  fieldModalsCopy: CustomMethodCardFieldBlocksSummaryFieldModalsCopy;
+  onPatch: (_next: CustomMethodCardFieldBlock[]) => void;
+}
+
+export type CustomMethodCardUploadBlockRowProps = {
+  block: Extract<CustomMethodCardFieldBlock, { kind: "upload" }>;
+  blocks: CustomMethodCardFieldBlock[];
+  onPatch: (_next: CustomMethodCardFieldBlock[]) => void;
+  uploadFileInputAriaLabel: string;
+  uploadHint: string;
+  clearPendingUploadAriaLabel: string;
+  clearPendingUploadTooltip: string;
+  uploadPreviewImageAlt: string;
+  noFileChosen: string;
+};
+
+export type CustomMethodCardUploadBlockRowViewProps =
+  CustomMethodCardUploadBlockRowProps & {
+    uploadInputRef: RefObject<HTMLInputElement | null>;
+    busy: boolean;
+    uploadingHint: string;
+    errorMessage: string | null;
+    onClearUpload: () => void;
+    onFileInputChange: ChangeEventHandler<HTMLInputElement>;
+    onUploadClick: () => void;
+  };
@@ -0,0 +1,198 @@
+"use client";
+
+import { memo } from "react";
+import Chip from "../../../../components/controls/Chip";
+import IncrementerBlock from "../../../../components/controls/IncrementerBlock";
+import InputLabel from "../../../../components/type/InputLabel";
+import type { CustomMethodCardFieldBlock } from "../../../../../lib/create/customMethodCardFieldBlocks";
+import ApplicableScopeField from "../ApplicableScopeField";
+import ModalTextAreaField from "../ModalTextAreaField";
+import { CustomMethodCardUploadBlockRow } from "./CustomMethodCardUploadBlockRow.container";
+import type { CustomMethodCardFieldBlocksSummaryViewProps } from "./CustomMethodCardFieldBlocksSummary.types";
+
+const TEXT_VALUE_MAX = 8000;
+
+function mapBlockById(
+  blocks: CustomMethodCardFieldBlock[],
+  blockId: string,
+  mapFn: (_b: CustomMethodCardFieldBlock) => CustomMethodCardFieldBlock,
+): CustomMethodCardFieldBlock[] {
+  return blocks.map((b) => (b.id === blockId ? mapFn(b) : b));
+}
+
+function CustomMethodCardFieldBlocksSummaryViewComponent({
+  blocks,
+  readOnly,
+  emptyValue,
+  noFileChosen,
+  fieldModalsCopy,
+  onPatch,
+}: CustomMethodCardFieldBlocksSummaryViewProps) {
+  const fm = fieldModalsCopy;
+
+  return (
+    <div className="flex flex-col gap-6">
+      {blocks.map((block) => {
+        if (block.kind === "text") {
+          return (
+            <ModalTextAreaField
+              key={block.id}
+              label={block.blockTitle}
+              rows={6}
+              value={block.placeholderText}
+              onChange={(v) =>
+                onPatch(
+                  mapBlockById(blocks, block.id, (b) =>
+                    b.kind === "text"
+                      ? { ...b, placeholderText: v.slice(0, TEXT_VALUE_MAX) }
+                      : b,
+                  ),
+                )
+              }
+              disabled={readOnly}
+            />
+          );
+        }
+
+        if (block.kind === "badges") {
+          if (readOnly) {
+            return (
+              <div key={block.id} className="flex flex-col gap-2">
+                <InputLabel
+                  label={block.blockTitle}
+                  helpIcon
+                  size="s"
+                  palette="default"
+                />
+                {block.options.length > 0 ? (
+                  <div className="flex flex-wrap items-center gap-2">
+                    {block.options.map((opt, idx) => (
+                      <Chip
+                        key={`${block.id}-${idx}`}
+                        label={opt}
+                        state="selected"
+                        palette="default"
+                        size="s"
+                        disabled
+                        ariaLabel={opt}
+                      />
+                    ))}
+                  </div>
+                ) : (
+                  <p className="font-[family-name:var(--font-body)] text-[length:var(--font-size-body-m)] text-[var(--color-content-default-secondary)]">
+                    {emptyValue}
+                  </p>
+                )}
+              </div>
+            );
+          }
+          return (
+            <ApplicableScopeField
+              key={block.id}
+              label={block.blockTitle}
+              addLabel={fm.badges.addOptionLabel}
+              scopes={block.options}
+              selectedScopes={block.options}
+              onToggleScope={(scope) =>
+                onPatch(
+                  mapBlockById(blocks, block.id, (b) =>
+                    b.kind === "badges"
+                      ? { ...b, options: b.options.filter((o) => o !== scope) }
+                      : b,
+                  ),
+                )
+              }
+              onAddScope={(scope) =>
+                onPatch(
+                  mapBlockById(blocks, block.id, (b) => {
+                    if (b.kind !== "badges") return b;
+                    if (b.options.includes(scope) || b.options.length >= 50)
+                      return b;
+                    return { ...b, options: [...b.options, scope] };
+                  }),
+                )
+              }
+            />
+          );
+        }
+
+        if (block.kind === "upload") {
+          return (
+            <div key={block.id}>
+              {readOnly ? (
+                <div className="flex flex-col gap-2">
+                  <InputLabel
+                    label={block.blockTitle}
+                    helpIcon
+                    size="s"
+                    palette="default"
+                  />
+                  {block.assetUrl?.trim() ? (
+                    // eslint-disable-next-line @next/next/no-img-element
+                    <img
+                      src={block.assetUrl.trim()}
+                      alt={
+                        block.fileName?.trim() ||
+                        block.blockTitle ||
+                        noFileChosen
+                      }
+                      className="max-h-[160px] max-w-full rounded-[var(--measures-radius-200,8px)] object-contain"
+                    />
+                  ) : (
+                    <p className="font-[family-name:var(--font-body)] text-[length:var(--font-size-body-m)] text-[var(--color-content-default-secondary)]">
+                      {noFileChosen}
+                    </p>
+                  )}
+                </div>
+              ) : (
+                <CustomMethodCardUploadBlockRow
+                  block={block}
+                  blocks={blocks}
+                  onPatch={onPatch}
+                  uploadFileInputAriaLabel={fm.upload.uploadFileInputAriaLabel}
+                  uploadHint={fm.upload.uploadHint}
+                  clearPendingUploadAriaLabel={
+                    fm.upload.clearPendingUploadAriaLabel
+                  }
+                  clearPendingUploadTooltip={
+                    fm.upload.clearPendingUploadTooltip
+                  }
+                  uploadPreviewImageAlt={fm.upload.uploadPreviewImageAlt}
+                  noFileChosen={noFileChosen}
+                />
+              )}
+            </div>
+          );
+        }
+
+        return (
+          <IncrementerBlock
+            key={block.id}
+            label={block.blockTitle}
+            value={block.defaultPercent}
+            min={1}
+            max={100}
+            step={1}
+            disabled={readOnly}
+            onChange={(v) =>
+              onPatch(
+                mapBlockById(blocks, block.id, (b) =>
+                  b.kind === "proportion" ? { ...b, defaultPercent: v } : b,
+                ),
+              )
+            }
+            formatValue={(v) => `${v}%`}
+            decrementAriaLabel={fm.proportion.decrementAriaLabel}
+            incrementAriaLabel={fm.proportion.incrementAriaLabel}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+export const CustomMethodCardFieldBlocksSummaryView = memo(
+  CustomMethodCardFieldBlocksSummaryViewComponent,
+);
+CustomMethodCardFieldBlocksSummaryView.displayName =
+  "CustomMethodCardFieldBlocksSummaryView";
@@ -0,0 +1,110 @@
+"use client";
+
+import { memo, useCallback, useRef, useState } from "react";
+import { useTranslation } from "../../../../contexts/MessagesContext";
+import type { CustomMethodCardFieldBlock } from "../../../../../lib/create/customMethodCardFieldBlocks";
+import { uploadCreateFlowFile } from "../../../../../lib/create/uploadToServer";
+import { CustomMethodCardUploadBlockRowView } from "./CustomMethodCardUploadBlockRow.view";
+import type { CustomMethodCardUploadBlockRowProps } from "./CustomMethodCardFieldBlocksSummary.types";
+
+function mapBlockById(
+  blocks: CustomMethodCardFieldBlock[],
+  blockId: string,
+  mapFn: (_b: CustomMethodCardFieldBlock) => CustomMethodCardFieldBlock,
+): CustomMethodCardFieldBlock[] {
+  return blocks.map((b) => (b.id === blockId ? mapFn(b) : b));
+}
+
+function CustomMethodCardUploadBlockRowContainerComponent({
+  block,
+  blocks,
+  onPatch,
+  uploadFileInputAriaLabel,
+  uploadHint,
+  clearPendingUploadAriaLabel,
+  clearPendingUploadTooltip,
+  uploadPreviewImageAlt,
+  noFileChosen,
+}: CustomMethodCardUploadBlockRowProps) {
+  const uploadInputRef = useRef<HTMLInputElement | null>(null);
+  const tUpload = useTranslation("create.upload");
+  const [busy, setBusy] = useState(false);
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+
+  const clearUpload = useCallback(() => {
+    onPatch(
+      mapBlockById(blocks, block.id, (b) =>
+        b.kind === "upload"
+          ? { ...b, fileName: undefined, assetUrl: undefined }
+          : b,
+      ),
+    );
+  }, [block.id, blocks, onPatch]);
+
+  const handleFileInputChange = useCallback<
+    React.ChangeEventHandler<HTMLInputElement>
+  >(
+    (e) => {
+      const file = e.target.files?.[0];
+      e.target.value = "";
+      if (!file) return;
+      setErrorMessage(null);
+      setBusy(true);
+      void (async () => {
+        try {
+          const { url } = await uploadCreateFlowFile(
+            file,
+            "customMethodAttachment",
+          );
+          const name = file.name?.trim();
+          onPatch(
+            mapBlockById(blocks, block.id, (b) =>
+              b.kind === "upload"
+                ? {
+                    ...b,
+                    ...(name ? { fileName: name } : {}),
+                    assetUrl: url,
+                  }
+                : b,
+            ),
+          );
+        } catch {
+          setErrorMessage(tUpload("errors.generic"));
+        } finally {
+          setBusy(false);
+        }
+      })();
+    },
+    [block.id, blocks, onPatch, tUpload],
+  );
+
+  const handleUploadClick = useCallback(() => {
+    if (!busy) uploadInputRef.current?.click();
+  }, [busy]);
+
+  return (
+    <CustomMethodCardUploadBlockRowView
+      block={block}
+      blocks={blocks}
+      onPatch={onPatch}
+      uploadFileInputAriaLabel={uploadFileInputAriaLabel}
+      uploadHint={uploadHint}
+      clearPendingUploadAriaLabel={clearPendingUploadAriaLabel}
+      clearPendingUploadTooltip={clearPendingUploadTooltip}
+      uploadPreviewImageAlt={uploadPreviewImageAlt}
+      noFileChosen={noFileChosen}
+      uploadInputRef={uploadInputRef}
+      busy={busy}
+      uploadingHint={tUpload("uploading")}
+      errorMessage={errorMessage}
+      onClearUpload={clearUpload}
+      onFileInputChange={handleFileInputChange}
+      onUploadClick={handleUploadClick}
+    />
+  );
+}
+
+export const CustomMethodCardUploadBlockRow = memo(
+  CustomMethodCardUploadBlockRowContainerComponent,
+);
+CustomMethodCardUploadBlockRow.displayName = "CustomMethodCardUploadBlockRow";
@@ -0,0 +1,100 @@
+"use client";
+
+import { memo } from "react";
+import Upload from "../../../../components/controls/Upload";
+import InputLabel from "../../../../components/type/InputLabel";
+import { ASSETS, getAssetPath } from "../../../../../lib/assetUtils";
+import type { CustomMethodCardUploadBlockRowViewProps } from "./CustomMethodCardFieldBlocksSummary.types";
+
+function CustomMethodCardUploadBlockRowViewComponent({
+  block,
+  uploadFileInputAriaLabel,
+  uploadHint,
+  clearPendingUploadAriaLabel,
+  clearPendingUploadTooltip,
+  uploadPreviewImageAlt,
+  noFileChosen,
+  uploadInputRef,
+  busy,
+  uploadingHint,
+  errorMessage,
+  onClearUpload,
+  onFileInputChange,
+  onUploadClick,
+}: CustomMethodCardUploadBlockRowViewProps) {
+  const displayName = block.fileName?.trim() ? block.fileName : noFileChosen;
+  const assetUrlTrimmed = block.assetUrl?.trim() ?? "";
+  const hasAsset = assetUrlTrimmed.length > 0;
+
+  return (
+    <div className="flex flex-col gap-2">
+      <InputLabel
+        label={block.blockTitle}
+        helpIcon
+        size="s"
+        palette="default"
+      />
+      {!hasAsset ? (
+        <p className="font-[family-name:var(--font-body)] text-[length:var(--font-size-body-m)] text-[var(--color-content-default-secondary)]">
+          {displayName}
+        </p>
+      ) : null}
+      <input
+        ref={uploadInputRef}
+        type="file"
+        className="sr-only"
+        tabIndex={-1}
+        accept="image/jpeg,image/png,image/webp,image/gif,application/pdf"
+        aria-label={uploadFileInputAriaLabel}
+        onChange={onFileInputChange}
+      />
+      {hasAsset ? (
+        <div className="relative inline-block max-w-full">
+          <button
+            type="button"
+            onClick={onClearUpload}
+            className="absolute right-[8px] top-[8px] z-[1] flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-full bg-[var(--color-surface-default-secondary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-surface-default-primary)]"
+            aria-label={clearPendingUploadAriaLabel}
+            title={clearPendingUploadTooltip}
+          >
+            {/* eslint-disable-next-line @next/next/no-img-element -- matches ModalHeader close control */}
+            <img
+              src={getAssetPath(ASSETS.ICON_CLOSE)}
+              alt=""
+              className="h-[16px] w-[16px]"
+              style={{
+                filter: "brightness(0) invert(1)",
+              }}
+            />
+          </button>
+          {/* eslint-disable-next-line @next/next/no-img-element -- same-origin upload URL */}
+          <img
+            src={assetUrlTrimmed}
+            alt={uploadPreviewImageAlt}
+            className="max-h-[160px] max-w-full rounded-[var(--measures-radius-200,8px)] object-contain"
+          />
+        </div>
+      ) : (
+        <Upload
+          active={!busy}
+          hintText={busy ? uploadingHint : uploadHint}
+          onClick={onUploadClick}
+        />
+      )}
+      {errorMessage ? (
+        <p
+          className="font-[family-name:var(--font-body)] text-[length:var(--font-size-body-s)] text-[var(--color-content-default-secondary)]"
+          role="alert"
+        >
+          {errorMessage}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+
+export const CustomMethodCardUploadBlockRowView = memo(
+  CustomMethodCardUploadBlockRowViewComponent,
+);
+CustomMethodCardUploadBlockRowView.displayName =
+  "CustomMethodCardUploadBlockRowView";
@@ -0,0 +1,2 @@
+export { default } from "./CustomMethodCardFieldBlocksSummary.container";
+export type { CustomMethodCardFieldBlocksSummaryProps } from "./CustomMethodCardFieldBlocksSummary.types";
@@ -6,7 +6,7 @@ import InputWithCounter from "../../../../components/controls/InputWithCounter";
 import TextArea from "../../../../components/controls/TextArea";
 import AddCustomField from "../../../../components/controls/AddCustomField";
 import { CustomMethodCardWizardFieldBodiesView } from "./CustomMethodCardWizardFieldBodies.view";
-import { CustomMethodCardWizardBlocksListView } from "./CustomMethodCardWizardBlocksList.view";
+import { CustomMethodCardWizardBlocksList } from "./CustomMethodCardWizardBlocksList.container";
 import type { CustomMethodCardWizardViewProps } from "./CustomMethodCardWizard.types";

 function CustomMethodCardWizardViewComponent({
@@ -90,7 +90,7 @@ function CustomMethodCardWizardViewComponent({
      {!fieldTypeModal && wizardStep === 3 ? (
        <div className="flex w-full flex-col gap-4">
          {draftFieldBlocks.length > 0 ? (
-            <CustomMethodCardWizardBlocksListView
+            <CustomMethodCardWizardBlocksList
              blocks={draftFieldBlocks}
              fieldTypeLabels={copy.fieldTypeLabels}
              dragHandleAriaLabel={copy.step3BlocksList.dragHandleAriaLabel}
@@ -0,0 +1,77 @@
+"use client";
+
+import { memo, useCallback, useState, type DragEvent } from "react";
+import { reorderCustomMethodCardFieldBlocks } from "../../../../../lib/create/reorderCustomMethodCardFieldBlocks";
+import { CustomMethodCardWizardBlocksListView } from "./CustomMethodCardWizardBlocksList.view";
+import type { CustomMethodCardWizardBlocksListProps } from "./CustomMethodCardWizardBlocksList.types";
+
+function CustomMethodCardWizardBlocksListContainerComponent({
+  blocks,
+  fieldTypeLabels,
+  dragHandleAriaLabel,
+  listLabel,
+  onBlocksReorder,
+}: CustomMethodCardWizardBlocksListProps) {
+  const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
+  const [overIndex, setOverIndex] = useState<number | null>(null);
+
+  const clearDragUi = useCallback(() => {
+    setDraggingIndex(null);
+    setOverIndex(null);
+  }, []);
+
+  const handleDragStart = useCallback(
+    (index: number) => (e: DragEvent) => {
+      e.dataTransfer.effectAllowed = "move";
+      e.dataTransfer.setData("text/plain", String(index));
+      setDraggingIndex(index);
+    },
+    [],
+  );
+
+  const handleDragOver = useCallback((index: number) => {
+    return (e: DragEvent) => {
+      e.preventDefault();
+      e.dataTransfer.dropEffect = "move";
+      setOverIndex(index);
+    };
+  }, []);
+
+  const handleDrop = useCallback(
+    (index: number) => (e: DragEvent) => {
+      e.preventDefault();
+      const from = Number.parseInt(e.dataTransfer.getData("text/plain"), 10);
+      if (Number.isNaN(from)) {
+        clearDragUi();
+        return;
+      }
+      onBlocksReorder(
+        reorderCustomMethodCardFieldBlocks(blocks, from, index),
+      );
+      clearDragUi();
+    },
+    [blocks, clearDragUi, onBlocksReorder],
+  );
+
+  return (
+    <CustomMethodCardWizardBlocksListView
+      blocks={blocks}
+      fieldTypeLabels={fieldTypeLabels}
+      dragHandleAriaLabel={dragHandleAriaLabel}
+      listLabel={listLabel}
+      onBlocksReorder={onBlocksReorder}
+      draggingIndex={draggingIndex}
+      overIndex={overIndex}
+      onDragStart={handleDragStart}
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+      onDragEnd={clearDragUi}
+    />
+  );
+}
+
+export const CustomMethodCardWizardBlocksList = memo(
+  CustomMethodCardWizardBlocksListContainerComponent,
+);
+CustomMethodCardWizardBlocksList.displayName =
+  "CustomMethodCardWizardBlocksList";
@@ -0,0 +1,21 @@
+import type { AddCustomFieldType } from "../../../../components/controls/AddCustomField/AddCustomField.types";
+import type { CustomMethodCardFieldBlock } from "../../../../../lib/create/customMethodCardFieldBlocks";
+import type { DragEvent } from "react";
+
+export interface CustomMethodCardWizardBlocksListProps {
+  blocks: CustomMethodCardFieldBlock[];
+  fieldTypeLabels: Record<AddCustomFieldType, string>;
+  dragHandleAriaLabel: string;
+  listLabel: string;
+  onBlocksReorder: (_next: CustomMethodCardFieldBlock[]) => void;
+}
+
+export interface CustomMethodCardWizardBlocksListViewProps
+  extends CustomMethodCardWizardBlocksListProps {
+  draggingIndex: number | null;
+  overIndex: number | null;
+  onDragStart: (_index: number) => (_e: DragEvent) => void;
+  onDragOver: (_index: number) => (_e: DragEvent) => void;
+  onDrop: (_index: number) => (_e: DragEvent) => void;
+  onDragEnd: () => void;
+}
@@ -1,11 +1,10 @@
 "use client";

-import { memo, useCallback, useState, type DragEvent } from "react";
+import { memo } from "react";
 import Icon from "../../../../components/asset/icon";
 import { ADD_CUSTOM_FIELD_TYPE_ICONS } from "../../../../components/controls/AddCustomField/AddCustomField.types";
 import type { AddCustomFieldType } from "../../../../components/controls/AddCustomField/AddCustomField.types";
-import type { CustomMethodCardFieldBlock } from "../../../../../lib/create/customMethodCardFieldBlocks";
-import { reorderCustomMethodCardFieldBlocks } from "../../../../../lib/create/reorderCustomMethodCardFieldBlocks";
+import type { CustomMethodCardWizardBlocksListViewProps } from "./CustomMethodCardWizardBlocksList.types";

 function DragHandleGlyph({ className }: { className?: string }) {
  return (
@@ -28,62 +27,18 @@ function DragHandleGlyph({ className }: { className?: string }) {
  );
 }

-export interface CustomMethodCardWizardBlocksListViewProps {
-  blocks: CustomMethodCardFieldBlock[];
-  fieldTypeLabels: Record<AddCustomFieldType, string>;
-  dragHandleAriaLabel: string;
-  listLabel: string;
-  onBlocksReorder: (_next: CustomMethodCardFieldBlock[]) => void;
-}
-
 function CustomMethodCardWizardBlocksListViewComponent({
  blocks,
  fieldTypeLabels,
  dragHandleAriaLabel,
  listLabel,
-  onBlocksReorder,
+  draggingIndex,
+  overIndex,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd,
 }: CustomMethodCardWizardBlocksListViewProps) {
-  const [draggingIndex, setDraggingIndex] = useState<number | null>(null);
-  const [overIndex, setOverIndex] = useState<number | null>(null);
-
-  const clearDragUi = useCallback(() => {
-    setDraggingIndex(null);
-    setOverIndex(null);
-  }, []);
-
-  const handleDragStart = useCallback(
-    (index: number) => (e: DragEvent) => {
-      e.dataTransfer.effectAllowed = "move";
-      e.dataTransfer.setData("text/plain", String(index));
-      setDraggingIndex(index);
-    },
-    [],
-  );
-
-  const handleDragOver = useCallback((index: number) => {
-    return (e: DragEvent) => {
-      e.preventDefault();
-      e.dataTransfer.dropEffect = "move";
-      setOverIndex(index);
-    };
-  }, []);
-
-  const handleDrop = useCallback(
-    (index: number) => (e: DragEvent) => {
-      e.preventDefault();
-      const from = Number.parseInt(e.dataTransfer.getData("text/plain"), 10);
-      if (Number.isNaN(from)) {
-        clearDragUi();
-        return;
-      }
-      onBlocksReorder(
-        reorderCustomMethodCardFieldBlocks(blocks, from, index),
-      );
-      clearDragUi();
-    },
-    [blocks, clearDragUi, onBlocksReorder],
-  );
-
  return (
    <ul className="flex list-none flex-col gap-2 p-0" aria-label={listLabel}>
      {blocks.map((block, index) => {
@@ -98,14 +53,14 @@ function CustomMethodCardWizardBlocksListViewComponent({
                ? "ring-2 ring-[var(--color-border-invert-primary)] ring-offset-2 ring-offset-[var(--color-surface-default-primary)]"
                : ""
            } ${draggingIndex === index ? "opacity-60" : ""}`}
-            onDragOver={handleDragOver(index)}
-            onDrop={handleDrop(index)}
+            onDragOver={onDragOver(index)}
+            onDrop={onDrop(index)}
          >
            <button
              type="button"
              draggable
-              onDragStart={handleDragStart(index)}
-              onDragEnd={clearDragUi}
+              onDragStart={onDragStart(index)}
+              onDragEnd={onDragEnd}
              className="flex shrink-0 cursor-grab touch-manipulation items-center justify-center rounded-[var(--measures-radius-200,8px)] border-0 bg-transparent px-1 text-[var(--color-content-default-secondary)] active:cursor-grabbing focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-border-invert-primary)]"
              aria-label={dragHandleAriaLabel}
            >