helix-engage/src/components/call-desk/click-to-call-button.tsx

import type { FC } from 'react';
import { useState } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faPhone } from '@fortawesome/pro-duotone-svg-icons';

const Phone01: FC<{ className?: string } & Record<string, any>> = ({ className, ...rest }) => <FontAwesomeIcon icon={faPhone} className={className} {...rest} />;
import { Button } from '@/components/base/buttons/button';
import { useSip } from '@/providers/sip-provider';
import { notify } from '@/lib/toast';

interface ClickToCallButtonProps {
    phoneNumber: string;
    leadId?: string;
    label?: string;
    size?: 'sm' | 'md';
}

export const ClickToCallButton = ({ phoneNumber, label, size = 'sm' }: ClickToCallButtonProps) => {
    const { isRegistered, isInCall, dialOutbound } = useSip();
    const [dialing, setDialing] = useState(false);

    const handleDial = async () => {
        setDialing(true);
        try {
            await dialOutbound(phoneNumber);
        } catch {
            notify.error('Dial Failed', 'Could not place the call');
        } finally {
            setDialing(false);
        }
    };

    return (
        <Button
            size={size}
            color="primary"
            iconLeading={Phone01}
            onClick={handleDial}
            isDisabled={!isRegistered || isInCall || !phoneNumber || dialing}
            isLoading={dialing}
        >
            {label ?? 'Call'}
        </Button>
    );
};