2
2
* External dependencies
3
3
*/
4
4
import { __ } from '@wordpress/i18n' ;
5
- import { CheckboxControl , TextControl } from '@wordpress/components' ;
6
- import {
7
- useState ,
8
- useCallback ,
9
- useEffect ,
10
- createInterpolateElement ,
11
- } from '@wordpress/element' ;
5
+ import { CheckboxControl } from '@wordpress/components' ;
6
+ import { useState , useCallback } from '@wordpress/element' ;
12
7
13
8
/**
14
9
* Internal dependencies
15
10
*/
16
11
import { useAppDispatch } from '~/data' ;
17
- import AppDocumentationLink from '~/components/app-documentation-link' ;
18
12
import useSettings from '~/hooks/useSettings' ;
19
13
import useDispatchCoreNotices from '~/hooks/useDispatchCoreNotices' ;
20
- import useDebouncedInput from '~/hooks/useDebouncedInput' ;
21
14
import AccountCard from '~/components/account-card' ;
22
15
import SpinnerCard from '~/components/spinner-card' ;
23
16
import './index.scss' ;
@@ -32,24 +25,15 @@ import './index.scss';
32
25
* @return {JSX.Element } The rendered ConversionsAPI settings card.
33
26
*/
34
27
const ConversionsAPI = ( ) => {
35
- const { isCapiEnabled, capiToken , hasFinishedResolution } = useSettings ( ) ;
28
+ const { isCapiEnabled, hasFinishedResolution } = useSettings ( ) ;
36
29
const [ isSaving , setIsSaving ] = useState ( false ) ;
37
- const [ localCapiToken , setLocalCapiToken , debouncedLocalCapiToken ] =
38
- useDebouncedInput ( '' ) ;
39
30
const { createNotice } = useDispatchCoreNotices ( ) ;
40
31
const { updateSettings } = useAppDispatch ( ) ;
41
32
42
33
const toggleTrackConversions = useCallback ( async ( ) => {
43
34
await updateSettings ( { trackConversions : ! isCapiEnabled } ) ;
44
35
} , [ updateSettings , isCapiEnabled ] ) ;
45
36
46
- const updateConversionAccessToken = useCallback (
47
- async ( val ) => {
48
- await updateSettings ( { capiToken : val } ) ;
49
- } ,
50
- [ updateSettings ]
51
- ) ;
52
-
53
37
const handleCapiStatusOnChange = async ( ) => {
54
38
try {
55
39
setIsSaving ( true ) ;
@@ -69,59 +53,6 @@ const ConversionsAPI = () => {
69
53
}
70
54
} ;
71
55
72
- const handleCapiTokenOnChange = useCallback (
73
- async ( val = '' ) => {
74
- try {
75
- setIsSaving ( true ) ;
76
- await updateConversionAccessToken ( val ) ;
77
-
78
- createNotice (
79
- 'success' ,
80
- __ (
81
- 'Conversions API Access Token updated successfully.' ,
82
- 'reddit-for-woocommerce'
83
- )
84
- ) ;
85
- } catch ( error ) {
86
- // Silently fail because the error is handled within `updateSettings` action.
87
- } finally {
88
- setIsSaving ( false ) ;
89
- }
90
- } ,
91
- [ updateConversionAccessToken , createNotice ]
92
- ) ;
93
-
94
- /**
95
- * Validates and sets the CAPI token state.
96
- *
97
- * @param {string } token Input CAPI token
98
- */
99
- function setToken ( token ) {
100
- if ( token !== '' && token . trim ( ) === '' ) {
101
- // Return early if the string is only '\s'
102
- return ;
103
- }
104
-
105
- setLocalCapiToken ( token ) ;
106
- }
107
-
108
- useEffect ( ( ) => {
109
- if ( hasFinishedResolution ) {
110
- setLocalCapiToken ( capiToken ) ;
111
- }
112
- } , [ hasFinishedResolution , setLocalCapiToken , capiToken ] ) ;
113
-
114
- useEffect ( ( ) => {
115
- if ( undefined === capiToken ) {
116
- return ;
117
- }
118
-
119
- if ( capiToken !== debouncedLocalCapiToken ) {
120
- handleCapiTokenOnChange ( debouncedLocalCapiToken ) ;
121
- }
122
- // eslint-disable-next-line react-hooks/exhaustive-deps
123
- } , [ debouncedLocalCapiToken , handleCapiTokenOnChange ] ) ;
124
-
125
56
if ( ! hasFinishedResolution ) {
126
57
return < SpinnerCard /> ;
127
58
}
@@ -135,54 +66,17 @@ const ConversionsAPI = () => {
135
66
'reddit-for-woocommerce'
136
67
) }
137
68
actions = {
138
- < >
139
- < div >
140
- < TextControl
141
- label = { __ (
142
- 'Conversion Access Token' ,
143
- 'reddit-for-woocommerce'
144
- ) }
145
- id = "rfw-settings-capi-token"
146
- value = { localCapiToken }
147
- readOnly = { isSaving }
148
- onChange = { setToken }
149
- help = {
150
- < >
151
- { createInterpolateElement (
152
- __ (
153
- 'Need help? <link>Follow this guide</link>' ,
154
- 'reddit-for-woocommerce'
155
- ) ,
156
- {
157
- link : (
158
- < AppDocumentationLink href = "https://ads.reddit.com/events-manager/conversion-tokens" />
159
- ) ,
160
- }
161
- ) }
162
- </ >
163
- }
164
- />
165
- </ div >
166
- < div className = "rfw-settings-track-conversions__actions" >
167
- < CheckboxControl
168
- label = { __ (
169
- 'Enable Conversions API tracking' ,
170
- 'reddit-for-woocommerce'
171
- ) }
172
- checked = { isCapiEnabled }
173
- disabled = { isSaving || ! localCapiToken }
174
- onChange = { handleCapiStatusOnChange }
175
- help = {
176
- ! localCapiToken
177
- ? __ (
178
- 'Set the Conversion Access Token to enable tracking' ,
179
- 'reddit-for-woocommerce'
180
- )
181
- : ''
182
- }
183
- />
184
- </ div >
185
- </ >
69
+ < div className = "rfw-settings-track-conversions__actions" >
70
+ < CheckboxControl
71
+ label = { __ (
72
+ 'Enable Conversions API tracking' ,
73
+ 'reddit-for-woocommerce'
74
+ ) }
75
+ checked = { isCapiEnabled }
76
+ disabled = { isSaving }
77
+ onChange = { handleCapiStatusOnChange }
78
+ />
79
+ </ div >
186
80
}
187
81
/>
188
82
) ;
0 commit comments