From 49e4bd8f8a7587e6457169e9c62682a22b05b195 Mon Sep 17 00:00:00 2001 From: Ana Custura Date: Mon, 22 Jun 2026 10:50:37 +0100 Subject: [PATCH] Recreate the org flow --- src/App.tsx | 31 ++++++- src/Bridges.tsx | 8 +- src/CreateOrg.tsx | 86 ------------------ src/CreateOrgFlow.tsx | 187 ++++++++++++++++++++++++++++++++++++++++ src/Organisations.tsx | 3 - src/home.tsx | 19 ++-- src/hooks/OrgContext.ts | 4 +- src/profile.tsx | 2 +- 8 files changed, 233 insertions(+), 107 deletions(-) delete mode 100644 src/CreateOrg.tsx create mode 100644 src/CreateOrgFlow.tsx diff --git a/src/App.tsx b/src/App.tsx index 55cd22b..632371b 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -19,6 +19,8 @@ import type {userObject} from "./hooks/UserContext.ts"; import Organisations from "./Organisations.tsx"; import {RefreshContext} from "./hooks/RefreshContext.ts"; import Bridges from "./Bridges.tsx"; +import {OrgContext, type OrgContextType, type OrgObject} from "./hooks/OrgContext.ts"; +import CreateOrgFlow from "./CreateOrgFlow.tsx"; const { Header, Content, Sider } = Layout; @@ -72,9 +74,28 @@ const App: React.FC = () => { }, setCurrentUser: () => {} } + + const defaultOrg: OrgContextType = { + currentOrg: { + name: "", + status: "partial", + root_user_email: "", + billing_contact: {email: "", id: -1}, + owner_contact: {email: "", id: -1}, + security_contact: {email: "", id: -1}, + organisation_id: -1, + intake_questionnaire: { + question_one: "", + question_two: "", + question_three: "", + }, + }, + setCurrentOrg: () => {} + } + const [currentUser, setCurrentUser] = useState(defaultUser.currentUser); const [refreshKey, setRefreshKey] = useState(1); - + const [currentOrg, setCurrentOrg] = useState(defaultOrg.currentOrg); /***************************** @@ -132,7 +153,7 @@ const App: React.FC = () => { navigate('/profile'); break; case 'orgs': - navigate('/organisations'); + navigate('/create-org-flow'); break; case 'logout': auth.removeUser().then(() => navigate('/profile')); @@ -154,7 +175,7 @@ const App: React.FC = () => { if (currentUser.organisations.length > 0) { - side_nav_items = [ getItem('My organisations', 'orgs', ), + side_nav_items = [ getItem('Onboarding', 'orgs', ), getItem('Bridges', 'bridges', ), ]; const currentOrg = currentUser.organisations[0]['name'] @@ -163,6 +184,7 @@ const App: React.FC = () => { } return ( + @@ -209,6 +231,8 @@ const App: React.FC = () => { }/> {currentUser && }/> } {currentUser && }/> } + {currentUser && }/> } + {currentUser && }/> } @@ -218,6 +242,7 @@ const App: React.FC = () => { + ); diff --git a/src/Bridges.tsx b/src/Bridges.tsx index 1705451..1a0a078 100644 --- a/src/Bridges.tsx +++ b/src/Bridges.tsx @@ -4,8 +4,7 @@ import type { InputRef, TableColumnsType, TableColumnType } from 'antd'; import { Button, Input, Space, Table } from 'antd'; import type { FilterDropdownProps } from 'antd/es/table/interface'; import Highlighter from 'react-highlight-words'; -import { QRCode, theme } from 'antd'; -const { useToken } = theme; +import { QRCode } from 'antd'; interface BridgeDataType { fingerprint: string; bridgeline: string; @@ -28,7 +27,6 @@ const Bridges = () => { bridgeLines.forEach((line) => {line.qrCodeText = makeQRCodeText(line.bridgeline)}); console.log(bridgeLines); - const { token } = useToken(); const [searchText, setSearchText] = useState(''); const [searchedColumn, setSearchedColumn] = useState(''); @@ -54,7 +52,7 @@ const Bridges = () => { filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => (
e.stopPropagation()}> setSelectedKeys(e.target.value ? [e.target.value] : [])} @@ -146,7 +144,7 @@ const Bridges = () => { width: '40%', key: 'qrCodeText', dataIndex: 'qrCodeText', - render: (text, record) => {return ()} + render: (_text, record) => {return ()} }, ] diff --git a/src/CreateOrg.tsx b/src/CreateOrg.tsx deleted file mode 100644 index 4895ac2..0000000 --- a/src/CreateOrg.tsx +++ /dev/null @@ -1,86 +0,0 @@ -// src/Posts.jsx - -import {useUserContext} from './hooks/UserContext.ts'; -import { Button, Form, Input } from 'antd'; -//import React, {useEffect, useState} from "react"; -import {useAuth} from "react-oidc-context"; -import {RefreshContext} from "./hooks/RefreshContext.ts"; -import {useContext} from "react"; - -const CreateOrg = () => { - const { currentUser } = useUserContext(); - const [form] = Form.useForm(); - const auth = useAuth(); - const { refreshKey, setRefreshKey } = useContext(RefreshContext); - console.log(refreshKey); - async function submitOrgData(values: FormData) { - if (!auth.user) { - return - } - try { - const [name, q1, q2, q3] = Object.values(values); - const data = { - "name": name, - "intake_questionnaire": { - "question_one": q1, - "question_two": q2, - "question_three": q3, - } - } - const token = auth.user.access_token; - const requestOptions = { - method: 'POST', - body: JSON.stringify(data), - headers: {Authorization: `Bearer ${token}`, - 'Content-Type': 'application/json'} - } - const response = await fetch("/api/v1/org", requestOptions); - await response.json(); - setRefreshKey(prev => prev + 1); - console.log(refreshKey); - - } catch (e) { - console.error(e); - } - } - - const onFinish = (values: FormData) => { - console.log(values); - submitOrgData(values) - }; - - - if (!currentUser) { - return
Loading...
; - } - - return ( - <> -
- - - - - - - - - - - - - - - - -
- - ); - -}; - -export default CreateOrg; \ No newline at end of file diff --git a/src/CreateOrgFlow.tsx b/src/CreateOrgFlow.tsx new file mode 100644 index 0000000..23ab56d --- /dev/null +++ b/src/CreateOrgFlow.tsx @@ -0,0 +1,187 @@ +// src/Posts.jsx + +import {useUserContext} from './hooks/UserContext.ts'; +import { Button, Form, Input } from 'antd'; +//import React, {useEffect, useState} from "react"; +import {useAuth} from "react-oidc-context"; +import {RefreshContext} from "./hooks/RefreshContext.ts"; +import {useContext, useState} from "react"; +import {useOrgContext} from "./hooks/OrgContext.ts"; + +const CreateOrgStep1 = () => { + const {currentUser} = useUserContext(); + const [form] = Form.useForm(); + const auth = useAuth(); + const {refreshKey, setRefreshKey} = useContext(RefreshContext); + const {currentOrg, setCurrentOrg} = useOrgContext(); + console.log('context value:', {currentOrg, setCurrentOrg}); + + const {TextArea} = Input; + const [currentStep, setCurrentStep] = useState(1); + + async function submitOrgBasicData(values: FormData) { + if (!auth.user) { + return + } + try { + const [name, q1, q2] = Object.values(values); + const data = { + "name": name, + "intake_questionnaire": { + "question_one": q1, + "question_two": q2, + } + } + + const token = auth.user.access_token; + const requestOptions = { + method: 'POST', + body: JSON.stringify(data), + headers: { + Authorization: `Bearer ${token}`, + 'Content-Type': 'application/json' + } + } + const response_org = await fetch("/api/v1/org", requestOptions); + const orgID = await response_org.json(); + const response_currentOrg = await fetch("/api/v1/org?org_id=" + orgID['id'], { + headers: { + Authorization: `Bearer ${token}`, + 'Content-Type': 'application/json' + } + }); + const currentOrgData = await response_currentOrg.json() + setCurrentOrg(currentOrgData['organisations'][0]); + setCurrentStep(currentStep + 1); + + } catch (e) { + console.error(e); + } + } + + async function submitOrgBillingData(values: FormData) { + if (!auth.user) { + return + } + try { + const [first_name, last_name, email, phone_number, vat_number, street_address, street_address_line_2, locality] = Object.values(values); + const data = { + "organisation_id": currentOrg.organisation_id, + "contact_type": "billing", + "first_name": first_name, + "last_name": last_name, + "email": email, + "phone_number": phone_number, + "vat_number": vat_number, + "street_address": street_address, + "street_address_line_2": street_address_line_2, + "locality": locality, + } + + const token = auth.user.access_token; + const requestOptions = { + method: 'PATCH', + body: JSON.stringify(data), + headers: { + Authorization: `Bearer ${token}`, + 'Content-Type': 'application/json' + } + } + await fetch("/api/v1/org/contact", requestOptions); + setCurrentStep(currentStep + 1); + setRefreshKey(refreshKey +1); + + } catch (e) { + console.error(e); + } + } + + if (!currentUser) { + return
Loading...
; + } + + if (currentStep === 1) { + return ( + <> +

Step 1 - Basic info

+
+ + + +

Intake Questionnaire

+ +