Implement Embedded Signup

1
import { useEffect, useState } from "react";
2
3
declare global {
4
  interface Window {
5
    FB: {
6
      init: (config: object) => void;
7
      login: (callback: (response: { authResponse?: { code?: string } }) => void, options: object) => void;
8
    };
9
    fbAsyncInit?: () => void;
10
  }
11
}
12
13
interface EmbeddedSignupButtonProps {
14
  apiKey: string;
15
  onSuccess?: (numberId: string) => void;
16
  onError?: (error: string) => void;
17
}
18
19
export function EmbeddedSignupButton({
20
  apiKey,
21
  onSuccess,
22
  onError,
23
}: EmbeddedSignupButtonProps) {
24
  const [sdkConfig, setSdkConfig] = useState<{
25
    app_id: string;
26
    config_id: string;
27
    sdk_version: string;
28
  } | null>(null);
29
  const [status, setStatus] = useState<"idle" | "loading" | "pending" | "error">("idle");
30
31
  // 1. Fetch SDK config on mount
32
  useEffect(() => {
33
    fetch("https://dev.muchau.com.br/api/embedded-signup/init", {
34
      headers: { Authorization: `Bearer ${apiKey}` },
35
    })
36
      .then((r) => r.json())
37
      .then(setSdkConfig)
38
      .catch(() => setStatus("error"));
39
  }, [apiKey]);
40
41
  // 2. Load Facebook SDK
42
  useEffect(() => {
43
    if (!sdkConfig) return;
44
45
    window.fbAsyncInit = () => {
46
      window.FB.init({
47
        appId: sdkConfig.app_id,
48
        xfbml: true,
49
        version: sdkConfig.sdk_version,
50
      });
51
    };
52
53
    if (!document.getElementById("facebook-jssdk")) {
54
      const script = document.createElement("script");
55
      script.id = "facebook-jssdk";
56
      script.src = "https://connect.facebook.net/en_US/sdk.js";
57
      script.async = true;
58
      document.body.appendChild(script);
59
    }
60
  }, [sdkConfig]);
61
62
  // 3. Trigger the signup flow
63
  const handleConnect = () => {
64
    if (!sdkConfig || !window.FB) return;
65
    setStatus("loading");
66
67
    window.FB.login(
68
      async (response) => {
69
        const code = response.authResponse?.code;
70
        if (!code) {
71
          setStatus("error");
72
          onError?.("User closed the popup or denied permission");
73
          return;
74
        }
75
76
        try {
77
          // 4. Complete signup via Muchaw DEV
78
          const res = await fetch("https://dev.muchau.com.br/api/embedded-signup/complete", {
79
            method: "POST",
80
            headers: {
81
              Authorization: `Bearer ${apiKey}`,
82
              "Content-Type": "application/json",
83
            },
84
            body: JSON.stringify({ code }),
85
          });
86
87
          if (!res.ok) throw new Error(await res.text());
88
89
          const { number_id } = await res.json();
90
          setStatus("pending");
91
          onSuccess?.(number_id);
92
        } catch (err) {
93
          setStatus("error");
94
          onError?.(err instanceof Error ? err.message : "Unknown error");
95
        }
96
      },
97
      {
98
        config_id: sdkConfig.config_id,
99
        response_type: "code",
100
        override_default_response_type: true,
101
      }
102
    );
103
  };
104
105
  if (!sdkConfig) return null;
106
107
  return (
108
    <div>
109
      <button onClick={handleConnect} disabled={status === "loading"}>
110
        {status === "loading" ? "Connecting..." : "Connect WhatsApp"}
111
      </button>
112
      {status === "pending" && (
113
        <p>Your number is being activated. This takes about 30 seconds.</p>
114
      )}
115
      {status === "error" && (
116
        <p>Something went wrong. Please try again.</p>
117
      )}
118
    </div>
119
  );
120
}