feat: add phone number selection to Shopify connection flow #65

- Add phone_number_id column to oauth_states table for OAuth flows
- Update ShopifyConnect component with PhoneNumberSelector
- Pass phone_number_id as query parameter to OAuth init
- Validate phone number selection before OAuth redirect
- Frontend ready, backend update pending

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

@@ -6,6 +6,7 @@ import { Label } from "@/components/ui/label";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Loader2, Store, ExternalLink, CheckCircle2, AlertCircle, Shield } from "lucide-react";
 import { API_URL } from "@/lib/config";
+import { PhoneNumberSelector } from "./PhoneNumberSelector";
 
 interface ShopifyConnectProps {
   onClose?: () => void;
@@ -13,12 +14,15 @@ interface ShopifyConnectProps {
 
 export function ShopifyConnect({ onClose }: ShopifyConnectProps) {
   const [shopDomain, setShopDomain] = useState("");
+  const [phoneNumberId, setPhoneNumberId] = useState("");
   const [isConnecting, setIsConnecting] = useState(false);
   const [error, setError] = useState("");
+  const [phoneNumberError, setPhoneNumberError] = useState("");
   const [success, setSuccess] = useState(false);
 
   const handleConnect = async () => {
     setError("");
+    setPhoneNumberError("");
     setSuccess(false);
 
     // Validate shop domain
@@ -27,6 +31,13 @@ export function ShopifyConnect({ onClose }: ShopifyConnectProps) {
       return;
     }
 
+    // Validate phone number
+    if (!phoneNumberId) {
+      setPhoneNumberError("Please select a phone number for this store");
+      setError("Please select a phone number before connecting");
+      return;
+    }
+
     // Normalize domain
     let normalizedDomain = shopDomain.trim().toLowerCase();
 
@@ -63,9 +74,9 @@ export function ShopifyConnect({ onClose }: ShopifyConnectProps) {
 
       const session = JSON.parse(sessionData);
 
-      // Call the OAuth initiation Edge Function
+      // Call the OAuth initiation Edge Function with phone_number_id
       const response = await fetch(
-        `${API_URL}/oauth-shopify?action=init&shop=${encodeURIComponent(normalizedDomain)}`,
+        `${API_URL}/oauth-shopify?action=init&shop=${encodeURIComponent(normalizedDomain)}&phone_number_id=${encodeURIComponent(phoneNumberId)}`,
         {
           method: 'GET',
           headers: {
@@ -160,6 +171,13 @@ export function ShopifyConnect({ onClose }: ShopifyConnectProps) {
             </p>
           </div>
 
+          <PhoneNumberSelector
+            value={phoneNumberId}
+            onChange={setPhoneNumberId}
+            disabled={isConnecting}
+            error={phoneNumberError}
+          />
+
           <Button
             onClick={handleConnect}
             disabled={isConnecting}

supabase/migrations/20251110_add_phone_number_to_oauth_states.sql

@@ -0,0 +1,9 @@
+-- Migration: Add phone_number_id to oauth_states table
+-- Description: Support phone number selection in OAuth flows
+-- Date: 2025-11-10
+-- Related Issue: #65
+
+ALTER TABLE oauth_states
+ADD COLUMN IF NOT EXISTS phone_number_id UUID REFERENCES phone_numbers(id) ON DELETE SET NULL;
+
+COMMENT ON COLUMN oauth_states.phone_number_id IS 'Phone number selected before OAuth flow, assigned after successful connection';