Add Notification Banner Callback (#179)

* Added Changes to callback * updated callback render * Updated styling * force hide notif banner background * removed unused comments * Addressed Yarn Lock --------- Signed-off-by: riquelme-stripe <[email protected]> Co-authored-by: Eric Liang <[email protected]>
stripe · Jul 16, 2024 · 72ac54e · 72ac54e
1 parent 20e4936
commit 72ac54e
Show file tree

Hide file tree

Showing 4 changed files with 865 additions and 550 deletions.
diff --git a/app/(dashboard)/home/page.tsx b/app/(dashboard)/home/page.tsx
@@ -1,4 +1,6 @@
 'use client';
+import React from 'react';
+import {useState} from 'react';
 import Schedule from '@/app/components/Schedule';
 import BalanceWidget from '@/app/components/BalanceWidget';
 import RecentPaymentsWidget from '@/app/components/RecentPaymentsWidget';
@@ -20,17 +22,35 @@ export default function Dashboard() {
 
   const BREAKPOINT = 1190;
 
+  const [showBanner, setShowBanner] = React.useState(false);
+
+  const renderConditionallyCallback = (response: {
+    total: number;
+    actionRequired: number;
+  }) => {
+    if (response && response.total > 0) {
+      setShowBanner(true);
+    } else {
+      setShowBanner(false);
+    }
+  };
+
   return (
     <>
       <h1 className="text-3xl font-bold">Woof woof, {name || 'human'}!</h1>
+      <div className={`${showBanner ? 'flex' : 'hidden'} flex-col`}>
+        <EmbeddedComponentContainer
+          componentName="NotificationBanner"
+          className="overflow-hidden rounded-lg px-0 py-0 pb-1"
+        >
+          <ConnectNotificationBanner
+            onNotificationsChange={renderConditionallyCallback}
+          />
+        </EmbeddedComponentContainer>
+      </div>
+
       <div className="flex flex-col items-start gap-2 md:gap-5 xl:flex-row">
         <Container className="flex w-full flex-1 flex-col p-5">
-          <EmbeddedComponentContainer
-            componentName="NotificationBanner"
-            className="-m-2 mb-0.5"
-          >
-            <ConnectNotificationBanner />
-          </EmbeddedComponentContainer>
           <Schedule />
         </Container>
         <div className="-order-1 flex w-full flex-col gap-2 md:gap-4 xl:order-2 xl:w-[30%]">

diff --git a/app/(dashboard)/settings/page.tsx b/app/(dashboard)/settings/page.tsx
@@ -21,8 +21,32 @@ export default function Settings() {
 
   const canShowPassword = !session?.user.changedPassword;
 
+  const [showBanner, setShowBanner] = React.useState(false);
+
+  const renderConditionallyCallback = (response: {
+    total: number;
+    actionRequired: number;
+  }) => {
+    if (response && response.total > 0) {
+      setShowBanner(true);
+    } else {
+      setShowBanner(false);
+    }
+  };
+
   return (
     <>
+      <div className={`${showBanner ? 'flex' : 'hidden'} flex-col`}>
+        <EmbeddedComponentContainer
+          componentName="NotificationBanner"
+          className="overflow-hidden rounded-lg px-0 py-0 pb-1"
+        >
+          <ConnectNotificationBanner
+            onNotificationsChange={renderConditionallyCallback}
+          />
+        </EmbeddedComponentContainer>
+      </div>
+
       <Container className="pl-5">
         <div className="flex flex-row justify-between">
           <h1 className="mb-4 text-xl font-semibold">Details</h1>
@@ -69,10 +93,6 @@ export default function Settings() {
           </div>
         </div>
         <div className="flex flex-col space-y-4">
-          <EmbeddedComponentContainer componentName="NotificationBanner">
-            <ConnectNotificationBanner />
-          </EmbeddedComponentContainer>
-
           <EmbeddedComponentContainer componentName="AccountManagement">
             <ConnectAccountManagement />
           </EmbeddedComponentContainer>

diff --git a/package.json b/package.json
@@ -28,8 +28,8 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
-    "@stripe/connect-js": "^3.3.6-beta-1",
-    "@stripe/react-connect-js": "^3.3.10-beta-1",
+    "@stripe/connect-js": "3.3.11-beta-1",
+    "@stripe/react-connect-js": "3.3.13-beta-1",
     "bcrypt": "^5.1.1",
     "bcryptjs": "^2.4.3",
     "class-variance-authority": "^0.7.0",
@@ -48,6 +48,7 @@
     "stripe": "^15.12.0-beta.1",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7",
+    "yarn": "^1.22.22",
     "zod": "^3.22.4"
   },
   "devDependencies": {