From 20721d50a125a4933dc7a5c7a634da9d0a88277c Mon Sep 17 00:00:00 2001
From: Kabin <kabin@dzangolab.com>
Date: Mon, 16 Dec 2024 13:25:13 +0545
Subject: [PATCH 1/4] feat: add stub invitation form

---
 .../components/invitation/InvitationForm.vue  | 98 +++++++++++++++++++
 packages/vue-user/src/types/index.ts          |  2 +
 packages/vue-user/src/types/invitation.ts     | 20 ++++
 3 files changed, 120 insertions(+)
 create mode 100644 packages/vue-user/src/components/invitation/InvitationForm.vue
 create mode 100644 packages/vue-user/src/types/invitation.ts

diff --git a/packages/vue-user/src/components/invitation/InvitationForm.vue b/packages/vue-user/src/components/invitation/InvitationForm.vue
new file mode 100644
index 000000000..1cba9442d
--- /dev/null
+++ b/packages/vue-user/src/components/invitation/InvitationForm.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="invitation-form">
+    <Form @submit="onSubmit">
+      <Email v-model="formData.email" label="Email" />
+
+      <SelectInput
+        v-model="formData.app"
+        :options="updatedApps"
+        label="App"
+        placeholder="Select app"
+      />
+
+      <SelectInput
+        v-model="formData.role"
+        :options="updatedRoles"
+        label="Role"
+        placeholder="Select role"
+      />
+    </Form>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "InvitationForm",
+};
+</script>
+
+<script setup lang="ts">
+import { Form, Email, SelectInput } from "@dzangolab/vue3-form";
+import { computed, reactive } from "vue";
+
+import type {
+  InvitationAppOption,
+  InvitationPayload,
+  InvitationRoleOption,
+} from "../../types";
+import type { PropType } from "vue";
+
+const props = defineProps({
+  apps: {
+    default: () => [],
+    type: Array as PropType<Array<InvitationAppOption>>,
+  },
+  roles: {
+    default: () => [],
+    type: Array as PropType<Array<InvitationRoleOption>>,
+  },
+});
+
+const emit = defineEmits(["submit"]);
+
+const formData = reactive({
+  app: undefined,
+  email: "",
+  role: undefined,
+});
+
+const updatedApps = computed(() => {
+  let modifiedApps = props.apps || [];
+  const currentOrigin = window.location.origin;
+
+  const appToMove = modifiedApps.find((app) => app.origin === currentOrigin);
+
+  if (appToMove) {
+    modifiedApps = modifiedApps.filter((app) => app.origin !== currentOrigin);
+    modifiedApps = [{ ...appToMove, name: "This app" }, ...modifiedApps];
+  }
+
+  const modifiedLabels = modifiedApps.map((app) => {
+    if (app.label) {
+      return { value: app.id, label: app.label };
+    }
+
+    return {
+      value: app.id,
+      label: app.name,
+    };
+  });
+
+  return modifiedLabels;
+});
+
+const updatedRoles = computed(() => {
+  return (
+    props.roles?.map((role) => {
+      return {
+        label: role.name,
+        value: role.name,
+      };
+    }) || []
+  );
+});
+
+const onSubmit = (data: InvitationPayload) => {
+  emit("submit", data);
+};
+</script>
diff --git a/packages/vue-user/src/types/index.ts b/packages/vue-user/src/types/index.ts
index fea484796..4b5f97edf 100644
--- a/packages/vue-user/src/types/index.ts
+++ b/packages/vue-user/src/types/index.ts
@@ -8,6 +8,8 @@ export type {
 
 export type { DzangolabVueUserConfig } from "./config";
 
+export type { InvitationAppOption, InvitationPayload, InvitationRoleOption } from "./invitation";
+
 export type { DzangolabVueUserPluginOptions } from "./plugin";
 
 export type { RouteOverride, RouteOverrides } from "./router";
diff --git a/packages/vue-user/src/types/invitation.ts b/packages/vue-user/src/types/invitation.ts
new file mode 100644
index 000000000..c1ff30003
--- /dev/null
+++ b/packages/vue-user/src/types/invitation.ts
@@ -0,0 +1,20 @@
+interface InvitationAppOption {
+  id: number;
+  name: string;
+  origin: string;
+  supportedRoles: InvitationRoleOption[];
+  label?: string;
+}
+
+interface InvitationPayload {
+  email: string;
+  role: string;
+  appId?: number;
+}
+
+interface InvitationRoleOption {
+  name: string;
+  id: number;
+}
+
+export type { InvitationAppOption, InvitationPayload, InvitationRoleOption };

From 2edc634bd2f88589b87465ad4f9b136849fb6724 Mon Sep 17 00:00:00 2001
From: Kabin <kabin@dzangolab.com>
Date: Mon, 16 Dec 2024 17:26:25 +0545
Subject: [PATCH 2/4] feat: update invitation form and add basic demo

---
 apps/demo/src/locales/en/user.json            | 12 ++++
 apps/demo/src/locales/fr/user.json            | 12 ++++
 apps/demo/src/router/index.ts                 |  2 +
 apps/demo/src/router/user.ts                  | 22 +++++++
 apps/demo/src/views/User/Index.vue            | 13 +++++
 apps/demo/src/views/User/UserPage.vue         | 53 +++++++++++++++++
 .../src/views/User/invitationForm/Index.vue   | 57 +++++++++++++++++++
 packages/vue-form/src/components/Form.vue     |  4 +-
 packages/vue-user/src/components/index.ts     |  1 +
 .../components/invitation/InvitationForm.vue  | 31 +++++++---
 packages/vue-user/src/index.ts                |  1 +
 packages/vue-user/src/types/index.ts          |  6 +-
 12 files changed, 203 insertions(+), 11 deletions(-)
 create mode 100644 apps/demo/src/locales/en/user.json
 create mode 100644 apps/demo/src/locales/fr/user.json
 create mode 100644 apps/demo/src/router/user.ts
 create mode 100644 apps/demo/src/views/User/Index.vue
 create mode 100644 apps/demo/src/views/User/UserPage.vue
 create mode 100644 apps/demo/src/views/User/invitationForm/Index.vue

diff --git a/apps/demo/src/locales/en/user.json b/apps/demo/src/locales/en/user.json
new file mode 100644
index 000000000..89f72d935
--- /dev/null
+++ b/apps/demo/src/locales/en/user.json
@@ -0,0 +1,12 @@
+{
+  "message": {
+    "invitation": {
+      "success": "Invitation sent to {user} successfully"
+    }
+  },
+  "label": {
+    "basic": "Basic",
+    "invitationForm": "Invitation form"
+  },
+  "title": "User library"
+}
diff --git a/apps/demo/src/locales/fr/user.json b/apps/demo/src/locales/fr/user.json
new file mode 100644
index 000000000..89f72d935
--- /dev/null
+++ b/apps/demo/src/locales/fr/user.json
@@ -0,0 +1,12 @@
+{
+  "message": {
+    "invitation": {
+      "success": "Invitation sent to {user} successfully"
+    }
+  },
+  "label": {
+    "basic": "Basic",
+    "invitationForm": "Invitation form"
+  },
+  "title": "User library"
+}
diff --git a/apps/demo/src/router/index.ts b/apps/demo/src/router/index.ts
index 4cb34d1b5..149b027c7 100644
--- a/apps/demo/src/router/index.ts
+++ b/apps/demo/src/router/index.ts
@@ -3,6 +3,7 @@ import { createRouter, createWebHashHistory } from "vue-router";
 import { feature } from "@/config";
 import form from "./form";
 import ui from "./ui";
+import user from "./user";
 
 // import About from "@/views/About.vue";
 import Home from "@/views/Home.vue";
@@ -49,6 +50,7 @@ const router: Router = createRouter({
     },
     ...form,
     ...ui,
+    ...user,
   ],
 } as RouterOptions);
 
diff --git a/apps/demo/src/router/user.ts b/apps/demo/src/router/user.ts
new file mode 100644
index 000000000..d23f4a624
--- /dev/null
+++ b/apps/demo/src/router/user.ts
@@ -0,0 +1,22 @@
+const InvitationForm = () => import("@/views/User/invitationForm/Index.vue");
+const User = () => import("@/views/User/Index.vue");
+
+const routes = [
+  {
+    path: "/user",
+    children: [
+      {
+        component: InvitationForm,
+        name: "invitationForm",
+        path: "invitation-form",
+      },
+      {
+        component: User,
+        name: "user",
+        path: "",
+      },
+    ],
+  },
+];
+
+export default routes;
diff --git a/apps/demo/src/views/User/Index.vue b/apps/demo/src/views/User/Index.vue
new file mode 100644
index 000000000..c0a9120fe
--- /dev/null
+++ b/apps/demo/src/views/User/Index.vue
@@ -0,0 +1,13 @@
+<template>
+  <UserPage :title="$t('ui.title')" />
+</template>
+
+<script lang="ts">
+export default {
+  name: "User",
+};
+</script>
+
+<script setup lang="ts">
+import UserPage from "./UserPage.vue";
+</script>
diff --git a/apps/demo/src/views/User/UserPage.vue b/apps/demo/src/views/User/UserPage.vue
new file mode 100644
index 000000000..bf7c109b4
--- /dev/null
+++ b/apps/demo/src/views/User/UserPage.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="demo">
+    <Sidebar :menu="menu" class="demo-aside" no-header />
+    <div class="demo-main">
+      <Page :title="title" :sub-title="subTitle">
+        <template #toolbar>
+          <slot name="toolbar"></slot>
+        </template>
+        <slot></slot>
+      </Page>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  name: "UserPage",
+};
+</script>
+
+<script setup lang="ts">
+import { Sidebar } from "@dzangolab/vue3-layout";
+
+import type { PropType } from "vue";
+
+defineProps({
+  subTitle: {
+    default: undefined,
+    required: false,
+    type: String as PropType<string>,
+  },
+  title: {
+    default: undefined,
+    required: false,
+    type: String as PropType<string>,
+  },
+});
+
+const menu = [
+  {
+    name: "Get started",
+    routeName: "user",
+  },
+  {
+    name: "Invitation form",
+    routeName: "invitationForm",
+  },
+];
+</script>
+
+<style lang="css">
+@import "@/assets/css/demoPage.css";
+</style>
diff --git a/apps/demo/src/views/User/invitationForm/Index.vue b/apps/demo/src/views/User/invitationForm/Index.vue
new file mode 100644
index 000000000..0b48eab14
--- /dev/null
+++ b/apps/demo/src/views/User/invitationForm/Index.vue
@@ -0,0 +1,57 @@
+<template>
+  <UserPage
+    :title="$t('user.label.invitationForm')"
+    class="demo-invitation-form"
+  >
+    <template #toolbar>
+      <router-link :to="{ name: 'user' }" class="back">
+        {{ $t("common.back") }}
+      </router-link>
+    </template>
+
+    <section>
+      <h2>{{ $t("user.label.basic") }}</h2>
+
+      <div class="section-content">
+        <!-- eslint-disable -->
+        <SshPre language="html-vue">
+          &lt;template&gt;
+            &lt;InvitationForm @submit="onSubmit" /&gt;
+          &lt;/template&gt;
+
+          &lt;script setup lang="ts"&gt;
+          import { InvitationForm } from "@dzangolab/vue3-user";
+
+          import type { InvitationPayload } from "@dzangolab/vue3-user";
+
+          const onSubmit = (formData: InvitationPayload) => {
+            ...
+          };
+          &lt;/script&gt;
+        </SshPre>
+        <!-- eslint-enable -->
+
+        <InvitationForm @submit="onSubmit" />
+      </div>
+    </section>
+  </UserPage>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "@dzangolab/vue3-i18n";
+import { InvitationForm } from "@dzangolab/vue3-user";
+import { notify } from "@kyvg/vue3-notification";
+
+import UserPage from "../UserPage.vue";
+
+import type { InvitationPayload } from "@dzangolab/vue3-user";
+
+const { t } = useI18n();
+
+const onSubmit = (formData: InvitationPayload) => {
+  notify({
+    text: t("user.message.invitation.success", { user: formData.email }),
+    type: "success",
+  });
+};
+</script>
diff --git a/packages/vue-form/src/components/Form.vue b/packages/vue-form/src/components/Form.vue
index 8bffbf100..b94e7a328 100644
--- a/packages/vue-form/src/components/Form.vue
+++ b/packages/vue-form/src/components/Form.vue
@@ -15,7 +15,7 @@ import { Form } from "vee-validate";
 
 const emit = defineEmits(["submit"]);
 
-const onSubmit = () => {
-  emit("submit");
+const onSubmit = (data: object) => {
+  emit("submit", data);
 };
 </script>
diff --git a/packages/vue-user/src/components/index.ts b/packages/vue-user/src/components/index.ts
index 172a8c06e..b40c709d5 100644
--- a/packages/vue-user/src/components/index.ts
+++ b/packages/vue-user/src/components/index.ts
@@ -1,4 +1,5 @@
 export { default as DropdownUserMenu } from "./DropdownUserMenu.vue";
+export { default as InvitationForm } from "./invitation/InvitationForm.vue";
 export { default as LoginForm } from "./LoginForm.vue";
 export { default as PasswordResetForm } from "./PasswordResetForm.vue";
 export { default as PasswordResetRequestForm } from "./PasswordResetRequestForm.vue";
diff --git a/packages/vue-user/src/components/invitation/InvitationForm.vue b/packages/vue-user/src/components/invitation/InvitationForm.vue
index 1cba9442d..e748180d2 100644
--- a/packages/vue-user/src/components/invitation/InvitationForm.vue
+++ b/packages/vue-user/src/components/invitation/InvitationForm.vue
@@ -4,18 +4,23 @@
       <Email v-model="formData.email" label="Email" />
 
       <SelectInput
-        v-model="formData.app"
+        v-if="apps?.length"
+        v-model="formData.appId"
         :options="updatedApps"
         label="App"
         placeholder="Select app"
       />
 
       <SelectInput
+        v-if="apps?.length || roles?.length"
         v-model="formData.role"
+        :disabled="Boolean(!updatedRoles?.length)"
         :options="updatedRoles"
         label="Role"
         placeholder="Select role"
       />
+
+      <FormActions :submit-label="submitLabel" />
     </Form>
   </div>
 </template>
@@ -27,8 +32,8 @@ export default {
 </script>
 
 <script setup lang="ts">
-import { Form, Email, SelectInput } from "@dzangolab/vue3-form";
-import { computed, reactive } from "vue";
+import { Email, Form, FormActions, SelectInput } from "@dzangolab/vue3-form";
+import { computed, ref } from "vue";
 
 import type {
   InvitationAppOption,
@@ -42,19 +47,23 @@ const props = defineProps({
     default: () => [],
     type: Array as PropType<Array<InvitationAppOption>>,
   },
+  invitationData: {
+    default: () => ({}) as InvitationPayload,
+    type: Object,
+  },
   roles: {
     default: () => [],
     type: Array as PropType<Array<InvitationRoleOption>>,
   },
+  submitLabel: {
+    default: "Invite user",
+    type: String,
+  },
 });
 
 const emit = defineEmits(["submit"]);
 
-const formData = reactive({
-  app: undefined,
-  email: "",
-  role: undefined,
-});
+const formData = ref<InvitationPayload>({} as InvitationPayload);
 
 const updatedApps = computed(() => {
   let modifiedApps = props.apps || [];
@@ -95,4 +104,10 @@ const updatedRoles = computed(() => {
 const onSubmit = (data: InvitationPayload) => {
   emit("submit", data);
 };
+
+const prepareComponent = () => {
+  formData.value = props.invitationData as InvitationPayload;
+};
+
+prepareComponent();
 </script>
diff --git a/packages/vue-user/src/index.ts b/packages/vue-user/src/index.ts
index 6e56673f7..7e3b9e016 100644
--- a/packages/vue-user/src/index.ts
+++ b/packages/vue-user/src/index.ts
@@ -56,6 +56,7 @@ export type {
   AuthTokens,
   DzangolabVueUserConfig,
   DzangolabVueUserPluginOptions,
+  InvitationPayload,
   LoginCredentials,
   PasswordResetPayload,
   PasswordResetRequestPayload,
diff --git a/packages/vue-user/src/types/index.ts b/packages/vue-user/src/types/index.ts
index 4b5f97edf..16700b59d 100644
--- a/packages/vue-user/src/types/index.ts
+++ b/packages/vue-user/src/types/index.ts
@@ -8,7 +8,11 @@ export type {
 
 export type { DzangolabVueUserConfig } from "./config";
 
-export type { InvitationAppOption, InvitationPayload, InvitationRoleOption } from "./invitation";
+export type {
+  InvitationAppOption,
+  InvitationPayload,
+  InvitationRoleOption,
+} from "./invitation";
 
 export type { DzangolabVueUserPluginOptions } from "./plugin";
 

From 6f063d3bfa71fd0f4bca65f6352e63cd603fabfc Mon Sep 17 00:00:00 2001
From: Kabin <kabin@dzangolab.com>
Date: Mon, 16 Dec 2024 18:09:40 +0545
Subject: [PATCH 3/4] refactor: filter roles based on selected app

---
 .../src/components/invitation/InvitationForm.vue      | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/packages/vue-user/src/components/invitation/InvitationForm.vue b/packages/vue-user/src/components/invitation/InvitationForm.vue
index e748180d2..4bd983228 100644
--- a/packages/vue-user/src/components/invitation/InvitationForm.vue
+++ b/packages/vue-user/src/components/invitation/InvitationForm.vue
@@ -91,6 +91,17 @@ const updatedApps = computed(() => {
 });
 
 const updatedRoles = computed(() => {
+  if (formData.value?.appId) {
+    return props.apps
+      ?.find((app) => app.id === formData.value.appId)
+      ?.supportedRoles.map((role) => {
+        return {
+          label: role.name,
+          value: role.name,
+        };
+      });
+  }
+
   return (
     props.roles?.map((role) => {
       return {

From 19e91efd5b0832c4bae9d3ad7ae246b25524a64d Mon Sep 17 00:00:00 2001
From: Kabin <kabin@dzangolab.com>
Date: Tue, 17 Dec 2024 11:13:42 +0545
Subject: [PATCH 4/4] feat: add  app and role field demo with validation

---
 apps/demo/src/locales/en/user.json            |   4 +-
 apps/demo/src/locales/fr/user.json            |   4 +-
 .../src/views/User/invitationForm/Index.vue   | 140 ++++++++++++++++++
 .../components/invitation/InvitationForm.vue  |  19 +++
 4 files changed, 165 insertions(+), 2 deletions(-)

diff --git a/apps/demo/src/locales/en/user.json b/apps/demo/src/locales/en/user.json
index 89f72d935..a49c843c2 100644
--- a/apps/demo/src/locales/en/user.json
+++ b/apps/demo/src/locales/en/user.json
@@ -6,7 +6,9 @@
   },
   "label": {
     "basic": "Basic",
-    "invitationForm": "Invitation form"
+    "invitationForm": "Invitation form",
+    "withAppField": "With app field",
+    "withRoleField": "With role field"
   },
   "title": "User library"
 }
diff --git a/apps/demo/src/locales/fr/user.json b/apps/demo/src/locales/fr/user.json
index 89f72d935..a49c843c2 100644
--- a/apps/demo/src/locales/fr/user.json
+++ b/apps/demo/src/locales/fr/user.json
@@ -6,7 +6,9 @@
   },
   "label": {
     "basic": "Basic",
-    "invitationForm": "Invitation form"
+    "invitationForm": "Invitation form",
+    "withAppField": "With app field",
+    "withRoleField": "With role field"
   },
   "title": "User library"
 }
diff --git a/apps/demo/src/views/User/invitationForm/Index.vue b/apps/demo/src/views/User/invitationForm/Index.vue
index 0b48eab14..f4208b4d2 100644
--- a/apps/demo/src/views/User/invitationForm/Index.vue
+++ b/apps/demo/src/views/User/invitationForm/Index.vue
@@ -34,6 +34,102 @@
         <InvitationForm @submit="onSubmit" />
       </div>
     </section>
+
+    <section>
+      <h2>{{ $t("user.label.withAppField") }}</h2>
+
+      <div class="section-content">
+        <!-- eslint-disable -->
+        <SshPre language="html-vue">
+          &lt;template&gt;
+            &lt;InvitationForm :apps="apps" @submit="onSubmit" /&gt;
+          &lt;/template&gt;
+
+          &lt;script setup lang="ts"&gt;
+          import { InvitationForm } from "@dzangolab/vue3-user";
+
+          import type { InvitationPayload } from "@dzangolab/vue3-user";
+
+          const apps = [
+            {
+              id: 1,
+              name: "Admin",
+              origin: "admin-origin",
+              supportedRoles: [
+                {
+                  id: 1,
+                  name: "ADMIN",
+                },
+                {
+                  id: 2,
+                  name: "SUPERADMIN",
+                },
+              ],
+            },
+            {
+              id: 2,
+              name: "User",
+              origin: "user-origin",
+              supportedRoles: [
+                {
+                  id: 3,
+                  name: "USER",
+                },
+              ],
+            },
+          ];
+
+          const onSubmit = (formData: InvitationPayload) => {
+            ...
+          };
+          &lt;/script&gt;
+        </SshPre>
+        <!-- eslint-enable -->
+
+        <InvitationForm :apps="apps" @submit="onSubmit" />
+      </div>
+    </section>
+
+    <section>
+      <h2>{{ $t("user.label.withRoleField") }}</h2>
+
+      <div class="section-content">
+        <!-- eslint-disable -->
+        <SshPre language="html-vue">
+          &lt;template&gt;
+            &lt;InvitationForm :roles="roles" @submit="onSubmit" /&gt;
+          &lt;/template&gt;
+
+          &lt;script setup lang="ts"&gt;
+          import { InvitationForm } from "@dzangolab/vue3-user";
+
+          import type { InvitationPayload } from "@dzangolab/vue3-user";
+
+          const roles = [
+            {
+              id: 1,
+              name: "ADMIN",
+            },
+            {
+              id: 2,
+              name: "SUPERADMIN",
+            },
+            {
+              id: 3,
+              name: "USER",
+            },
+          ];
+
+          const onSubmit = (formData: InvitationPayload) => {
+            ...
+          };
+          &lt;/script&gt;
+        </SshPre>
+        <!-- eslint-enable -->
+
+        <InvitationForm :roles="roles" @submit="onSubmit" />
+      </div>
+    </section>
   </UserPage>
 </template>
 
@@ -48,6 +144,50 @@ import type { InvitationPayload } from "@dzangolab/vue3-user";
 
 const { t } = useI18n();
 
+const roles = [
+  {
+    id: 1,
+    name: "ADMIN",
+  },
+  {
+    id: 2,
+    name: "SUPERADMIN",
+  },
+  {
+    id: 3,
+    name: "USER",
+  },
+];
+
+const apps = [
+  {
+    id: 1,
+    name: "Admin",
+    origin: "admin-origin",
+    supportedRoles: [
+      {
+        id: 1,
+        name: "ADMIN",
+      },
+      {
+        id: 2,
+        name: "SUPERADMIN",
+      },
+    ],
+  },
+  {
+    id: 2,
+    name: "User",
+    origin: "user-origin",
+    supportedRoles: [
+      {
+        id: 3,
+        name: "USER",
+      },
+    ],
+  },
+];
+
 const onSubmit = (formData: InvitationPayload) => {
   notify({
     text: t("user.message.invitation.success", { user: formData.email }),
diff --git a/packages/vue-user/src/components/invitation/InvitationForm.vue b/packages/vue-user/src/components/invitation/InvitationForm.vue
index 4bd983228..fada2c2f4 100644
--- a/packages/vue-user/src/components/invitation/InvitationForm.vue
+++ b/packages/vue-user/src/components/invitation/InvitationForm.vue
@@ -7,7 +7,9 @@
         v-if="apps?.length"
         v-model="formData.appId"
         :options="updatedApps"
+        :schema="appSchema"
         label="App"
+        name="app"
         placeholder="Select app"
       />
 
@@ -16,7 +18,9 @@
         v-model="formData.role"
         :disabled="Boolean(!updatedRoles?.length)"
         :options="updatedRoles"
+        :schema="roleSchema"
         label="Role"
+        name="role"
         placeholder="Select role"
       />
 
@@ -34,6 +38,7 @@ export default {
 <script setup lang="ts">
 import { Email, Form, FormActions, SelectInput } from "@dzangolab/vue3-form";
 import { computed, ref } from "vue";
+import { z } from "zod";
 
 import type {
   InvitationAppOption,
@@ -47,6 +52,13 @@ const props = defineProps({
     default: () => [],
     type: Array as PropType<Array<InvitationAppOption>>,
   },
+  appSchema: {
+    default: z.number({
+      invalid_type_error: "Please select at least one valid option",
+    }),
+    required: false,
+    type: Object as PropType<z.ZodType<string | number | string[] | number[]>>,
+  },
   invitationData: {
     default: () => ({}) as InvitationPayload,
     type: Object,
@@ -55,6 +67,13 @@ const props = defineProps({
     default: () => [],
     type: Array as PropType<Array<InvitationRoleOption>>,
   },
+  roleSchema: {
+    default: z.string({
+      invalid_type_error: "Please select at least one valid option",
+    }),
+    required: false,
+    type: Object as PropType<z.ZodType<string | number | string[] | number[]>>,
+  },
   submitLabel: {
     default: "Invite user",
     type: String,