@inspirer-dev/hero-widget-cta-button
Version:
A custom field plugin for Strapi v5 that provides a CTA button selector with different action types (external link, internal link, case, article, copy link, copy nickname).
769 lines (768 loc) • 41.4 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const react = require("react");
const designSystem = require("@strapi/design-system");
const icons = require("@strapi/icons");
const CTAButtonInput = react.forwardRef(
({ name, onChange, value, intlLabel, disabled = false, error, required, hint }, ref) => {
const currentValue = value || { type: null, value: "" };
const [cases, setCases] = react.useState([]);
const [articles, setArticles] = react.useState([]);
const [caseCategories, setCaseCategories] = react.useState([]);
const [loading, setLoading] = react.useState(false);
const [caseSearchTerm, setCaseSearchTerm] = react.useState("");
const [articleSearchTerm, setArticleSearchTerm] = react.useState("");
const [caseCategorySearchTerm, setCaseCategorySearchTerm] = react.useState("");
const [isCasePopoverOpen, setIsCasePopoverOpen] = react.useState(false);
const [isArticlePopoverOpen, setIsArticlePopoverOpen] = react.useState(false);
const [isCaseCategoryPopoverOpen, setIsCaseCategoryPopoverOpen] = react.useState(false);
const fetchCases = react.useCallback(async (searchTerm = "") => {
setLoading(true);
try {
const url = new URL("/hero-widget-cta-button/cases", window.location.origin);
if (searchTerm) {
url.searchParams.append("search", searchTerm);
}
const response = await fetch(url.toString());
const data = await response.json();
setCases(data.results);
} catch (error2) {
console.error("Error fetching cases:", error2);
setCases([]);
} finally {
setLoading(false);
}
}, []);
const fetchArticles = react.useCallback(async (searchTerm = "") => {
setLoading(true);
try {
const url = new URL("/hero-widget-cta-button/articles", window.location.origin);
if (searchTerm) {
url.searchParams.append("search", searchTerm);
}
const response = await fetch(url.toString());
const data = await response.json();
setArticles(data.results);
} catch (error2) {
console.error("Error fetching articles:", error2);
setArticles([]);
} finally {
setLoading(false);
}
}, []);
const fetchCaseCategories = react.useCallback(async (searchTerm = "") => {
setLoading(true);
try {
const url = new URL("/hero-widget-cta-button/case-categories", window.location.origin);
if (searchTerm) {
url.searchParams.append("search", searchTerm);
}
const response = await fetch(url.toString());
const data = await response.json();
setCaseCategories(data.results);
} catch (error2) {
console.error("Error fetching case categories:", error2);
setCaseCategories([]);
} finally {
setLoading(false);
}
}, []);
react.useEffect(() => {
if (currentValue.type === "case") {
const timeoutId = setTimeout(() => {
fetchCases(caseSearchTerm);
}, 300);
return () => clearTimeout(timeoutId);
}
}, [currentValue.type, caseSearchTerm, fetchCases]);
react.useEffect(() => {
if (currentValue.type === "article") {
const timeoutId = setTimeout(() => {
fetchArticles(articleSearchTerm);
}, 300);
return () => clearTimeout(timeoutId);
}
}, [currentValue.type, articleSearchTerm, fetchArticles]);
react.useEffect(() => {
if (currentValue.type === "cases_anchor") {
const timeoutId = setTimeout(() => {
fetchCaseCategories(caseCategorySearchTerm);
}, 300);
return () => clearTimeout(timeoutId);
}
}, [currentValue.type, caseCategorySearchTerm, fetchCaseCategories]);
react.useEffect(() => {
if (currentValue.type === "case") {
fetchCases(caseSearchTerm);
} else if (currentValue.type === "article") {
fetchArticles(articleSearchTerm);
} else if (currentValue.type === "cases_anchor") {
fetchCaseCategories(caseCategorySearchTerm);
}
}, [
currentValue.type,
fetchCases,
fetchArticles,
fetchCaseCategories,
caseSearchTerm,
articleSearchTerm,
caseCategorySearchTerm
]);
const handleTypeChange = (type) => {
const newValue = {
type,
value: "",
caseSlug: void 0,
articleSlug: void 0,
categorySlug: void 0,
selectedCase: void 0,
selectedArticle: void 0,
selectedCaseCategory: void 0
};
setCaseSearchTerm("");
setArticleSearchTerm("");
setCaseCategorySearchTerm("");
onChange({
target: {
name,
value: newValue
}
});
};
const handleCaseSelect = (caseItem) => {
const newValue = {
...currentValue,
caseSlug: caseItem?.slug,
selectedCase: caseItem
};
setIsCasePopoverOpen(false);
onChange({
target: {
name,
value: newValue
}
});
};
const handleArticleSelect = (articleItem) => {
const newValue = {
...currentValue,
articleSlug: articleItem?.slug,
categorySlug: articleItem?.categories?.[0]?.slug,
selectedArticle: articleItem
};
setIsArticlePopoverOpen(false);
onChange({
target: {
name,
value: newValue
}
});
};
const handleCaseCategorySelect = (categoryItem) => {
const newValue = {
...currentValue,
selectedCaseCategory: categoryItem
};
setIsCaseCategoryPopoverOpen(false);
onChange({
target: {
name,
value: newValue
}
});
};
const handleValueChange = (fieldValue) => {
const newValue = {
...currentValue,
value: fieldValue
};
onChange({
target: {
name,
value: newValue
}
});
};
const getDisplayName = () => {
if (intlLabel?.defaultMessage && !intlLabel.defaultMessage.includes(".")) {
return intlLabel.defaultMessage;
}
return "CTA Button";
};
const renderConditionalForm = () => {
switch (currentValue.type) {
case null:
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "Please select a button action type above to configure the CTA button." }) });
case "external_link":
case "internal_link":
case "copy_link":
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: currentValue.type === "external_link" ? "External Link URL" : currentValue.type === "internal_link" ? "Internal Link Path" : "Link to Copy" }),
/* @__PURE__ */ jsxRuntime.jsx(
designSystem.TextInput,
{
value: currentValue.value || "",
onChange: (e) => handleValueChange(e.target.value),
placeholder: currentValue.type === "internal_link" ? "/about" : "https://example.com",
disabled
}
)
] }) });
case "case":
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingTop: 2, children: [
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Select Case" }),
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Popover.Root, { open: isCasePopoverOpen, onOpenChange: setIsCasePopoverOpen, children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
designSystem.Button,
{
variant: "tertiary",
size: "L",
disabled: disabled || loading,
fullWidth: true,
justifyContent: "space-between",
children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", justifyContent: "space-between", gap: 2, children: [
/* @__PURE__ */ jsxRuntime.jsx(
designSystem.Typography,
{
variant: "omega",
textColor: currentValue.selectedCase ? "neutral800" : "neutral500",
children: currentValue.selectedCase?.name || "Choose a case"
}
),
loading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.CaretDown, { width: "12px", height: "12px" })
] })
}
) }),
/* @__PURE__ */ jsxRuntime.jsxs(
designSystem.Popover.Content,
{
side: "bottom",
align: "start",
style: { minWidth: "300px", maxHeight: "400px", overflowY: "auto" },
children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
designSystem.TextInput,
{
placeholder: "Search cases...",
value: caseSearchTerm,
onChange: (e) => setCaseSearchTerm(e.target.value),
disabled,
startAction: /* @__PURE__ */ jsxRuntime.jsx(icons.Search, { width: "12px", height: "12px" })
}
) }),
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 1, children: [
/* @__PURE__ */ jsxRuntime.jsx(
designSystem.Box,
{
paddingTop: 2,
paddingBottom: 2,
paddingLeft: 3,
paddingRight: 3,
cursor: "pointer",
background: "neutral0",
onClick: () => handleCaseSelect(null),
style: { borderRadius: "4px" },
children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral500", children: "None" })
}
),
cases.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
cases.map((caseItem) => /* @__PURE__ */ jsxRuntime.jsx(
designSystem.Box,
{
paddingTop: 2,
paddingBottom: 2,
paddingLeft: 3,
paddingRight: 3,
cursor: "pointer",
background: "neutral0",
onClick: () => handleCaseSelect(caseItem),
style: { borderRadius: "4px" },
children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "flex-start", gap: 3, children: [
caseItem.caseImage?.url ? /* @__PURE__ */ jsxRuntime.jsx(
designSystem.Flex,
{
width: "50px",
height: "50px",
justifyContent: "center",
alignItems: "center",
borderRadius: "4px",
background: "neutral100",
borderColor: "neutral200",
borderStyle: "solid",
borderWidth: "1px",
children: /* @__PURE__ */ jsxRuntime.jsx(
"img",
{
src: caseItem.caseImage.url,
alt: caseItem.caseImage.alternativeText || "Case image",
style: {
width: 50,
height: 50,
objectFit: "cover",
borderRadius: "4px"
}
}
)
}
) : /* @__PURE__ */ jsxRuntime.jsx(
designSystem.Flex,
{
width: "50px",
height: "50px",
justifyContent: "center",
alignItems: "center",
borderRadius: "4px",
background: "neutral100",
borderColor: "neutral200",
borderStyle: "solid",
borderWidth: "1px",
children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: "📦" })
}
),
/* @__PURE__ */ jsxRuntime.jsxs(
designSystem.Box,
{
style: {
flex: 1,
display: "flex",
flexDirection: "column",
gap: "5px"
},
children: [
/* @__PURE__ */ jsxRuntime.jsx(
designSystem.Typography,
{
variant: "omega",
fontWeight: "semiBold",
textColor: "neutral800",
children: caseItem.name
}
),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: caseItem.slug })
]
}
)
] })
},
caseItem.id
))
] }),
cases.length === 0 && !loading && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, paddingBottom: 2, paddingLeft: 3, paddingRight: 3, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: "No cases found" }) })
] })
]
}
)
] })
] }),
currentValue.selectedCase && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingTop: 2, children: [
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: [
"Selected Case: ",
currentValue.selectedCase.name
] }),
currentValue.selectedCase.caseImage && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
"img",
{
src: currentValue.selectedCase.caseImage.url,
alt: currentValue.selectedCase.caseImage.alternativeText || "Case image",
style: { maxWidth: "100px", height: "auto" }
}
) })
] })
] });
case "article":
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingTop: 2, children: [
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Select Article" }),
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Popover.Root, { open: isArticlePopoverOpen, onOpenChange: setIsArticlePopoverOpen, children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
designSystem.Button,
{
variant: "tertiary",
size: "L",
disabled: disabled || loading,
fullWidth: true,
justifyContent: "space-between",
children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", justifyContent: "space-between", gap: 2, children: [
/* @__PURE__ */ jsxRuntime.jsx(
designSystem.Typography,
{
variant: "omega",
textColor: currentValue.selectedArticle ? "neutral800" : "neutral500",
children: currentValue.selectedArticle?.h1title || "Choose an article"
}
),
loading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.CaretDown, { width: "12px", height: "12px" })
] })
}
) }),
/* @__PURE__ */ jsxRuntime.jsxs(
designSystem.Popover.Content,
{
side: "bottom",
align: "start",
style: { minWidth: "300px", maxHeight: "400px", overflowY: "auto" },
children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
designSystem.TextInput,
{
placeholder: "Search articles...",
value: articleSearchTerm,
onChange: (e) => setArticleSearchTerm(e.target.value),
disabled,
startAction: /* @__PURE__ */ jsxRuntime.jsx(icons.Search, { width: "12px", height: "12px" })
}
) }),
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 1, children: [
/* @__PURE__ */ jsxRuntime.jsx(
designSystem.Box,
{
paddingTop: 2,
paddingBottom: 2,
paddingLeft: 3,
paddingRight: 3,
cursor: "pointer",
background: "neutral0",
onClick: () => handleArticleSelect(null),
style: { borderRadius: "4px" },
children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral500", children: "None" })
}
),
articles.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
articles.map((article) => /* @__PURE__ */ jsxRuntime.jsx(
designSystem.Box,
{
paddingTop: 2,
paddingBottom: 2,
paddingLeft: 3,
paddingRight: 3,
cursor: "pointer",
background: "neutral0",
onClick: () => handleArticleSelect(article),
style: { borderRadius: "4px" },
children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "flex-start", gap: 3, children: [
article.mainImage?.url ? /* @__PURE__ */ jsxRuntime.jsx(
designSystem.Flex,
{
width: "50px",
height: "50px",
justifyContent: "center",
alignItems: "center",
borderRadius: "4px",
background: "neutral100",
borderColor: "neutral200",
borderStyle: "solid",
borderWidth: "1px",
children: /* @__PURE__ */ jsxRuntime.jsx(
"img",
{
src: article.mainImage.url,
alt: article.mainImage.alternativeText || "Article image",
style: {
width: 50,
height: 50,
objectFit: "cover",
borderRadius: "4px"
}
}
)
}
) : /* @__PURE__ */ jsxRuntime.jsx(
designSystem.Flex,
{
width: "50px",
height: "50px",
justifyContent: "center",
alignItems: "center",
borderRadius: "4px",
background: "neutral100",
borderColor: "neutral200",
borderStyle: "solid",
borderWidth: "1px",
children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: "📄" })
}
),
/* @__PURE__ */ jsxRuntime.jsxs(
designSystem.Box,
{
style: {
flex: 1,
display: "flex",
flexDirection: "column",
gap: "5px"
},
children: [
/* @__PURE__ */ jsxRuntime.jsx(
designSystem.Typography,
{
variant: "omega",
fontWeight: "semiBold",
textColor: "neutral800",
children: article.h1title
}
),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: article.slug }),
article.categories?.[0] && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral400", children: [
"Category: ",
article.categories[0].name
] })
]
}
)
] })
},
article.id
))
] }),
articles.length === 0 && !loading && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, paddingBottom: 2, paddingLeft: 3, paddingRight: 3, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: "No articles found" }) })
] })
]
}
)
] })
] }),
currentValue.selectedArticle && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingTop: 2, children: [
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: [
"Selected Article: ",
currentValue.selectedArticle.h1title
] }),
currentValue.selectedArticle.categories?.[0] && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: [
"Category: ",
currentValue.selectedArticle.categories[0].name
] }),
currentValue.selectedArticle.mainImage && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
"img",
{
src: currentValue.selectedArticle.mainImage.url,
alt: currentValue.selectedArticle.mainImage.alternativeText || "Article image",
style: { maxWidth: "100px", height: "auto" }
}
) })
] })
] });
case "copy_nickname":
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: "This option doesn't require additional configuration." }) });
case "cases_anchor":
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingTop: 2, children: [
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Select Case Category" }),
/* @__PURE__ */ jsxRuntime.jsxs(
designSystem.Popover.Root,
{
open: isCaseCategoryPopoverOpen,
onOpenChange: setIsCaseCategoryPopoverOpen,
children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Popover.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
designSystem.Button,
{
variant: "tertiary",
size: "L",
disabled: disabled || loading,
fullWidth: true,
justifyContent: "space-between",
children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "center", justifyContent: "space-between", gap: 2, children: [
/* @__PURE__ */ jsxRuntime.jsx(
designSystem.Typography,
{
variant: "omega",
textColor: currentValue.selectedCaseCategory ? "neutral800" : "neutral500",
children: currentValue.selectedCaseCategory?.name || "Choose a case category"
}
),
loading ? /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, {}) : /* @__PURE__ */ jsxRuntime.jsx(icons.CaretDown, { width: "12px", height: "12px" })
] })
}
) }),
/* @__PURE__ */ jsxRuntime.jsxs(
designSystem.Popover.Content,
{
side: "bottom",
align: "start",
style: { minWidth: "300px", maxHeight: "400px", overflowY: "auto" },
children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
designSystem.TextInput,
{
placeholder: "Search case categories...",
value: caseCategorySearchTerm,
onChange: (e) => setCaseCategorySearchTerm(e.target.value),
disabled,
startAction: /* @__PURE__ */ jsxRuntime.jsx(icons.Search, { width: "12px", height: "12px" })
}
) }),
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { padding: 1, children: [
/* @__PURE__ */ jsxRuntime.jsx(
designSystem.Box,
{
paddingTop: 2,
paddingBottom: 2,
paddingLeft: 3,
paddingRight: 3,
cursor: "pointer",
background: "neutral0",
onClick: () => handleCaseCategorySelect(null),
style: { borderRadius: "4px" },
children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "omega", textColor: "neutral500", children: "None" })
}
),
caseCategories.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Divider, {}),
caseCategories.map((category) => /* @__PURE__ */ jsxRuntime.jsx(
designSystem.Box,
{
paddingTop: 2,
paddingBottom: 2,
paddingLeft: 3,
paddingRight: 3,
cursor: "pointer",
background: "neutral0",
onClick: () => handleCaseCategorySelect(category),
style: { borderRadius: "4px" },
children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { alignItems: "flex-start", gap: 3, children: [
category.icon?.url ? /* @__PURE__ */ jsxRuntime.jsx(
designSystem.Flex,
{
width: "50px",
height: "50px",
justifyContent: "center",
alignItems: "center",
borderRadius: "4px",
background: "neutral100",
borderColor: "neutral200",
borderStyle: "solid",
borderWidth: "1px",
children: /* @__PURE__ */ jsxRuntime.jsx(
"img",
{
src: category.icon.url,
alt: category.icon.alternativeText || "Category icon",
style: {
width: 50,
height: 50,
objectFit: "cover",
borderRadius: "4px"
}
}
)
}
) : /* @__PURE__ */ jsxRuntime.jsx(
designSystem.Flex,
{
width: "50px",
height: "50px",
justifyContent: "center",
alignItems: "center",
borderRadius: "4px",
background: "neutral100",
borderColor: "neutral200",
borderStyle: "solid",
borderWidth: "1px",
children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: "🏷️" })
}
),
/* @__PURE__ */ jsxRuntime.jsxs(
designSystem.Box,
{
style: {
flex: 1,
display: "flex",
flexDirection: "column",
gap: "5px"
},
children: [
/* @__PURE__ */ jsxRuntime.jsx(
designSystem.Typography,
{
variant: "omega",
fontWeight: "semiBold",
textColor: "neutral800",
children: category.name
}
),
category.shortDescription && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: category.shortDescription }),
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", children: [
category.isFree && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "success600", children: "Free" }),
category.isFarm && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "primary600", children: "Farm" }),
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", textColor: "neutral400", children: [
"Weight: ",
category.sortWeight
] })
] })
]
}
)
] })
},
category.id
))
] }),
caseCategories.length === 0 && !loading && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 2, paddingBottom: 2, paddingLeft: 3, paddingRight: 3, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral500", children: "No case categories found" }) })
] })
]
}
)
]
}
)
] }),
currentValue.selectedCaseCategory && /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingTop: 2, children: [
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Typography, { variant: "pi", fontWeight: "bold", children: [
"Selected Category: ",
currentValue.selectedCaseCategory.name
] }),
currentValue.selectedCaseCategory.shortDescription && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "neutral600", children: currentValue.selectedCaseCategory.shortDescription }),
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { gap: 2, alignItems: "center", paddingTop: 1, children: [
currentValue.selectedCaseCategory.isFree && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "success600", children: "Free" }),
currentValue.selectedCaseCategory.isFarm && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", textColor: "primary600", children: "Farm" })
] }),
currentValue.selectedCaseCategory.icon && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingTop: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
"img",
{
src: currentValue.selectedCaseCategory.icon.url,
alt: currentValue.selectedCaseCategory.icon.alternativeText || "Category icon",
style: { maxWidth: "100px", height: "auto" }
}
) })
] })
] });
default:
return null;
}
};
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name, error, hint, required, children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: getDisplayName() }),
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { children: [
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: "Button Action Type" }),
/* @__PURE__ */ jsxRuntime.jsxs(
designSystem.SingleSelect,
{
value: currentValue.type || "",
onChange: (value2) => handleTypeChange(value2),
disabled,
placeholder: "Select action type",
children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "external_link", children: "External Link" }),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "internal_link", children: "Internal Link" }),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "case", children: "Case" }),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "copy_link", children: "Copy Link" }),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "copy_nickname", children: "Copy Nickname" }),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "article", children: "Article" }),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.SingleSelectOption, { value: "cases_anchor", children: "Cases Anchor" })
]
}
)
] }),
renderConditionalForm()
] }),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
] });
}
);
CTAButtonInput.displayName = "CTAButtonInput";
exports.CTAButtonInput = CTAButtonInput;
exports.default = CTAButtonInput;