add type, dont merge this thou, its based on unstable

Shopify · Apr 11, 2024 · b6988bd · b6988bd
1 parent 772d7f3
commit b6988bd
Show file tree

Hide file tree

Showing 10 changed files with 1,339 additions and 81 deletions.
diff --git a/examples/b2b/app/components/Header.tsx b/examples/b2b/app/components/Header.tsx
@@ -5,20 +5,22 @@ import type {HeaderQuery} from 'storefrontapi.generated';
 import type {LayoutProps} from './Layout';
 import {useRootLoaderData} from '~/root';
 
+/***********************************************/
+/**********  EXAMPLE UPDATE STARTS  ************/
 type HeaderProps = Pick<
   LayoutProps,
-  'header' | 'cart' | 'isLoggedIn' | 'customer' | 'companyLocationId'
+  'header' | 'cart' | 'isLoggedIn' | 'company'
 >;
+/**********   EXAMPLE UPDATE END   ************/
+/***********************************************/
 
 type Viewport = 'desktop' | 'mobile';
 
-export function Header({
-  header,
-  isLoggedIn,
-  cart,
-  customer,
-  companyLocationId,
-}: HeaderProps) {
+/***********************************************/
+/**********  EXAMPLE UPDATE STARTS  ************/
+export function Header({header, isLoggedIn, cart, company}: HeaderProps) {
+  /**********   EXAMPLE UPDATE END   ************/
+  /***********************************************/
   const {shop, menu} = header;
   return (
     <header className="header">
@@ -30,12 +32,11 @@ export function Header({
         viewport="desktop"
         primaryDomainUrl={header.shop.primaryDomain.url}
       />
-      <HeaderCtas
-        isLoggedIn={isLoggedIn}
-        cart={cart}
-        customer={customer}
-        companyLocationId={companyLocationId}
-      />
+      {/***********************************************/
+      /**********  EXAMPLE UPDATE STARTS  ************/}
+      <HeaderCtas isLoggedIn={isLoggedIn} cart={cart} company={company} />
+      {/**********   EXAMPLE UPDATE END   ************/
+      /***********************************************/}
     </header>
   );
 }
@@ -100,34 +101,27 @@ export function HeaderMenu({
   );
 }
 
+/***********************************************/
+/**********  EXAMPLE UPDATE STARTS  ************/
 function HeaderCtas({
   isLoggedIn,
   cart,
-  customer,
-  companyLocationId,
-}: Pick<
-  HeaderProps,
-  'isLoggedIn' | 'cart' | 'customer' | 'companyLocationId'
->) {
+  company,
+}: Pick<HeaderProps, 'isLoggedIn' | 'cart' | 'company'>) {
   return (
     <nav className="header-ctas" role="navigation">
       <HeaderMenuMobileToggle />
-      <LocationDropdown
-        customer={customer}
-        companyLocationId={companyLocationId}
-      />
+      <LocationDropdown company={company} />
       <NavLink prefetch="intent" to="/account" style={activeLinkStyle}>
-        <Suspense fallback="Sign in">
-          <Await resolve={isLoggedIn} errorElement="Sign in">
-            {(isLoggedIn) => (isLoggedIn ? 'Account' : 'Sign in')}
-          </Await>
-        </Suspense>
+        {isLoggedIn ? 'Account' : 'Sign in'}
       </NavLink>
       <SearchToggle />
       <CartToggle cart={cart} />
     </nav>
   );
 }
+/**********   EXAMPLE UPDATE END   ************/
+/***********************************************/
 
 function HeaderMenuMobileToggle() {
   return (
@@ -158,24 +152,20 @@ function CartToggle({cart}: Pick<HeaderProps, 'cart'>) {
   );
 }
 
-function LocationDropdown({
-  customer,
-  companyLocationId,
-}: Pick<HeaderProps, 'customer' | 'companyLocationId'>) {
-  const company =
-    customer?.data?.customer?.companyContacts?.edges?.[0]?.node?.company;
-
+/***********************************************/
+/**********  EXAMPLE UPDATE STARTS  ************/
+function LocationDropdown({company}: Pick<HeaderProps, 'company'>) {
   const locations = company?.locations?.edges
-    ? company.locations.edges.map((loc) => {
-        return {...loc.node};
+    ? company.locations.edges.map((location) => {
+        return {...location.node};
       })
     : [];
 
   const [selectedLocation, setSelectedLocation] = useState(
-    companyLocationId ?? undefined,
+    company.locations.edges[0].node.id ?? undefined,
   );
 
-  const setLocation = async (event) => {
+  const setLocation = async (event: React.ChangeEvent<HTMLSelectElement>) => {
     const locationId = event.target.value;
     setSelectedLocation(locationId);
   };
@@ -217,6 +207,8 @@ function LocationDropdown({
     </CartForm>
   );
 }
+/**********   EXAMPLE UPDATE END   ************/
+/***********************************************/
 
 const FALLBACK_HEADER_MENU = {
   id: 'gid://shopify/Menu/199655587896',

diff --git a/examples/b2b/app/components/Layout.tsx b/examples/b2b/app/components/Layout.tsx
@@ -13,40 +13,50 @@ import {
   PredictiveSearchForm,
   PredictiveSearchResults,
 } from '~/components/Search';
+import type {Company} from '@shopify/hydrogen-react/customer-account-api-types';
 
 export type LayoutProps = {
   cart: Promise<CartApiQueryFragment | null>;
   children?: React.ReactNode;
   footer: Promise<FooterQuery>;
   header: HeaderQuery;
-  isLoggedIn: Promise<boolean>;
-  customer: any;
-  companyLocationId?: string;
+  isLoggedIn: boolean;
+  /***********************************************/
+  /**********  EXAMPLE UPDATE STARTS  ************/
+  company: Company;
+  /**********   EXAMPLE UPDATE END   ************/
+  /***********************************************/
 };
 
+/***********************************************/
+/**********  EXAMPLE UPDATE STARTS  ************/
 export function Layout({
   cart,
   children = null,
   footer,
   header,
   isLoggedIn,
-  customer,
-  companyLocationId,
+  company,
 }: LayoutProps) {
+  /**********   EXAMPLE UPDATE END   ************/
+  /***********************************************/
   return (
     <>
       <CartAside cart={cart} />
       <SearchAside />
       <MobileMenuAside menu={header?.menu} shop={header?.shop} />
+      {/***********************************************/
+      /**********  EXAMPLE UPDATE STARTS  ************/}
       {header && (
         <Header
           header={header}
           cart={cart}
           isLoggedIn={isLoggedIn}
-          customer={customer}
-          companyLocationId={companyLocationId}
+          company={company}
         />
       )}
+      {/**********   EXAMPLE UPDATE END   ************/
+      /***********************************************/}
       <main>{children}</main>
       <Suspense>
         <Await resolve={footer}>

diff --git a/examples/b2b/app/components/LocationSelector.tsx b/examples/b2b/app/components/LocationSelector.tsx
@@ -1,16 +1,17 @@
 import {CartForm} from '@shopify/hydrogen';
+import type {
+  Company,
+  CompanyLocation,
+} from '@shopify/hydrogen-react/customer-account-api-types';
 
-export function LocationSelector({customer}) {
-  const company =
-    customer?.data?.customer?.companyContacts?.edges?.[0]?.node?.company;
-
+export function LocationSelector({company}: {company: Company}) {
   const locations = company?.locations?.edges
     ? company.locations.edges.map((loc) => {
         return {...loc.node};
       })
     : [];
 
-  function LocationItem({location}) {
+  function LocationItem({location}: {location: CompanyLocation}) {
     const addressLines = location?.shippingAddress?.formattedAddress ?? [];
     return (
       <label>

diff --git a/examples/b2b/app/root.tsx b/examples/b2b/app/root.tsx
@@ -23,6 +23,7 @@ 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';
+import type {Company} from '@shopify/hydrogen-react/customer-account-api-types';
 
 /**
  * This is important to avoid re-fetching root queries on sub-navigations
@@ -73,7 +74,7 @@ export async function loader({request, context}: LoaderFunctionArgs) {
   const {storefront, customerAccount, cart, session} = context;
   const publicStoreDomain = context.env.PUBLIC_STORE_DOMAIN;
 
-  const isLoggedInPromise = await customerAccount.isLoggedIn();
+  const isLoggedIn = await customerAccount.isLoggedIn();
   const cartPromise = cart.get();
 
   // defer the footer query (below the fold)
@@ -96,34 +97,31 @@ export async function loader({request, context}: LoaderFunctionArgs) {
   let companyLocationId = (await customerAccount.UNSTABLE_getBuyer())
     ?.companyLocationId;
 
-  const customer = await customerAccount.query(CUSTOMER_LOCATIONS_QUERY, {
-    variables: {},
-    context,
-    request,
-  });
-  const companyData =
+  const customer = await customerAccount.query(CUSTOMER_LOCATIONS_QUERY);
+  const company: Company =
     customer?.data?.customer?.companyContacts?.edges?.[0]?.node?.company;
 
-  if (!companyLocationId && companyData?.locations?.edges?.length === 1) {
-    companyLocationId = companyData.locations.edges[0].node.id;
+  if (!companyLocationId && company?.locations?.edges?.length === 1) {
+    companyLocationId = company.locations.edges[0].node.id;
 
     customerAccount.UNSTABLE_setBuyer({
       companyLocationId,
     });
+
+    //updateBuyerIdentity
   }
 
-  const showLocationSelector = Boolean(companyData && !companyLocationId);
+  const showLocationSelector = Boolean(company && !companyLocationId);
 
   return defer(
     {
       cart: cartPromise,
       footer: footerPromise,
       header: await headerPromise,
-      isLoggedIn: isLoggedInPromise,
+      isLoggedIn,
       publicStoreDomain,
-      customer,
+      company,
       showLocationSelector,
-      companyLocationId,
     },
     {
       headers: {
@@ -148,7 +146,7 @@ export default function App() {
       <body>
         {data.showLocationSelector ? (
           <main>
-            <LocationSelector customer={data.customer} />
+            <LocationSelector company={data.company} />
           </main>
         ) : (
           <Layout {...data}>

diff --git a/packages/hydrogen-react/customer-account.schema.json b/packages/hydrogen-react/customer-account.schema.json