Merge branch 'main' of https://github.com/credebl/studio into 291-sen…

…d-invitation-design

Signed-off-by: @nishad.shirsat <[email protected]>

src/api/organization.ts

@@ -130,7 +130,7 @@ export const getOrgDashboard = async (orgId: string) => {
  }
 
  try {
- return axiosGet(axiosPayload);
+ return await axiosGet(axiosPayload);
  }
  catch (error) {
  const err = error as Error
@@ -235,7 +235,7 @@ export const getOrganizationUsers = async () => {
  }
 
  try {
- return axiosGet(axiosPayload);
+ return await axiosGet(axiosPayload);
  }
  catch (error) {
  const err = error as Error
@@ -270,3 +270,36 @@ export const editOrganizationUserRole = async (userId: number, roles: number[])
  }
 }
 
+//Create Connection
+
+
+export const createConnection = async (orgName: string) => {
+
+ const url = apiRoutes.connection.create
+
+ const orgId = await getFromLocalStorage(storageKeys.ORG_ID)
+
+ const data = {
+ label: orgName,
+ multiUseInvitation: true,
+ autoAcceptConnection: true,
+ orgId: Number(orgId)
+ }
+ const payload = data
+
+ const axiosPayload = {
+ url,
+ payload,
+ config: await getHeaderConfigs()
+ }
+
+ try {
+ return await axiosPost(axiosPayload);
+ }
+ catch (error) {
+ const err = error as Error
+ return err?.message
+ }
+}
+
+

src/app/NavBarSidebar.astro

@@ -289,14 +289,14 @@ import SignOutButton from '../components/SignOutButton/index'
  </div>
  </a> -->
  <a
- href="./invitations"
+ href={pathRoutes.users.invitations}
  class="block p-4 text-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-600"
  >
  <svg
  class="mx-auto mb-1 text-gray-500 w-7 h-7 dark:text-gray-400"
  xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-   <path d="M9.978 13.2329L19.37 6.56494C19.312 6.50191 19.2498 6.44278 19.184 6.38794L11.2 0.650939C10.8566 0.392942 10.4392 0.252371 10.0097 0.25003C9.58011 0.247688 9.16123 0.383702 8.815 0.637939L0.8 6.39994C0.726113 6.46135 0.65692 6.52821 0.593 6.59994L9.978 13.2329Z" fill="#6B7280"/>
-   <path d="M11.181 14.8639C10.8416 15.1166 10.4292 15.2521 10.006 15.2499C9.57095 15.2509 9.14735 15.1106 8.799 14.8499L0 8.62694V17.9999C0 18.5304 0.210714 19.0391 0.585786 19.4142C0.960859 19.7892 1.46957 19.9999 2 19.9999H18C18.5304 19.9999 19.0391 19.7892 19.4142 19.4142C19.7893 19.0391 20 18.5304 20 17.9999V8.57294L11.181 14.8639Z" fill="#6B7280"/>
+ <path d="M9.978 13.2329L19.37 6.56494C19.312 6.50191 19.2498 6.44278 19.184 6.38794L11.2 0.650939C10.8566 0.392942 10.4392 0.252371 10.0097 0.25003C9.58011 0.247688 9.16123 0.383702 8.815 0.637939L0.8 6.39994C0.726113 6.46135 0.65692 6.52821 0.593 6.59994L9.978 13.2329Z" fill="#6B7280"/>
+ <path d="M11.181 14.8639C10.8416 15.1166 10.4292 15.2521 10.006 15.2499C9.57095 15.2509 9.14735 15.1106 8.799 14.8499L0 8.62694V17.9999C0 18.5304 0.210714 19.0391 0.585786 19.4142C0.960859 19.7892 1.46957 19.9999 2 19.9999H18C18.5304 19.9999 19.0391 19.7892 19.4142 19.4142C19.7893 19.0391 20 18.5304 20 17.9999V8.57294L11.181 14.8639Z" fill="#6B7280"/>
  </svg>
 
  <div class="text-sm font-medium text-gray-900 dark:text-white">

src/components/EmptyListComponent/index.tsx

@@ -0,0 +1,29 @@
+import { ReactElement } from "react";
+
+export const EmptyListMessage = ({ message, description, buttonContent, svgComponent, onClick }
+ : {
+ message: string,
+ description: string,
+ buttonContent?: string,
+ svgComponent?: ReactElement,
+
+ onClick?: () => void,
+ }) => {
+ return (
+ <div className='flex mt-20 justify-start items-center flex-col'>
+ <p className='text-2xl font-bold mb-4'>{message}</p>
+ <p className='text-lg mb-4'>{description}</p>
+ {
+ buttonContent
+ && <button
+ className='group flex h-min p-3 mt-10 items-center justify-center p-0.5 font-medium focus:z-10 border border-transparent enabled:hover:bg-cyan-800 dark:enabled:hover:bg-cyan-700 text-base font- text-center text-white bg-primary-700 rounded-lg hover:bg-accent-00 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800&quot;'
+ onClick={onClick}>
+ {svgComponent}
+ <span className="ml-2">{buttonContent}</span>
+ </button>
+ }
+
+ </div>
+ )
+};
+

src/components/InputCopy/index.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { ChangeEventHandler, MouseEvent, MouseEventHandler, useRef, useState } from 'react';
 
 interface InputProps {
  field: {
@@ -14,7 +14,8 @@ const InputCopy = ({ field, ...props }: InputProps) => {
  const inputRef = useRef<HTMLInputElement>(null);
  const [isCopied, setIsCopied] = useState(false);
 
- function copyTextVal() {
+ function copyTextVal(event: React.MouseEvent<HTMLButtonElement>) {
+ event.preventDefault()
  const copyText = inputRef?.current;
 
  const copiedText: string = copyText?.value as string

src/components/Resources/Schema/Schemas.tsx

@@ -12,6 +12,7 @@ import SearchInput from '../../SearchInput';
 import { getAllSchemas } from '../../../api/Schema';
 import { getFromLocalStorage } from '../../../api/Auth';
 import { pathRoutes } from '../../../config/pathRoutes';
+import { EmptyListMessage } from '../../EmptyListComponent';
 
 const SchemaList = () => {
  const [schemaList, setSchemaList] = useState([])
@@ -57,7 +58,9 @@ const SchemaList = () => {
  }
  };
 
-
+ const createSchema = () => {
+ window.location.href = `${pathRoutes.organizations.createSchema}?OrgId=${orgId}`
+ }
 
  useEffect(() => {
  getSchemaList(schemaListAPIParameter)
@@ -102,9 +105,7 @@ const SchemaList = () => {
  </div>
  <Button
  id='createSchemaButton'
- onClick={() => {
- window.location.href = `${pathRoutes.organizations.createSchema}?OrgId=${orgId}`
- }}
+ onClick={createSchema}
  className='text-base font-medium text-center text-white bg-primary-700 rounded-lg hover:bg-primary-800 focus:ring-4 focus:ring-primary-300 sm:w-auto dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800'
  ><svg className="pr-2" xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" viewBox="0 0 24 24">
  <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z"/>
@@ -127,16 +128,17 @@ const SchemaList = () => {
  </Alert>
  }
  {loading
- ? <div className="flex items-center justify-center mb-4">
+ ? (<div className="flex items-center justify-center mb-4">
  <Spinner
  color="info"
  />
- </div>
+ </div>)
  :
+ schemaList && schemaList.length > 0 ? (
+
  <div className='Flex-wrap' style={{ display: 'flex', flexDirection: 'column' }}>
  <div className="mt-1 grid w-full grid-cols-1 gap-4 mt-0 mb-4 xl:grid-cols-2 2xl:grid-cols-3">
- {schemaList && schemaList.length > 0 &&
- schemaList.map((element, key) => (
+ { schemaList.map((element, key) => (
  <div className='p-2' key={key}>
  <SchemaCard schemaName={element['name']} version={element['version']} schemaId={element['schemaLedgerId']} issuerDid={element['issuerId']} attributes={element['attributes']} created={element['createDateTime']} />
  </div>
@@ -155,7 +157,15 @@ const SchemaList = () => {
  totalPages={0}
  />
  </div>
- </div>
+ </div> ) : (<EmptyListMessage
+ message={'No Schemas'}
+ description={'Get started by creating a new Schema'}
+ buttonContent={'Create Schema'} 
+ svgComponent={<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" fill="none" viewBox="0 0 24 24">
+ <path fill="#fff" d="M21.89 9.89h-7.78V2.11a2.11 2.11 0 1 0-4.22 0v7.78H2.11a2.11 2.11 0 1 0 0 4.22h7.78v7.78a2.11 2.11 0 1 0 4.22 0v-7.78h7.78a2.11 2.11 0 1 0 0-4.22Z" />
+ </svg>} 
+ onClick={createSchema}
+ />)
  }
  </div>
  </div>

src/components/organization/DedicatedIllustrate.tsx

@@ -1,12 +1,35 @@
 import DedicatedIcon from '../../assets/dedicated.svg';
 
-
-
 const DedicatedIllustrate = () => {
 
  return (
- <div className='mt-4 ml-4'>
- <img src={DedicatedIcon} alt="dedicated" width={270} />
+ <div className='mt-4 flex flex-row flex-wrap'>
+ <div>
+ <img src={DedicatedIcon} alt="dedicated" width={270} />
+ </div>
+ <div className='ml-8 max-w-xs'>
+ <h3 className="mb-2 text-xl font-bold text-gray-900 dark:text-white">
+ Complete Control and Maximum Privacy
+ </h3>
+ <ul className="list-disc">
+ <li>
+ <p className='mb-1 text-base font-normal text-gray-900 dark:text-white'>
+ Our dedicated agent is exclusively managed by your organization, giving you full control. Customize and configure it to meet your specific needs with ease.
+ </p>
+ </li>
+ <li>
+ <p className='mb-1 text-base font-normal text-gray-900 dark:text-white'>
+ Rest assured, all data and operations stay within your organization's infrastructure, guaranteeing maximum privacy and autonomy.
+ </p>
+ </li>
+ <li>
+ <p className='mb-1 text-base font-normal text-gray-900 dark:text-white'>
+ Experience the power of complete control and privacy with our dedicated agent.
+ </p>
+ </li>
+ </ul>
+
+ </div>
  </div>
  )
 

src/components/organization/OrgDropDown.tsx

@@ -83,10 +83,10 @@ const OrgDropDown = () => {
  ) : (
  <CustomAvatar size="20" name={activeOrg?.name} round />
  )}
- <text className="ml-2 dark: text-white">{activeOrg?.name}</text>
+ <text className="ml-2 text-white dark:text-white">{activeOrg?.name}</text>
  </>
  :
- <text className='dark:text-white'>
+ <text className='text-white dark:text-white'>
  Select organization
  </text>
  }