Full cleanup pass
This commit is contained in:
adilallo
+66
@@ -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;
|
||||
+55
@@ -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;
|
||||
};
|
||||
+198
@@ -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";
|
||||
+110
@@ -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";
|
||||
+100
@@ -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";
|
||||
Reference in New Issue
Block a user