Set up Flutter listeners and callHandlers in the Sample App for native app communication

CHANGELOG.md

@@ -19,6 +19,7 @@ The types of changes are:
 
 ### Added
 - New page in the Cookie House sample app to demonstrate the use of embedding the FidesJS SDK on the page [#5564](https://github.com/ethyca/fides/pull/5564)
+- Added event based communication example to the Cookie House sample app [#5597](https://github.com/ethyca/fides/pull/5597)
 - Added new erasure tests for BigQuery Enterprise [#5554](https://github.com/ethyca/fides/pull/5554)
 
 ### Fixed

clients/fides-js/src/components/notices/NoticeOverlay.tsx

@@ -258,12 +258,12 @@ const NoticeOverlay: FunctionComponent<OverlayProps> = ({
     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);
       }

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 = ({
           : () => (
               <TcfTabs
                 experience={experience}
-                enabledIds={draftIds!}
+                enabledIds={draftIds}
                 onChange={(updatedIds) => {
                   setDraftIds(updatedIds);
                   dispatchFidesEvent("FidesUIChanged", cookie, options.debug);

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": {

clients/sample-app/src/pages/embedded-consent.tsx

@@ -61,14 +61,17 @@ const IndexPage = ({ gtmContainerId, privacyCenterUrl }: Props) => {
         <script>{`window.fides_overrides = { fides_embed: true, fides_disable_banner: true }`}</script>
         {/* Allow the embedded consent modal to fill the screen */}
         <style>{`
-          #fides-embed-container {
-            --fides-overlay-width: 'auto'
+          /* Embedded overlay is set to inherit page styling, but in this case there is no other page information so we'll set these styles the modal defaults. */
+          body {
+            font-family: var(--fides-overlay-font-family);
+            color: var(--fides-overlay-font-color-dark);
+            font-size: var(--fides-overlay-font-size-body);
+            background-color: var(--fides-overlay-background-color);
           }
 
-          body {
-            font-family: "Inter", sans-serif;
-            color: #171923;
-            font-size: 14px;
+          /* Allow the embedded consent modal to fill the width of the screen */
+          #fides-embed-container {
+            --fides-overlay-width: 'auto'
           }
         `}</style>
       </Head>
@@ -101,6 +104,15 @@ const IndexPage = ({ gtmContainerId, privacyCenterUrl }: Props) => {
           `}
         </Script>
       ) : 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 */}
+      <Script id="flutter-inappwebview" strategy="beforeInteractive">
+        {`window.addEventListener("FidesInitialized", function() {
+            Fides.onFidesEvent("FidesUpdated", (detail) => {
+              window.flutter_inappwebview?.callHandler('FidesUpdated', detail);
+            });
+          }, {once: true});`}
+      </Script>
       <div id="fides-embed-container" />
     </>
   );

clients/sample-app/src/pages/index.tsx

@@ -98,6 +98,15 @@ const IndexPage = ({ gtmContainerId, privacyCenterUrl, products }: Props) => {
           `}
         </Script>
       ) : 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 */}
+      <Script id="flutter-inappwebview" strategy="beforeInteractive">
+        {`window.addEventListener("FidesInitialized", function() {
+            Fides.onFidesEvent("FidesUpdated", (detail) => {
+              window.flutter_inappwebview?.callHandler('FidesUpdated', detail);
+            });
+          }, {once: true});`}
+      </Script>
       <Home privacyCenterUrl={privacyCenterUrl} products={products} />
     </>
   );