facebook account kit.tsx

import * as React from 'react';

const { useState, useEffect } = React;

interface initialFuncProps {
  appId: string;
  csrf: string;
  version: string;
  debug?: boolean;
  display?: 'popup' | 'modal';
  redirect?: string;
  language?: string;
}

interface OptionsType {
  countryCode?: string;
  phoneNumber?: string;
  emailAddress?: string;
}

export interface ChildrenParams {
  onClick(): void;
  disabled?: boolean;
}

interface PropsType extends initialFuncProps, OptionsType {
  children(params: ChildrenParams): void;
  onResponse(params: any): Promise<void>;
  loginType?: 'PHONE' | 'EMAIL';
  disabled?: boolean;
}

const initializeAccountKit = (props: initialFuncProps, callback: Function) => {
  ((cb) => {
    const tag = document.createElement('script');
    tag.setAttribute(
      'src',
      `https://sdk.accountkit.com/${props.language}/sdk.js`,
    );
    tag.setAttribute('id', 'account-kit');
    tag.setAttribute('type', 'text/javascript');
    tag.onload = cb;
    document.head.appendChild(tag);
  })(() => {
    window.AccountKit_OnInteractive = function () {
      const {
        appId, csrf, version, debug, display, redirect,
      } = props;
      window.AccountKit.init({
        appId,
        state: csrf,
        version,
        debug,
        display,
        redirect,
        fbAppEventsEnabled: false,
      });
      callback();
    };
  });
};

// const FacebookAccountKitComponent: React.FC<PropsType> = ({
const FacebookAccountKitComponent = ({
  appId,
  csrf,
  disabled,
  display,
  children,
  version,
  language,
  onResponse,
  loginType,
  debug,
  redirect,
  countryCode,
  phoneNumber,
  emailAddress,
}: PropsType): React.ReactNode => {
  const [initialized, setInitialized] = useState(!!window.AccountKit);

  // const onLoad = () => {
  //   setInitialized(true);
  // };

  const signIn = () => {
    if (disabled) return;

    const options: OptionsType = {};

    if (countryCode) {
      options.countryCode = countryCode;
    }

    if (loginType === 'PHONE' && phoneNumber) {
      options.phoneNumber = phoneNumber;
    } else if (loginType === 'EMAIL' && emailAddress) {
      options.emailAddress = emailAddress;
    }

    window.AccountKit.login(loginType, options, (resp: any) => onResponse(resp));
  };

  useEffect(() => {
    initializeAccountKit(
      {
        appId,
        csrf,
        version,
        debug,
        display,
        redirect,
      },
      () => setInitialized(true),
    );
  }, [appId, csrf, debug, display, redirect, version]);

  return children({
    onClick: () => {
      signIn();
    },
    disabled,
  });
};

export default FacebookAccountKitComponent;