Skip to content

Commit a156e8f

Browse files
Francesca-BitFrancesca-Bit
authored
add payment page (#97)
* fix refresh * add payment page --------- Co-authored-by: Francesca-Bit <[email protected]>
1 parent a875774 commit a156e8f

24 files changed

+1100
-409
lines changed

‎packages/tdb-dashboard/src/App.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -365,6 +365,15 @@ div.progress-bar-container {
365365
min-height: 49px !important;
366366
}
367367

368+
/* ---------- form control custom dark mode ---------- */
369+
.form-select-light {
370+
color: #adb5bd !important;
371+
/*background-color: #444 !important;*/
372+
background-color: transparent !important;
373+
border-color: rgb(102, 102, 102) !important;
374+
min-height: 49px !important;
375+
}
376+
368377

369378

370379
.form-control:disabled:hover, .form-control[readonly]:hover{

‎packages/tdb-dashboard/src/App.js‎

Lines changed: 18 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
import React from "react"
2-
import {Routes,Route,useNavigate} from "react-router-dom"
2+
import {Routes,Route,useNavigate, BrowserRouter} from "react-router-dom"
33
import {Loading} from "./components/Loading"
44
import {SERVER_LOADING_MESSAGE} from "./components/constants"
55
import {ProductsExplorer} from "./pages/ProductsExplorer"
66
import * as PATH from "./routing/constants"
77
import {ModelProductPage} from "./pages/ModelProductPage"
88
import {DataProductsHome} from "./pages/DataProductsHome"
99
import {VerifyEmail} from "./pages/VerifyEmail"
10+
import {PlansPage} from "./pages/PlansPage"
1011
import PrivateRoute from "./routing/PrivateRoute"
1112
import {DocumentExplorer} from "./pages/DocumentExplorer"
1213
import {Documents} from "./pages/Documents"
@@ -27,20 +28,25 @@ import {DocumentTemplate} from "./pages/DocumentTemplate"
2728
import {GraphIqlEditor} from "./pages/GraphIqlEditor"
2829
import {PageNotFound} from "./pages/PageNotFound"
2930
import {DocumentsPageList} from "./pages/DocumentsListPage"
30-
31+
import {PLANS} from "./routing/constants";
3132

3233
export function App (props){
3334
let navigate = useNavigate();
3435
const {connectionError,loadingServer,clientUser,accessControlDashboard,woqlClient} = WOQLClientObj()
3536
if(!clientUser) return ""
3637
// we have this loading only in terminusX, it is auth0 information/login loading
3738
const {loading} = clientUser
38-
39+
40+
if (clientUser.firstLogin === true) {
41+
clientUser.firstLogin = false
42+
navigate(`/${PLANS}`)
43+
}
44+
3945
// this happen after confirm you password linking in the email url
4046
if (window.location.search.includes("supportSignUp=true")) {
4147
window.location.replace('/')
4248
}
43-
49+
4450
if(connectionError) {
4551
return <ServerError message={connectionError}/>
4652
}
@@ -53,16 +59,16 @@ export function App (props){
5359
//the accessControlDashboard in terminusX is created only after the login
5460
// so he can be undefined at the start
5561
const isAdmin = accessControlDashboard ? accessControlDashboard.isAdmin() : false
56-
57-
return <div className="container-fluid container-background h-100">
58-
<Routes>
59-
{getRoutes(clientUser,isAdmin, woqlClient)}
60-
</Routes>
62+
63+
const basename = process.env.BASE_URL ? {basename:process.env.BASE_URL} : {}
64+
65+
return <div className="container-fluid container-background h-100">
66+
<Routes>
67+
{getRoutes(clientUser,isAdmin, woqlClient)}
68+
</Routes>
6169
</div>
6270
}
6371

64-
// {getRoutes(clientUser,isAdmin, woqlClient)}
65-
6672
function getRoutes(clientUser, isAdmin, woqlClient){
6773
//const client = createApolloClient()
6874

@@ -87,6 +93,7 @@ function getRoutes(clientUser, isAdmin, woqlClient){
8793
return <React.Fragment>
8894
<Route path="/verify" element={<VerifyEmail/>}/>
8995
<Route path = {PATH.INVITE_PAGE} element = {<PrivateRoute component={InvitePage}/>} />
96+
<Route path={PATH.PLANS} element={<PrivateRoute component={PlansPage}/>}/>
9097
<Route index element={<PrivateRoute component={Home}/>} />
9198
<Route path=":organization" >
9299
<Route index element={<PrivateRoute component={OrganizationHome}></PrivateRoute>}/>
@@ -102,7 +109,6 @@ function getRoutes(clientUser, isAdmin, woqlClient){
102109
<Route index element={<PrivateRoute component={ChangeRequests}/>} />
103110
<Route path=":id" element={<PrivateRoute component={ChangeDiff}/>} />
104111
</Route>
105-
106112
<Route path={PATH.DOCUMENT_EXPLORER} element={<DocumentTemplate/>}>
107113
<Route index element={<PrivateRoute component={Documents}/>} />
108114
<Route path=":type">
@@ -116,7 +122,6 @@ function getRoutes(clientUser, isAdmin, woqlClient){
116122
</Route>
117123
</Route>
118124
</Route>
119-
120125
<Route path={PATH.PRODUCT_EXPLORER} element={<PrivateRoute component={ProductsExplorer}/>} />
121126
<Route path={PATH.PRODUCT_MODELS} element={<PrivateRoute component={ModelProductPage}/>} />
122127
</Route>
@@ -125,37 +130,3 @@ function getRoutes(clientUser, isAdmin, woqlClient){
125130
<Route path="*" element={<PageNotFound/>} />
126131
</React.Fragment>
127132
}
128-
// <Route path="test" element={<ApolloProvider client={client}><DocumentList/></ApolloProvider>} />
129-
// <Route index element={<PrivateRoute component={DocumentsList01}/>} />
130-
/*
131-
\ <Route path={PATH.CHANGE_REQUESTS} >
132-
<Route index element={<PrivateRoute component={ChangeRequests}/>} />
133-
<Route path=":id" element={<PrivateRoute component={ChangeDiff}/>} />
134-
</Route>
135-
*/
136-
137-
/* <Route path={"test"} element={<PrivateRoute component={DocumentList}/>} /> */
138-
/*
139-
return <React.Fragment>
140-
<Route path="/verify" element={<VerifyEmail/>}/>
141-
<Route path = {INVITE_PAGE} element = {<PrivateRoute component={InvitePage}/>} />
142-
<Route index element={<PrivateRoute component={Home}/>} />
143-
<Route path=":organization" >
144-
<Route index element={<PrivateRoute component={OrganizationHome}></PrivateRoute>}/>
145-
<Route path = {PROFILE} element = {<PrivateRoute component={Profile}/>} />
146-
{isAdmin && <Route path="administrator" element={<PrivateRoute component={UserManagement}/>}/>}
147-
{!isAdmin && <Route path="administrator" element={<div>Not Found 404 !!!!</div >}/>}
148-
<Route path="members" element={<PrivateRoute component={UserManagement}/>}/>
149-
<Route path=":dataProduct" >
150-
<Route index element={<PrivateRoute component={DataProductsHome}/>} />
151-
152-
<Route path={"test"} element={<PrivateRoute component={DocumentList}/>} />
153-
154-
<Route path={DOCUMENT_EXPLORER} element={<PrivateRoute component={DocumentExplorer}/>} />
155-
<Route path={PRODUCT_EXPLORER} element={<PrivateRoute component={ProductsExplorer}/>} />
156-
<Route path={PRODUCT_MODELS} element={<PrivateRoute component={ModelProductPage}/>} />
157-
</Route>
158-
</Route>
159-
160-
<Route path="*" element={<div>Not Found 404 !!!!</div >} />
161-
</React.Fragment>*/

‎packages/tdb-dashboard/src/App_test.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,19 @@
11
import React from "react"
2-
import { DocumentsGraphqlList } from "./pages/DocumentsGraphqlList"
2+
import {Routes,Route,useNavigate, BrowserRouter} from "react-router-dom"
3+
import {VerifyEmail} from "./pages/VerifyEmail"
4+
import PrivateRoute from "./routing/PrivateRoute"
35

46
export function App_test (props){
7+
let navigate = useNavigate();
58

6-
return <DocumentList/>
9+
if (window.location.search.includes("error=unauthorized")) {
10+
navigate(`/verify`)
11+
}
12+
13+
return <Routes>
14+
<Route path="/verify" element={<VerifyEmail/>}/>
15+
<Route index element={<PrivateRoute component={<div>HELLO</div>}/>} />
16+
</Routes>
717

818
}
919

‎packages/tdb-dashboard/src/clientUtils.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ export function createClientUser(useAuth0,params){
22
let clientUser = {}
33
try{
44
const {isAuthenticated,user,getTokenSilently,logout,loginWithRedirect,loading} = useAuth0()
5+
6+
//console.log("AUTHO", user)
57
clientUser = user || {}
68
clientUser.isAuthenticated = isAuthenticated
79
clientUser.logout = logout

‎packages/tdb-dashboard/src/components/TimeTravelContainer.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ export const TimeTravelContainer = ({show, setShowTimeTravel}) => {
1717
}
1818

1919
return <div className={`mt-5 ${sliderClass}`}>
20-
<Card variant="dark" className="time-travel-scroller">
20+
<Card variant="dark" className="time-travel-scroller h-100">
2121
<Card.Header className="d-flex">
2222
<h6 className="mr-4 mt-2 w-100 float-left">Time travel on branch - <strong className="text-success">{branch}</strong></h6>
2323
<div className="float-right w-100 text-right">

‎packages/tdb-dashboard/src/components/UserMenu.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {useState} from "react"
22
import {Button, Dropdown,Nav} from 'react-bootstrap';
3-
import {PROFILE} from "../routing/constants"
3+
import {PROFILE,PLANS} from "../routing/constants"
44
import {NavLink as RouterNavLink} from "react-router-dom"
55
import {AiOutlineUser, AiOutlinePoweroff,AiOutlineUsergroupAdd} from "react-icons/ai"
66
import {FaExchangeAlt} from "react-icons/fa"
@@ -79,6 +79,15 @@ export const UserMenu = ({organization}) => {
7979
<Dropdown.Toggle split className="bg-transparent border-0" id="profile_menu_arrow">
8080
</Dropdown.Toggle>
8181
<Dropdown.Menu >
82+
<Dropdown.Item>
83+
<Nav.Link as={RouterNavLink}
84+
title={"View Profile Page"}
85+
to={`/${PLANS}`}
86+
87+
id={"plans"}>
88+
<AiOutlineUser className="mr-3 mb-1" />Subscription
89+
</Nav.Link>
90+
</Dropdown.Item>
8291
{organization && <Dropdown.Item>
8392
<Nav.Link as={RouterNavLink}
8493
title={"View Profile Page"}
@@ -88,7 +97,7 @@ export const UserMenu = ({organization}) => {
8897
<AiOutlineUser className="mr-3 mb-1" />Profile
8998
</Nav.Link>
9099
</Dropdown.Item>}
91-
{isAdmin && <Dropdown.Item>
100+
{organization && isAdmin && <Dropdown.Item>
92101
<Nav.Link as={RouterNavLink}
93102
title={"View Team Members"}
94103
to={`/${organization}/administrator`}

‎packages/tdb-dashboard/src/index.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,11 @@ function NavigationComponent(){
1919
let navigate = useNavigate();
2020
const redirect_uri = window.location.origin
2121

22+
23+
console.log(window.location.search)
24+
2225
const onRedirectCallback = (appState) => {
23-
navigate(appState && appState.targetUrl ? appState.targetUrl : window.location.pathname);
26+
navigate(appState && appState.targetUrl ? appState.targetUrl : window.location.pathname);
2427
};
2528

2629
if(localSettings && localSettings.connection_type!== "LOCAL"){
@@ -48,12 +51,10 @@ function NavigationComponent(){
4851
<App />
4952
</WOQLClientProvider>
5053
}
51-
5254
const basename = process.env.BASE_URL ? {basename:process.env.BASE_URL} : {}
53-
54-
5555
const container = document.getElementById('root');
5656
const root = createRoot(container);
57+
5758
root.render( <BrowserRouter {...basename}>
5859
<NavigationComponent/>
5960
</BrowserRouter>);

‎packages/tdb-dashboard/src/init-woql-client.js‎

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {useState, useEffect, useContext} from 'react'
22
import TerminusClient ,{UTILS} from '@terminusdb/terminusdb-client'
3-
import { DOCUMENT_EXPLORER, PRODUCT_EXPLORER, CHANGE_REQUESTS} from './routing/constants'
3+
import { DOCUMENT_EXPLORER, PRODUCT_EXPLORER, CHANGE_REQUESTS, PLANS,PAYMENT} from './routing/constants'
44
import { useAuth0 } from "./react-auth0-spa"
55
import {getCountOfDocumentClass, getTotalNumberOfDocuments} from "./queries/GeneralQueries"
66
import {executeQueryHook} from "./hooks/executeQueryHook"
@@ -13,11 +13,11 @@ import { createApolloClient } from './routing/ApolloClientConfig'
1313
export const WOQLContext = React.createContext()
1414
export const WOQLClientObj = () => useContext(WOQLContext)
1515

16-
1716
export const WOQLClientProvider = ({children, params}) => {
1817
//the client user can be the local user or the auth0 user in terminusX
1918
//maybe a some point we'll need a local and remote connection (terminusX connection to clone/push and pull etc...)
2019
let clientUser = createClientUser(useAuth0, params)
20+
2121
//let apolloClient
2222
const [woqlClient, setWoqlClient] = useState(null)
2323
const location = useLocation()
@@ -80,7 +80,7 @@ export const WOQLClientProvider = ({children, params}) => {
8080
// in this point params is not setted
8181
// to be review I need params get better
8282
// in pathname teamName and username are still encoded
83-
const noTeam = {"":true,"invite":true,"administrator" :true,"verify":true,"payment":true}
83+
const noTeam = {"":true,"invite":true,"administrator" :true,"verify":true,[PAYMENT]:true,[PLANS]:true}
8484
const noDatabase = {"":true,"profile":true,"administrator" :true}
8585
const getLocation = ()=>{
8686
const locArr = location.pathname.split("/")
@@ -128,6 +128,12 @@ export const WOQLClientProvider = ({children, params}) => {
128128
const access = new TerminusClient.AccessControl(opts.server,accessCredential)
129129
const clientAccessControl = new AccessControlDashboard(access)
130130

131+
//I have to create a new call in accessControl
132+
const url = `${dbClient.server()}api/users/info`
133+
const userInfo = await dbClient.sendCustomRequest("GET", url)
134+
// add extra info to auth0User
135+
clientUser.userInfo = userInfo
136+
131137
if(opts.connection_type !== "LOCAL"){
132138
const rolesList = await clientAccessControl.callGetRolesList()
133139
hasRebaseRole(rolesList)
@@ -148,7 +154,7 @@ export const WOQLClientProvider = ({children, params}) => {
148154
setLoadingServer(false)
149155
}
150156
}
151-
if(opts && opts.server){
157+
if(opts && opts.server && window.location.pathname.indexOf("verify") === -1){
152158
//to be review the local connection maybe don't need a user in the cloud
153159
//and don't need auth0 too
154160
if(opts.connection_type === 'LOCAL'){

‎packages/tdb-dashboard/src/pages/DocumentEdit.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import Alert from 'react-bootstrap/Alert'
1212
import {Loading} from "../components/Loading"
1313
import {DocumentControlObj} from "../hooks/DocumentControlContext"
1414
import {CreateChangeRequestModal} from "../components/CreateChangeRequestModal"
15-
import {UTILS} from '@terminusdb/terminusdb-client'
15+
import {UTILS} from "@terminusdb/terminusdb-client"
1616

1717
const checkIfPrefix =(id)=>{
1818
if(id.indexOf(":")>-1){

‎packages/tdb-dashboard/src/pages/Feedback.js‎

Lines changed: 24 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@ import {Alerts} from "../components/Alerts"
88
import {TERMINUS_SUCCESS, TERMINUS_DANGER} from "../components/constants"
99
import {FaTimes} from "react-icons/fa"
1010
import CowDuckHead from '../assets/CowDuckHead.png';
11+
import { ENTERPRISE_PLAN } from "../payment/labels"
12+
const FEEDBACK = 'feedback'
1113

12-
export const Feedback = ({setShowFeedbackForm}) => {
14+
export const Feedback = ({setShowFeedbackForm, boxType=FEEDBACK}) => {
1315
const {clientUser} = WOQLClientObj()
1416
const {emailResult, sendEmailResult, setEmailError, emailError, sendEmailData}=SendEmailHook()
1517

@@ -35,15 +37,32 @@ export const Feedback = ({setShowFeedbackForm}) => {
3537
setSubject(e.target.value)
3638
}
3739

38-
return <Card className="shadow-sm px-3 rounded-2 py-4 mx-auto mt-5 ff-align-left feedback-form" style={{width: "500px"}}>
40+
const labels = {
41+
[FEEDBACK]: {
42+
title: "Send us your Feedback",
43+
preSubject : "",
44+
subject: "Subject",
45+
message:"If you notice any bugs or have any suggestions about how we can improve TerminusX, please let us know !",
46+
className:"shadow-sm px-3 rounded-2 py-4 mx-auto mt-5 ff-align-left feedback-form"
47+
},
48+
[ENTERPRISE_PLAN]: {
49+
title: "Contact us",
50+
subject: "Enterprice Subscription",
51+
preSubject : "Enterprice Subscription --- ",
52+
message:"please let us know you project!",
53+
className:"shadow-sm px-3 rounded-2 py-4 mx-auto mt-5 ff-align-left feedback-form"
54+
}
55+
}
56+
57+
return <Card className={labels[boxType].className} style={{width: "500px"}}>
3958
<div className="cowduck-top-sec bg-transparent border-0 text-center d-flex">
4059
<img className="card-img cowduck-feedback-avatar large-avatar rounded-circle mx-auto" src={CowDuckHead}/>
4160
<Button onClick={(e) => setShowFeedbackForm(false)} className="feedback-cancel btn btn-sm cancel-button" variant="outline-info">
4261
<FaTimes />
4362
</Button>
4463
</div>
4564
<div>
46-
<h5 className="text-center mt-2">Send us your Feedback </h5>
65+
<h5 className="text-center mt-2">{labels[boxType].title}</h5>
4766
<h1 className="text-center mt-3">Hi {userName} !</h1>
4867
<Form>
4968
{emailResult && <Alerts message={emailResult} type={TERMINUS_SUCCESS} onCancel={sendEmailResult}/>}
@@ -52,14 +71,14 @@ export const Feedback = ({setShowFeedbackForm}) => {
5271
<Form.Label className="text-muted">Subject</Form.Label>
5372
<Form.Control as="input"
5473
rows={1}
55-
placeholder="Subject"
74+
placeholder={labels[boxType].subject}
5675
onBlur={handleSubject}/>
5776
</Form.Group>
5877
<Form.Group>
5978
<Form.Label className="text-muted">Message</Form.Label>
6079
<Form.Control as="textarea"
6180
rows={10}
62-
placeholder="If you notice any bugs or have any suggestions about how we can improve TerminusX, please let us know !"
81+
placeholder={labels[boxType].message}
6382
onBlur={handleMessage}/>
6483
</Form.Group>
6584
</Form>

0 commit comments

Comments
 (0)