+ {PROVIDERS.map((provider) => {
+ const Icon = provider.icon;
+ const pixelState = form.values.pixels[provider.key];
+ const hasValue = pixelState?.pixel_id.trim() !== '';
+
+ return (
+
+
+
+
+
+ {provider.label}
+ {!hasValue && (
+ {provider.description}
+ )}
+
+
+ {hasValue && (
+
form.setFieldValue(
+ `pixels.${provider.key}.enabled`,
+ e.currentTarget.checked
+ )}
+ />
+ )}
+
+
{
+ form.setFieldValue(`pixels.${provider.key}.pixel_id`, e.currentTarget.value);
+ if (e.currentTarget.value.trim() !== '' && !pixelState?.enabled) {
+ form.setFieldValue(`pixels.${provider.key}.enabled`, true);
+ }
+ }}
+ styles={{
+ input: {
+ fontFamily: 'monospace',
+ fontSize: '13px',
+ },
+ }}
+ />
+
+ );
+ })}
+
+
+ {hasAnyPixels && (
+ <>
+