Division Membership Integration

Copy-paste ready code for each division site to implement unified SphereUs℠ membership.

How the Flow Works
1

User visits your division site

Example: qualitycharters.com/dashboard

2

Your code checks membership

Via base44.auth.me() - checks membership_tier field

3

If no membership → redirect to SphereUs.com

https://sphereus.com/pricing?sso_return=[your-division-url]

4

User logs in & pays at SphereUs.com

Same email/account works everywhere

5

After payment → redirected back to your division

User now has access to ALL divisions

⚠️ Important:

  • Single account everywhere - Users use same email across all division sites
  • Only SphereUs.com handles payments - Never implement payment on division sites
  • $50/year = access to ALL divisions - One membership unlocks everything
  • Marketplace purchases are separate - Those are per-transaction charges
  • Free browsing - Let users explore before requiring membership

Division-Specific Code Snippets

Guided Aimguidedaim.com

Option 1: Full Page with Membership Gate

// Guided Aim - Membership Check & Redirect
// Place this code at the top of any gated feature page

import React, { useEffect, useState } from "react";
import { base44 } from "@/api/base44Client";

export default function YourGatedPage() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const checkMembership = async () => {
      try {
        const currentUser = await base44.auth.me();
        
        // Check if user has active membership
        const hasMembership = currentUser.membership_tier === 'member' || 
                             currentUser.membership_tier === 'premium';
        
        if (!hasMembership) {
          // Redirect to SphereUs.com pricing with return URL
          window.location.href = 'https://sphereus.com/pricing?sso_return=https://guidedaim.com/dashboard';
          return;
        }
        
        setUser(currentUser);
      } catch (error) {
        // User not logged in - redirect to login then pricing
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://guidedaim.com/dashboard';
      } finally {
        setLoading(false);
      }
    };

    checkMembership();
  }, []);

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
          <p className="text-gray-600">Checking membership...</p>
        </div>
      </div>
    );
  }

  if (!user) return null;

  // Your gated feature content here
  return (
    <div>
      <h1>Welcome, {user.full_name}!</h1>
      {/* Your division-specific content */}
    </div>
  );
}

Option 2: Add to Existing Page

// Guided Aim - Simple Membership Check (for existing pages)
// Add this to the top of your existing page component

const [membershipChecked, setMembershipChecked] = useState(false);

useEffect(() => {
  const checkMembership = async () => {
    try {
      const user = await base44.auth.me();
      const hasMembership = user.membership_tier === 'member' || 
                           user.membership_tier === 'premium';
      
      if (!hasMembership) {
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://guidedaim.com/dashboard';
        return;
      }
      
      setMembershipChecked(true);
    } catch (error) {
      window.location.href = 'https://sphereus.com/pricing?sso_return=https://guidedaim.com/dashboard';
    }
  };

  checkMembership();
}, []);

if (!membershipChecked) {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
    </div>
  );
}

Direct Pricing Link (for buttons/navigation):

https://sphereus.com/pricing?sso_return=https://guidedaim.com/dashboard
Grade Level Upgradelevelup.com

Option 1: Full Page with Membership Gate

// Grade Level Up - Membership Check & Redirect
// Place this code at the top of any gated feature page

import React, { useEffect, useState } from "react";
import { base44 } from "@/api/base44Client";

export default function YourGatedPage() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const checkMembership = async () => {
      try {
        const currentUser = await base44.auth.me();
        
        // Check if user has active membership
        const hasMembership = currentUser.membership_tier === 'member' || 
                             currentUser.membership_tier === 'premium';
        
        if (!hasMembership) {
          // Redirect to SphereUs.com pricing with return URL
          window.location.href = 'https://sphereus.com/pricing?sso_return=https://gradelevelup.com/dashboard';
          return;
        }
        
        setUser(currentUser);
      } catch (error) {
        // User not logged in - redirect to login then pricing
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://gradelevelup.com/dashboard';
      } finally {
        setLoading(false);
      }
    };

    checkMembership();
  }, []);

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
          <p className="text-gray-600">Checking membership...</p>
        </div>
      </div>
    );
  }

  if (!user) return null;

  // Your gated feature content here
  return (
    <div>
      <h1>Welcome, {user.full_name}!</h1>
      {/* Your division-specific content */}
    </div>
  );
}

Option 2: Add to Existing Page

// Grade Level Up - Simple Membership Check (for existing pages)
// Add this to the top of your existing page component

const [membershipChecked, setMembershipChecked] = useState(false);

useEffect(() => {
  const checkMembership = async () => {
    try {
      const user = await base44.auth.me();
      const hasMembership = user.membership_tier === 'member' || 
                           user.membership_tier === 'premium';
      
      if (!hasMembership) {
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://gradelevelup.com/dashboard';
        return;
      }
      
      setMembershipChecked(true);
    } catch (error) {
      window.location.href = 'https://sphereus.com/pricing?sso_return=https://gradelevelup.com/dashboard';
    }
  };

  checkMembership();
}, []);

if (!membershipChecked) {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
    </div>
  );
}

Direct Pricing Link (for buttons/navigation):

https://sphereus.com/pricing?sso_return=https://gradelevelup.com/dashboard
Golf Your Agegolfyourage.com

Option 1: Full Page with Membership Gate

// Golf Your Age - Membership Check & Redirect
// Place this code at the top of any gated feature page

import React, { useEffect, useState } from "react";
import { base44 } from "@/api/base44Client";

export default function YourGatedPage() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const checkMembership = async () => {
      try {
        const currentUser = await base44.auth.me();
        
        // Check if user has active membership
        const hasMembership = currentUser.membership_tier === 'member' || 
                             currentUser.membership_tier === 'premium';
        
        if (!hasMembership) {
          // Redirect to SphereUs.com pricing with return URL
          window.location.href = 'https://sphereus.com/pricing?sso_return=https://golfyourage.com/dashboard';
          return;
        }
        
        setUser(currentUser);
      } catch (error) {
        // User not logged in - redirect to login then pricing
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://golfyourage.com/dashboard';
      } finally {
        setLoading(false);
      }
    };

    checkMembership();
  }, []);

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
          <p className="text-gray-600">Checking membership...</p>
        </div>
      </div>
    );
  }

  if (!user) return null;

  // Your gated feature content here
  return (
    <div>
      <h1>Welcome, {user.full_name}!</h1>
      {/* Your division-specific content */}
    </div>
  );
}

Option 2: Add to Existing Page

// Golf Your Age - Simple Membership Check (for existing pages)
// Add this to the top of your existing page component

const [membershipChecked, setMembershipChecked] = useState(false);

useEffect(() => {
  const checkMembership = async () => {
    try {
      const user = await base44.auth.me();
      const hasMembership = user.membership_tier === 'member' || 
                           user.membership_tier === 'premium';
      
      if (!hasMembership) {
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://golfyourage.com/dashboard';
        return;
      }
      
      setMembershipChecked(true);
    } catch (error) {
      window.location.href = 'https://sphereus.com/pricing?sso_return=https://golfyourage.com/dashboard';
    }
  };

  checkMembership();
}, []);

if (!membershipChecked) {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
    </div>
  );
}

Direct Pricing Link (for buttons/navigation):

https://sphereus.com/pricing?sso_return=https://golfyourage.com/dashboard
Quality Chartersqualitycharters.com

Option 1: Full Page with Membership Gate

// Quality Charters - Membership Check & Redirect
// Place this code at the top of any gated feature page

import React, { useEffect, useState } from "react";
import { base44 } from "@/api/base44Client";

export default function YourGatedPage() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const checkMembership = async () => {
      try {
        const currentUser = await base44.auth.me();
        
        // Check if user has active membership
        const hasMembership = currentUser.membership_tier === 'member' || 
                             currentUser.membership_tier === 'premium';
        
        if (!hasMembership) {
          // Redirect to SphereUs.com pricing with return URL
          window.location.href = 'https://sphereus.com/pricing?sso_return=https://qualitycharters.com/dashboard';
          return;
        }
        
        setUser(currentUser);
      } catch (error) {
        // User not logged in - redirect to login then pricing
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://qualitycharters.com/dashboard';
      } finally {
        setLoading(false);
      }
    };

    checkMembership();
  }, []);

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
          <p className="text-gray-600">Checking membership...</p>
        </div>
      </div>
    );
  }

  if (!user) return null;

  // Your gated feature content here
  return (
    <div>
      <h1>Welcome, {user.full_name}!</h1>
      {/* Your division-specific content */}
    </div>
  );
}

Option 2: Add to Existing Page

// Quality Charters - Simple Membership Check (for existing pages)
// Add this to the top of your existing page component

const [membershipChecked, setMembershipChecked] = useState(false);

useEffect(() => {
  const checkMembership = async () => {
    try {
      const user = await base44.auth.me();
      const hasMembership = user.membership_tier === 'member' || 
                           user.membership_tier === 'premium';
      
      if (!hasMembership) {
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://qualitycharters.com/dashboard';
        return;
      }
      
      setMembershipChecked(true);
    } catch (error) {
      window.location.href = 'https://sphereus.com/pricing?sso_return=https://qualitycharters.com/dashboard';
    }
  };

  checkMembership();
}, []);

if (!membershipChecked) {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
    </div>
  );
}

Direct Pricing Link (for buttons/navigation):

https://sphereus.com/pricing?sso_return=https://qualitycharters.com/dashboard
SphereUs Foundationsphereus.org

Option 1: Full Page with Membership Gate

// SphereUs Foundation - Membership Check & Redirect
// Place this code at the top of any gated feature page

import React, { useEffect, useState } from "react";
import { base44 } from "@/api/base44Client";

export default function YourGatedPage() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const checkMembership = async () => {
      try {
        const currentUser = await base44.auth.me();
        
        // Check if user has active membership
        const hasMembership = currentUser.membership_tier === 'member' || 
                             currentUser.membership_tier === 'premium';
        
        if (!hasMembership) {
          // Redirect to SphereUs.com pricing with return URL
          window.location.href = 'https://sphereus.com/pricing?sso_return=https://sphereus.org/donate';
          return;
        }
        
        setUser(currentUser);
      } catch (error) {
        // User not logged in - redirect to login then pricing
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://sphereus.org/donate';
      } finally {
        setLoading(false);
      }
    };

    checkMembership();
  }, []);

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
          <p className="text-gray-600">Checking membership...</p>
        </div>
      </div>
    );
  }

  if (!user) return null;

  // Your gated feature content here
  return (
    <div>
      <h1>Welcome, {user.full_name}!</h1>
      {/* Your division-specific content */}
    </div>
  );
}

Option 2: Add to Existing Page

// SphereUs Foundation - Simple Membership Check (for existing pages)
// Add this to the top of your existing page component

const [membershipChecked, setMembershipChecked] = useState(false);

useEffect(() => {
  const checkMembership = async () => {
    try {
      const user = await base44.auth.me();
      const hasMembership = user.membership_tier === 'member' || 
                           user.membership_tier === 'premium';
      
      if (!hasMembership) {
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://sphereus.org/donate';
        return;
      }
      
      setMembershipChecked(true);
    } catch (error) {
      window.location.href = 'https://sphereus.com/pricing?sso_return=https://sphereus.org/donate';
    }
  };

  checkMembership();
}, []);

if (!membershipChecked) {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
    </div>
  );
}

Direct Pricing Link (for buttons/navigation):

https://sphereus.com/pricing?sso_return=https://sphereus.org/donate
Anvilar Groupanvilargroup.com

Option 1: Full Page with Membership Gate

// Anvilar Group - Membership Check & Redirect
// Place this code at the top of any gated feature page

import React, { useEffect, useState } from "react";
import { base44 } from "@/api/base44Client";

export default function YourGatedPage() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const checkMembership = async () => {
      try {
        const currentUser = await base44.auth.me();
        
        // Check if user has active membership
        const hasMembership = currentUser.membership_tier === 'member' || 
                             currentUser.membership_tier === 'premium';
        
        if (!hasMembership) {
          // Redirect to SphereUs.com pricing with return URL
          window.location.href = 'https://sphereus.com/pricing?sso_return=https://anvilargroup.com/dashboard';
          return;
        }
        
        setUser(currentUser);
      } catch (error) {
        // User not logged in - redirect to login then pricing
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://anvilargroup.com/dashboard';
      } finally {
        setLoading(false);
      }
    };

    checkMembership();
  }, []);

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
          <p className="text-gray-600">Checking membership...</p>
        </div>
      </div>
    );
  }

  if (!user) return null;

  // Your gated feature content here
  return (
    <div>
      <h1>Welcome, {user.full_name}!</h1>
      {/* Your division-specific content */}
    </div>
  );
}

Option 2: Add to Existing Page

// Anvilar Group - Simple Membership Check (for existing pages)
// Add this to the top of your existing page component

const [membershipChecked, setMembershipChecked] = useState(false);

useEffect(() => {
  const checkMembership = async () => {
    try {
      const user = await base44.auth.me();
      const hasMembership = user.membership_tier === 'member' || 
                           user.membership_tier === 'premium';
      
      if (!hasMembership) {
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://anvilargroup.com/dashboard';
        return;
      }
      
      setMembershipChecked(true);
    } catch (error) {
      window.location.href = 'https://sphereus.com/pricing?sso_return=https://anvilargroup.com/dashboard';
    }
  };

  checkMembership();
}, []);

if (!membershipChecked) {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
    </div>
  );
}

Direct Pricing Link (for buttons/navigation):

https://sphereus.com/pricing?sso_return=https://anvilargroup.com/dashboard
Federal Programsfederalprograms.com

Option 1: Full Page with Membership Gate

// Federal Programs - Membership Check & Redirect
// Place this code at the top of any gated feature page

import React, { useEffect, useState } from "react";
import { base44 } from "@/api/base44Client";

export default function YourGatedPage() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const checkMembership = async () => {
      try {
        const currentUser = await base44.auth.me();
        
        // Check if user has active membership
        const hasMembership = currentUser.membership_tier === 'member' || 
                             currentUser.membership_tier === 'premium';
        
        if (!hasMembership) {
          // Redirect to SphereUs.com pricing with return URL
          window.location.href = 'https://sphereus.com/pricing?sso_return=https://federalprograms.com/dashboard';
          return;
        }
        
        setUser(currentUser);
      } catch (error) {
        // User not logged in - redirect to login then pricing
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://federalprograms.com/dashboard';
      } finally {
        setLoading(false);
      }
    };

    checkMembership();
  }, []);

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
          <p className="text-gray-600">Checking membership...</p>
        </div>
      </div>
    );
  }

  if (!user) return null;

  // Your gated feature content here
  return (
    <div>
      <h1>Welcome, {user.full_name}!</h1>
      {/* Your division-specific content */}
    </div>
  );
}

Option 2: Add to Existing Page

// Federal Programs - Simple Membership Check (for existing pages)
// Add this to the top of your existing page component

const [membershipChecked, setMembershipChecked] = useState(false);

useEffect(() => {
  const checkMembership = async () => {
    try {
      const user = await base44.auth.me();
      const hasMembership = user.membership_tier === 'member' || 
                           user.membership_tier === 'premium';
      
      if (!hasMembership) {
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://federalprograms.com/dashboard';
        return;
      }
      
      setMembershipChecked(true);
    } catch (error) {
      window.location.href = 'https://sphereus.com/pricing?sso_return=https://federalprograms.com/dashboard';
    }
  };

  checkMembership();
}, []);

if (!membershipChecked) {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
    </div>
  );
}

Direct Pricing Link (for buttons/navigation):

https://sphereus.com/pricing?sso_return=https://federalprograms.com/dashboard
Wompus Gameswompusgames.com

Option 1: Full Page with Membership Gate

// Wompus Games - Membership Check & Redirect
// Place this code at the top of any gated feature page

import React, { useEffect, useState } from "react";
import { base44 } from "@/api/base44Client";

export default function YourGatedPage() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const checkMembership = async () => {
      try {
        const currentUser = await base44.auth.me();
        
        // Check if user has active membership
        const hasMembership = currentUser.membership_tier === 'member' || 
                             currentUser.membership_tier === 'premium';
        
        if (!hasMembership) {
          // Redirect to SphereUs.com pricing with return URL
          window.location.href = 'https://sphereus.com/pricing?sso_return=https://wompusgames.com/play';
          return;
        }
        
        setUser(currentUser);
      } catch (error) {
        // User not logged in - redirect to login then pricing
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://wompusgames.com/play';
      } finally {
        setLoading(false);
      }
    };

    checkMembership();
  }, []);

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
          <p className="text-gray-600">Checking membership...</p>
        </div>
      </div>
    );
  }

  if (!user) return null;

  // Your gated feature content here
  return (
    <div>
      <h1>Welcome, {user.full_name}!</h1>
      {/* Your division-specific content */}
    </div>
  );
}

Option 2: Add to Existing Page

// Wompus Games - Simple Membership Check (for existing pages)
// Add this to the top of your existing page component

const [membershipChecked, setMembershipChecked] = useState(false);

useEffect(() => {
  const checkMembership = async () => {
    try {
      const user = await base44.auth.me();
      const hasMembership = user.membership_tier === 'member' || 
                           user.membership_tier === 'premium';
      
      if (!hasMembership) {
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://wompusgames.com/play';
        return;
      }
      
      setMembershipChecked(true);
    } catch (error) {
      window.location.href = 'https://sphereus.com/pricing?sso_return=https://wompusgames.com/play';
    }
  };

  checkMembership();
}, []);

if (!membershipChecked) {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
    </div>
  );
}

Direct Pricing Link (for buttons/navigation):

https://sphereus.com/pricing?sso_return=https://wompusgames.com/play
SplitZensplitzen.com

Option 1: Full Page with Membership Gate

// SplitZen - Membership Check & Redirect
// Place this code at the top of any gated feature page

import React, { useEffect, useState } from "react";
import { base44 } from "@/api/base44Client";

export default function YourGatedPage() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const checkMembership = async () => {
      try {
        const currentUser = await base44.auth.me();
        
        // Check if user has active membership
        const hasMembership = currentUser.membership_tier === 'member' || 
                             currentUser.membership_tier === 'premium';
        
        if (!hasMembership) {
          // Redirect to SphereUs.com pricing with return URL
          window.location.href = 'https://sphereus.com/pricing?sso_return=https://splitzen.com/dashboard';
          return;
        }
        
        setUser(currentUser);
      } catch (error) {
        // User not logged in - redirect to login then pricing
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://splitzen.com/dashboard';
      } finally {
        setLoading(false);
      }
    };

    checkMembership();
  }, []);

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
          <p className="text-gray-600">Checking membership...</p>
        </div>
      </div>
    );
  }

  if (!user) return null;

  // Your gated feature content here
  return (
    <div>
      <h1>Welcome, {user.full_name}!</h1>
      {/* Your division-specific content */}
    </div>
  );
}

Option 2: Add to Existing Page

// SplitZen - Simple Membership Check (for existing pages)
// Add this to the top of your existing page component

const [membershipChecked, setMembershipChecked] = useState(false);

useEffect(() => {
  const checkMembership = async () => {
    try {
      const user = await base44.auth.me();
      const hasMembership = user.membership_tier === 'member' || 
                           user.membership_tier === 'premium';
      
      if (!hasMembership) {
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://splitzen.com/dashboard';
        return;
      }
      
      setMembershipChecked(true);
    } catch (error) {
      window.location.href = 'https://sphereus.com/pricing?sso_return=https://splitzen.com/dashboard';
    }
  };

  checkMembership();
}, []);

if (!membershipChecked) {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
    </div>
  );
}

Direct Pricing Link (for buttons/navigation):

https://sphereus.com/pricing?sso_return=https://splitzen.com/dashboard
Swicketswicket.com

Option 1: Full Page with Membership Gate

// Swicket - Membership Check & Redirect
// Place this code at the top of any gated feature page

import React, { useEffect, useState } from "react";
import { base44 } from "@/api/base44Client";

export default function YourGatedPage() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const checkMembership = async () => {
      try {
        const currentUser = await base44.auth.me();
        
        // Check if user has active membership
        const hasMembership = currentUser.membership_tier === 'member' || 
                             currentUser.membership_tier === 'premium';
        
        if (!hasMembership) {
          // Redirect to SphereUs.com pricing with return URL
          window.location.href = 'https://sphereus.com/pricing?sso_return=https://swicket.com/dashboard';
          return;
        }
        
        setUser(currentUser);
      } catch (error) {
        // User not logged in - redirect to login then pricing
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://swicket.com/dashboard';
      } finally {
        setLoading(false);
      }
    };

    checkMembership();
  }, []);

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
          <p className="text-gray-600">Checking membership...</p>
        </div>
      </div>
    );
  }

  if (!user) return null;

  // Your gated feature content here
  return (
    <div>
      <h1>Welcome, {user.full_name}!</h1>
      {/* Your division-specific content */}
    </div>
  );
}

Option 2: Add to Existing Page

// Swicket - Simple Membership Check (for existing pages)
// Add this to the top of your existing page component

const [membershipChecked, setMembershipChecked] = useState(false);

useEffect(() => {
  const checkMembership = async () => {
    try {
      const user = await base44.auth.me();
      const hasMembership = user.membership_tier === 'member' || 
                           user.membership_tier === 'premium';
      
      if (!hasMembership) {
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://swicket.com/dashboard';
        return;
      }
      
      setMembershipChecked(true);
    } catch (error) {
      window.location.href = 'https://sphereus.com/pricing?sso_return=https://swicket.com/dashboard';
    }
  };

  checkMembership();
}, []);

if (!membershipChecked) {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
    </div>
  );
}

Direct Pricing Link (for buttons/navigation):

https://sphereus.com/pricing?sso_return=https://swicket.com/dashboard
BudVanbudvan.com

Option 1: Full Page with Membership Gate

// BudVan - Membership Check & Redirect
// Place this code at the top of any gated feature page

import React, { useEffect, useState } from "react";
import { base44 } from "@/api/base44Client";

export default function YourGatedPage() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const checkMembership = async () => {
      try {
        const currentUser = await base44.auth.me();
        
        // Check if user has active membership
        const hasMembership = currentUser.membership_tier === 'member' || 
                             currentUser.membership_tier === 'premium';
        
        if (!hasMembership) {
          // Redirect to SphereUs.com pricing with return URL
          window.location.href = 'https://sphereus.com/pricing?sso_return=https://budvan.com/dashboard';
          return;
        }
        
        setUser(currentUser);
      } catch (error) {
        // User not logged in - redirect to login then pricing
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://budvan.com/dashboard';
      } finally {
        setLoading(false);
      }
    };

    checkMembership();
  }, []);

  if (loading) {
    return (
      <div className="min-h-screen flex items-center justify-center">
        <div className="text-center">
          <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mb-4"></div>
          <p className="text-gray-600">Checking membership...</p>
        </div>
      </div>
    );
  }

  if (!user) return null;

  // Your gated feature content here
  return (
    <div>
      <h1>Welcome, {user.full_name}!</h1>
      {/* Your division-specific content */}
    </div>
  );
}

Option 2: Add to Existing Page

// BudVan - Simple Membership Check (for existing pages)
// Add this to the top of your existing page component

const [membershipChecked, setMembershipChecked] = useState(false);

useEffect(() => {
  const checkMembership = async () => {
    try {
      const user = await base44.auth.me();
      const hasMembership = user.membership_tier === 'member' || 
                           user.membership_tier === 'premium';
      
      if (!hasMembership) {
        window.location.href = 'https://sphereus.com/pricing?sso_return=https://budvan.com/dashboard';
        return;
      }
      
      setMembershipChecked(true);
    } catch (error) {
      window.location.href = 'https://sphereus.com/pricing?sso_return=https://budvan.com/dashboard';
    }
  };

  checkMembership();
}, []);

if (!membershipChecked) {
  return (
    <div className="min-h-screen flex items-center justify-center">
      <div className="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
    </div>
  );
}

Direct Pricing Link (for buttons/navigation):

https://sphereus.com/pricing?sso_return=https://budvan.com/dashboard
Testing Your Integration
  1. Test as logged-out user: Visit your gated page → should redirect to sphereus.com/pricing
  2. Test after login (no membership): Should still redirect to pricing
  3. Test after payment: User should be redirected back to your division with full access
  4. Test cross-division: Once paid on one division, user should have access to all others

Questions? Contact SphereUs℠ platform team for integration support.