1275 macro components2 (passportxyz#1425)

* fix(design): updating macro components to match design

* fix(interface): updating refreshstampmodal toast

* fix(interface): updating macro components

* fix(interface): toasts all use <donetoastcontent> now

* fix(app): updated toast duration

* feat(inteface): adding toasts to 1 click flow

* fix(ui): changing expired stamp toast language

* fix(interface): toasts all use <donetoastcontent> now

* fix(tests): adds unit test for 1 click flow toasts

* fix(app): adjusting toast time for removal modal. updating expired stamp toast language

app/__tests__/pages/Dashboard.test.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { fireEvent, screen, waitFor } from "@testing-library/react";
+import { fireEvent, screen, waitFor, render } from "@testing-library/react";
 import Dashboard from "../../pages/Dashboard";
 import { UserContextState } from "../../context/userContext";
 import { mockAddress } from "../../__test-fixtures__/onboardHookValues";
@@ -13,7 +13,7 @@ import {
   renderWithContext,
 } from "../../__test-fixtures__/contextTestHelpers";
 import { CeramicContextState, IsLoadingPassportState } from "../../context/ceramicContext";
-// import {RefreshStampModal} from "../../components/RefreshStampModal";
+import { closeAllToasts } from "../../__test-fixtures__/toastTestHelpers";
 
 jest.mock("../../utils/onboard.ts");
 
@@ -149,7 +149,30 @@ describe("when viewer connection status is connecting", () => {
   });
 });
 
-describe.only("when viewer connection status is connected", () => {
+describe.only("dashboard notifications", () => {
+  // using https://www.npmjs.com/package/jest-localstorage-mock to mock localStorage
+  beforeEach(async () => {
+    await closeAllToasts();
+    localStorage.removeItem("successfulRefresh");
+  });
+  it("should show success toast when stamps are verified", async () => {
+    localStorage.setItem("successfulRefresh", "true");
+    render(
+      <Router>
+        <Dashboard />
+      </Router>
+    );
+    expect(screen.getByText("Your stamps are verified!")).toBeInTheDocument();
+  });
+  it("should show error toast when stamps aren't verified", async () => {
+    localStorage.setItem("successfulRefresh", "false");
+    render(
+      <Router>
+        <Dashboard />
+      </Router>
+    );
+    expect(screen.getByText("Stamps weren't verifed. Please try again.")).toBeInTheDocument();
+  });
   it("should show a loading stamps alert", () => {
     (framework.useViewerConnection as jest.Mock).mockReturnValue([{ status: "connected" }]);
     renderWithContext(

app/components/DoneToastContent.tsx

@@ -7,7 +7,7 @@ export type CustomToastProps = {
   platformId?: PLATFORM_ID | undefined;
   providerId?: PROVIDER_ID;
   title: string;
-  body: string;
+  body?: string | JSX.Element;
   icon: string;
   result: any;
   message?: boolean | string;
@@ -25,22 +25,22 @@ export const DoneToastContent = ({
 }: CustomToastProps): JSX.Element => {
   return (
     <div
-      className="rounded-md bg-blue-darkblue text-white"
+      className="rounded-md bg-color-1 text-background-2"
       data-testid={`toast-done-${(platformId && platformId.toLowerCase()) || (providerId && providerId.toLowerCase())}`}
     >
       <div className="flex p-4">
         <div className="mr-2">
-          <button className="mt-1 cursor-not-allowed rounded-full bg-gray-100">
+          <div className="mt-1 cursor-not-allowed rounded-full">
             <img alt="information circle" className="sticky top-0 h-6" src={icon} />
-          </button>
+          </div>
         </div>
-        <div className="flex-grow">
+        <div className="flex max-w-[200px] flex-col md:max-w-[390px]">
           <h2 className="mb-2 text-lg font-bold">{title}</h2>
-          <p>{message || body}</p>
+          {message ? <p>{message}</p> : body}
         </div>
-        <div>
+        <div className="flex flex-grow items-start justify-end">
           <button className="sticky top-0" onClick={result.onClose}>
-            <img alt="close button" className="rounded-lg hover:bg-gray-500" src="./assets/x-icon.svg" />
+            <img alt="close button" className="rounded-lg hover:bg-gray-500" src="./assets/x-icon-black.svg" />
           </button>
         </div>
       </div>

app/components/ExpiredStampModal.tsx

@@ -8,6 +8,9 @@ import { completedIcon } from "./Progress";
 import { Button } from "./Button";
 import { LoadButton } from "./LoadButton";
 
+// --- Style Components
+import { DoneToastContent } from "./DoneToastContent";
+
 export type ExpiredStampModalProps = {
   isOpen: boolean;
   onClose: () => void;
@@ -24,16 +27,15 @@ export const ExpiredStampModal = ({ isOpen, onClose }: ExpiredStampModalProps) =
 
   const successToast = () => {
     toast({
-      duration: 5000,
+      duration: 9000,
       isClosable: true,
       render: (result: any) => (
-        <div className="flex justify-between rounded-md bg-blue-darkblue p-4 text-white">
-          {completedIcon("./assets/purple-check-icon.svg")}
-          <p className="py-1 px-3">Your Passport has been reset.</p>
-          <button className="sticky top-0" onClick={result.onClose}>
-            <img alt="close button" className="rounded-lg hover:bg-gray-500" src="./assets/x-icon.svg" />
-          </button>
-        </div>
+        <DoneToastContent
+          title="Success"
+          message="Your expired stamps have been removed."
+          icon="./assets/check-icon2.svg"
+          result={result}
+        />
       ),
     });
   };

app/components/GenericPlatform.tsx

@@ -58,7 +58,8 @@ enum VerificationStatuses {
 
 const iamUrl = process.env.NEXT_PUBLIC_PASSPORT_IAM_URL || "";
 
-const checkIcon = "../../assets/check-icon.svg";
+const success = "../../assets/check-icon2.svg";
+const fail = "../assets/verification-failed-bright.svg";
 
 type GenericPlatformProps = PlatformProps & { onClose: () => void };
 
@@ -133,14 +134,10 @@ export const GenericPlatform = ({ platFormGroupSpec, platform, onClose }: Generi
         duration: 9000,
         isClosable: true,
         render: (result: any) => (
-          <div className="rounded-md bg-blue-darkblue p-2 text-white">
+          <div className="rounded-md bg-color-1 text-background-2">
             <div className="flex p-4">
               <button className="inline-flex flex-shrink-0 cursor-not-allowed">
-                <img
-                  alt="information circle"
-                  className="sticky top-0 mb-20 p-2"
-                  src="./assets/information-circle-icon.svg"
-                />
+                <img alt="information circle" className="sticky top-0 mb-20 p-2" src={success} />
               </button>
               <div className="flex-grow pl-6">
                 <h2 className="mb-2 text-lg font-bold">Sponsored through Gitcoin for Bright ID</h2>
@@ -150,7 +147,7 @@ export const GenericPlatform = ({ platFormGroupSpec, platform, onClose }: Generi
                 </p>
               </div>
               <button className="inline-flex flex-shrink-0 rounded-lg" onClick={result.onClose}>
-                <img alt="close button" className="rounded-lg p-2 hover:bg-gray-500" src="./assets/x-icon.svg" />
+                <img alt="close button" className="rounded-lg p-2 hover:bg-gray-500" src="./assets/x-icon-black.svg" />
               </button>
             </div>
           </div>
@@ -159,11 +156,16 @@ export const GenericPlatform = ({ platFormGroupSpec, platform, onClose }: Generi
       datadogLogs.logger.info("Successfully sponsored user on BrightId", { platformId: platform.platformId });
     } else {
       toast({
-        title: "Failure",
-        description: "Failed to trigger BrightID Sponsorship",
-        status: "error",
         duration: 9000,
         isClosable: true,
+        render: (result: any) => (
+          <DoneToastContent
+            title="Failure"
+            message="Failed to trigger BrightID Sponsorship"
+            icon={fail}
+            result={result}
+          />
+        ),
       });
       datadogLogs.logger.error("Error sponsoring user", { platformId: platform.platformId });
       datadogRum.addError("Failed to sponsor user on BrightId", { platformId: platform.platformId });
@@ -267,7 +269,7 @@ export const GenericPlatform = ({ platFormGroupSpec, platform, onClose }: Generi
       doneToast(
         "Verification Failed",
         "There was an error verifying your stamp. Please try again.",
-        "../../assets/verification-failed.svg",
+        fail,
         platform.platformId as PLATFORM_ID
       );
     } finally {
@@ -322,7 +324,7 @@ export const GenericPlatform = ({ platFormGroupSpec, platform, onClose }: Generi
         return {
           title: "Done!",
           body: `All ${platform.platformId} data points verified.`,
-          icon: checkIcon,
+          icon: success,
           platformId: platform.platformId as PLATFORM_ID,
         };
       case VerificationStatuses.ReVerified:
@@ -331,7 +333,7 @@ export const GenericPlatform = ({ platFormGroupSpec, platform, onClose }: Generi
           body: `Successfully re-verified ${platform.platformId} data ${
             updatedVerifiedProviders.size > 1 ? "points" : "point"
           }.`,
-          icon: checkIcon,
+          icon: success,
           platformId: platform.platformId as PLATFORM_ID,
         };
       case VerificationStatuses.PartiallyVerified:
@@ -340,14 +342,14 @@ export const GenericPlatform = ({ platFormGroupSpec, platform, onClose }: Generi
           body: `Successfully verified ${platform.platformId} data ${
             updatedMinusInitial.size > 1 ? "points" : "point"
           }.`,
-          icon: checkIcon,
+          icon: success,
           platformId: platform.platformId as PLATFORM_ID,
         };
       case VerificationStatuses.AllRemoved:
         return {
           title: "Success!",
           body: `All ${platform.platformId} data points removed.`,
-          icon: checkIcon,
+          icon: success,
           platformId: platform.platformId as PLATFORM_ID,
         };
       case VerificationStatuses.PartiallyRemoved:
@@ -356,7 +358,7 @@ export const GenericPlatform = ({ platFormGroupSpec, platform, onClose }: Generi
           body: `Successfully removed ${platform.platformId} data ${
             initialMinusUpdated.size > 1 ? "points" : "point"
           }.`,
-          icon: checkIcon,
+          icon: success,
           platformId: platform.platformId as PLATFORM_ID,
         };
       case VerificationStatuses.PartiallyRemovedAndVerified:
@@ -365,14 +367,14 @@ export const GenericPlatform = ({ platFormGroupSpec, platform, onClose }: Generi
           body: `${initialMinusUpdated.size} ${platform.platformId} data ${
             initialMinusUpdated.size > 1 ? "points" : "point"
           } removed and ${updatedMinusInitial.size} verified.`,
-          icon: checkIcon,
+          icon: success,
           platformId: platform.platformId as PLATFORM_ID,
         };
       case VerificationStatuses.Failed:
         return {
           title: "Verification Failed",
           body: "Please make sure you fulfill the requirements for this stamp.",
-          icon: "../../assets/verification-failed.svg",
+          icon: fail,
           platformId: platform.platformId as PLATFORM_ID,
         };
     }

app/components/Progress.tsx

@@ -24,7 +24,7 @@ type StepComponentProps = {
 
 export const completedIcon = (src: string) => (
   <span className="step-icon step-icon-completed flex h-9 items-center">
-    <span className="relative z-10 flex h-8 w-8 items-center justify-center rounded-full bg-teal-600">
+    <span className="relative z-10 flex h-8 w-8 items-center justify-center rounded-full">
       <img alt="completed icon" className="sticky top-0 h-6" src={src} />
     </span>
   </span>

app/components/RefreshMyStampsModal.tsx

@@ -42,12 +42,12 @@ export const RefreshMyStampsModal = ({
             </>
           ) : (
             <div className="p-4 md:p-6">
-              <div className="font-heading text-3xl text-white">Searching for Stamps</div>
-              <div className="mt-2 font-alt text-white">
+              <div className="font-heading text-3xl text-color-1">Searching for Stamps</div>
+              <div className="mt-2 font-alt text-color-3">
                 Give us a moment while we check your account for existing Stamps.
               </div>
               <RefreshStampsProgressSteps steps={steps} />
-              <div className="text-center text-white">Please do not close the window.</div>
+              <div className="text-center text-color-3">Please do not close the window.</div>
             </div>
           )}
         </ModalContent>

app/components/RefreshMyStampsModalContent.tsx

@@ -22,10 +22,6 @@ import { CeramicContext } from "../context/ceramicContext";
 // --- Datadog
 import { datadogLogs } from "@datadog/browser-logs";
 
-// --- UI components
-// TODO: re-add toasts after design updates
-import { NoSymbolIcon } from "@heroicons/react/20/solid";
-
 // --- App components
 import { RefreshMyStampsModalContentCardList } from "../components/RefreshMyStampsModalContentCardList";
 import { reduceStampResponse } from "../utils/helpers";
@@ -84,8 +80,10 @@ export const RefreshMyStampsModalContent = ({
       datadogLogs.logger.info("Successfully saved Stamp, onboard one step verification", {
         providers: selectedProviders,
       });
+      localStorage.setItem("successfulRefresh", "true");
     } catch (e) {
       datadogLogs.logger.error("Verification Error, onboard one step verification", { error: e });
+      localStorage.setItem("successfulRefresh", "false");
     }
     setLoading(false);
     navigate("/dashboard");
@@ -126,31 +124,11 @@ export const RefreshMyStampsModalContent = ({
         setVerifiedProviders([...actualVerifiedProviders]);
         setSelectedProviders([...actualVerifiedProviders]);
       }
-
-      // TODO: re-add toasts after design updates
-      // // Get the done toast messages
-      // const { title, body, icon, platformId } = getDoneToastMessages(
-      //   verificationStatus,
-      //   updatedVerifiedProviders,
-      //   initialMinusUpdated,
-      //   updatedMinusInitial
-      // );
-
-      // // Display done toast
-      // doneToast(title, body, icon, platformId);
-
-      // setLoading(false);
     } catch (e: unknown) {
       // TODO: update datadog logger
       // datadogLogs.logger.error("Verification Error", { error: e, platform: platform.platformId });
       console.log(e);
       throw new Error();
-      // doneToast(
-      //   "Verification Failed",
-      //   "There was an error verifying your stamp. Please try again.",
-      //   "../../assets/verification-failed.svg",
-      //   platform.platformId as PLATFORM_ID
-      // );
     }
   };
 
@@ -178,7 +156,7 @@ export const RefreshMyStampsModalContent = ({
                 setSelectedProviders={setSelectedProviders}
               />
             </div>
-            <div className="mt-8 cursor-pointer text-center text-pink-300 underline">
+            <div className="mt-8 cursor-pointer text-center text-color-3 underline">
               <a onClick={() => setShowDataInfo(!showDataInfo)}>How is my data stored?</a>
             </div>
             {showDataInfo && (
@@ -209,14 +187,9 @@ export const RefreshMyStampsModalContent = ({
           </div>
         ) : (
           <div className="flex flex-col items-center text-center text-white">
-            <button
-              className="mt-4 mb-6 flex h-10 w-10 items-center justify-center self-center rounded-full border border-accent-2"
-              onClick={onClose}
-            >
-              <NoSymbolIcon className="h-7 w-7" aria-hidden="true" fill="var(--color-accent-3)" />
-            </button>
+            <div className="mt-4 mb-6 flex h-10 w-10"></div>
             <div className="w-3/4 text-3xl">No New Web3 Stamps Detected</div>
-            <div className="my-20 text-xl text-muted">
+            <div className="my-20 text-xl text-color-3">
               We did not find any new Web3 stamps to add to your passport. Completing the actions for a web3 stamp and
               resubmitting will ensure that stamp is added (for example: Obtain an ENS name, NFT, etc.). Please return
               to the dashboard and select additional stamps to verify your unique humanity by connecting to external

app/components/RefreshStampModal.tsx

@@ -8,6 +8,9 @@ import { Button } from "./Button";
 // --- Datadog
 import { datadogLogs } from "@datadog/browser-logs";
 
+// --- Style Components
+import { DoneToastContent } from "./DoneToastContent";
+
 export type RefreshStampModalProps = {
   isOpen: boolean;
   onClose: () => void;
@@ -51,16 +54,15 @@ export const RefreshStampModal = ({ isOpen, onClose }: RefreshStampModalProps) =
 
   const successToast = () => {
     toast({
-      duration: 5000,
+      duration: 9000,
       isClosable: true,
       render: (result: any) => (
-        <div className="flex justify-between rounded-md bg-blue-darkblue p-4 text-white">
-          {completedIcon("./assets/purple-check-icon.svg")}
-          <p className="py-1 px-3">Your Passport has been reset.</p>
-          <button className="sticky top-0" onClick={result.onClose}>
-            <img alt="close button" className="rounded-lg hover:bg-gray-500" src="./assets/x-icon.svg" />
-          </button>
-        </div>
+        <DoneToastContent
+          title="Reset"
+          message="Your Passport has been reset."
+          icon="./assets/check-icon2.svg"
+          result={result}
+        />
       ),
     });
   };

app/components/RefreshStampsProgressSteps.tsx

@@ -49,7 +49,7 @@ export default function RefreshStampsProgressSteps({ steps }: RefreshStampsProgr
                   </span>
                 </span>
                 <span className="ml-12 -mt-2 flex min-w-0 flex-col">
-                  <span className="text-sm font-medium text-white">{step.name}</span>
+                  <span className="text-sm font-medium text-color-3">{step.name}</span>
                 </span>
               </>
             ) : (