login redirect

Shopify · Mar 22, 2024 · ebefc4f · ebefc4f
1 parent 7effe1c
commit ebefc4f
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 87 deletions.
diff --git a/examples/b2b/app/components/LocationSelector.tsx b/examples/b2b/app/components/LocationSelector.tsx
@@ -1,21 +1,18 @@
+import {useNavigate} from '@remix-run/react';
 import {useState} from 'react';
 
-export function LocationSelector({customer, companyLocationId}) {
+export function LocationSelector({customer}) {
   const company =
-    customer?.customer?.companyContacts?.edges?.[0]?.node?.company;
+    customer?.data?.customer?.companyContacts?.edges?.[0]?.node?.company;
 
   const locations = company?.locations?.edges
     ? company.locations.edges.map((loc) => {
         return {...loc.node};
       })
     : [];
 
-  const [selectedLocation, setSelectedLocation] = useState(
-    locations.find((loc) => loc.id === companyLocationId) || null,
-  );
-  const [savedLocation, setSavedLocation] = useState(
-    locations.find((loc) => loc.id === companyLocationId) || null,
-  );
+  const [selectedLocation, setSelectedLocation] = useState();
+  const navigate = useNavigate();
 
   const setLocation = async () => {
     const locationId = selectedLocation?.id;
@@ -27,7 +24,7 @@ export function LocationSelector({customer, companyLocationId}) {
         country: locationCountry,
       }),
     });
-    setSavedLocation(selectedLocation);
+    navigate('/', {replace: true});
   };
 
   function LocationItem({location}) {
@@ -59,33 +56,16 @@ export function LocationSelector({customer, companyLocationId}) {
   return (
     <div>
       <h1>Logged in for {company.name}</h1>
-      {savedLocation ? (
-        <div>
-          <h3>
-            Selected Location{' '}
-            {savedLocation ? savedLocation.name : locations[0].name}
-          </h3>
-          <button
-            onClick={() => {
-              setSavedLocation(null);
-              setSelectedLocation(null);
-            }}
-          >
-            <p>Select different location</p>
-          </button>
-        </div>
-      ) : (
-        <div>
-          {locations.map((location) => {
-            return (
-              <div key={location.id}>
-                <LocationItem location={location} />
-              </div>
-            );
-          })}
-          <button onClick={setLocation}>Choose location</button>
-        </div>
-      )}
+      <div>
+        {locations.map((location) => {
+          return (
+            <div key={location.id}>
+              <LocationItem location={location} />
+            </div>
+          );
+        })}
+        <button onClick={setLocation}>Choose location</button>
+      </div>
     </div>
   );
 }
diff --git a/examples/b2b/app/root.tsx b/examples/b2b/app/root.tsx
@@ -21,6 +21,7 @@ import favicon from './assets/favicon.svg';
 import resetStyles from './styles/reset.css';
 import appStyles from './styles/app.css';
 import {Layout} from '~/components/Layout';
+import {LocationSelector} from '~/components/LocationSelector';
 import {CUSTOMER_LOCATIONS_QUERY} from '~/graphql/customer-account/CustomerLocationsQuery';
 
 /**
@@ -72,7 +73,7 @@ export async function loader({request, context}: LoaderFunctionArgs) {
   const {storefront, customerAccount, cart, session} = context;
   const publicStoreDomain = context.env.PUBLIC_STORE_DOMAIN;
 
-  const isLoggedInPromise = customerAccount.isLoggedIn();
+  const isLoggedInPromise = await customerAccount.isLoggedIn();
   const cartPromise = cart.get();
 
   // defer the footer query (below the fold)
@@ -120,6 +121,10 @@ export async function loader({request, context}: LoaderFunctionArgs) {
 export default function App() {
   const nonce = useNonce();
   const data = useLoaderData<typeof loader>();
+  const hasCompanyData =
+    data?.customer?.data?.customer?.companyContacts?.edges?.[0]?.node?.company;
+
+  console.log(data.customer);
 
   return (
     <html lang="en">
@@ -130,9 +135,16 @@ export default function App() {
         <Links />
       </head>
       <body>
-        <Layout {...data}>
-          <Outlet />
-        </Layout>
+        {hasCompanyData && !data.companyLocationId ? (
+          <main>
+            <LocationSelector customer={data.customer} />
+          </main>
+        ) : (
+          <Layout {...data}>
+            <Outlet />
+          </Layout>
+        )}
+
         <ScrollRestoration nonce={nonce} />
         <Scripts nonce={nonce} />
         <LiveReload nonce={nonce} />

diff --git a/examples/b2b/app/routes/account_.authorize.tsx b/examples/b2b/app/routes/account_.authorize.tsx
@@ -23,7 +23,7 @@ export async function loader({context}: LoaderFunctionArgs) {
   const test = session.get('customer_access_token');
   console.log('authorize', test);
 
-  return redirect('/locations', {
+  return redirect('/', {
     headers: {
       'Set-Cookie': await session.commit(),
     },

diff --git a/examples/b2b/app/routes/locations.tsx b/examples/b2b/app/routes/locations.tsx
@@ -1,12 +1,5 @@
-import {useLoaderData, type MetaFunction} from '@remix-run/react';
-import {
-  defer,
-  json,
-  type LoaderFunctionArgs,
-  type ActionFunctionArgs,
-} from '@shopify/remix-oxygen';
-import {LocationSelector} from '~/components/LocationSelector';
-import {CUSTOMER_LOCATIONS_QUERY} from '~/graphql/customer-account/CustomerLocationsQuery';
+import {type MetaFunction} from '@remix-run/react';
+import {redirect, type ActionFunctionArgs} from '@shopify/remix-oxygen';
 
 export const meta: MetaFunction = () => {
   return [{title: 'Hydrogen | Locations'}];
@@ -27,42 +20,7 @@ export async function action({request, context}: ActionFunctionArgs) {
 
   cartHeaders.append('Set-Cookie', await context.session.commit());
 
-  return json(
-    {},
-    {
-      headers: cartHeaders,
-    },
-  );
-}
-
-export async function loader({request, context}: LoaderFunctionArgs) {
-  await context.customerAccount.handleAuthStatus();
-  const companyLocationId = context.session.get('company_location_id');
-  console.log('COMPANY LOCATION ID: ', companyLocationId);
-
-  const customer = await context.customerAccount.query(
-    CUSTOMER_LOCATIONS_QUERY,
-    {
-      variables: {},
-      context,
-      request,
-    },
-  );
-
-  return defer({
-    customer: customer.data,
-    companyLocationId,
+  return redirect('/', {
+    headers: cartHeaders,
   });
 }
-
-export default function Homepage() {
-  const data = useLoaderData<typeof loader>();
-  return (
-    <div className="home">
-      <LocationSelector
-        customer={data.customer}
-        companyLocationId={data.companyLocationId}
-      />
-    </div>
-  );
-}