Skip to content

Commit bf6e12b

Browse files
RishadAlamRishadAlam
committed
refactor: mailerLite integration configuration
1 parent 6e6d088 commit bf6e12b

File tree

6 files changed

+176
-168
lines changed

6 files changed

+176
-168
lines changed

‎frontend-dev/src/components/AllIntegrations/MailerLite/EditMailerLite.jsx‎

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable no-param-reassign */
22

3-
import { useState } from 'react'
3+
import { useEffect, useState } from 'react'
44
import { useNavigate, useParams } from 'react-router-dom'
55
import { useRecoilState, useRecoilValue } from 'recoil'
66
import { $actionConf, $formFields, $newFlow } from '../../../GlobalStates'
@@ -13,6 +13,7 @@ import { saveActionConf } from '../IntegrationHelpers/IntegrationHelpers'
1313
import IntegrationStepThree from '../IntegrationHelpers/IntegrationStepThree'
1414
import { checkMappedFields, handleInput } from './MailerLiteCommonFunc'
1515
import MailerLiteIntegLayout from './MailerLiteIntegLayout'
16+
import { create } from 'mutative'
1617

1718
function EditMailerLite({ allIntegURL }) {
1819
const navigate = useNavigate()
@@ -45,6 +46,16 @@ function EditMailerLite({ allIntegURL }) {
4546
})
4647
}
4748

49+
useEffect(() => {
50+
if (!mailerLiteConf?.action) {
51+
setMailerLiteConf(prev =>
52+
create(prev, draftConf => {
53+
draftConf.action = 'add_subscriber'
54+
})
55+
)
56+
}
57+
}, [])
58+
4859
return (
4960
<div style={{ width: 900 }}>
5061
<SnackMsg snack={snack} setSnackbar={setSnackbar} />
@@ -53,7 +64,7 @@ function EditMailerLite({ allIntegURL }) {
5364
<b className="wdt-200 d-in-b">{__('Integration Name:', 'bit-integrations')}</b>
5465
<input
5566
className="btcd-paper-inp w-5"
56-
onChange={(e) => handleInput(e, mailerLiteConf, setMailerLiteConf)}
67+
onChange={e => handleInput(e, mailerLiteConf, setMailerLiteConf, loading, setLoading)}
5768
name="name"
5869
value={mailerLiteConf.name}
5970
type="text"
@@ -66,9 +77,7 @@ function EditMailerLite({ allIntegURL }) {
6677
<MailerLiteIntegLayout
6778
formID={flow.triggered_entity_id}
6879
formFields={formField}
69-
handleInput={(e) =>
70-
handleInput(e, mailerLiteConf, setMailerLiteConf, setLoading, setSnackbar)
71-
}
80+
handleInput={e => handleInput(e, mailerLiteConf, setMailerLiteConf, loading, setLoading)}
7281
mailerLiteConf={mailerLiteConf}
7382
setMailerLiteConf={setMailerLiteConf}
7483
loading={loading}

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

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ function MailerLite({ formFields, setFlow, flow, allIntegURL }) {
3535
mailerLiteFields: [],
3636
groups: [],
3737
group_ids: [],
38-
actions: {}
38+
action: ''
3939
})
4040

4141
const saveConfig = () => {
@@ -96,22 +96,24 @@ function MailerLite({ formFields, setFlow, flow, allIntegURL }) {
9696
style={{ ...(step === 2 && { width: 900, height: 'auto', overflow: 'visible' }) }}>
9797
<MailerLiteIntegLayout
9898
formFields={formFields}
99-
handleInput={e => handleInput(e, mailerLiteConf, setMailerLiteConf, setLoading, setSnackbar)}
99+
handleInput={e => handleInput(e, mailerLiteConf, setMailerLiteConf, loading, setLoading)}
100100
mailerLiteConf={mailerLiteConf}
101101
setMailerLiteConf={setMailerLiteConf}
102102
loading={loading}
103103
setLoading={setLoading}
104104
setSnackbar={setSnackbar}
105105
/>
106106

107-
<button
108-
onClick={() => nextPage(3)}
109-
// disabled={!mailerLiteConf?.recipient_id}
110-
className="btn f-right btcd-btn-lg purple sh-sm flx"
111-
type="button">
112-
{__('Next', 'bit-integrations')} &nbsp;
113-
<div className="btcd-icn icn-arrow_back rev-icn d-in-b" />
114-
</button>
107+
{mailerLiteConf?.action && (
108+
<button
109+
onClick={() => nextPage(3)}
110+
disabled={!checkMappedFields(mailerLiteConf)}
111+
className="btn f-right btcd-btn-lg purple sh-sm flx"
112+
type="button">
113+
{__('Next', 'bit-integrations')} &nbsp;
114+
<div className="btcd-icn icn-arrow_back rev-icn d-in-b" />
115+
</button>
116+
)}
115117
</div>
116118

117119
{/* STEP 3 */}

‎frontend-dev/src/components/AllIntegrations/MailerLite/MailerLiteAuthorization.jsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
/* eslint-disable no-unused-expressions */
22
import { useState } from 'react'
33
import { __ } from '../../../Utils/i18nwrap'
4+
import tutorialLinks from '../../../Utils/StaticData/tutorialLinks'
45
import LoaderSm from '../../Loaders/LoaderSm'
56
import Note from '../../Utilities/Note'
6-
import { authorization, mailerliteRefreshFields } from './MailerLiteCommonFunc'
7-
import tutorialLinks from '../../../Utils/StaticData/tutorialLinks'
87
import TutorialLink from '../../Utilities/TutorialLink'
8+
import { authorization } from './MailerLiteCommonFunc'
99

1010
export default function MailerLiteAuthorization({
1111
mailerLiteConf,
@@ -42,6 +42,7 @@ export default function MailerLiteAuthorization({
4242
setError(rmError)
4343
setMailerLiteConf(newConf)
4444
}
45+
4546
const note = `
4647
<h4>${__('Step of generate API token:', 'bit-integrations')}</h4>
4748
<ul>
@@ -135,7 +136,7 @@ export default function MailerLiteAuthorization({
135136
{!isInfo && (
136137
<div>
137138
<button
138-
onClick={() => authorization(mailerLiteConf, setError, setIsAuthorized, loading, setLoading)}
139+
onClick={() => authorization(mailerLiteConf, setIsAuthorized, loading, setLoading)}
139140
className="btn btcd-btn-lg purple sh-sm flx"
140141
type="button"
141142
disabled={

‎frontend-dev/src/components/AllIntegrations/MailerLite/MailerLiteCommonFunc.js‎

Lines changed: 55 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,20 @@
22
import toast from 'react-hot-toast'
33
import { __ } from '../../../Utils/i18nwrap'
44
import bitsFetch from '../../../Utils/bitsFetch'
5+
import { create } from 'mutative'
56

6-
export const handleInput = (
7-
e,
8-
mailerLiteConf,
9-
setMailerLiteConf,
10-
setLoading,
11-
setSnackbar,
12-
isNew,
13-
error,
14-
setError
15-
) => {
16-
const newConf = { ...mailerLiteConf }
17-
const { name } = e.target
18-
if (e.target.value !== '') {
19-
newConf[name] = e.target.value
20-
} else {
21-
delete newConf[name]
22-
}
23-
setMailerLiteConf({ ...newConf })
7+
export const handleInput = (e, mailerLiteConf, setMailerLiteConf, loading, setLoading) => {
8+
const { name, value } = e.target
9+
10+
setMailerLiteConf(prev =>
11+
create(prev, draftConf => {
12+
draftConf[name] = value
13+
14+
if (name === 'action' && value !== '') {
15+
mailerliteRefreshFields(draftConf, setMailerLiteConf, loading, setLoading)
16+
}
17+
})
18+
)
2419
}
2520

2621
export const generateMappedField = mailerLiteConf => {
@@ -48,15 +43,13 @@ export const checkMappedFields = mailerLiteConf => {
4843
return true
4944
}
5045

51-
export const authorization = (confTmp, setError, setIsAuthorized, loading, setLoading) => {
46+
export const authorization = (confTmp, setIsAuthorized, loading, setLoading) => {
5247
if (!confTmp.auth_token) {
53-
setError({
54-
auth_token: !confTmp.auth_token ? __("API Key can't be empty", 'bit-integrations') : ''
55-
})
48+
toast.error(__("API Key can't be empty", 'bit-integrations'))
5649

5750
return
5851
}
59-
setError({})
52+
6053
setLoading({ ...loading, auth: true })
6154

6255
const requestParams = {
@@ -79,26 +72,35 @@ export const authorization = (confTmp, setError, setIsAuthorized, loading, setLo
7972
})
8073
}
8174

82-
export const mailerliteRefreshFields = (
83-
confTmp,
84-
setConf,
85-
setError,
86-
setIsAuthorized,
87-
loading,
88-
setLoading,
89-
type
90-
) => {
75+
export const mailerliteRefreshFields = (confTmp, setConf, loading, setLoading) => {
9176
if (!confTmp.auth_token) {
92-
setError({
93-
auth_token: !confTmp.auth_token ? __("API Key can't be empty", 'bit-integrations') : ''
94-
})
77+
toast.error(__("API Key can't be empty", 'bit-integrations'))
78+
9579
return
9680
}
97-
setError({})
98-
if (type === 'authorization') {
99-
setLoading({ ...loading, auth: true })
100-
} else {
101-
setLoading({ ...loading, field: true })
81+
82+
setLoading({ ...loading, field: true })
83+
84+
if (confTmp?.action !== 'add_subscriber') {
85+
setLoading({ ...loading, field: false })
86+
87+
setConf(prev =>
88+
create(prev, draftConf => {
89+
draftConf.mailerLiteFields = [
90+
{
91+
key: 'email',
92+
label: 'Email',
93+
required: true
94+
}
95+
]
96+
97+
draftConf.field_map = generateMappedField(draftConf)
98+
})
99+
)
100+
101+
toast.success(__('Fields refresh successfully', 'bit-integrations'))
102+
103+
return
102104
}
103105

104106
const requestParams = {
@@ -107,29 +109,22 @@ export const mailerliteRefreshFields = (
107109
}
108110

109111
bitsFetch(requestParams, 'mailerlite_refresh_fields').then(result => {
112+
setLoading({ ...loading, field: false })
113+
110114
if (result && result.success) {
111-
const newConf = { ...confTmp }
112-
if (result.data) {
113-
newConf.mailerLiteFields = result.data
114-
}
115-
setConf(newConf)
116-
setIsAuthorized(true)
117-
if (type === 'authorization') {
118-
setLoading({ ...loading, auth: false })
119-
toast.success(__('Authorized Successfully', 'bit-integrations'))
120-
} else {
121-
setLoading({ ...loading, field: false })
122-
toast.success(__('Fields refresh successfully', 'bit-integrations'))
123-
}
115+
setConf(prev =>
116+
create(prev, draftConf => {
117+
draftConf.mailerLiteFields = result.data
118+
draftConf.field_map = generateMappedField(draftConf)
119+
})
120+
)
121+
122+
toast.success(__('Fields refresh successfully', 'bit-integrations'))
123+
124124
return
125125
}
126-
if (type === 'authorization') {
127-
setLoading({ ...loading, auth: false })
128-
toast.error(__('Authorized failed', 'bit-integrations'))
129-
} else {
130-
setLoading({ ...loading, field: false })
131-
toast.error(__('Fields refresh failed', 'bit-integrations'))
132-
}
126+
127+
toast.error(__('Fields refresh failed', 'bit-integrations'))
133128
})
134129
}
135130

‎frontend-dev/src/components/AllIntegrations/MailerLite/MailerLiteFieldMap.jsx‎

Lines changed: 9 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -9,25 +9,13 @@ import { generateMappedField } from './MailerLiteCommonFunc'
99
import TagifyInput from '../../Utilities/TagifyInput'
1010
import { handleCustomValue } from '../IntegrationHelpers/IntegrationHelpers'
1111

12-
export default function MailerLiteFieldMap({
13-
i,
14-
formFields,
15-
field,
16-
mailerLiteConf,
17-
setMailerLiteConf
18-
}) {
19-
if (mailerLiteConf?.field_map?.length === 1 && field.mailerLiteFormField === '') {
20-
const newConf = { ...mailerLiteConf }
21-
const tmp = generateMappedField(newConf)
22-
newConf.field_map = tmp
23-
}
24-
25-
const requiredFlds = mailerLiteConf?.mailerLiteFields.filter((fld) => fld.required === true) || []
26-
const nonRequiredFlds =
27-
mailerLiteConf?.mailerLiteFields.filter((fld) => fld.required === false) || []
12+
export default function MailerLiteFieldMap({ i, formFields, field, mailerLiteConf, setMailerLiteConf }) {
2813
const btcbi = useRecoilValue($btcbi)
2914
const { isPro } = btcbi
3015

16+
const requiredFlds = mailerLiteConf?.mailerLiteFields.filter(fld => fld.required === true) || []
17+
const nonRequiredFlds = mailerLiteConf?.mailerLiteFields.filter(fld => fld.required === false) || []
18+
3119
return (
3220
<div className="flx mt-2 mb-2 btcbi-field-map">
3321
<div className="pos-rel flx">
@@ -36,10 +24,10 @@ export default function MailerLiteFieldMap({
3624
className="btcd-paper-inp mr-2"
3725
name="formField"
3826
value={field.formField || ''}
39-
onChange={(ev) => handleFieldMapping(ev, i, mailerLiteConf, setMailerLiteConf)}>
27+
onChange={ev => handleFieldMapping(ev, i, mailerLiteConf, setMailerLiteConf)}>
4028
<option value="">{__('Select Field', 'bit-integrations')}</option>
4129
<optgroup label={__('Form Fields', 'bit-integrations')}>
42-
{formFields?.map((f) => (
30+
{formFields?.map(f => (
4331
<option key={`ff-rm-${f.name}`} value={f.name}>
4432
{f.label}
4533
</option>
@@ -52,7 +40,7 @@ export default function MailerLiteFieldMap({
5240
isPro ? '' : `(${__('Pro', 'bit-integrations')})`
5341
)}>
5442
{isPro &&
55-
SmartTagField?.map((f) => (
43+
SmartTagField?.map(f => (
5644
<option key={`ff-rm-${f.name}`} value={f.name}>
5745
{f.label}
5846
</option>
@@ -62,7 +50,7 @@ export default function MailerLiteFieldMap({
6250

6351
{field.formField === 'custom' && (
6452
<TagifyInput
65-
onChange={(e) => handleCustomValue(e, i, mailerLiteConf, setMailerLiteConf)}
53+
onChange={e => handleCustomValue(e, i, mailerLiteConf, setMailerLiteConf)}
6654
label={__('Custom Value', 'bit-integrations')}
6755
className="mr-2"
6856
type="text"
@@ -77,7 +65,7 @@ export default function MailerLiteFieldMap({
7765
disabled={i < requiredFlds.length}
7866
name="mailerLiteFormField"
7967
value={i < requiredFlds ? requiredFlds[i].label || '' : field.mailerLiteFormField || ''}
80-
onChange={(ev) => handleFieldMapping(ev, i, mailerLiteConf, setMailerLiteConf)}>
68+
onChange={ev => handleFieldMapping(ev, i, mailerLiteConf, setMailerLiteConf)}>
8169
<option value="">{__('Select Field', 'bit-integrations')}</option>
8270
{i < requiredFlds.length ? (
8371
<option key={requiredFlds[i].key} value={requiredFlds[i].key}>

0 commit comments

Comments
 (0)