feat: complete phone numbers and stores integration #65

- Updated API /stores endpoint to join with phone_numbers table
- Display phone number details in stores list
- Disabled 'Bring Your Own Carrier' buttons with Coming Soon badges
- Phone number selection is now required for all store connections
- Shows country, location, and pricing information for assigned phone numbers

shopcall.ai-main/src/components/PhoneNumbersContent.tsx

@@ -212,13 +212,18 @@ export function PhoneNumbersContent() {
           </CardContent>
         </Card>
 
-        <div className="space-y-4">
-          <h3 className="text-xl font-semibold text-white">Bring Your Own Carrier</h3>
-          <p className="text-slate-400">Connect your existing carrier account to use your own phone numbers</p>
-          
+        <div className="space-y-4 opacity-60">
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="text-xl font-semibold text-white">Bring Your Own Carrier</h3>
+              <p className="text-slate-400">Feature coming soon - Connect your existing carrier account to use your own phone numbers</p>
+            </div>
+            <Badge variant="outline" className="text-slate-400 border-slate-600">Coming Soon</Badge>
+          </div>
+
           <div className="grid gap-6 md:grid-cols-2">
             {carriers.map((carrier, index) => (
-              <Card key={index} className="bg-slate-800 border-slate-700">
+              <Card key={index} className="bg-slate-800 border-slate-700 opacity-75">
                 <CardHeader>
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-3">
@@ -228,7 +233,7 @@ export function PhoneNumbersContent() {
                         <p className="text-slate-400 text-sm">{carrier.description}</p>
                       </div>
                     </div>
-                    <Button className="bg-cyan-500 hover:bg-cyan-600 text-white">
+                    <Button className="bg-slate-600 text-slate-400 cursor-not-allowed" disabled>
                       <Link className="w-4 h-4 mr-2" />
                       Connect
                     </Button>
@@ -260,11 +265,14 @@ export function PhoneNumbersContent() {
           </div>
         </div>
 
-        <div className="space-y-4">
-          <h3 className="text-xl font-semibold text-white">Available Countries</h3>
+        <div className="space-y-4 opacity-60">
+          <div className="flex items-center justify-between">
+            <h3 className="text-xl font-semibold text-white">Available Countries</h3>
+            <Badge variant="outline" className="text-slate-400 border-slate-600">Coming Soon</Badge>
+          </div>
           <div className="grid gap-6 md:grid-cols-2">
             {availableCountries.map((country, index) => (
-              <Card key={index} className="bg-slate-800 border-slate-700">
+              <Card key={index} className="bg-slate-800 border-slate-700 opacity-75">
                 <CardHeader>
                   <div className="flex items-center justify-between">
                     <div className="flex items-center gap-3">
@@ -274,7 +282,7 @@ export function PhoneNumbersContent() {
                         <p className="text-slate-400 text-sm">Setup: {country.pricing.setup} • Monthly: {country.pricing.monthly}</p>
                       </div>
                     </div>
-                    <Button className="bg-cyan-500 hover:bg-cyan-600 text-white">
+                    <Button className="bg-slate-600 text-slate-400 cursor-not-allowed" disabled>
                       Get Number
                     </Button>
                   </div>

supabase/functions/api/index.ts

@@ -62,12 +62,30 @@ serve(async (req) => {
         .from('stores')
         .select(includeSyncConfig ? `
           *,
+          phone_numbers (
+            id,
+            phone_number,
+            country,
+            location,
+            phone_type,
+            price
+          ),
           store_sync_config (
             enabled,
             sync_frequency,
             sync_products
           )
-        ` : '*')
+        ` : `
+          *,
+          phone_numbers (
+            id,
+            phone_number,
+            country,
+            location,
+            phone_type,
+            price
+          )
+        `)
         .eq('user_id', user.id)
         .order('created_at', { ascending: false })
 
@@ -81,10 +99,17 @@ serve(async (req) => {
         )
       }
 
+      // Transform phone_numbers array to phone_number string for backward compatibility
+      const transformedStores = stores?.map(store => ({
+        ...store,
+        phone_number: store.phone_numbers?.[0]?.phone_number || null,
+        phone_number_details: store.phone_numbers?.[0] || null
+      })) || []
+
       return new Response(
         JSON.stringify({
           success: true,
-          stores: stores || []
+          stores: transformedStores
         }),
         { status: 200, headers: { ...corsHeaders, 'Content-Type': 'application/json' } }
       )