diff --git a/apps/console/src/pages/organizations/cookie-banners/NewCookieBannerPage.tsx b/apps/console/src/pages/organizations/cookie-banners/NewCookieBannerPage.tsx index b53f7cc3d..811259409 100644 --- a/apps/console/src/pages/organizations/cookie-banners/NewCookieBannerPage.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/NewCookieBannerPage.tsx @@ -60,6 +60,7 @@ export default function NewCookieBannerPage() { const [name, setName] = useState(""); const [origin, setOrigin] = useState(""); + const [cookiePolicyUrl, setCookiePolicyUrl] = useState(""); const [privacyPolicyUrl, setPrivacyPolicyUrl] = useState(""); const [consentExpiryDays, setConsentExpiryDays] = useState("365"); const [consentMode, setConsentMode] = useState("OPT_IN"); @@ -73,7 +74,8 @@ export default function NewCookieBannerPage() { organizationId, name, origin, - privacyPolicyUrl, + cookiePolicyUrl, + privacyPolicyUrl: privacyPolicyUrl || undefined, consentExpiryDays: parseInt(consentExpiryDays, 10), consentMode: consentMode as "OPT_IN" | "OPT_OUT", }, @@ -136,12 +138,20 @@ export default function NewCookieBannerPage() { /> + + setCookiePolicyUrl(e.target.value)} + placeholder="https://example.com/cookies" + required + /> + + setPrivacyPolicyUrl(e.target.value)} placeholder="https://example.com/privacy" - required /> diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/_components/BannerSettingsForm.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/_components/BannerSettingsForm.tsx index 36cb07b04..d725f3ea4 100644 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/_components/BannerSettingsForm.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/_components/BannerSettingsForm.tsx @@ -27,6 +27,7 @@ const bannerSettingsFormFragment = graphql` id name origin + cookiePolicyUrl privacyPolicyUrl consentExpiryDays consentMode @@ -40,6 +41,7 @@ const updateBannerMutation = graphql` cookieBanner { id name + cookiePolicyUrl privacyPolicyUrl consentExpiryDays consentMode @@ -67,7 +69,8 @@ export function BannerSettingsForm({ cookieBannerKey }: BannerSettingsFormProps) const [updateBanner, isUpdating] = useMutation(updateBannerMutation); const [name, setName] = useState(banner.name); - const [privacyPolicyUrl, setPrivacyPolicyUrl] = useState(banner.privacyPolicyUrl); + const [cookiePolicyUrl, setCookiePolicyUrl] = useState(banner.cookiePolicyUrl); + const [privacyPolicyUrl, setPrivacyPolicyUrl] = useState(banner.privacyPolicyUrl ?? ""); const [consentExpiryDays, setConsentExpiryDays] = useState(String(banner.consentExpiryDays)); const [consentMode, setConsentMode] = useState(banner.consentMode); const [defaultLanguage, setDefaultLanguage] = useState(banner.defaultLanguage); @@ -80,7 +83,8 @@ export function BannerSettingsForm({ cookieBannerKey }: BannerSettingsFormProps) input: { cookieBannerId: banner.id, name, - privacyPolicyUrl, + cookiePolicyUrl, + privacyPolicyUrl: privacyPolicyUrl || undefined, consentExpiryDays: parseInt(consentExpiryDays, 10), consentMode: consentMode, defaultLanguage, @@ -108,8 +112,12 @@ export function BannerSettingsForm({ cookieBannerKey }: BannerSettingsFormProps) + + setCookiePolicyUrl(e.target.value)} required /> + + - setPrivacyPolicyUrl(e.target.value)} required /> + setPrivacyPolicyUrl(e.target.value)} />
diff --git a/apps/console/src/pages/organizations/cookie-banners/configuration/translations/_components/BannerPreview.tsx b/apps/console/src/pages/organizations/cookie-banners/configuration/translations/_components/BannerPreview.tsx index 9d596a742..753899aee 100644 --- a/apps/console/src/pages/organizations/cookie-banners/configuration/translations/_components/BannerPreview.tsx +++ b/apps/console/src/pages/organizations/cookie-banners/configuration/translations/_components/BannerPreview.tsx @@ -21,19 +21,10 @@ interface BannerPreviewProps { buttonRejectAll: string; buttonCustomize: string; privacyPolicyLinkText: string; + cookiePolicyLinkText: string; showBranding: boolean; } -function interpolateDescription( - description: string, - linkText: string, -): string { - return description.replaceAll( - "{{privacy_policy_link}}", - linkText, - ); -} - export function BannerPreview({ bannerTitle, bannerDescription, @@ -41,10 +32,11 @@ export function BannerPreview({ buttonRejectAll, buttonCustomize, privacyPolicyLinkText, + cookiePolicyLinkText, showBranding, }: BannerPreviewProps) { - const descriptionParts = bannerDescription.split("{{privacy_policy_link}}"); - const hasPlaceholder = descriptionParts.length > 1; + const cookieParts = bannerDescription.split("{{cookie_policy_link}}"); + const hasAnyPlaceholder = cookieParts.length > 1 || bannerDescription.includes("{{privacy_policy_link}}"); return (
- {hasPlaceholder - ? descriptionParts.map((part, i) => ( - - {part} - {i < descriptionParts.length - 1 && ( - e.preventDefault()} - style={{ - color: "var(--probo-accent, #1a1a1a)", - textDecoration: "underline", - }} - > - {privacyPolicyLinkText} + {hasAnyPlaceholder + ? cookieParts.map((cookiePart, ci) => ( + + {cookiePart.split("{{privacy_policy_link}}").map((privPart, pi, arr) => ( + + {privPart} + {pi < arr.length - 1 && ( + e.preventDefault()} style={{ color: "var(--probo-accent, #1a1a1a)", textDecoration: "underline" }}> + {privacyPolicyLinkText} + + )} + + ))} + {ci < cookieParts.length - 1 && ( + e.preventDefault()} style={{ color: "var(--probo-accent, #1a1a1a)", textDecoration: "underline" }}> + {cookiePolicyLinkText} )} )) - : ( - interpolateDescription(bannerDescription, privacyPolicyLinkText) - )} + : bannerDescription}

-

{"Use {{privacy_policy_link}} to insert the privacy policy link."}

+

{"Use {{cookie_policy_link}} and {{privacy_policy_link}} to insert policy links."}