Merged in fix/toast-triggering (pull request #475)

fix: issue with toasts not triggering on page load and fix padding issue

Approved-by: Michael Zetterberg

components/Profile/AddCreditCardButton/index.tsx

@@ -29,21 +29,27 @@ function useAddCardResultToast() {
     const error = searchParams.get("error")
 
     if (success) {
-      toast.success(
+      setTimeout(() => {
-        intl.formatMessage({ id: "Your card was successfully saved!" })
+        toast.success(
-      )
+          intl.formatMessage({ id: "Your card was successfully saved!" })
+        )
+      })
     } else if (cancel) {
-      toast.warning(
+      setTimeout(() => {
-        intl.formatMessage({
+        toast.warning(
-          id: "You canceled adding a new credit card.",
+          intl.formatMessage({
-        })
+            id: "You canceled adding a new credit card.",
-      )
+          })
+        )
+      })
     } else if (failure || error) {
-      toast.error(
+      setTimeout(() => {
-        intl.formatMessage({
+        toast.error(
-          id: "Something went wrong and we couldn't add your card. Please try again later.",
+          intl.formatMessage({
-        })
+            id: "Something went wrong and we couldn't add your card. Please try again later.",
-      )
+          })
+        )
+      })
     }
 
     router.replace(pathname)

components/TempDesignSystem/Toasts/toasts.module.css

@@ -9,7 +9,7 @@
   width: var(--width);
 }
 
-.message {
+.toast .message {
   padding: var(--Spacing-x2) var(--Spacing-x-one-and-half);
 }