refactor(invitations): display error message on the modal instead of toast (#1535)

* refactor: display error message on the modal instead of toast

* refactor: update invitation modal

* refactor: update size of icon in message

* refactor: add close button in message demo example

Author: bishalshrestha013

apps/demo/src/Views/Ui/components/Message.tsx

@@ -71,16 +71,28 @@ export const MessageDemo = () => {
       </Section>
 
       <Section title={t("message.usage.severity")}>
-        <Message message="Info message" severity="info" />
-        <Message message="Success message" severity="success" />
-        <Message message="Warning message" severity="warning" />
-        <Message message="Danger message" severity="danger" />
+        <Message message="Info message" severity="info" enableClose={true} />
+        <Message
+          message="Success message"
+          severity="success"
+          enableClose={true}
+        />
+        <Message
+          message="Warning message"
+          severity="warning"
+          enableClose={true}
+        />
+        <Message
+          message="Danger message"
+          severity="danger"
+          enableClose={true}
+        />
 
         <CodeBlock
-          exampleCode='<Message message="Info message" severity="info" />
-<Message message="Success message" severity="success" />
-<Message message="Warning message" severity="warning" />
-<Message message="Danger message" severity="danger" />'
+          exampleCode='<Message message="Info message" severity="info" enableClose={true} />
+<Message message="Success message" severity="success" enableClose={true} />
+<Message message="Warning message" severity="warning" enableClose={true} />
+<Message message="Danger message" severity="danger" enableClose={true} />'
         />
       </Section>
 

packages/ui/src/assets/css/message.css

@@ -22,10 +22,13 @@
 }
 
 .message .close-message {
-  color: var(--color);
   cursor: pointer;
 }
 
+.message .close-message .pi {
+  font-size: .85rem;
+}
+
 .message.danger {
   --_background-color: var(--dz-danger-color);
   --_border-color: var(--dz-danger-color);

packages/ui/src/assets/css/modal.css

@@ -38,6 +38,9 @@
 }
 
 .dz-modal .dz-modal-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
   padding: 0.7rem;
 }
 

packages/user/src/components/Invitation/InvitationForm.tsx

@@ -4,6 +4,7 @@ import {
   AdditionalFormFields,
 } from "@dzangolab/react-form";
 import { useTranslation } from "@dzangolab/react-i18n";
+import { Message } from "@dzangolab/react-ui";
 import React, { useCallback, useState } from "react";
 import { toast } from "react-toastify";
 import * as zod from "zod";
@@ -45,6 +46,7 @@ export const InvitationForm = ({
   const config = useConfig();
 
   const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState(false);
 
   const getDefaultValues = useCallback(() => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -115,7 +117,7 @@ export const InvitationForm = ({
       .then((response) => {
         if ("data" in response && response.data.status === "ERROR") {
           // TODO better handle errors
-          toast.error(t("messages.invite.error"));
+          setError(true);
         } else {
           toast.success(t("messages.invite.success"));
 
@@ -125,7 +127,7 @@ export const InvitationForm = ({
         }
       })
       .catch(() => {
-        toast.error(t("messages.invite.error"));
+        setError(true);
       })
       .finally(() => {
         setSubmitting(false);
@@ -175,20 +177,32 @@ export const InvitationForm = ({
   }
 
   return (
-    <Provider
-      onSubmit={onSubmit}
-      defaultValues={getDefaultValues()}
-      validationSchema={InvitationFormSchema}
-      validationTriggerKey={i18n.language}
-    >
-      <InvitationFormFields
-        renderAdditionalFields={additionalInvitationFields?.renderFields}
-        apps={apps}
-        expiryDateField={expiryDateField}
-        loading={submitting}
-        onCancel={onCancel}
-        roles={roles}
-      />
-    </Provider>
+    <>
+      {error && (
+        <Message
+          enableClose={true}
+          message={t("messages.invite.error")}
+          onClose={() => {
+            setError(false);
+          }}
+          severity="danger"
+        />
+      )}
+      <Provider
+        onSubmit={onSubmit}
+        defaultValues={getDefaultValues()}
+        validationSchema={InvitationFormSchema}
+        validationTriggerKey={i18n.language}
+      >
+        <InvitationFormFields
+          renderAdditionalFields={additionalInvitationFields?.renderFields}
+          apps={apps}
+          expiryDateField={expiryDateField}
+          loading={submitting}
+          onCancel={onCancel}
+          roles={roles}
+        />
+      </Provider>
+    </>
   );
 };