Skip to content

Commit 2f5edaa

Browse files
RishadAlamRishadAlam
committed
Merge remote-tracking branch 'origin/new-action/bento' into rishad-dev-tmp
2 parents 6a0b0e4 + 1c303b0 commit 2f5edaa

File tree

21 files changed

+1292
-37
lines changed

21 files changed

+1292
-37
lines changed

‎frontend-dev/src/Utils/StaticData/tutorialLinks.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -610,6 +610,10 @@ const tutorialLinks = {
610610
smartSuite: {
611611
youTubeLink: '',
612612
docLink: 'https://bit-integrations.com/wp-docs/actions/smartsuite-integrations/'
613+
},
614+
bento: {
615+
youTubeLink: '',
616+
docLink: 'https://bit-integrations.com/wp-docs/actions/bento-integrations/'
613617
}
614618
}
615619
export default tutorialLinks

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

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
/* eslint-disable no-console */
2+
/* eslint-disable no-unused-expressions */
3+
import { useState } from 'react'
4+
import toast from 'react-hot-toast'
5+
import 'react-multiple-select-dropdown-lite/dist/index.css'
6+
import { useNavigate } from 'react-router-dom'
7+
import { __ } from '../../../Utils/i18nwrap'
8+
import SnackMsg from '../../Utilities/SnackMsg'
9+
import Steps from '../../Utilities/Steps'
10+
import { saveIntegConfig } from '../IntegrationHelpers/IntegrationHelpers'
11+
import IntegrationStepThree from '../IntegrationHelpers/IntegrationStepThree'
12+
import BentoAuthorization from './BentoAuthorization'
13+
import { checkMappedFields } from './BentoCommonFunc'
14+
import BentoIntegLayout from './BentoIntegLayout'
15+
16+
function Bento({ formFields, setFlow, flow, allIntegURL }) {
17+
const navigate = useNavigate()
18+
const [isLoading, setIsLoading] = useState(false)
19+
const [loading, setLoading] = useState({})
20+
const [step, setStep] = useState(1)
21+
const [snack, setSnackbar] = useState({ show: false })
22+
23+
const [bentoConf, setBentoConf] = useState({
24+
name: 'Bento',
25+
type: 'Bento',
26+
publishable_key: process.env.NODE_ENV === 'development' ? 'p5a8bbc915c21ef10e61a360a91dbbcc6' : '',
27+
secret_key: process.env.NODE_ENV === 'development' ? 's157573fef647a67ee7855ee28d7356f0' : '',
28+
site_uuid: process.env.NODE_ENV === 'development' ? '2575b8ccda54062d1f022611916bb0a4' : '',
29+
field_map: [{ formField: '', bentoFormField: '' }],
30+
action: '',
31+
actions: [
32+
{ value: 'add_people', label: __('Add People', 'bit-integrations'), is_pro: false },
33+
{ value: 'add_event', label: __('Add Event', 'bit-integrations'), is_pro: true }
34+
]
35+
})
36+
37+
const saveConfig = () => {
38+
setIsLoading(true)
39+
const resp = saveIntegConfig(flow, setFlow, allIntegURL, bentoConf, navigate, '', '', setIsLoading)
40+
resp.then(res => {
41+
if (res.success) {
42+
toast.success(res.data?.msg)
43+
navigate(allIntegURL)
44+
} else {
45+
toast.error(res.data || res)
46+
}
47+
})
48+
}
49+
50+
const nextPage = pageNo => {
51+
setTimeout(() => {
52+
document.getElementById('btcd-settings-wrp').scrollTop = 0
53+
}, 300)
54+
55+
bentoConf.field_map.length > 0 && setStep(pageNo)
56+
}
57+
58+
return (
59+
<div>
60+
<SnackMsg snack={snack} setSnackbar={setSnackbar} />
61+
<div className="txt-center mt-2">
62+
<Steps step={3} active={step} />
63+
</div>
64+
65+
{/* STEP 1 */}
66+
<BentoAuthorization
67+
bentoConf={bentoConf}
68+
setBentoConf={setBentoConf}
69+
step={step}
70+
setStep={setStep}
71+
loading={loading}
72+
setLoading={setLoading}
73+
setSnackbar={setSnackbar}
74+
/>
75+
76+
{/* STEP 2 */}
77+
<div
78+
className="btcd-stp-page"
79+
style={{ ...(step === 2 && { width: 900, height: 'auto', overflow: 'visible' }) }}>
80+
<BentoIntegLayout
81+
formFields={formFields}
82+
bentoConf={bentoConf}
83+
setBentoConf={setBentoConf}
84+
loading={loading}
85+
setLoading={setLoading}
86+
isLoading={isLoading}
87+
setIsLoading={setIsLoading}
88+
setSnackbar={setSnackbar}
89+
/>
90+
91+
{bentoConf?.action && (
92+
<button
93+
onClick={() => nextPage(3)}
94+
disabled={!checkMappedFields(bentoConf)}
95+
className="btn f-right btcd-btn-lg purple sh-sm flx"
96+
type="button">
97+
{__('Next', 'bit-integrations')} &nbsp;
98+
<div className="btcd-icn icn-arrow_back rev-icn d-in-b" />
99+
</button>
100+
)}
101+
</div>
102+
103+
{/* STEP 3 */}
104+
{bentoConf?.action && (
105+
<IntegrationStepThree
106+
step={step}
107+
saveConfig={() => saveConfig()}
108+
isLoading={isLoading}
109+
dataConf={bentoConf}
110+
setDataConf={setBentoConf}
111+
formFields={formFields}
112+
/>
113+
)}
114+
</div>
115+
)
116+
}
117+
118+
export default Bento

‎frontend-dev/src/components/AllIntegrations/Bento/BentoActions.jsx‎

Lines changed: 174 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,174 @@
1+
/* eslint-disable max-len */
2+
/* eslint-disable no-param-reassign */
3+
4+
import { create } from 'mutative'
5+
import { useState } from 'react'
6+
import MultiSelect from 'react-multiple-select-dropdown-lite'
7+
import 'react-multiple-select-dropdown-lite/dist/index.css'
8+
import { useRecoilValue } from 'recoil'
9+
import { $btcbi } from '../../../GlobalStates'
10+
import { __ } from '../../../Utils/i18nwrap'
11+
import Loader from '../../Loaders/Loader'
12+
import ConfirmModal from '../../Utilities/ConfirmModal'
13+
import TableCheckBox from '../../Utilities/TableCheckBox'
14+
import { ProFeatureTitle } from '../IntegrationHelpers/ActionProFeatureLabels'
15+
import { getAllTags } from './BentoCommonFunc'
16+
17+
export default function BentoActions({
18+
bentoConf,
19+
setBentoConf,
20+
loading,
21+
setLoading,
22+
isLoading,
23+
setIsLoading,
24+
setSnackbar
25+
}) {
26+
const [actionMdl, setActionMdl] = useState({ show: false })
27+
const btcbi = useRecoilValue($btcbi)
28+
const { isPro } = btcbi
29+
30+
const actionHandler = (e, type) => {
31+
if (type === 'add_tags' || type === 'add_tags_via_event') {
32+
getAllTags(bentoConf, setBentoConf, setLoading)
33+
} else if (type === 'subscribe') {
34+
setBentoConf(prevConf =>
35+
create(prevConf, draftConf => {
36+
draftConf[type] = Boolean(e.target.checked)
37+
})
38+
)
39+
}
40+
41+
setActionMdl({ show: type })
42+
}
43+
44+
const clsActionMdl = () => {
45+
setActionMdl({ show: false })
46+
}
47+
48+
const setChanges = (val, type) => {
49+
setBentoConf(prevConf =>
50+
create(prevConf, draftConf => {
51+
draftConf[type] = val
52+
})
53+
)
54+
}
55+
56+
return (
57+
<>
58+
<div className="pos-rel d-flx w-8">
59+
{'add_people' === bentoConf.action && (
60+
<>
61+
<TableCheckBox
62+
onChange={e => actionHandler(e, 'add_tags')}
63+
checked={bentoConf?.selected_tags?.length > 0 || false}
64+
className="wdt-200 mt-4 mr-2"
65+
value="add_tags"
66+
isInfo={!isPro}
67+
title={<ProFeatureTitle title={__('Add Tags', 'bit-integrations')} />}
68+
subTitle={'Add Tags'}
69+
/>
70+
<TableCheckBox
71+
onChange={e => actionHandler(e, 'add_tags_via_event')}
72+
checked={bentoConf?.selected_tags_via_event?.length > 0 || false}
73+
className="wdt-200 mt-4 mr-2"
74+
value="add_tags_via_event"
75+
isInfo={!isPro}
76+
title={<ProFeatureTitle title={__('Add Tags via Event', 'bit-integrations')} />}
77+
subTitle={'Add Tags via Event'}
78+
/>
79+
<TableCheckBox
80+
onChange={e => actionHandler(e, 'subscribe')}
81+
checked={bentoConf?.subscribe || false}
82+
className="wdt-200 mt-4 mr-2"
83+
value="subscribe"
84+
isInfo={!isPro}
85+
title={<ProFeatureTitle title={__('Subscribe', 'bit-integrations')} />}
86+
subTitle={'Subscribe User'}
87+
/>
88+
</>
89+
)}
90+
91+
{isPro && (
92+
<>
93+
<ConfirmModal
94+
className="custom-conf-mdl"
95+
mainMdlCls="o-v"
96+
btnClass="purple"
97+
btnTxt={__('Ok', 'bit-integrations')}
98+
show={actionMdl.show === 'add_tags'}
99+
close={clsActionMdl}
100+
action={clsActionMdl}
101+
title={__('Add Tags', 'bit-integrations')}>
102+
<div className="btcd-hr mt-2 mb-2" />
103+
{loading?.tags ? (
104+
<Loader
105+
style={{
106+
display: 'flex',
107+
justifyContent: 'center',
108+
alignItems: 'center',
109+
height: 45,
110+
transform: 'scale(0.5)'
111+
}}
112+
/>
113+
) : (
114+
<div className="flx mt-2">
115+
<MultiSelect
116+
className="msl-wrp-options"
117+
defaultValue={bentoConf?.selected_tags}
118+
options={bentoConf.tags}
119+
onChange={val => setChanges(val, 'selected_tags')}
120+
/>
121+
<button
122+
onClick={() => getAllTags(bentoConf, setBentoConf, setLoading)}
123+
className="icn-btn sh-sm ml-2 mr-2 tooltip"
124+
style={{ '--tooltip-txt': `'${__('Refresh Tags', 'bit-integrations')}'` }}
125+
type="button">
126+
&#x21BB;
127+
</button>
128+
</div>
129+
)}
130+
</ConfirmModal>
131+
<ConfirmModal
132+
className="custom-conf-mdl"
133+
mainMdlCls="o-v"
134+
btnClass="purple"
135+
btnTxt={__('Ok', 'bit-integrations')}
136+
show={actionMdl.show === 'add_tags_via_event'}
137+
close={clsActionMdl}
138+
action={clsActionMdl}
139+
title={__('Add Tags via Event', 'bit-integrations')}>
140+
<div className="btcd-hr mt-2 mb-2" />
141+
{loading?.tags ? (
142+
<Loader
143+
style={{
144+
display: 'flex',
145+
justifyContent: 'center',
146+
alignItems: 'center',
147+
height: 45,
148+
transform: 'scale(0.5)'
149+
}}
150+
/>
151+
) : (
152+
<div className="flx mt-2">
153+
<MultiSelect
154+
className="msl-wrp-options"
155+
defaultValue={bentoConf?.selected_tags_via_event}
156+
options={bentoConf.tags}
157+
onChange={val => setChanges(val, 'selected_tags_via_event')}
158+
/>
159+
<button
160+
onClick={() => getAllTags(bentoConf, setBentoConf, setLoading)}
161+
className="icn-btn sh-sm ml-2 mr-2 tooltip"
162+
style={{ '--tooltip-txt': `'${__('Refresh Tags', 'bit-integrations')}'` }}
163+
type="button">
164+
&#x21BB;
165+
</button>
166+
</div>
167+
)}
168+
</ConfirmModal>
169+
</>
170+
)}
171+
</div>
172+
</>
173+
)
174+
}

0 commit comments

Comments
 (0)