Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 | import { Icon, Spinner } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { plugins } from '@wordpress/icons';
import { Tooltip } from '@wordpress/ui';
import { isValidSalesforceOrgId } from '../helpers/salesforce.tsx';
import './style.scss';
export default function ActiveIntegrations( { integrations, attributes, isLoading } ) {
const activeIntegrations = integrations.reduce( ( acc, integration ) => {
switch ( integration.id ) {
case 'akismet':
if ( integration.isConnected ) {
acc.push( integration );
}
break;
case 'zero-bs-crm':
if ( integration.isActive && integration.details?.hasExtension && attributes.jetpackCRM ) {
acc.push( integration );
}
break;
case 'mailpoet':
if (
integration.isActive &&
integration.isConnected &&
attributes.mailpoet?.enabledForForm
) {
acc.push( integration );
}
break;
case 'hostinger-reach':
if (
integration.isActive &&
integration.isConnected &&
attributes.hostingerReach?.enabledForForm
) {
acc.push( integration );
}
break;
case 'salesforce':
if (
attributes.salesforceData?.sendToSalesforce &&
attributes.salesforceData?.organizationId &&
isValidSalesforceOrgId( attributes.salesforceData.organizationId )
) {
acc.push( integration );
}
break;
}
return acc;
}, [] );
if ( isLoading ) {
return (
<div className="jetpack-forms-active-integrations">
<Spinner />
</div>
);
}
if ( ! activeIntegrations?.length ) {
return (
<p>
<em>{ __( 'Form does not have integrations set up.', 'jetpack-forms' ) }</em>
</p>
);
}
return (
<div className="jetpack-forms-active-integrations">
{ activeIntegrations.map( integration => {
const text = integration.activeTooltip || integration.title;
return (
<Tooltip.Root key={ integration.id } disabled={ ! text }>
<Tooltip.Trigger
render={ <span className="jetpack-forms-active-integrations__item" /> }
>
{ integration.iconUrl ? (
<img
src={ integration.iconUrl }
alt={ integration.title || integration.id }
width={ 30 }
height={ 30 }
className="jetpack-forms-active-integrations__icon"
/>
) : (
<Icon
icon={ plugins }
size={ 30 }
className="jetpack-forms-active-integrations__icon"
/>
) }
<span className="jetpack-forms-active-integrations__status" />
</Tooltip.Trigger>
<Tooltip.Popup>{ text }</Tooltip.Popup>
</Tooltip.Root>
);
} ) }
</div>
);
}
|