fix: fix phone numbers not showing and remove close button from integration dialogs #97

- Added is_available filter to phone numbers API endpoint when available=true param is passed
- Added all_countries=true param to bypass country filtering for store integration
- Updated IntegrationsRedirect to fetch all available phone numbers without country restriction
- Removed close buttons from both auth and assign dialogs to prevent accidental integration abortion
- Made dialogs non-dismissible by setting onOpenChange to no-op and hiding close button

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

shopcall.ai-main/src/pages/IntegrationsRedirect.tsx

@@ -180,7 +180,8 @@ export default function IntegrationsRedirect() {
         if (!sessionData) return;
 
         const session = JSON.parse(sessionData);
-        const response = await fetch(`${API_URL}/api/phone-numbers?available=true`, {
+        // Fetch all available phone numbers (no country filter for store integration)
+        const response = await fetch(`${API_URL}/api/phone-numbers?available=true&all_countries=true`, {
           method: 'GET',
           headers: {
             'Authorization': `Bearer ${session.session.access_token}`,
@@ -191,6 +192,8 @@ export default function IntegrationsRedirect() {
         if (response.ok) {
           const data = await response.json();
           setPhoneNumbers(data.phone_numbers || []);
+        } else {
+          console.error('Failed to fetch phone numbers:', response.status);
         }
       } catch (err) {
         console.error('Error fetching phone numbers:', err);
@@ -376,8 +379,8 @@ export default function IntegrationsRedirect() {
   return (
     <div className="min-h-screen flex items-center justify-center bg-slate-900 p-4">
       {/* Auth Dialog for non-authenticated users */}
-      <Dialog open={showAuthDialog} onOpenChange={setShowAuthDialog}>
-        <DialogContent className="bg-slate-800 border-slate-700 max-w-md">
+      <Dialog open={showAuthDialog} onOpenChange={() => {}} modal={true}>
+        <DialogContent className="bg-slate-800 border-slate-700 max-w-md [&>button]:hidden">
           <DialogHeader>
             <div className="flex items-center justify-center mb-4">
               <Store className={`w-12 h-12 ${platform?.color || 'text-cyan-500'}`} />
@@ -410,21 +413,12 @@ export default function IntegrationsRedirect() {
             </Button>
           </div>
 
-          <DialogFooter className="mt-4">
-            <Button
-              variant="ghost"
-              className="w-full text-slate-400 hover:text-white"
-              onClick={() => navigate('/')}
-            >
-              {t('common.cancel', 'Cancel')}
-            </Button>
-          </DialogFooter>
         </DialogContent>
       </Dialog>
 
       {/* Assign Dialog for authenticated users */}
-      <Dialog open={showAssignDialog} onOpenChange={setShowAssignDialog}>
-        <DialogContent className="bg-slate-800 border-slate-700 max-w-md">
+      <Dialog open={showAssignDialog} onOpenChange={() => {}} modal={true}>
+        <DialogContent className="bg-slate-800 border-slate-700 max-w-md [&>button]:hidden">
           <DialogHeader>
             <div className="flex items-center justify-center mb-4">
               <CheckCircle className={`w-12 h-12 ${platform?.color || 'text-cyan-500'}`} />
@@ -518,20 +512,6 @@ export default function IntegrationsRedirect() {
               {t('integrations.oauth.createNewAccount', 'Create a new account instead')}
             </Button>
           </div>
-
-          <DialogFooter className="mt-4">
-            <Button
-              variant="ghost"
-              className="w-full text-slate-400 hover:text-white"
-              onClick={() => {
-                setShowAssignDialog(false);
-                navigate('/webshops');
-              }}
-              disabled={completing}
-            >
-              {t('common.cancel', 'Cancel')}
-            </Button>
-          </DialogFooter>
         </DialogContent>
       </Dialog>
 

supabase/functions/api/index.ts

@@ -1754,7 +1754,11 @@ serve(async (req) => {
           )
         }
 
-        // If user doesn't have a country set, return all available numbers
+        // Check query parameters
+        const availableOnly = url.searchParams.get('available') === 'true'
+        const allCountries = url.searchParams.get('all_countries') === 'true'
+
+        // Build query for phone numbers
         let query = supabase
           .from('phone_numbers')
           .select('*')
@@ -1762,8 +1766,13 @@ serve(async (req) => {
           .order('country_name', { ascending: true })
           .order('location', { ascending: true })
 
-        // Filter by user's country if set
-        if (profile?.country_code) {
+        // Filter by availability if requested
+        if (availableOnly) {
+          query = query.eq('is_available', true)
+        }
+
+        // Filter by user's country if set (unless all_countries=true)
+        if (profile?.country_code && !allCountries) {
           query = query.eq('country_code', profile.country_code)
         }