@shopify/cli-hydrogen 5.0.2 → 5.1.0

package/dist/generator-templates/starter/app/routes/cart.tsx

@@ -0,0 +1,104 @@
+import {Await, useMatches} from '@remix-run/react';
+import {Suspense} from 'react';
+import type {CartQueryData} from '@shopify/hydrogen';
+import {CartForm} from '@shopify/hydrogen';
+import type {V2_MetaFunction} from '@shopify/remix-oxygen';
+import {type ActionArgs, json} from '@shopify/remix-oxygen';
+import type {CartApiQueryFragment} from 'storefrontapi.generated';
+import {CartMain} from '~/components/Cart';
+
+export const meta: V2_MetaFunction = () => {
+  return [{title: `Hydrogen | Cart`}];
+};
+
+export async function action({request, context}: ActionArgs) {
+  const {session, cart} = context;
+
+  const [formData, customerAccessToken] = await Promise.all([
+    request.formData(),
+    session.get('customerAccessToken'),
+  ]);
+
+  const {action, inputs} = CartForm.getFormInput(formData);
+
+  if (!action) {
+    throw new Error('No action provided');
+  }
+
+  let status = 200;
+  let result: CartQueryData;
+
+  switch (action) {
+    case CartForm.ACTIONS.LinesAdd:
+      result = await cart.addLines(inputs.lines);
+      break;
+    case CartForm.ACTIONS.LinesUpdate:
+      result = await cart.updateLines(inputs.lines);
+      break;
+    case CartForm.ACTIONS.LinesRemove:
+      result = await cart.removeLines(inputs.lineIds);
+      break;
+    case CartForm.ACTIONS.DiscountCodesUpdate: {
+      const formDiscountCode = inputs.discountCode;
+
+      // User inputted discount code
+      const discountCodes = (
+        formDiscountCode ? [formDiscountCode] : []
+      ) as string[];
+
+      // Combine discount codes already applied on cart
+      discountCodes.push(...inputs.discountCodes);
+
+      result = await cart.updateDiscountCodes(discountCodes);
+      break;
+    }
+    case CartForm.ACTIONS.BuyerIdentityUpdate: {
+      result = await cart.updateBuyerIdentity({
+        ...inputs.buyerIdentity,
+        customerAccessToken,
+      });
+      break;
+    }
+    default:
+      throw new Error(`${action} cart action is not defined`);
+  }
+
+  const cartId = result.cart.id;
+  const headers = cart.setCartId(result.cart.id);
+  const {cart: cartResult, errors} = result;
+
+  const redirectTo = formData.get('redirectTo') ?? null;
+  if (typeof redirectTo === 'string') {
+    status = 303;
+    headers.set('Location', redirectTo);
+  }
+
+  return json(
+    {
+      cart: cartResult,
+      errors,
+      analytics: {
+        cartId,
+      },
+    },
+    {status, headers},
+  );
+}
+
+export default function Cart() {
+  const [root] = useMatches();
+  const cart = root.data?.cart as Promise<CartApiQueryFragment | null>;
+
+  return (
+    <div className="cart">
+      <h1>Cart</h1>
+      <Suspense fallback={<p>Loading cart ...</p>}>
+        <Await errorElement={<div>An error occurred</div>} resolve={cart}>
+          {(cart) => {
+            return <CartMain layout="page" cart={cart} />;
+          }}
+        </Await>
+      </Suspense>
+    </div>
+  );
+}

package/dist/generator-templates/starter/app/routes/collections.$handle.tsx

@@ -0,0 +1,184 @@
+import type {V2_MetaFunction} from '@shopify/remix-oxygen';
+import {json, redirect, type LoaderArgs} from '@shopify/remix-oxygen';
+import {useLoaderData, Link} from '@remix-run/react';
+import {
+  Pagination,
+  getPaginationVariables,
+  Image,
+  Money,
+} from '@shopify/hydrogen';
+import type {ProductItemFragment} from 'storefrontapi.generated';
+import {useVariantUrl} from '~/utils';
+
+export const meta: V2_MetaFunction = ({data}) => {
+  return [{title: `Hydrogen | ${data.collection.title} Collection`}];
+};
+
+export async function loader({request, params, context}: LoaderArgs) {
+  const {handle} = params;
+  const {storefront} = context;
+  const paginationVariables = getPaginationVariables(request, {
+    pageBy: 8,
+  });
+
+  if (!handle) {
+    return redirect('/collections');
+  }
+
+  const {collection} = await storefront.query(COLLECTION_QUERY, {
+    variables: {handle, ...paginationVariables},
+  });
+
+  if (!collection) {
+    throw new Response(`Collection ${handle} not found`, {
+      status: 404,
+    });
+  }
+  return json({collection});
+}
+
+export default function Collection() {
+  const {collection} = useLoaderData<typeof loader>();
+
+  return (
+    <div className="collection">
+      <h1>{collection.title}</h1>
+      <p className="collection-description">{collection.description}</p>
+      <Pagination connection={collection.products}>
+        {({nodes, isLoading, PreviousLink, NextLink}) => (
+          <>
+            <PreviousLink>
+              {isLoading ? 'Loading...' : <span>↑ Load previous</span>}
+            </PreviousLink>
+            <ProductsGrid products={nodes} />
+            <br />
+            <NextLink>
+              {isLoading ? 'Loading...' : <span>Load more ↓</span>}
+            </NextLink>
+          </>
+        )}
+      </Pagination>
+    </div>
+  );
+}
+
+function ProductsGrid({products}: {products: ProductItemFragment[]}) {
+  return (
+    <div className="products-grid">
+      {products.map((product, index) => {
+        return (
+          <ProductItem
+            key={product.id}
+            product={product}
+            loading={index < 8 ? 'eager' : undefined}
+          />
+        );
+      })}
+    </div>
+  );
+}
+
+function ProductItem({
+  product,
+  loading,
+}: {
+  product: ProductItemFragment;
+  loading?: 'eager' | 'lazy';
+}) {
+  const variant = product.variants.nodes[0];
+  const variantUrl = useVariantUrl(product.handle, variant.selectedOptions);
+  return (
+    <Link
+      className="product-item"
+      key={product.id}
+      prefetch="intent"
+      to={variantUrl}
+    >
+      {product.featuredImage && (
+        <Image
+          alt={product.featuredImage.altText || product.title}
+          aspectRatio="1/1"
+          data={product.featuredImage}
+          loading={loading}
+          sizes="(min-width: 45em) 400px, 100vw"
+        />
+      )}
+      <h4>{product.title}</h4>
+      <small>
+        <Money data={product.priceRange.minVariantPrice} />
+      </small>
+    </Link>
+  );
+}
+
+const PRODUCT_ITEM_FRAGMENT = `#graphql
+  fragment MoneyProductItem on MoneyV2 {
+    amount
+    currencyCode
+  }
+  fragment ProductItem on Product {
+    id
+    handle
+    title
+    featuredImage {
+      id
+      altText
+      url
+      width
+      height
+    }
+    priceRange {
+      minVariantPrice {
+        ...MoneyProductItem
+      }
+      maxVariantPrice {
+        ...MoneyProductItem
+      }
+    }
+    variants(first: 1) {
+      nodes {
+        selectedOptions {
+          name
+          value
+        }
+      }
+    }
+  }
+` as const;
+
+// NOTE: https://shopify.dev/docs/api/storefront/2022-04/objects/collection
+const COLLECTION_QUERY = `#graphql
+  ${PRODUCT_ITEM_FRAGMENT}
+  query Collection(
+    $handle: String!
+    $country: CountryCode
+    $language: LanguageCode
+    $first: Int
+    $last: Int
+    $startCursor: String
+    $endCursor: String
+  ) @inContext(country: $country, language: $language) {
+    collection(handle: $handle) {
+      id
+      handle
+      title
+      description
+      products(
+        first: $first,
+        last: $last,
+        before: $startCursor,
+        after: $endCursor
+      ) {
+        nodes {
+          ...ProductItem
+        }
+        pageInfo {
+          hasPreviousPage
+          hasNextPage
+          hasNextPage
+          endCursor
+        }
+      }
+    }
+  }
+` as const;

package/dist/generator-templates/starter/app/routes/collections._index.tsx

@@ -0,0 +1,120 @@
+import {useLoaderData, Link} from '@remix-run/react';
+import {json, type LoaderArgs} from '@shopify/remix-oxygen';
+import {Pagination, getPaginationVariables, Image} from '@shopify/hydrogen';
+import type {CollectionFragment} from 'storefrontapi.generated';
+
+export async function loader({context, request}: LoaderArgs) {
+  const paginationVariables = getPaginationVariables(request, {
+    pageBy: 4,
+  });
+
+  const {collections} = await context.storefront.query(COLLECTIONS_QUERY, {
+    variables: paginationVariables,
+  });
+
+  return json({collections});
+}
+
+export default function Collections() {
+  const {collections} = useLoaderData<typeof loader>();
+
+  return (
+    <div className="collections">
+      <h1>Collections</h1>
+      <Pagination connection={collections}>
+        {({nodes, isLoading, PreviousLink, NextLink}) => (
+          <div>
+            <PreviousLink>
+              {isLoading ? 'Loading...' : <span>↑ Load previous</span>}
+            </PreviousLink>
+            <CollectionsGrid collections={nodes} />
+            <NextLink>
+              {isLoading ? 'Loading...' : <span>Load more ↓</span>}
+            </NextLink>
+          </div>
+        )}
+      </Pagination>
+    </div>
+  );
+}
+
+function CollectionsGrid({collections}: {collections: CollectionFragment[]}) {
+  return (
+    <div className="collections-grid">
+      {collections.map((collection, index) => (
+        <CollectionItem
+          key={collection.id}
+          collection={collection}
+          index={index}
+        />
+      ))}
+    </div>
+  );
+}
+
+function CollectionItem({
+  collection,
+  index,
+}: {
+  collection: CollectionFragment;
+  index: number;
+}) {
+  return (
+    <Link
+      className="collection-item"
+      key={collection.id}
+      to={`/collections/${collection.handle}`}
+      prefetch="intent"
+    >
+      {collection.image && (
+        <Image
+          alt={collection.image.altText || collection.title}
+          aspectRatio="1/1"
+          data={collection.image}
+          loading={index < 3 ? 'eager' : undefined}
+        />
+      )}
+      <h5>{collection.title}</h5>
+    </Link>
+  );
+}
+
+const COLLECTIONS_QUERY = `#graphql
+  fragment Collection on Collection {
+    id
+    title
+    handle
+    image {
+      id
+      url
+      altText
+      width
+      height
+    }
+  }
+  query StoreCollections(
+    $country: CountryCode
+    $endCursor: String
+    $first: Int
+    $language: LanguageCode
+    $last: Int
+    $startCursor: String
+  ) @inContext(country: $country, language: $language) {
+    collections(
+      first: $first,
+      last: $last,
+      before: $startCursor,
+      after: $endCursor
+    ) {
+      nodes {
+        ...Collection
+      }
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+        startCursor
+        endCursor
+      }
+    }
+  }
+` as const;

package/dist/generator-templates/starter/app/routes/pages.$handle.tsx

@@ -0,0 +1,57 @@
+import type {V2_MetaFunction} from '@shopify/remix-oxygen';
+import {json, type LoaderArgs} from '@shopify/remix-oxygen';
+import {useLoaderData} from '@remix-run/react';
+
+export const meta: V2_MetaFunction = ({data}) => {
+  return [{title: `Hydrogen | ${data.page.title}`}];
+};
+
+export async function loader({params, context}: LoaderArgs) {
+  if (!params.handle) {
+    throw new Error('Missing page handle');
+  }
+
+  const {page} = await context.storefront.query(PAGE_QUERY, {
+    variables: {
+      handle: params.handle,
+    },
+  });
+
+  if (!page) {
+    throw new Response('Not Found', {status: 404});
+  }
+
+  return json({page});
+}
+
+export default function Page() {
+  const {page} = useLoaderData<typeof loader>();
+
+  return (
+    <div className="page">
+      <header>
+        <h1>{page.title}</h1>
+      </header>
+      <main dangerouslySetInnerHTML={{__html: page.body}} />
+    </div>
+  );
+}
+
+const PAGE_QUERY = `#graphql
+  query Page(
+    $language: LanguageCode,
+    $country: CountryCode,
+    $handle: String!
+  )
+  @inContext(language: $language, country: $country) {
+    page(handle: $handle) {
+      id
+      title
+      body
+      seo {
+        description
+        title
+      }
+    }
+  }
+` as const;

package/dist/generator-templates/starter/app/routes/policies.$handle.tsx

@@ -0,0 +1,94 @@
+import type {V2_MetaFunction} from '@shopify/remix-oxygen';
+import {json, type LoaderArgs} from '@shopify/remix-oxygen';
+import {Link, useLoaderData} from '@remix-run/react';
+import {type Shop} from '@shopify/hydrogen-react/storefront-api-types';
+
+type SelectedPolicies = keyof Pick<
+  Shop,
+  'privacyPolicy' | 'shippingPolicy' | 'termsOfService' | 'refundPolicy'
+>;
+
+export const meta: V2_MetaFunction = ({data}) => {
+  return [{title: `Hydrogen | ${data.policy.title}`}];
+};
+
+export async function loader({params, context}: LoaderArgs) {
+  if (!params.handle) {
+    throw new Response('No handle was passed in', {status: 404});
+  }
+
+  const policyName = params.handle.replace(
+    /-([a-z])/g,
+    (_: unknown, m1: string) => m1.toUpperCase(),
+  ) as SelectedPolicies;
+
+  const data = await context.storefront.query(POLICY_CONTENT_QUERY, {
+    variables: {
+      privacyPolicy: false,
+      shippingPolicy: false,
+      termsOfService: false,
+      refundPolicy: false,
+      [policyName]: true,
+      language: context.storefront.i18n?.language,
+    },
+  });
+
+  const policy = data.shop?.[policyName];
+
+  if (!policy) {
+    throw new Response('Could not find the policy', {status: 404});
+  }
+
+  return json({policy});
+}
+
+export default function Policy() {
+  const {policy} = useLoaderData<typeof loader>();
+
+  return (
+    <div className="policy">
+      <br />
+      <br />
+      <div>
+        <Link to="/policies">← Back to Policies</Link>
+      </div>
+      <br />
+      <h1>{policy.title}</h1>
+      <div dangerouslySetInnerHTML={{__html: policy.body}} />
+    </div>
+  );
+}
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/objects/Shop
+const POLICY_CONTENT_QUERY = `#graphql
+  fragment Policy on ShopPolicy {
+    body
+    handle
+    id
+    title
+    url
+  }
+  query Policy(
+    $country: CountryCode
+    $language: LanguageCode
+    $privacyPolicy: Boolean!
+    $refundPolicy: Boolean!
+    $shippingPolicy: Boolean!
+    $termsOfService: Boolean!
+  ) @inContext(language: $language, country: $country) {
+    shop {
+      privacyPolicy @include(if: $privacyPolicy) {
+        ...Policy
+      }
+      shippingPolicy @include(if: $shippingPolicy) {
+        ...Policy
+      }
+      termsOfService @include(if: $termsOfService) {
+        ...Policy
+      }
+      refundPolicy @include(if: $refundPolicy) {
+        ...Policy
+      }
+    }
+  }
+` as const;

package/dist/generator-templates/starter/app/routes/policies._index.tsx

@@ -0,0 +1,63 @@
+import {json, type LoaderArgs} from '@shopify/remix-oxygen';
+import {useLoaderData, Link} from '@remix-run/react';
+
+export async function loader({context}: LoaderArgs) {
+  const data = await context.storefront.query(POLICIES_QUERY);
+  const policies = Object.values(data.shop || {});
+
+  if (!policies.length) {
+    throw new Response('No policies found', {status: 404});
+  }
+
+  return json({policies});
+}
+
+export default function Policies() {
+  const {policies} = useLoaderData<typeof loader>();
+
+  return (
+    <div className="policies">
+      <h1>Policies</h1>
+      <div>
+        {policies.map((policy) => {
+          if (!policy) return null;
+          return (
+            <fieldset key={policy.id}>
+              <Link to={`/policies/${policy.handle}`}>{policy.title}</Link>
+            </fieldset>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+const POLICIES_QUERY = `#graphql
+  fragment PolicyItem on ShopPolicy {
+    id
+    title
+    handle
+  }
+  query Policies ($country: CountryCode, $language: LanguageCode)
+    @inContext(country: $country, language: $language) {
+    shop {
+      privacyPolicy {
+        ...PolicyItem
+      }
+      shippingPolicy {
+        ...PolicyItem
+      }
+      termsOfService {
+        ...PolicyItem
+      }
+      refundPolicy {
+        ...PolicyItem
+      }
+      subscriptionPolicy {
+        id
+        title
+        handle
+      }
+    }
+  }
+` as const;