Skip to content

Commit 4a4ac78

Browse files
tipusinghawtipusinghaw
authored
Merge pull request #66 from credebl/257-radio-selection-issue
fixed: radio selection after agent spinup: 257
2 parents 98fa15a + cd150f7 commit 4a4ac78

File tree

8 files changed

+204
-87
lines changed

8 files changed

+204
-87
lines changed

‎src/api/organization.ts

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -270,3 +270,36 @@ export const editOrganizationUserRole = async (userId: number, roles: number[])
270270
}
271271
}
272272

273+
//Create Connection
274+
275+
276+
export const createConnection = async (orgName: string) => {
277+
278+
const url = apiRoutes.connection.create
279+
280+
const orgId = await getFromLocalStorage(storageKeys.ORG_ID)
281+
282+
const data = {
283+
label: orgName,
284+
multiUseInvitation: true,
285+
autoAcceptConnection: true,
286+
orgId: Number(orgId)
287+
}
288+
const payload = data
289+
290+
const axiosPayload = {
291+
url,
292+
payload,
293+
config: await getHeaderConfigs()
294+
}
295+
296+
try {
297+
return await axiosPost(axiosPayload);
298+
}
299+
catch (error) {
300+
const err = error as Error
301+
return err?.message
302+
}
303+
}
304+
305+

‎src/components/InputCopy/index.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { useRef, useState } from 'react';
1+
import { ChangeEventHandler, MouseEvent, MouseEventHandler, useRef, useState } from 'react';
22

33
interface InputProps {
44
field: {
@@ -14,7 +14,8 @@ const InputCopy = ({ field, ...props }: InputProps) => {
1414
const inputRef = useRef<HTMLInputElement>(null);
1515
const [isCopied, setIsCopied] = useState(false);
1616

17-
function copyTextVal() {
17+
function copyTextVal(event: React.MouseEvent<HTMLButtonElement>) {
18+
event.preventDefault()
1819
const copyText = inputRef?.current;
1920

2021
const copiedText: string = copyText?.value as string

‎src/components/organization/DedicatedIllustrate.tsx

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,35 @@
11
import DedicatedIcon from '../../assets/dedicated.svg';
22

3-
4-
53
const DedicatedIllustrate = () => {
64

75
return (
8-
<div className='mt-4 ml-4'>
9-
<img src={DedicatedIcon} alt="dedicated" width={270} />
6+
<div className='mt-4 flex flex-row flex-wrap'>
7+
<div>
8+
<img src={DedicatedIcon} alt="dedicated" width={270} />
9+
</div>
10+
<div className='ml-8 max-w-xs'>
11+
<h3 className="mb-2 text-xl font-bold text-gray-900 dark:text-white">
12+
Complete Control and Maximum Privacy
13+
</h3>
14+
<ul className="list-disc">
15+
<li>
16+
<p className='mb-1 text-base font-normal text-gray-900 dark:text-white'>
17+
Our dedicated agent is exclusively managed by your organization, giving you full control. Customize and configure it to meet your specific needs with ease.
18+
</p>
19+
</li>
20+
<li>
21+
<p className='mb-1 text-base font-normal text-gray-900 dark:text-white'>
22+
Rest assured, all data and operations stay within your organization's infrastructure, guaranteeing maximum privacy and autonomy.
23+
</p>
24+
</li>
25+
<li>
26+
<p className='mb-1 text-base font-normal text-gray-900 dark:text-white'>
27+
Experience the power of complete control and privacy with our dedicated agent.
28+
</p>
29+
</li>
30+
</ul>
31+
32+
</div>
1033
</div>
1134
)
1235

‎src/components/organization/OrgDropDown.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -82,10 +82,10 @@ const OrgDropDown = () => {
8282
) : (
8383
<CustomAvatar size="20" name={activeOrg?.name} round />
8484
)}
85-
<text className="ml-2 dark: text-white">{activeOrg?.name}</text>
85+
<text className="ml-2 text-white dark:text-white">{activeOrg?.name}</text>
8686
</>
8787
:
88-
<text className='dark:text-white'>
88+
<text className='text-white dark:text-white'>
8989
Select organization
9090
</text>
9191
}

‎src/components/organization/OrganizationDetails.tsx

Lines changed: 103 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,88 +1,122 @@
11
import type { OrgAgent, Organisation } from './interfaces'
2+
import { useEffect, useState } from 'react';
23

3-
interface Values {
4-
seed: string;
5-
name: string,
6-
password: string
7-
}
8-
4+
import type { AxiosResponse } from 'axios';
5+
import { Spinner } from 'flowbite-react';
6+
import { apiStatusCodes } from '../../config/CommonConstant';
7+
import { createConnection } from '../../api/organization';
98

109
const OrganizationDetails = ({ orgData }: { orgData: Organisation | null }) => {
1110

1211
const { org_agents } = orgData as Organisation
1312
const agentData: OrgAgent | null = org_agents.length > 0 ? org_agents[0] : null
13+
const [loading, setLoading] = useState<boolean>(true)
14+
15+
const createQrConnection = async () => {
16+
17+
setLoading(true)
18+
const response = await createConnection(orgData?.name as string);
19+
const { data } = response as AxiosResponse
20+
21+
if (data?.statusCode === apiStatusCodes.API_STATUS_SUCCESS) {
22+
console.log(`COnnection::`, data);
23+
24+
} else {
25+
console.log(`Connection ERR`, response as string);
26+
27+
}
28+
29+
setLoading(false)
30+
}
31+
32+
useEffect(() => {
33+
createQrConnection()
34+
}, [])
1435

1536
return (
1637
<div
17-
className="mt-4 flex-col p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:border-gray-700 sm:p-6 dark:bg-gray-800"
38+
className="mt-4 w-full flex-wrap p-4 bg-white border border-gray-200 rounded-lg shadow-sm sm:flex dark:border-gray-700 sm:p-6 dark:bg-gray-800"
1839
>
19-
<h3 className="mb-1 mt-1 text-xl font-bold text-gray-900 dark:text-white">
20-
Wallet Details
21-
</h3>
22-
<div
23-
className="items-center sm:flex xl:block 2xl:flex sm:space-x-4 xl:space-x-0 2xl:space-x-4"
24-
>
25-
<div>
26-
<ul className="divide-y divide-gray-200 dark:divide-gray-700">
27-
28-
<li className="py-4">
29-
<div className="flex items-center space-x-4">
30-
31-
<div className="inline-flex min-w-0">
32-
<p
33-
className="text-base font-normal text-gray-500 truncate dark:text-gray-400"
34-
>
35-
Wallet Name:
36-
</p>
37-
<p
38-
className="ml-4 text-base font-semibold text-gray-900 truncate dark:text-white"
39-
>
40-
{agentData?.walletName}
41-
</p>
42-
40+
<div className='w-1/2'>
41+
<h3 className="mb-1 mt-1 text-xl font-bold text-gray-900 dark:text-white">
42+
Wallet Details
43+
</h3>
44+
<div
45+
className="items-center sm:flex xl:block 2xl:flex sm:space-x-4 xl:space-x-0 2xl:space-x-4"
46+
>
47+
<div>
48+
<ul className="divide-y divide-gray-200 dark:divide-gray-700">
49+
50+
<li className="py-4">
51+
<div className="flex items-center space-x-4">
52+
53+
<div className="inline-flex min-w-0">
54+
<p
55+
className="text-base font-normal text-gray-500 truncate dark:text-gray-400"
56+
>
57+
Wallet Name:
58+
</p>
59+
<p
60+
className="ml-4 text-base font-semibold text-gray-900 truncate dark:text-white"
61+
>
62+
{agentData?.walletName}
63+
</p>
64+
65+
</div>
4366
</div>
44-
</div>
45-
</li>
46-
<li className="py-4">
47-
<div className="flex items-center space-x-4">
48-
49-
<div className="inline-flex min-w-0">
50-
<p
51-
className="text-base font-normal text-gray-500 truncate dark:text-gray-400"
52-
>
53-
Org DID:
54-
</p>
55-
<p
56-
className="ml-4 text-base font-semibold text-gray-900 truncate dark:text-white"
57-
>
58-
{agentData?.orgDid}
59-
</p>
60-
67+
</li>
68+
<li className="py-4">
69+
<div className="flex items-center space-x-4">
70+
71+
<div className="inline-flex min-w-0">
72+
<p
73+
className="text-base font-normal text-gray-500 truncate dark:text-gray-400"
74+
>
75+
Org DID:
76+
</p>
77+
<p
78+
className="ml-4 text-base font-semibold text-gray-900 truncate dark:text-white"
79+
>
80+
{agentData?.orgDid}
81+
</p>
82+
83+
</div>
6184
</div>
62-
</div>
63-
</li>
64-
<li className="py-4">
65-
<div className="flex items-center space-x-4">
66-
67-
<div className="inline-flex min-w-0">
68-
<p
69-
className="text-base font-normal text-gray-500 truncate dark:text-gray-400"
70-
>
71-
Created On:
72-
</p>
73-
<p
74-
className="ml-4 text-base font-semibold text-gray-900 truncate dark:text-white"
75-
>
76-
{agentData?.agents_type.createDateTime.split("T")[0]}
77-
</p>
78-
85+
</li>
86+
<li className="py-4">
87+
<div className="flex items-center space-x-4">
88+
89+
<div className="inline-flex min-w-0">
90+
<p
91+
className="text-base font-normal text-gray-500 truncate dark:text-gray-400"
92+
>
93+
Created On:
94+
</p>
95+
<p
96+
className="ml-4 text-base font-semibold text-gray-900 truncate dark:text-white"
97+
>
98+
{agentData?.agents_type.createDateTime.split("T")[0]}
99+
</p>
100+
101+
</div>
79102
</div>
80-
</div>
81-
</li>
82-
</ul>
103+
</li>
104+
</ul>
83105

106+
</div>
84107
</div>
85-
108+
</div>
109+
<div className='w-1/2 flex items-center'>
110+
{
111+
loading
112+
? (
113+
<Spinner
114+
color="info"
115+
/>
116+
)
117+
: <div></div>
118+
119+
}
86120
</div>
87121

88122
</div>

‎src/components/organization/SharedIllustrate.tsx

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,35 @@
11
import SharedIcon from '../../assets/shared.svg';
22

3-
43
const SharedIllustrate = () => {
54

65
return (
7-
<div className='mt-4 ml-4'>
6+
<div className='mt-4 flex flex-row flex-wrap'>
7+
<div>
88
<img src={SharedIcon} alt="dedicated" width={270} />
9+
</div>
10+
<div className='ml-8 max-w-xs'>
11+
<h3 className="mb-2 text-xl font-bold text-gray-900 dark:text-white">
12+
Your Hassle-Free Multi-Tenant Solution
13+
</h3>
14+
<ul className="list-disc">
15+
<li>
16+
<p className='mb-1 text-base font-normal text-gray-900 dark:text-white'>
17+
Our Shared Agent is here to simplify your operations! Managed by CREDEBL on your organization's behalf, this multi-tenant solution allows multiple organizations to share the same agent. You'll benefit from shared resources and reduced operational burdens.
18+
</p>
19+
</li>
20+
<li>
21+
<p className='mb-1 text-base font-normal text-gray-900 dark:text-white'>
22+
Leave the agent maintenance, updates, and technical aspects to CREDEBL, so your team can focus on core tasks without worrying about the backend. Enjoy improved productivity and efficiency while we handle the nitty-gritty.
23+
</p>
24+
</li>
25+
<li>
26+
<p className='mb-1 text-base font-normal text-gray-900 dark:text-white'>
27+
Experience a seamless and hassle-free future with the Shared Agent. Let CREDEBL take care of everything, while you concentrate on achieving your goals.
28+
</p>
29+
</li>
30+
</ul>
31+
32+
</div>
933
</div>
1034
)
1135

‎src/components/organization/WalletSpinup.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,11 @@ import { spinupDedicatedAgent, spinupSharedAgent } from '../../api/organization'
1212
import { useEffect, useState } from 'react';
1313

1414
import type { AxiosResponse } from 'axios';
15-
import SOCKET from '../../config/SocketConfig';
16-
import { nanoid } from 'nanoid'
17-
import InputCopy from '../InputCopy';
1815
import DedicatedIllustrate from './DedicatedIllustrate';
16+
import InputCopy from '../InputCopy';
17+
import SOCKET from '../../config/SocketConfig';
1918
import SharedIllustrate from './SharedIllustrate';
19+
import { nanoid } from 'nanoid'
2020

2121
interface Values {
2222
seed: string;
@@ -96,14 +96,14 @@ const WalletSpinup = (
9696

9797
const submitSharedWallet = async (values: ValuesShared) => {
9898

99+
setLoading(true)
99100
const orgId = await getFromLocalStorage(storageKeys.ORG_ID)
100101

101102
const payload = {
102103
label: values.label,
103104
seed: seeds,
104105
orgId: Number(orgId)
105106
}
106-
setLoading(true)
107107
const spinupRes = await spinupSharedAgent(payload)
108108
const { data } = spinupRes as AxiosResponse
109109

@@ -253,7 +253,7 @@ const WalletSpinup = (
253253
<Button
254254
isProcessing={loading}
255255
type="submit"
256-
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"'
256+
className='float-right 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"'
257257
>
258258
Setup Agent
259259
</Button>
@@ -323,7 +323,7 @@ const WalletSpinup = (
323323
<Button
324324
isProcessing={loading}
325325
type="submit"
326-
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"'
326+
className='float-right 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"'
327327
>
328328
Setup Agent
329329
</Button>
@@ -366,8 +366,7 @@ const WalletSpinup = (
366366

367367
<div>
368368
{
369-
!agentSpinupCall
370-
&& <div className="mt-4 flex max-w-lg flex-col gap-4">
369+
!agentSpinupCall && !loading && <div className="mt-4 flex max-w-lg flex-col gap-4">
371370
<ul className="items-center w-full text-sm font-medium text-gray-900 bg-white border border-gray-200 rounded-lg sm:flex dark:bg-gray-700 dark:border-gray-600 dark:text-white">
372371
<li className="w-full border-b border-gray-200 sm:border-b-0 sm:border-r dark:border-gray-600">
373372
<div className="flex items-center pl-3">

0 commit comments

Comments
 (0)