Enhance Paddle integration and improve social auth visibility

src/platform/src/shared/components/auth/SocialAuthSection.tsx

@@ -51,6 +51,23 @@ const SOCIAL_PROVIDERS: Array<{
   },
 ];
 
+const LOCAL_TEST_HOSTNAMES = new Set([
+  'localhost',
+  '127.0.0.1',
+  '::1',
+  '0.0.0.0',
+]);
+
+const shouldShowSocialAuth = (hostname: string): boolean => {
+  const normalizedHostname = hostname.toLowerCase();
+
+  return (
+    normalizedHostname === 'staging' ||
+    normalizedHostname.startsWith('staging.') ||
+    LOCAL_TEST_HOSTNAMES.has(normalizedHostname)
+  );
+};
+
 export default function SocialAuthSection({
   mode,
   disabled = false,
@@ -59,10 +76,12 @@ export default function SocialAuthSection({
 }: SocialAuthSectionProps) {
   const actionLabel = mode === 'register' ? 'Continue with' : 'Sign in with';
   const redirectPath = normalizeCallbackUrl(callbackUrl) || '/user/home';
+  const [isStagingDomain, setIsStagingDomain] = useState(false);
   const [lastUsedProvider, setLastUsedProvider] =
     useState<SupportedSocialAuthProvider | null>(null);
 
   useEffect(() => {
+    setIsStagingDomain(shouldShowSocialAuth(window.location.hostname));
     setLastUsedProvider(getLastUsedOAuthProvider());
   }, []);
 
@@ -97,6 +116,10 @@ export default function SocialAuthSection({
     [disabled, redirectPath]
   );
 
+  if (!isStagingDomain) {
+    return null;
+  }
+
   return (
     <div className={cn('w-full space-y-2.5', className)}>
       <div className="flex items-center gap-4">

src/platform/src/shared/lib/paddle.ts

@@ -4,10 +4,19 @@ export const PADDLE_CHECKOUT_COMPLETED_EVENT =
   'airqo:paddle-checkout-completed';
 export const PADDLE_CHECKOUT_CLOSED_EVENT = 'airqo:paddle-checkout-closed';
 
-export const getPaddleEnvironment = (): 'sandbox' | undefined =>
-  process.env.NEXT_PUBLIC_PAYMENT_ENVIRONMENT?.trim() === 'sandbox'
-    ? 'sandbox'
-    : undefined;
+export const getPaddleEnvironment = ():
+  | 'sandbox'
+  | 'production'
+  | undefined => {
+  const environment =
+    process.env.NEXT_PUBLIC_PAYMENT_ENVIRONMENT?.trim().toLowerCase();
+
+  if (environment === 'sandbox' || environment === 'production') {
+    return environment;
+  }
+
+  return undefined;
+};
 
 export const getPaymentClientToken = (): string =>
   process.env.NEXT_PUBLIC_PAYMENT_CLIENT_TOKEN?.trim() || '';

src/platform/src/shared/providers/paddle-provider.tsx

@@ -30,9 +30,18 @@ const PaddleProvider = () => {
       return;
     }
 
+    const paddleWithEnvironment = paddle as typeof paddle & {
+      Environment?: {
+        set?: (environment: 'sandbox' | 'production') => void;
+      };
+    };
+
+    if (paddleEnvironment && paddleWithEnvironment.Environment?.set) {
+      paddleWithEnvironment.Environment.set(paddleEnvironment);
+    }
+
     paddle.Initialize({
       token: paymentClientToken,
-      ...(paddleEnvironment ? { environment: paddleEnvironment } : {}),
       eventCallback: event => {
         if (event.name === 'checkout.completed') {
           window.dispatchEvent(new Event(PADDLE_CHECKOUT_COMPLETED_EVENT));