diff --git a/clients/fides-js/src/components/Overlay.tsx b/clients/fides-js/src/components/Overlay.tsx index 24b3d57b1a..4ede814a5e 100644 --- a/clients/fides-js/src/components/Overlay.tsx +++ b/clients/fides-js/src/components/Overlay.tsx @@ -69,12 +69,11 @@ const Overlay: FunctionComponent = ({ isUiBlocking, }) => { const { i18n } = useI18n(); - const delayBannerMilliseconds = 100; const delayModalLinkMilliseconds = 200; const hasMounted = useHasMounted(); const isAutomatedConsent = isConsentOverride(options); - const showBanner = useMemo( + const shouldShowBanner = useMemo( () => !isAutomatedConsent && !options.fidesDisableBanner && @@ -84,8 +83,9 @@ const Overlay: FunctionComponent = ({ ); const [bannerIsOpen, setBannerIsOpen] = useState( - options.fidesEmbed ? showBanner : false, + options.fidesEmbed ? shouldShowBanner : false, ); + const modalLinkRef = useRef(null); useEffect(() => { @@ -142,15 +142,16 @@ const Overlay: FunctionComponent = ({ } }, [options, onOpen, bannerIsOpen]); - // The delay is needed for the banner CSS animation useEffect(() => { + if (!shouldShowBanner) { + return () => {}; + } + // The delay is needed for the banner CSS animation const delayBanner = setTimeout(() => { - if (showBanner) { - setBannerIsOpen(true); - } - }, delayBannerMilliseconds); + setBannerIsOpen(true); + }); return () => clearTimeout(delayBanner); - }, [showBanner, setBannerIsOpen]); + }, [shouldShowBanner, setBannerIsOpen]); useEffect(() => { if (options.fidesEmbed || !experience || options.modalLinkId === "") { @@ -234,11 +235,11 @@ const Overlay: FunctionComponent = ({ return (
- {showBanner && bannerIsOpen && isUiBlocking && ( + {shouldShowBanner && bannerIsOpen && isUiBlocking && (
)} - {showBanner + {shouldShowBanner ? renderBanner({ isOpen: bannerIsOpen, isEmbedded: options.fidesEmbed, diff --git a/clients/fides-js/src/components/notices/NoticeOverlay.tsx b/clients/fides-js/src/components/notices/NoticeOverlay.tsx index b24ca220b3..44a31caf7a 100644 --- a/clients/fides-js/src/components/notices/NoticeOverlay.tsx +++ b/clients/fides-js/src/components/notices/NoticeOverlay.tsx @@ -258,12 +258,12 @@ const NoticeOverlay: FunctionComponent = ({ if (isConsentOverride(options) && experience.privacy_notices) { if (options.fidesConsentOverride === ConsentMethod.ACCEPT) { fidesDebugger( - "Consent automatically accepted by fides_accept_all override!", + "Consent automatically accepted by fides_consent_override!", ); handleAcceptAll(true); } else if (options.fidesConsentOverride === ConsentMethod.REJECT) { fidesDebugger( - "Consent automatically rejected by fides_reject_all override!", + "Consent automatically rejected by fides_consent_override!", ); handleRejectAll(true); } diff --git a/clients/fides-js/src/components/tcf/TcfOverlay.tsx b/clients/fides-js/src/components/tcf/TcfOverlay.tsx index 907fc613b6..9e47bf35f7 100644 --- a/clients/fides-js/src/components/tcf/TcfOverlay.tsx +++ b/clients/fides-js/src/components/tcf/TcfOverlay.tsx @@ -362,12 +362,12 @@ export const TcfOverlay = ({ useEffect(() => { if (options.fidesConsentOverride === ConsentMethod.ACCEPT) { fidesDebugger( - "Consent automatically accepted by fides_accept_all override!", + "Consent automatically accepted by fides_consent_override!", ); handleAcceptAll(true); } else if (options.fidesConsentOverride === ConsentMethod.REJECT) { fidesDebugger( - "Consent automatically rejected by fides_reject_all override!", + "Consent automatically rejected by fides_consent_override!", ); handleRejectAll(true); } @@ -389,7 +389,7 @@ export const TcfOverlay = ({ }, [cookie, options.debug]); const handleDismiss = useCallback(() => { - handleUpdateAllPreferences(ConsentMethod.DISMISS, draftIds!); + handleUpdateAllPreferences(ConsentMethod.DISMISS, draftIds); }, [handleUpdateAllPreferences, draftIds]); const experienceConfig = @@ -461,7 +461,7 @@ export const TcfOverlay = ({ : () => ( { setDraftIds(updatedIds); dispatchFidesEvent("FidesUIChanged", cookie, options.debug); diff --git a/clients/sample-app/package-lock.json b/clients/sample-app/package-lock.json index d513b3a1d4..7ed686f9c1 100644 --- a/clients/sample-app/package-lock.json +++ b/clients/sample-app/package-lock.json @@ -14,7 +14,7 @@ "react": "18.3.1", "react-dom": "18.3.1", "react-hook-form": "7.38.0", - "react-select": "^5.7.3", + "react-select": "^5.8.3", "sass": "1.55.0" }, "devDependencies": { diff --git a/clients/sample-app/package.json b/clients/sample-app/package.json index b4f8cabd47..d74ce250f2 100644 --- a/clients/sample-app/package.json +++ b/clients/sample-app/package.json @@ -22,7 +22,7 @@ "react": "18.3.1", "react-dom": "18.3.1", "react-hook-form": "7.38.0", - "react-select": "^5.7.3", + "react-select": "^5.8.3", "sass": "1.55.0" }, "devDependencies": { diff --git a/clients/sample-app/src/pages/embedded-consent.tsx b/clients/sample-app/src/pages/embedded-consent.tsx index 3b4334b031..9f5049ce5b 100644 --- a/clients/sample-app/src/pages/embedded-consent.tsx +++ b/clients/sample-app/src/pages/embedded-consent.tsx @@ -61,14 +61,17 @@ const IndexPage = ({ gtmContainerId, privacyCenterUrl }: Props) => { {/* Allow the embedded consent modal to fill the screen */} @@ -101,6 +104,15 @@ const IndexPage = ({ gtmContainerId, privacyCenterUrl }: Props) => { `} ) : null} + {/* Support for Flutter InAppWebView communication https://inappwebview.dev/docs/webview/javascript/communication */} + {/* eslint-disable-next-line @next/next/no-before-interactive-script-outside-document */} +
); diff --git a/clients/sample-app/src/pages/index.tsx b/clients/sample-app/src/pages/index.tsx index 0e91ab7920..44a8107aa2 100644 --- a/clients/sample-app/src/pages/index.tsx +++ b/clients/sample-app/src/pages/index.tsx @@ -98,6 +98,15 @@ const IndexPage = ({ gtmContainerId, privacyCenterUrl, products }: Props) => { `} ) : null} + {/* Support for Flutter InAppWebView communication https://inappwebview.dev/docs/webview/javascript/communication */} + {/* eslint-disable-next-line @next/next/no-before-interactive-script-outside-document */} + );