@shopify/create-hydrogen 4.3.13 → 5.0.0

package/dist/assets/hydrogen/starter/app/routes/account.orders._index.tsx

@@ -0,0 +1,107 @@
+import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
+import {
+  Money,
+  Pagination,
+  getPaginationVariables,
+  flattenConnection,
+} from '@shopify/hydrogen';
+import {json, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {CUSTOMER_ORDERS_QUERY} from '~/graphql/customer-account/CustomerOrdersQuery';
+import type {
+  CustomerOrdersFragment,
+  OrderItemFragment,
+} from 'customer-accountapi.generated';
+
+export const meta: MetaFunction = () => {
+  return [{title: 'Orders'}];
+};
+
+export async function loader({request, context}: LoaderFunctionArgs) {
+  const paginationVariables = getPaginationVariables(request, {
+    pageBy: 20,
+  });
+
+  const {data, errors} = await context.customerAccount.query(
+    CUSTOMER_ORDERS_QUERY,
+    {
+      variables: {
+        ...paginationVariables,
+      },
+    },
+  );
+
+  if (errors?.length || !data?.customer) {
+    throw Error('Customer orders not found');
+  }
+
+  return json({customer: data.customer});
+}
+
+export default function Orders() {
+  const {customer} = useLoaderData<{customer: CustomerOrdersFragment}>();
+  const {orders} = customer;
+  return (
+    <div className="orders">
+      {orders.nodes.length ? <OrdersTable orders={orders} /> : <EmptyOrders />}
+    </div>
+  );
+}
+
+function OrdersTable({orders}: Pick<CustomerOrdersFragment, 'orders'>) {
+  return (
+    <div className="acccount-orders">
+      {orders?.nodes.length ? (
+        <Pagination connection={orders}>
+          {({nodes, isLoading, PreviousLink, NextLink}) => {
+            return (
+              <>
+                <PreviousLink>
+                  {isLoading ? 'Loading...' : <span>↑ Load previous</span>}
+                </PreviousLink>
+                {nodes.map((order) => {
+                  return <OrderItem key={order.id} order={order} />;
+                })}
+                <NextLink>
+                  {isLoading ? 'Loading...' : <span>Load more ↓</span>}
+                </NextLink>
+              </>
+            );
+          }}
+        </Pagination>
+      ) : (
+        <EmptyOrders />
+      )}
+    </div>
+  );
+}
+
+function EmptyOrders() {
+  return (
+    <div>
+      <p>You haven&apos;t placed any orders yet.</p>
+      <br />
+      <p>
+        <Link to="/collections">Start Shopping →</Link>
+      </p>
+    </div>
+  );
+}
+
+function OrderItem({order}: {order: OrderItemFragment}) {
+  const fulfillmentStatus = flattenConnection(order.fulfillments)[0]?.status;
+  return (
+    <>
+      <fieldset>
+        <Link to={`/account/orders/${btoa(order.id)}`}>
+          <strong>#{order.number}</strong>
+        </Link>
+        <p>{new Date(order.processedAt).toDateString()}</p>
+        <p>{order.financialStatus}</p>
+        {fulfillmentStatus && <p>{fulfillmentStatus}</p>}
+        <Money data={order.totalPrice} />
+        <Link to={`/account/orders/${btoa(order.id)}`}>View Order →</Link>
+      </fieldset>
+      <br />
+    </>
+  );
+}

package/dist/assets/hydrogen/starter/app/routes/account.profile.tsx

@@ -0,0 +1,136 @@
+import type {CustomerFragment} from 'customer-accountapi.generated';
+import type {CustomerUpdateInput} from '@shopify/hydrogen/customer-account-api-types';
+import {CUSTOMER_UPDATE_MUTATION} from '~/graphql/customer-account/CustomerUpdateMutation';
+import {
+  json,
+  type ActionFunctionArgs,
+  type LoaderFunctionArgs,
+} from '@shopify/remix-oxygen';
+import {
+  Form,
+  useActionData,
+  useNavigation,
+  useOutletContext,
+  type MetaFunction,
+} from '@remix-run/react';
+
+export type ActionResponse = {
+  error: string | null;
+  customer: CustomerFragment | null;
+};
+
+export const meta: MetaFunction = () => {
+  return [{title: 'Profile'}];
+};
+
+export async function loader({context}: LoaderFunctionArgs) {
+  await context.customerAccount.handleAuthStatus();
+
+  return json({});
+}
+
+export async function action({request, context}: ActionFunctionArgs) {
+  const {customerAccount} = context;
+
+  if (request.method !== 'PUT') {
+    return json({error: 'Method not allowed'}, {status: 405});
+  }
+
+  const form = await request.formData();
+
+  try {
+    const customer: CustomerUpdateInput = {};
+    const validInputKeys = ['firstName', 'lastName'] as const;
+    for (const [key, value] of form.entries()) {
+      if (!validInputKeys.includes(key as any)) {
+        continue;
+      }
+      if (typeof value === 'string' && value.length) {
+        customer[key as (typeof validInputKeys)[number]] = value;
+      }
+    }
+
+    // update customer and possibly password
+    const {data, errors} = await customerAccount.mutate(
+      CUSTOMER_UPDATE_MUTATION,
+      {
+        variables: {
+          customer,
+        },
+      },
+    );
+
+    if (errors?.length) {
+      throw new Error(errors[0].message);
+    }
+
+    if (!data?.customerUpdate?.customer) {
+      throw new Error('Customer profile update failed.');
+    }
+
+    return json({
+      error: null,
+      customer: data?.customerUpdate?.customer,
+    });
+  } catch (error: any) {
+    return json(
+      {error: error.message, customer: null},
+      {
+        status: 400,
+      },
+    );
+  }
+}
+
+export default function AccountProfile() {
+  const account = useOutletContext<{customer: CustomerFragment}>();
+  const {state} = useNavigation();
+  const action = useActionData<ActionResponse>();
+  const customer = action?.customer ?? account?.customer;
+
+  return (
+    <div className="account-profile">
+      <h2>My profile</h2>
+      <br />
+      <Form method="PUT">
+        <legend>Personal information</legend>
+        <fieldset>
+          <label htmlFor="firstName">First name</label>
+          <input
+            id="firstName"
+            name="firstName"
+            type="text"
+            autoComplete="given-name"
+            placeholder="First name"
+            aria-label="First name"
+            defaultValue={customer.firstName ?? ''}
+            minLength={2}
+          />
+          <label htmlFor="lastName">Last name</label>
+          <input
+            id="lastName"
+            name="lastName"
+            type="text"
+            autoComplete="family-name"
+            placeholder="Last name"
+            aria-label="Last name"
+            defaultValue={customer.lastName ?? ''}
+            minLength={2}
+          />
+        </fieldset>
+        {action?.error ? (
+          <p>
+            <mark>
+              <small>{action.error}</small>
+            </mark>
+          </p>
+        ) : (
+          <br />
+        )}
+        <button type="submit" disabled={state !== 'idle'}>
+          {state !== 'idle' ? 'Updating' : 'Update'}
+        </button>
+      </Form>
+    </div>
+  );
+}

package/dist/assets/hydrogen/starter/app/routes/account.tsx

@@ -0,0 +1,88 @@
+import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {Form, NavLink, Outlet, useLoaderData} from '@remix-run/react';
+import {CUSTOMER_DETAILS_QUERY} from '~/graphql/customer-account/CustomerDetailsQuery';
+
+export function shouldRevalidate() {
+  return true;
+}
+
+export async function loader({context}: LoaderFunctionArgs) {
+  const {data, errors} = await context.customerAccount.query(
+    CUSTOMER_DETAILS_QUERY,
+  );
+
+  if (errors?.length || !data?.customer) {
+    throw new Error('Customer not found');
+  }
+
+  return json(
+    {customer: data.customer},
+    {
+      headers: {
+        'Cache-Control': 'no-cache, no-store, must-revalidate',
+      },
+    },
+  );
+}
+
+export default function AccountLayout() {
+  const {customer} = useLoaderData<typeof loader>();
+
+  const heading = customer
+    ? customer.firstName
+      ? `Welcome, ${customer.firstName}`
+      : `Welcome to your account.`
+    : 'Account Details';
+
+  return (
+    <div className="account">
+      <h1>{heading}</h1>
+      <br />
+      <AccountMenu />
+      <br />
+      <br />
+      <Outlet context={{customer}} />
+    </div>
+  );
+}
+
+function AccountMenu() {
+  function isActiveStyle({
+    isActive,
+    isPending,
+  }: {
+    isActive: boolean;
+    isPending: boolean;
+  }) {
+    return {
+      fontWeight: isActive ? 'bold' : undefined,
+      color: isPending ? 'grey' : 'black',
+    };
+  }
+
+  return (
+    <nav role="navigation">
+      <NavLink to="/account/orders" style={isActiveStyle}>
+        Orders &nbsp;
+      </NavLink>
+      &nbsp;|&nbsp;
+      <NavLink to="/account/profile" style={isActiveStyle}>
+        &nbsp; Profile &nbsp;
+      </NavLink>
+      &nbsp;|&nbsp;
+      <NavLink to="/account/addresses" style={isActiveStyle}>
+        &nbsp; Addresses &nbsp;
+      </NavLink>
+      &nbsp;|&nbsp;
+      <Logout />
+    </nav>
+  );
+}
+
+function Logout() {
+  return (
+    <Form className="account-logout" method="POST" action="/account/logout">
+      &nbsp;<button type="submit">Sign out</button>
+    </Form>
+  );
+}

package/dist/assets/hydrogen/starter/app/routes/account_.authorize.tsx

@@ -0,0 +1,5 @@
+import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
+
+export async function loader({context}: LoaderFunctionArgs) {
+  return context.customerAccount.authorize();
+}

package/dist/assets/hydrogen/starter/app/routes/account_.login.tsx

@@ -0,0 +1,5 @@
+import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
+
+export async function loader({request, context}: LoaderFunctionArgs) {
+  return context.customerAccount.login();
+}

package/dist/assets/hydrogen/starter/app/routes/account_.logout.tsx

@@ -0,0 +1,10 @@
+import {redirect, type ActionFunctionArgs} from '@shopify/remix-oxygen';
+
+// if we dont implement this, /account/logout will get caught by account.$.tsx to do login
+export async function loader() {
+  return redirect('/');
+}
+
+export async function action({context}: ActionFunctionArgs) {
+  return context.customerAccount.logout();
+}

package/dist/assets/hydrogen/starter/app/routes/api.predictive-search.tsx

@@ -0,0 +1,318 @@
+import {json, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import type {
+  NormalizedPredictiveSearch,
+  NormalizedPredictiveSearchResults,
+} from '~/components/Search';
+import {NO_PREDICTIVE_SEARCH_RESULTS} from '~/components/Search';
+import {applyTrackingParams} from '~/lib/search';
+
+import type {
+  PredictiveArticleFragment,
+  PredictiveCollectionFragment,
+  PredictivePageFragment,
+  PredictiveProductFragment,
+  PredictiveQueryFragment,
+  PredictiveSearchQuery,
+} from 'storefrontapi.generated';
+
+type PredictiveSearchTypes =
+  | 'ARTICLE'
+  | 'COLLECTION'
+  | 'PAGE'
+  | 'PRODUCT'
+  | 'QUERY';
+
+const DEFAULT_SEARCH_TYPES: PredictiveSearchTypes[] = [
+  'ARTICLE',
+  'COLLECTION',
+  'PAGE',
+  'PRODUCT',
+  'QUERY',
+];
+
+export type PredictiveSearchAPILoader = typeof loader;
+
+/**
+ * Fetches the search results from the predictive search API
+ * requested by the SearchForm component
+ */
+export async function loader({request, params, context}: LoaderFunctionArgs) {
+  const search = await fetchPredictiveSearchResults({
+    params,
+    request,
+    context,
+  });
+
+  return json(search, {
+    headers: {'Cache-Control': `max-age=${search.searchTerm ? 60 : 3600}`},
+  });
+}
+
+async function fetchPredictiveSearchResults({
+  params,
+  request,
+  context,
+}: Pick<LoaderFunctionArgs, 'params' | 'context' | 'request'>) {
+  const url = new URL(request.url);
+  const searchParams = new URLSearchParams(url.search);
+  const searchTerm = searchParams.get('q') || '';
+  const limit = Number(searchParams.get('limit') || 10);
+  const rawTypes = String(searchParams.get('type') || 'ANY');
+
+  const searchTypes =
+    rawTypes === 'ANY'
+      ? DEFAULT_SEARCH_TYPES
+      : rawTypes
+          .split(',')
+          .map((t) => t.toUpperCase() as PredictiveSearchTypes)
+          .filter((t) => DEFAULT_SEARCH_TYPES.includes(t));
+
+  if (!searchTerm) {
+    return {
+      searchResults: {results: null, totalResults: 0},
+      searchTerm,
+      searchTypes,
+    };
+  }
+
+  const data = await context.storefront.query(PREDICTIVE_SEARCH_QUERY, {
+    variables: {
+      limit,
+      limitScope: 'EACH',
+      searchTerm,
+      types: searchTypes,
+    },
+  });
+
+  if (!data) {
+    throw new Error('No data returned from Shopify API');
+  }
+
+  const searchResults = normalizePredictiveSearchResults(
+    data.predictiveSearch,
+    params.locale,
+  );
+
+  return {searchResults, searchTerm, searchTypes};
+}
+
+/**
+ * Normalize results and apply tracking qurery parameters to each result url
+ */
+export function normalizePredictiveSearchResults(
+  predictiveSearch: PredictiveSearchQuery['predictiveSearch'],
+  locale: LoaderFunctionArgs['params']['locale'],
+): NormalizedPredictiveSearch {
+  let totalResults = 0;
+  if (!predictiveSearch) {
+    return {
+      results: NO_PREDICTIVE_SEARCH_RESULTS,
+      totalResults,
+    };
+  }
+
+  const localePrefix = locale ? `/${locale}` : '';
+  const results: NormalizedPredictiveSearchResults = [];
+
+  if (predictiveSearch.queries.length) {
+    results.push({
+      type: 'queries',
+      items: predictiveSearch.queries.map((query: PredictiveQueryFragment) => {
+        const trackingParams = applyTrackingParams(
+          query,
+          `q=${encodeURIComponent(query.text)}`,
+        );
+
+        totalResults++;
+        return {
+          __typename: query.__typename,
+          handle: '',
+          id: query.text,
+          image: undefined,
+          title: query.text,
+          styledTitle: query.styledText,
+          url: `${localePrefix}/search${trackingParams}`,
+        };
+      }),
+    });
+  }
+
+  if (predictiveSearch.products.length) {
+    results.push({
+      type: 'products',
+      items: predictiveSearch.products.map(
+        (product: PredictiveProductFragment) => {
+          totalResults++;
+          const trackingParams = applyTrackingParams(product);
+          return {
+            __typename: product.__typename,
+            handle: product.handle,
+            id: product.id,
+            image: product.variants?.nodes?.[0]?.image,
+            title: product.title,
+            url: `${localePrefix}/products/${product.handle}${trackingParams}`,
+            price: product.variants.nodes[0].price,
+          };
+        },
+      ),
+    });
+  }
+
+  if (predictiveSearch.collections.length) {
+    results.push({
+      type: 'collections',
+      items: predictiveSearch.collections.map(
+        (collection: PredictiveCollectionFragment) => {
+          totalResults++;
+          const trackingParams = applyTrackingParams(collection);
+          return {
+            __typename: collection.__typename,
+            handle: collection.handle,
+            id: collection.id,
+            image: collection.image,
+            title: collection.title,
+            url: `${localePrefix}/collections/${collection.handle}${trackingParams}`,
+          };
+        },
+      ),
+    });
+  }
+
+  if (predictiveSearch.pages.length) {
+    results.push({
+      type: 'pages',
+      items: predictiveSearch.pages.map((page: PredictivePageFragment) => {
+        totalResults++;
+        const trackingParams = applyTrackingParams(page);
+        return {
+          __typename: page.__typename,
+          handle: page.handle,
+          id: page.id,
+          image: undefined,
+          title: page.title,
+          url: `${localePrefix}/pages/${page.handle}${trackingParams}`,
+        };
+      }),
+    });
+  }
+
+  if (predictiveSearch.articles.length) {
+    results.push({
+      type: 'articles',
+      items: predictiveSearch.articles.map(
+        (article: PredictiveArticleFragment) => {
+          totalResults++;
+          const trackingParams = applyTrackingParams(article);
+          return {
+            __typename: article.__typename,
+            handle: article.handle,
+            id: article.id,
+            image: article.image,
+            title: article.title,
+            url: `${localePrefix}/blogs/${article.blog.handle}/${article.handle}/${trackingParams}`,
+          };
+        },
+      ),
+    });
+  }
+
+  return {results, totalResults};
+}
+
+const PREDICTIVE_SEARCH_QUERY = `#graphql
+  fragment PredictiveArticle on Article {
+    __typename
+    id
+    title
+    handle
+    blog {
+      handle
+    }
+    image {
+      url
+      altText
+      width
+      height
+    }
+    trackingParameters
+  }
+  fragment PredictiveCollection on Collection {
+    __typename
+    id
+    title
+    handle
+    image {
+      url
+      altText
+      width
+      height
+    }
+    trackingParameters
+  }
+  fragment PredictivePage on Page {
+    __typename
+    id
+    title
+    handle
+    trackingParameters
+  }
+  fragment PredictiveProduct on Product {
+    __typename
+    id
+    title
+    handle
+    trackingParameters
+    variants(first: 1) {
+      nodes {
+        id
+        image {
+          url
+          altText
+          width
+          height
+        }
+        price {
+          amount
+          currencyCode
+        }
+      }
+    }
+  }
+  fragment PredictiveQuery on SearchQuerySuggestion {
+    __typename
+    text
+    styledText
+    trackingParameters
+  }
+  query predictiveSearch(
+    $country: CountryCode
+    $language: LanguageCode
+    $limit: Int!
+    $limitScope: PredictiveSearchLimitScope!
+    $searchTerm: String!
+    $types: [PredictiveSearchType!]
+  ) @inContext(country: $country, language: $language) {
+    predictiveSearch(
+      limit: $limit,
+      limitScope: $limitScope,
+      query: $searchTerm,
+      types: $types,
+    ) {
+      articles {
+        ...PredictiveArticle
+      }
+      collections {
+        ...PredictiveCollection
+      }
+      pages {
+        ...PredictivePage
+      }
+      products {
+        ...PredictiveProduct
+      }
+      queries {
+        ...PredictiveQuery
+      }
+    }
+  }
+` as const;