- {CREATE_WAVE_SELECT_GROUP_LABELS[waveType][groupType]}
+ {groupLabel}
{isNotChatWave && groupType === CreateWaveGroupConfigType.CAN_CHAT && (
-
);
diff --git a/components/waves/create-wave/groups/CreateWaveGroupInlinePanel.tsx b/components/waves/create-wave/groups/CreateWaveGroupInlinePanel.tsx
new file mode 100644
index 0000000000..47784502f1
--- /dev/null
+++ b/components/waves/create-wave/groups/CreateWaveGroupInlinePanel.tsx
@@ -0,0 +1,249 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import type { CommunityMemberMinimal } from "@/entities/IProfile";
+import type { ApiCreateGroup } from "@/generated/models/ApiCreateGroup";
+import type { ApiGroupFull } from "@/generated/models/ApiGroupFull";
+import { validateGroupPayload } from "@/services/groups/groupMutations";
+import {
+ buildInlineGroupName,
+ getInlineGroupConfiguredRules,
+ getInlineGroupDraftSummary,
+} from "./createWaveInlineGroupBuilder";
+import type {
+ CreateWaveInlineGroupBuilderState,
+ CreateWaveInlineGroupPanel,
+ CreateWaveInlineGroupRuleType,
+} from "./createWaveInlineGroupBuilder";
+import CreateWaveInlineGroupActions from "./CreateWaveInlineGroupActions";
+import CreateWaveInlineGroupDraftSummary from "./CreateWaveInlineGroupDraftSummary";
+import CreateWaveInlineGroupHeader from "./CreateWaveInlineGroupHeader";
+import CreateWaveInlineGroupIdentities from "./CreateWaveInlineGroupIdentities";
+import CreateWaveInlineGroupRuleEditor from "./CreateWaveInlineGroupRuleEditor";
+import {
+ CreateWaveInlineGroupRuleEditorPanel,
+ CreateWaveInlineGroupRuleList,
+} from "./CreateWaveInlineGroupRules";
+import CreateWaveInlineGroupSearch from "./CreateWaveInlineGroupSearch";
+
+export default function CreateWaveGroupInlinePanel({
+ waveName,
+ groupLabel,
+ defaultLabel,
+ disabled,
+ selectedGroup,
+ groupBuilder,
+ onGroupSelect,
+ onInlineGroupCreate,
+ setGroupBuilderPanel,
+ setGroupBuilderRule,
+ setGroupBuilderDraft,
+ addGroupBuilderIdentity,
+ removeGroupBuilderIdentity,
+ resetGroupBuilder,
+}: {
+ readonly waveName: string;
+ readonly groupLabel: string;
+ readonly defaultLabel: string;
+ readonly disabled: boolean;
+ readonly selectedGroup: ApiGroupFull | null;
+ readonly groupBuilder: CreateWaveInlineGroupBuilderState;
+ readonly onGroupSelect: (group: ApiGroupFull | null) => void;
+ readonly onInlineGroupCreate: (
+ payload: ApiCreateGroup
+ ) => Promise
;
+ readonly setGroupBuilderPanel: (panel: CreateWaveInlineGroupPanel) => void;
+ readonly setGroupBuilderRule: (
+ rule: CreateWaveInlineGroupRuleType | null
+ ) => void;
+ readonly setGroupBuilderDraft: (draft: ApiCreateGroup) => void;
+ readonly addGroupBuilderIdentity: (identity: CommunityMemberMinimal) => void;
+ readonly removeGroupBuilderIdentity: (wallet: string) => void;
+ readonly resetGroupBuilder: () => void;
+}) {
+ const [isCreating, setIsCreating] = useState(false);
+
+ const draftSummary = useMemo(
+ () =>
+ getInlineGroupDraftSummary({
+ draft: groupBuilder.draft,
+ identityCount: groupBuilder.identities.length,
+ }),
+ [groupBuilder.draft, groupBuilder.identities.length]
+ );
+ const configuredRules = useMemo(
+ () => getInlineGroupConfiguredRules(groupBuilder.draft),
+ [groupBuilder.draft]
+ );
+ const validation = validateGroupPayload(groupBuilder.draft);
+ const canCreateDraft = validation.valid && !disabled && !isCreating;
+ const canResetDraft = !!draftSummary && !disabled && !isCreating;
+ const currentStateLabel = selectedGroup?.name ?? defaultLabel;
+ const identityCount = groupBuilder.identities.length;
+ const identityLabel = identityCount === 1 ? "identity" : "identities";
+ const isIdentityPanel = groupBuilder.panel === "identity";
+ const isRulePanel =
+ groupBuilder.panel === "rule-list" || groupBuilder.panel === "rule-editor";
+ const isSearchPanel = groupBuilder.panel === "search";
+ const showModeChips = !!draftSummary || groupBuilder.panel !== "actions";
+ const identityChipLabel =
+ identityCount > 0 ? `${identityCount} ${identityLabel}` : "Add identity";
+
+ const openPanel = (panel: CreateWaveInlineGroupPanel) => {
+ setGroupBuilderRule(null);
+ setGroupBuilderPanel(panel);
+ };
+
+ const togglePanel = (
+ panel: CreateWaveInlineGroupPanel,
+ isActive: boolean
+ ) => {
+ openPanel(isActive ? "actions" : panel);
+ };
+
+ const openRule = (rule: CreateWaveInlineGroupRuleType) => {
+ setGroupBuilderRule(rule);
+ };
+
+ const toggleRule = (rule: CreateWaveInlineGroupRuleType) => {
+ if (
+ groupBuilder.panel === "rule-editor" &&
+ groupBuilder.activeRule === rule
+ ) {
+ setGroupBuilderRule(null);
+ setGroupBuilderPanel("rule-list");
+ return;
+ }
+
+ openRule(rule);
+ };
+
+ const onCreateAndUse = async () => {
+ if (!canCreateDraft) {
+ return;
+ }
+
+ setIsCreating(true);
+ try {
+ const nextPayload: ApiCreateGroup = {
+ ...groupBuilder.draft,
+ name: buildInlineGroupName({
+ waveName,
+ groupLabel,
+ }),
+ };
+
+ const createdGroup = await onInlineGroupCreate(nextPayload);
+ if (!createdGroup) {
+ return;
+ }
+
+ onGroupSelect(createdGroup);
+ resetGroupBuilder();
+ setGroupBuilderRule(null);
+ setGroupBuilderPanel("actions");
+ } finally {
+ setIsCreating(false);
+ }
+ };
+
+ const onStartOver = () => {
+ if (!canResetDraft) {
+ return;
+ }
+
+ resetGroupBuilder();
+ };
+
+ const onExistingGroupSelect = (group: ApiGroupFull | null) => {
+ onGroupSelect(group);
+ if (group) {
+ resetGroupBuilder();
+ setGroupBuilderRule(null);
+ setGroupBuilderPanel("actions");
+ }
+ };
+
+ return (
+
+
+
togglePanel("identity", isIdentityPanel)}
+ onRuleOpen={openRule}
+ onRulesToggle={() => togglePanel("rule-list", isRulePanel)}
+ onSearchToggle={() => togglePanel("search", isSearchPanel)}
+ />
+
+ {groupBuilder.panel === "actions" && !draftSummary && (
+ openPanel("identity")}
+ onAddRule={() => openPanel("rule-list")}
+ onUseExistingGroup={() => openPanel("search")}
+ />
+ )}
+
+ {groupBuilder.panel === "identity" && (
+
+
+
+ )}
+
+ {groupBuilder.panel === "rule-list" && (
+
+ )}
+
+ {groupBuilder.panel === "rule-editor" &&
+ groupBuilder.activeRule !== null && (
+
+
+
+ )}
+
+ {groupBuilder.panel === "search" && (
+
+ )}
+
+ {groupBuilder.panel !== "search" && draftSummary && (
+
+ )}
+
+
{CREATE_WAVE_GROUPS[waveType].map((groupType) => (
onGroupSelect({ group, groupType })}
+ onInlineGroupCreate={onInlineGroupCreate}
+ setGroupBuilderPanel={(panel) =>
+ setGroupBuilderPanel(groupType, panel)
+ }
+ setGroupBuilderRule={(rule) => setGroupBuilderRule(groupType, rule)}
+ setGroupBuilderDraft={(draft) =>
+ setGroupBuilderDraft(groupType, draft)
+ }
+ addGroupBuilderIdentity={(identity) =>
+ addGroupBuilderIdentity(groupType, identity)
+ }
+ removeGroupBuilderIdentity={(wallet) =>
+ removeGroupBuilderIdentity(groupType, wallet)
+ }
+ resetGroupBuilder={() => resetGroupBuilder(groupType)}
setDropsAdminCanDelete={setDropsAdminCanDelete}
/>
))}
diff --git a/components/waves/create-wave/groups/CreateWaveInlineGroupActions.tsx b/components/waves/create-wave/groups/CreateWaveInlineGroupActions.tsx
new file mode 100644
index 0000000000..8e4e760e60
--- /dev/null
+++ b/components/waves/create-wave/groups/CreateWaveInlineGroupActions.tsx
@@ -0,0 +1,29 @@
+import { ActionButton } from "./CreateWaveInlineGroupButtons";
+
+export default function CreateWaveInlineGroupActions({
+ disabled,
+ onAddIdentity,
+ onAddRule,
+ onUseExistingGroup,
+}: {
+ readonly disabled: boolean;
+ readonly onAddIdentity: () => void;
+ readonly onAddRule: () => void;
+ readonly onUseExistingGroup: () => void;
+}) {
+ return (
+
+ );
+}
diff --git a/components/waves/create-wave/groups/CreateWaveInlineGroupButtons.tsx b/components/waves/create-wave/groups/CreateWaveInlineGroupButtons.tsx
new file mode 100644
index 0000000000..0bf43f9ebc
--- /dev/null
+++ b/components/waves/create-wave/groups/CreateWaveInlineGroupButtons.tsx
@@ -0,0 +1,55 @@
+export function ActionButton({
+ label,
+ onClick,
+ disabled = false,
+}: {
+ readonly label: string;
+ readonly onClick: () => void;
+ readonly disabled?: boolean | undefined;
+}) {
+ return (
+
+ );
+}
+
+export function DraftChipButton({
+ label,
+ onClick,
+ disabled = false,
+ active = false,
+ compact = false,
+ isToggle = false,
+}: {
+ readonly label: string;
+ readonly onClick: () => void;
+ readonly disabled?: boolean | undefined;
+ readonly active?: boolean | undefined;
+ readonly compact?: boolean | undefined;
+ readonly isToggle?: boolean | undefined;
+}) {
+ const stateClasses = active
+ ? "tw-border-primary-400 tw-bg-primary-500/15 tw-text-primary-200 desktop-hover:hover:tw-border-primary-300 desktop-hover:hover:tw-bg-primary-500/20"
+ : "tw-border-iron-700 tw-bg-iron-950 tw-text-iron-200 desktop-hover:hover:tw-border-iron-600 desktop-hover:hover:tw-bg-iron-800";
+ const sizeClasses = compact
+ ? "tw-px-2.5 tw-py-1 tw-text-xs"
+ : "tw-px-3 tw-py-1.5 tw-text-xs";
+
+ return (
+
+ );
+}
diff --git a/components/waves/create-wave/groups/CreateWaveInlineGroupDraftSummary.tsx b/components/waves/create-wave/groups/CreateWaveInlineGroupDraftSummary.tsx
new file mode 100644
index 0000000000..0820ef6096
--- /dev/null
+++ b/components/waves/create-wave/groups/CreateWaveInlineGroupDraftSummary.tsx
@@ -0,0 +1,50 @@
+export default function CreateWaveInlineGroupDraftSummary({
+ draftSummary,
+ isValid,
+ canResetDraft,
+ canCreateDraft,
+ isCreating,
+ onStartOver,
+ onCreateAndUse,
+}: {
+ readonly draftSummary: string;
+ readonly isValid: boolean;
+ readonly canResetDraft: boolean;
+ readonly canCreateDraft: boolean;
+ readonly isCreating: boolean;
+ readonly onStartOver: () => void;
+ readonly onCreateAndUse: () => void;
+}) {
+ return (
+
+
+
+ Ready to create this inline group
+
+
+ {isValid
+ ? draftSummary
+ : "Draft is incomplete. Check the selected rules before creating it."}
+
+
+
+
+
+
+
+
+ Current state
+
+
+ {currentStateLabel}
+
+ {showModeChips && (
+
+
+ Draft
+
+
+ {!isRulePanel &&
+ configuredRules.map((rule) => (
+ onRuleOpen(rule)}
+ />
+ ))}
+
+
+
+ )}
+
+
+
+ {currentUserIdentity && (
+
+ )}
+
+ {identities.length ? (
+
+ ) : (
+
+ Add identities one by one. Each selected identity becomes part of the
+ new group.
+
+ )}
+
+
+ {CREATE_WAVE_INLINE_GROUP_RULE_OPTIONS.map((rule) => (
+ onRuleOpen(rule)}
+ />
+ ))}
+
+
+
+ {CREATE_WAVE_INLINE_GROUP_RULE_OPTIONS.map((rule) => (
+ onRuleToggle(rule)}
+ />
+ ))}
+
+ {children}
+
+
+
+ );
+}
diff --git a/components/waves/create-wave/groups/CreateWaveInlineGroupXtdhGrant.tsx b/components/waves/create-wave/groups/CreateWaveInlineGroupXtdhGrant.tsx
new file mode 100644
index 0000000000..52c2491ee2
--- /dev/null
+++ b/components/waves/create-wave/groups/CreateWaveInlineGroupXtdhGrant.tsx
@@ -0,0 +1,327 @@
+"use client";
+
+import { useState } from "react";
+import { useDebounce } from "react-use";
+import IdentitySearch, {
+ IdentitySearchSize,
+} from "@/components/utils/input/identity/IdentitySearch";
+import type { ApiCreateGroupDescription } from "@/generated/models/ApiCreateGroupDescription";
+import { ApiXTdhGrantStatus } from "@/generated/models/ApiXTdhGrantStatus";
+import { useXtdhGrantQuery } from "@/hooks/useXtdhGrantQuery";
+import { useXtdhGrantsSearchQuery } from "@/hooks/useXtdhGrantsSearchQuery";
+import GroupCreateXtdhGrantRow from "@/components/groups/page/create/config/xtdh-grant/subcomponents/GroupCreateXtdhGrantRow";
+import {
+ isSelectableNonGrantedStatus,
+ toShortGrantId,
+} from "@/components/groups/page/create/config/xtdh-grant/utils";
+
+const STATUS_OPTIONS = [
+ ApiXTdhGrantStatus.Granted,
+ ApiXTdhGrantStatus.Pending,
+ ApiXTdhGrantStatus.Disabled,
+ ApiXTdhGrantStatus.Failed,
+] as const;
+
+const STATUS_LABELS: Record = {
+ [ApiXTdhGrantStatus.Granted]: "Granted",
+ [ApiXTdhGrantStatus.Pending]: "Pending",
+ [ApiXTdhGrantStatus.Disabled]: "Revoked",
+ [ApiXTdhGrantStatus.Failed]: "Failed",
+};
+
+export default function CreateWaveInlineGroupXtdhGrant({
+ beneficiaryGrantId,
+ setBeneficiaryGrantId,
+}: {
+ readonly beneficiaryGrantId: ApiCreateGroupDescription["is_beneficiary_of_grant_id"];
+ readonly setBeneficiaryGrantId: (
+ grantId: ApiCreateGroupDescription["is_beneficiary_of_grant_id"]
+ ) => void;
+}) {
+ const normalizedGrantId = beneficiaryGrantId?.trim() ?? "";
+ const hasSelectedGrant = normalizedGrantId.length > 0;
+
+ const [showGrantFinder, setShowGrantFinder] = useState(false);
+ const [lookupGrantId, setLookupGrantId] = useState(
+ hasSelectedGrant ? normalizedGrantId : null
+ );
+ const [selectedGrantor, setSelectedGrantor] = useState(null);
+ const [targetCollectionInput, setTargetCollectionInput] = useState("");
+ const [targetCollectionFilter, setTargetCollectionFilter] = useState("");
+ const [selectedStatus, setSelectedStatus] = useState(
+ ApiXTdhGrantStatus.Granted
+ );
+
+ useDebounce(
+ () => setTargetCollectionFilter(targetCollectionInput.trim()),
+ 250,
+ [targetCollectionInput]
+ );
+
+ useDebounce(
+ () => setLookupGrantId(hasSelectedGrant ? normalizedGrantId : null),
+ 250,
+ [hasSelectedGrant, normalizedGrantId]
+ );
+
+ const { grant, isFetching, isError, errorMessage } = useXtdhGrantQuery({
+ grantId: lookupGrantId,
+ enabled: !!lookupGrantId,
+ });
+
+ const {
+ grants,
+ totalCount,
+ hasNextPage,
+ fetchNextPage,
+ isFetchingNextPage,
+ isLoading,
+ isError: isSearchError,
+ errorMessage: searchErrorMessage,
+ refetch,
+ } = useXtdhGrantsSearchQuery({
+ grantor: selectedGrantor,
+ targetCollectionName: targetCollectionFilter || null,
+ statuses: [selectedStatus],
+ enabled: showGrantFinder,
+ pageSize: 20,
+ });
+
+ const isLookupFresh = lookupGrantId === normalizedGrantId;
+ const showLookupError = isLookupFresh && Boolean(lookupGrantId && isError);
+ const showNonGrantedWarning =
+ isLookupFresh &&
+ grant?.status !== undefined &&
+ isSelectableNonGrantedStatus(grant.status);
+
+ const onInputChange = (nextValue: string) => {
+ const normalized = nextValue.trim();
+ setBeneficiaryGrantId(normalized.length ? normalized : null);
+ };
+
+ const onClearSelection = () => {
+ setLookupGrantId(null);
+ setBeneficiaryGrantId(null);
+ };
+
+ const onResetFilters = () => {
+ setSelectedGrantor(null);
+ setTargetCollectionInput("");
+ setTargetCollectionFilter("");
+ setSelectedStatus(ApiXTdhGrantStatus.Granted);
+ };
+
+ return (
+
+
+
+ xTDH Grant Beneficiary
+
+
+ Require identities to be beneficiaries of a selected xTDH grant.
+
+
+
+
+
+
+
+
+
+ {isFetching && !!lookupGrantId && (
+
+ Validating grant...
+
+ )}
+
+ {showLookupError && (
+
+
+ {errorMessage ?? "Unable to resolve grant ID."}
+
+
+ The ID will still be submitted as entered:{" "}
+
+ {toShortGrantId(lookupGrantId)}
+
+
+
+ )}
+
+ {isLookupFresh && !!grant && (
+
+ )}
+
+ {showNonGrantedWarning && (
+
+
+ Selected grant status is not GRANTED. This filter is still allowed
+ and will be submitted.
+
+
+ )}
+
+ {showGrantFinder && (
+
+
+
+ setSelectedGrantor(identity ? identity.toLowerCase() : null)
+ }
+ />
+ setTargetCollectionInput(event.target.value)}
+ placeholder="Collection name"
+ aria-label="Collection name"
+ className="tw-form-input tw-block tw-w-full tw-rounded-lg tw-border-0 tw-bg-iron-900 tw-px-3 tw-py-2.5 tw-text-sm tw-text-iron-50 tw-ring-1 tw-ring-inset tw-ring-iron-700 placeholder:tw-text-iron-500 focus:tw-ring-primary-400"
+ />
+
+
+
+
+
+ Status
+
+
+ {STATUS_OPTIONS.map((status) => {
+ const isActive = selectedStatus === status;
+ return (
+
+ );
+ })}
+
+
+
+
+
+
+
+
+ Results
+
+
+ {totalCount} total
+
+
+
+
+ {isLoading && !grants.length && (
+
+ Loading grants...
+
+ )}
+
+ {isSearchError && !grants.length && (
+
+
+ {searchErrorMessage ?? "Unable to load grants."}
+
+
+
+ )}
+
+ {!isLoading && !isSearchError && !grants.length && (
+
+ No grants matched the selected filters.
+
+ )}
+
+ {!!grants.length && (
+
+ {grants.map((grantItem) => (
+ {
+ setBeneficiaryGrantId(selectedGrant.id);
+ setLookupGrantId(selectedGrant.id);
+ }}
+ />
+ ))}
+
+ )}
+
+
+ {hasNextPage && (
+
+
+
+ )}
+
+
+ )}
+