Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import React, { useCallback, useState } from 'react'
import { useClient } from 'cozy-client'
import { useDispatch } from 'react-redux'
import './connectionOAuth.scss'
import { Konnector, Trigger, FluidStatus, FluidConnection } from 'models'
import AccountService from 'services/account.service'
import TriggerService from 'services/triggers.service'
import { updatedFluidConnection } from 'store/global/global.actions'
import { UsageEventType } from 'enum/usageEvent.enum'
import UsageEventService from 'services/usageEvent.service'
import PartnerConnectionStepsModal from 'components/PartnerConnectionStepsModal/PartnerConnectionStepsModal'
import ConnectionOAuthNoPartnerAccount from 'components/Connection/ConnectionOAuthNoPartnerAccount'
import ConnectionOAuthWithPartnerAccount from 'components/Connection/ConnectionOAuthWithPartnerAccount'
interface ConnectionOAuthProps {
fluidStatus: FluidStatus
onSuccess: Function
}
const ConnectionOAuth: React.FC<ConnectionOAuthProps> = ({
fluidStatus,
onSuccess,
}: ConnectionOAuthProps) => {
const client = useClient()
const dispatch = useDispatch()
const [
openPartenerConnectionModal,
setOpenPartenerConnectionModal,
] = useState<boolean>(false)
const [
hasSeenPartnerConnectionModal,
setHasSeenPartnerConnectionModal,
] = useState<boolean>(false)
const konnectorSlug: string = fluidStatus.connection.konnectorConfig.slug
const siteLink: string = fluidStatus.connection.konnectorConfig.siteLink
const konnector: Konnector | null = fluidStatus.connection.konnector
const handleSuccess = useCallback(
async (accountId: string) => {
if (konnector) {
const accountService = new AccountService(client)
const account = await accountService.getAccount(accountId)
if (!account) {
const updatedConnection: FluidConnection = {
...fluidStatus.connection,
account: null,
trigger: null,
}
dispatch(
updatedFluidConnection(fluidStatus.fluidType, updatedConnection)
)
await UsageEventService.addEvent(client, {
type: UsageEventType.KONNECTOR_CONNECT_EVENT,
target: konnectorSlug,
result: 'error',
})
} else {
const triggersServices = new TriggerService(client)
const trigger: Trigger = await triggersServices.createTrigger(
account,
konnector
)
const updatedConnection: FluidConnection = {
...fluidStatus.connection,
account: account,
trigger: trigger,
}
dispatch(
updatedFluidConnection(fluidStatus.fluidType, updatedConnection)
)
onSuccess()
}
}
},
[
client,
konnector,
dispatch,
fluidStatus.fluidType,
fluidStatus.connection,
onSuccess,
konnectorSlug,
]
)
const togglePartnerConnectionModal = useCallback(() => {
setOpenPartenerConnectionModal((prev: boolean) => !prev)
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
}, [])
const handleEndSteps = useCallback(() => {
togglePartnerConnectionModal()
window.open(siteLink, '_blank')
setHasSeenPartnerConnectionModal(true)
}, [siteLink, togglePartnerConnectionModal])
return (
<>
{hasSeenPartnerConnectionModal ? (
<ConnectionOAuthWithPartnerAccount
konnectorSlug={konnectorSlug}
konnector={konnector}
handleSuccess={handleSuccess}
togglePartnerConnectionModal={togglePartnerConnectionModal}
/>
) : (
<ConnectionOAuthNoPartnerAccount
konnectorSlug={konnectorSlug}
konnector={konnector}
handleSuccess={handleSuccess}
togglePartnerConnectionModal={togglePartnerConnectionModal}
/>
)}
<PartnerConnectionStepsModal
fluidType={fluidStatus.fluidType}
open={openPartenerConnectionModal}
handleCloseClick={togglePartnerConnectionModal}
handleEndSteps={handleEndSteps}
/>
</>
)
}
export default ConnectionOAuth