Skip to content

Commit a57c841

Browse files
RishadAlamRishadAlam
committed
refactor: google sheet & salesforce redirect url & integ info page
1 parent 9063f50 commit a57c841

File tree

3 files changed

+157
-60
lines changed

3 files changed

+157
-60
lines changed

‎frontend-dev/src/components/AllIntegrations/GoogleSheet/GoogleSheetAuthorization.jsx‎

Lines changed: 106 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import AuthorizationAccountList from '../../OneClickRadioComponents/Authorizatio
1313
import bitsFetch from '../../../Utils/bitsFetch'
1414
import Loader from '../../Loaders/Loader'
1515

16-
1716
export default function GoogleSheetAuthorization({
1817
formID,
1918
sheetConf,
@@ -24,14 +23,15 @@ export default function GoogleSheetAuthorization({
2423
setIsLoading,
2524
setSnackbar,
2625
redirectLocation,
27-
isEdit
26+
isEdit,
27+
isInfo
2828
}) {
2929
const [isAuthorized, setIsAuthorized] = useState(false)
3030
const [error, setError] = useState({ clientId: '', clientSecret: '' })
3131
const btcbi = useRecoilValue($btcbi)
3232
const { googleSheet } = tutorialLinks
3333
const [authData, setAuthData] = useState([])
34-
const [authInfo, setAuthInfo] = useRecoilState(authInfoAtom);
34+
const [authInfo, setAuthInfo] = useRecoilState(authInfoAtom)
3535
const [selectedAuthType, setSelectedAuthType] = useState('Custom Authorization')
3636
// const [selectedUserId, setSelectedUserId] = useState(null)
3737

@@ -58,8 +58,8 @@ export default function GoogleSheetAuthorization({
5858
// setIsLoading(false);
5959
// };
6060

61-
const processAuth = (option) => {
62-
handleAuthorize(sheetConf, option, setError, setIsLoading);
61+
const processAuth = option => {
62+
handleAuthorize(sheetConf, option, setError, setIsLoading)
6363
}
6464

6565
const getAuthData = () => {
@@ -68,9 +68,9 @@ export default function GoogleSheetAuthorization({
6868
actionName: sheetConf.type
6969
}
7070

71-
bitsFetch(null, 'auth/get', queryParams, 'GET').then((res) => {
71+
bitsFetch(null, 'auth/get', queryParams, 'GET').then(res => {
7272
if (res.success && res.data.data.length > 0) {
73-
setAuthData(res.data.data);
73+
setAuthData(res.data.data)
7474
}
7575
setIsLoading(false)
7676
})
@@ -82,7 +82,6 @@ export default function GoogleSheetAuthorization({
8282
// }
8383
// }, [])
8484

85-
8685
// useEffect(() => {
8786

8887
// if (step === 1 && isEdit) {
@@ -97,21 +96,29 @@ export default function GoogleSheetAuthorization({
9796
// }
9897
// }, [authData])
9998

100-
101-
const handleVerificationCode = async (authInfo) => {
102-
await tokenHelper(authInfo, sheetConf, setSheetConf, setIsAuthorized, selectedAuthType, authData, setAuthData, setIsLoading, setSnackbar);
99+
const handleVerificationCode = async authInfo => {
100+
await tokenHelper(
101+
authInfo,
102+
sheetConf,
103+
setSheetConf,
104+
setIsAuthorized,
105+
selectedAuthType,
106+
authData,
107+
setAuthData,
108+
setIsLoading,
109+
setSnackbar
110+
)
103111
setAuthInfo(undefined)
104112
// getAuthData()
105113
}
106114

107115
useEffect(() => {
108-
if (!authInfo || Object.keys(authInfo).length === 0) return;
109-
110-
handleVerificationCode(authInfo);
111-
}, [authInfo]);
116+
if (!authInfo || Object.keys(authInfo).length === 0) return
112117

118+
handleVerificationCode(authInfo)
119+
}, [authInfo])
113120

114-
const handleInput = (e) => {
121+
const handleInput = e => {
115122
const newConf = { ...sheetConf }
116123
const rmError = { ...error }
117124
rmError[e.target.name] = ''
@@ -133,13 +140,7 @@ export default function GoogleSheetAuthorization({
133140
}, 300)
134141

135142
setstep(2)
136-
refreshSpreadsheets(
137-
formID,
138-
sheetConf,
139-
setSheetConf,
140-
setIsLoading,
141-
setSnackbar
142-
)
143+
refreshSpreadsheets(formID, sheetConf, setSheetConf, setIsLoading, setSnackbar)
143144
}
144145

145146
return (
@@ -149,10 +150,7 @@ export default function GoogleSheetAuthorization({
149150
{googleSheet?.youTubeLink && (
150151
<TutorialLink title="Google Sheets" youTubeLink={googleSheet?.youTubeLink} />
151152
)}
152-
{googleSheet?.docLink && (
153-
<TutorialLink title="Google Sheets" docLink={googleSheet?.docLink} />
154-
)}
155-
153+
{googleSheet?.docLink && <TutorialLink title="Google Sheets" docLink={googleSheet?.docLink} />}
156154

157155
{/* <div>
158156
<h2>Choose channel</h2>
@@ -164,37 +162,89 @@ export default function GoogleSheetAuthorization({
164162
/>
165163
</div> */}
166164

167-
{selectedAuthType === "Custom Authorization" && (
165+
{selectedAuthType === 'Custom Authorization' && (
168166
<div>
169-
<div className="mt-3"><b>{__('Integration Name:', 'bit-integrations')}</b></div>
170-
<input className="btcd-paper-inp w-6 mt-1" onChange={handleInput} name="name" value={sheetConf.name} type="text" placeholder={__('Integration Name...', 'bit-integrations')} />
167+
<div className="mt-3">
168+
<b>{__('Integration Name:', 'bit-integrations')}</b>
169+
</div>
170+
<input
171+
className="btcd-paper-inp w-6 mt-1"
172+
onChange={handleInput}
173+
name="name"
174+
value={sheetConf.name}
175+
type="text"
176+
placeholder={__('Integration Name...', 'bit-integrations')}
177+
disabled={isInfo}
178+
/>
171179

172-
<div className="mt-3"><b>{__('Homepage URL:', 'bit-integrations')}</b></div>
173-
<CopyText value={`${window.location.origin}`} className="field-key-cpy w-6 ml-0" setSnackbar={setSnackbar} />
180+
<div className="mt-3">
181+
<b>{__('Homepage URL:', 'bit-integrations')}</b>
182+
</div>
183+
<CopyText
184+
value={`${window.location.origin}`}
185+
className="field-key-cpy w-6 ml-0"
186+
setSnackbar={setSnackbar}
187+
/>
174188

175-
<div className="mt-3"><b>{__('Authorized Redirect URIs:', 'bit-integrations')}</b></div>
176-
<CopyText value={redirectLocation || `${btcbi.api.base}/redirect`} className="field-key-cpy w-6 ml-0" setSnackbar={setSnackbar} />
189+
<div className="mt-3">
190+
<b>{__('Authorized Redirect URIs:', 'bit-integrations')}</b>
191+
</div>
192+
<CopyText
193+
value={redirectLocation || `${btcbi.api.base}/redirect`}
194+
className="field-key-cpy w-6 ml-0"
195+
setSnackbar={setSnackbar}
196+
/>
177197

178198
<small className="d-blk mt-5">
179-
{__('To get Client ID and SECRET , Please Visit', 'bit-integrations')}
180-
{' '}
181-
<a className="btcd-link" href="https://console.developers.google.com/apis/credentials" target="_blank" rel="noreferrer">{__('Google API Console', 'bit-integrations')}</a>
199+
{__('To get Client ID and SECRET , Please Visit', 'bit-integrations')}{' '}
200+
<a
201+
className="btcd-link"
202+
href="https://console.developers.google.com/apis/credentials"
203+
target="_blank"
204+
rel="noreferrer">
205+
{__('Google API Console', 'bit-integrations')}
206+
</a>
182207
</small>
183208

184-
<div className="mt-3"><b>{__('Client id:', 'bit-integrations')}</b></div>
185-
<input className="btcd-paper-inp w-6 mt-1" onChange={handleInput} name="clientId" value={sheetConf.clientId} type="text" placeholder={__('Client id...', 'bit-integrations')} />
209+
<div className="mt-3">
210+
<b>{__('Client id:', 'bit-integrations')}</b>
211+
</div>
212+
<input
213+
className="btcd-paper-inp w-6 mt-1"
214+
onChange={handleInput}
215+
name="clientId"
216+
value={sheetConf.clientId}
217+
type="text"
218+
placeholder={__('Client id...', 'bit-integrations')}
219+
disabled={isInfo}
220+
/>
186221
<div style={{ color: 'red', fontSize: '15px' }}>{error.clientId}</div>
187222

188-
<div className="mt-3"><b>{__('Client secret:', 'bit-integrations')}</b></div>
189-
<input className="btcd-paper-inp w-6 mt-1" onChange={handleInput} name="clientSecret" value={sheetConf.clientSecret} type="text" placeholder={__('Client secret...', 'bit-integrations')} />
223+
<div className="mt-3">
224+
<b>{__('Client secret:', 'bit-integrations')}</b>
225+
</div>
226+
<input
227+
className="btcd-paper-inp w-6 mt-1"
228+
onChange={handleInput}
229+
name="clientSecret"
230+
value={sheetConf.clientSecret}
231+
type="text"
232+
placeholder={__('Client secret...', 'bit-integrations')}
233+
disabled={isInfo}
234+
/>
190235
<div style={{ color: 'red', fontSize: '15px' }}>{error.clientSecret}</div>
191236

192-
<button onClick={() => processAuth(selectedAuthType)} className="btn btcd-btn-lg purple sh-sm flx" type="button" disabled={isLoading}>
193-
{isAuthorized ? __('Authorized ✔', 'bit-integrations') : __('Authorize', 'bit-integrations')}
237+
<button
238+
onClick={() => processAuth(selectedAuthType)}
239+
className="btn btcd-btn-lg purple sh-sm flx"
240+
type="button"
241+
disabled={isLoading || isInfo}>
242+
{isAuthorized || isInfo
243+
? __('Authorized ✔', 'bit-integrations')
244+
: __('Authorize', 'bit-integrations')}
194245
{isLoading && <LoaderSm size={20} clr="#022217" className="ml-2" />}
195246
</button>
196247
<br />
197-
198248
</div>
199249
)}
200250
{isLoading && selectedAuthType !== 'Custom Authorization' && (
@@ -221,14 +271,22 @@ export default function GoogleSheetAuthorization({
221271
/>
222272
</>
223273
} */}
224-
{(isAuthorized && selectedAuthType === "One Click Authorization") &&
225-
(<button onClick={() => processAuth()} className="btn btcd-btn-lg purple sh-sm flx" type="button" disabled={isLoading}>
274+
{isAuthorized && selectedAuthType === 'One Click Authorization' && (
275+
<button
276+
onClick={() => processAuth()}
277+
className="btn btcd-btn-lg purple sh-sm flx"
278+
type="button"
279+
disabled={isLoading}>
226280
{isAuthorized ? __('Authorized ✔', 'bit-integrations') : __('Authorize', 'bit-integrations')}
227281
{isLoading && <LoaderSm size={20} clr="#022217" className="ml-2" />}
228282
</button>
229-
)}
283+
)}
230284
<br />
231-
<button onClick={() => nextPage(2)} className="btn f-right btcd-btn-lg purple sh-sm flx" type="button" disabled={!isAuthorized}>
285+
<button
286+
onClick={() => nextPage(2)}
287+
className="btn f-right btcd-btn-lg purple sh-sm flx"
288+
type="button"
289+
disabled={!isAuthorized}>
232290
{__('Next', 'bit-integrations')}
233291
<BackIcn className="ml-1 rev-icn" />
234292
</button>

‎frontend-dev/src/components/AllIntegrations/IntegInfo.jsx‎

Lines changed: 49 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { Link, useParams } from 'react-router-dom'
77
import useFetch from '../../hooks/useFetch'
88
import { __ } from '../../Utils/i18nwrap'
99
import SnackMsg from '../Utilities/SnackMsg'
10+
import { useRecoilValue } from 'recoil'
11+
import { $btcbi } from '../../GlobalStates'
1012

1113
const Loader = lazy(() => import('../Loaders/Loader'))
1214
const PaidMembershipProAuthorization = lazy(
@@ -25,7 +27,7 @@ const ZohoMarketingHubAuthorization = lazy(
2527
() => import('./ZohoMarketingHub/ZohoMarketingHubAuthorization')
2628
)
2729
const ZohoRecruitAuthorization = lazy(() => import('./ZohoRecruit/ZohoRecruitAuthorization'))
28-
const GoogleSheetInfo = lazy(() => import('./GoogleSheet/GoogleSheetInfo'))
30+
const GoogleSheetAuthorization = lazy(() => import('./GoogleSheet/GoogleSheetAuthorization'))
2931
const MailChimpAuthorization = lazy(() => import('./MailChimp/MailChimpAuthorization'))
3032
const MailPoetAuthorization = lazy(() => import('./MailPoet/MailPoetAuthorization'))
3133
const SendinblueAuthorization = lazy(() => import('./SendinBlue/SendinBlueAuthorization'))
@@ -168,6 +170,7 @@ const ACPTAuthorization = lazy(() => import('./ACPT/ACPTAuthorization'))
168170

169171
export default function IntegInfo() {
170172
const { id, type } = useParams()
173+
const btcbi = useRecoilValue($btcbi)
171174
const [snack, setSnackbar] = useState({ show: false })
172175
const [integrationConf, setIntegrationConf] = useState({})
173176
const { data, isLoading, isError } = useFetch({
@@ -192,9 +195,10 @@ export default function IntegInfo() {
192195
}, [data])
193196

194197
// route is info/:id but for redirect uri need to make new/:type
195-
let location = window.location.toString()
196-
const toReplaceInd = location.indexOf('/info')
197-
location = window.encodeURI(`${location.slice(0, toReplaceInd)}/new/${type}`)
198+
// let location = window.location.toString()
199+
// const toReplaceInd = location.indexOf('/info')
200+
// location = window.encodeURI(`${location.slice(0, toReplaceInd)}/new/${type}`)
201+
let location = `${btcbi.api.base}/redirect`
198202

199203
const IntegrationInfo = () => {
200204
switch (integrationConf.type) {
@@ -208,6 +212,15 @@ export default function IntegInfo() {
208212
return <DropboxAuthorization dropboxConf={integrationConf} step={1} isInfo />
209213
case 'OneDrive':
210214
return <OneDriveAuthorization oneDriveConf={integrationConf} step={1} isInfo />
215+
case 'Google Sheet':
216+
return (
217+
<GoogleSheetAuthorization
218+
sheetConf={integrationConf}
219+
step={1}
220+
redirectLocation={location}
221+
isInfo
222+
/>
223+
)
211224
case 'Google Drive':
212225
return (
213226
<GoogleDriveAuthorization
@@ -265,8 +278,6 @@ export default function IntegInfo() {
265278
isInfo
266279
/>
267280
)
268-
case 'Google Sheet':
269-
return <GoogleSheetInfo sheetConf={integrationConf} isInfo />
270281
case 'Mail Chimp':
271282
return (
272283
<MailChimpAuthorization
@@ -307,7 +318,14 @@ export default function IntegInfo() {
307318
case 'Ants & Apps':
308319
return <AntAppsAuthorization webHooks={integrationConf} step={1} isInfo />
309320
case 'Zoho Flow':
310-
return <ZohoFlowAuthorization webHooks={integrationConf} step={1} isInfo />
321+
return (
322+
<ZohoFlowAuthorization
323+
webHooks={integrationConf}
324+
redirectLocation={location}
325+
step={1}
326+
isInfo
327+
/>
328+
)
311329
case 'Telegram':
312330
return <TelegramAuthorization telegramConf={integrationConf} step={1} isInfo />
313331
case 'Fluent CRM':
@@ -331,7 +349,14 @@ export default function IntegInfo() {
331349
case 'Hubspot':
332350
return <HubspotAuthorization hubspotConf={integrationConf} step={1} isInfo />
333351
case 'Zoho Desk':
334-
return <ZohoDeskAuthorization deskConf={integrationConf} step={1} isInfo />
352+
return (
353+
<ZohoDeskAuthorization
354+
deskConf={integrationConf}
355+
redirectLocation={location}
356+
step={1}
357+
isInfo
358+
/>
359+
)
335360
case 'Sendy':
336361
return <SendyAuthorization deskConf={integrationConf} step={1} isInfo />
337362
case 'Keap':
@@ -363,7 +388,14 @@ export default function IntegInfo() {
363388
case 'Kirim Email':
364389
return <KirimEmailAuthorization kirimEmailConf={integrationConf} step={1} isInfo />
365390
case 'Salesforce':
366-
return <SalesforceAuthorization salesforceConf={integrationConf} step={1} isInfo />
391+
return (
392+
<SalesforceAuthorization
393+
salesforceConf={integrationConf}
394+
step={1}
395+
redirectLocation={location}
396+
isInfo
397+
/>
398+
)
367399
case 'Klaviyo':
368400
return <KlaviyoAuthorization klaviyoConf={integrationConf} step={1} isInfo />
369401
case 'Selzy':
@@ -429,7 +461,14 @@ export default function IntegInfo() {
429461
case 'Airtable':
430462
return <AirtableAuthorization airtableConf={integrationConf} step={1} isInfo />
431463
case 'Zoho Sheet':
432-
return <ZohoSheetAuthorization zohoSheetConf={integrationConf} step={1} isInfo />
464+
return (
465+
<ZohoSheetAuthorization
466+
zohoSheetConf={integrationConf}
467+
redirectLocation={location}
468+
step={1}
469+
isInfo
470+
/>
471+
)
433472
case 'FreshSales':
434473
return <FreshSalesAuthorization freshSalesConf={integrationConf} step={1} isInfo />
435474
case 'Insightly':

0 commit comments

Comments
 (0)