How to Integrate Lovable with Typeform

1// src/components/TypeformSurvey.tsx
2import { useEffect, useState } from 'react';
3import { PopupButton } from '@typeform/embed-react';
4import { supabase } from '@/integrations/supabase/client';
5import { useToast } from '@/hooks/use-toast';
6
7interface TypeformSurveyProps {
8  userId: string;
9  triggerLabel?: string;
10  autoOpen?: boolean;
11}
12
13const FORM_ID = import.meta.env.VITE_TYPEFORM_FORM_ID;
14
15export function TypeformSurvey({
16  userId,
17  triggerLabel = 'Share Feedback',
18  autoOpen = false,
19}: TypeformSurveyProps) {
20  const { toast } = useToast();
21  const [completed, setCompleted] = useState(false);
22
23  useEffect(() => {
24    // Check if user has already completed the survey
25    async function checkStatus() {
26      const { data } = await supabase
27        .from('profiles')
28        .select('typeform_survey_completed')
29        .eq('id', userId)
30        .single();
31      if (data?.typeform_survey_completed) setCompleted(true);
32    }
33    checkStatus();
34  }, [userId]);
35
36  const handleSubmit = async ({ responseId }: { responseId: string }) => {
37    await supabase
38      .from('profiles')
39      .update({ typeform_survey_completed: true, typeform_response_id: responseId })
40      .eq('id', userId);
41    setCompleted(true);
42    toast({ title: 'Thank you for your feedback!', description: 'Your response has been recorded.' });
43  };
44
45  if (!FORM_ID || completed) return null;
46
47  return (
48    <PopupButton
49      id={FORM_ID}
50      hidden={{ user_id: userId }}
51      onSubmit={handleSubmit}
52      autoClose={3}
53      size={75}
54      className="px-4 py-2 bg-primary text-primary-foreground rounded-md text-sm font-medium"
55      open={autoOpen ? 'load' : undefined}
56    >
57      {triggerLabel}
58    </PopupButton>
59  );
60}

1// supabase/functions/typeform-webhook/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
3import { createClient } from 'https://esm.sh/@supabase/supabase-js@2';
4
5const corsHeaders = {
6  'Access-Control-Allow-Origin': '*',
7  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
8};
9
10function getAnswerValue(answers: Array<{ field: { ref: string }; type: string; number?: number; text?: string; long_text?: string }>, ref: string) {
11  const answer = answers.find(a => a.field?.ref === ref);
12  if (!answer) return null;
13  if (answer.type === 'number') return answer.number;
14  if (answer.type === 'text') return answer.text;
15  if (answer.type === 'long_text') return answer.long_text;
16  return null;
17}
18
19serve(async (req) => {
20  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
21  if (req.method !== 'POST') return new Response('Method not allowed', { status: 405 });
22
23  try {
24    const supabase = createClient(
25      Deno.env.get('SUPABASE_URL') ?? '',
26      Deno.env.get('SUPABASE_SERVICE_ROLE_KEY') ?? ''
27    );
28
29    const body = await req.json();
30    const formResponse = body.form_response;
31
32    if (!formResponse) {
33      return new Response(JSON.stringify({ error: 'Invalid Typeform payload' }), {
34        status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
35      });
36    }
37
38    const answers = formResponse.answers ?? [];
39    const hidden = formResponse.hidden ?? {};
40    const npsScore = getAnswerValue(answers, 'nps_score') as number | null;
41    const verbatim = getAnswerValue(answers, 'verbatim_feedback') as string | null;
42    const userId = hidden.user_id ?? null;
43
44    const { error } = await supabase.from('nps_responses').upsert({
45      response_id: formResponse.event_id,
46      form_id: formResponse.form_id,
47      user_id: userId,
48      nps_score: npsScore,
49      verbatim_feedback: verbatim,
50      submitted_at: formResponse.submitted_at,
51      raw_answers: answers,
52    }, { onConflict: 'response_id' });
53
54    if (error) console.error('DB insert error:', error);
55
56    if (npsScore !== null && npsScore < 7) {
57      await supabase.from('follow_up_queue').insert({
58        user_id: userId,
59        response_id: formResponse.event_id,
60        nps_score: npsScore,
61        status: 'pending',
62        priority: npsScore <= 3 ? 'high' : 'medium',
63      });
64    }
65
66    return new Response(JSON.stringify({ success: true }), {
67      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
68    });
69  } catch (error) {
70    console.error('Webhook error:', error);
71    return new Response(JSON.stringify({ error: String(error) }), {
72      status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
73    });
74  }
75});

1// supabase/functions/typeform-proxy/index.ts
2import { serve } from 'https://deno.land/std@0.168.0/http/server.ts';
3
4const corsHeaders = {
5  'Access-Control-Allow-Origin': '*',
6  'Access-Control-Allow-Headers': 'authorization, x-client-info, apikey, content-type',
7};
8
9serve(async (req) => {
10  if (req.method === 'OPTIONS') return new Response('ok', { headers: corsHeaders });
11
12  try {
13    const token = Deno.env.get('TYPEFORM_ACCESS_TOKEN');
14    if (!token) {
15      return new Response(JSON.stringify({ error: 'TYPEFORM_ACCESS_TOKEN not configured' }), {
16        status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
17      });
18    }
19
20    const { form_id, date_from, date_to, nps_question_ref = 'nps_score' } = await req.json();
21    if (!form_id) {
22      return new Response(JSON.stringify({ error: 'form_id required' }), {
23        status: 400, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
24      });
25    }
26
27    let url = `https://api.typeform.com/forms/${form_id}/responses?page_size=200&completed=true`;
28    if (date_from) url += `&since=${date_from}`;
29    if (date_to) url += `&until=${date_to}`;
30
31    const response = await fetch(url, {
32      headers: { 'Authorization': `Bearer ${token}` },
33    });
34
35    if (!response.ok) {
36      const err = await response.text();
37      return new Response(JSON.stringify({ error: `Typeform API: ${response.status}`, detail: err }), {
38        status: response.status, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
39      });
40    }
41
42    const data = await response.json();
43    const responses = data.items ?? [];
44
45    // Calculate NPS stats
46    const npsAnswers: number[] = responses.flatMap((r: { answers: Array<{ field: { ref: string }; type: string; number?: number }> }) =>
47      (r.answers ?? [])
48        .filter((a) => a.field?.ref === nps_question_ref && a.type === 'number')
49        .map((a) => a.number ?? 0)
50    );
51
52    const promoters = npsAnswers.filter(s => s >= 9).length;
53    const detractors = npsAnswers.filter(s => s <= 6).length;
54    const total = npsAnswers.length;
55    const npsScore = total > 0
56      ? Math.round(((promoters - detractors) / total) * 100)
57      : null;
58
59    return new Response(JSON.stringify({
60      total_responses: responses.length,
61      nps_stats: { total, promoters, passives: total - promoters - detractors, detractors, nps_score: npsScore },
62      responses: responses.slice(0, 50), // Return first 50 for display
63    }), {
64      headers: { ...corsHeaders, 'Content-Type': 'application/json' },
65    });
66  } catch (error) {
67    return new Response(JSON.stringify({ error: String(error) }), {
68      status: 500, headers: { ...corsHeaders, 'Content-Type': 'application/json' },
69    });
70  }
71});