@shopify/cli-hydrogen 4.0.0-alpha.9 → 4.0.1

package/dist/templates/demo-store/app/routes/($lang)/collections/$collectionHandle.tsx

@@ -1,300 +0,0 @@
-import {
-  json,
-  type MetaFunction,
-  type SerializeFrom,
-  type LoaderArgs,
-} from '@shopify/remix-oxygen';
-import {useLoaderData} from '@remix-run/react';
-import type {
-  Collection as CollectionType,
-  CollectionConnection,
-  Filter,
-} from '@shopify/storefront-kit-react/storefront-api-types';
-import {flattenConnection} from '@shopify/storefront-kit-react';
-import invariant from 'tiny-invariant';
-import {PageHeader, Section, Text, SortFilter, Breadcrumbs} from '~/components';
-import {ProductGrid} from '~/components/ProductGrid';
-
-import {PRODUCT_CARD_FRAGMENT} from '~/data';
-
-const PAGINATION_SIZE = 48;
-
-type VariantFilterParam = Record<string, string | boolean>;
-type PriceFiltersQueryParam = Record<'price', {max?: number; min?: number}>;
-type VariantOptionFiltersQueryParam = Record<
-  'variantOption',
-  {name: string; value: string}
->;
-
-export type AppliedFilter = {
-  label: string;
-  urlParam: {
-    key: string;
-    value: string;
-  };
-};
-
-type FiltersQueryParams = Array<
-  VariantFilterParam | PriceFiltersQueryParam | VariantOptionFiltersQueryParam
->;
-
-export type SortParam =
-  | 'price-low-high'
-  | 'price-high-low'
-  | 'best-selling'
-  | 'newest'
-  | 'featured';
-
-export async function loader({params, request, context}: LoaderArgs) {
-  const {collectionHandle} = params;
-
-  invariant(collectionHandle, 'Missing collectionHandle param');
-
-  const searchParams = new URL(request.url).searchParams;
-  const knownFilters = ['cursor', 'productVendor', 'productType'];
-  const available = 'available';
-  const variantOption = 'variantOption';
-  const {sortKey, reverse} = getSortValuesFromParam(
-    searchParams.get('sort') as SortParam,
-  );
-  const filters: FiltersQueryParams = [];
-  const appliedFilters: AppliedFilter[] = [];
-
-  for (const [key, value] of searchParams.entries()) {
-    if (available === key) {
-      filters.push({available: value === 'true'});
-      appliedFilters.push({
-        label: value === 'true' ? 'In stock' : 'Out of stock',
-        urlParam: {
-          key: available,
-          value,
-        },
-      });
-    } else if (knownFilters.includes(key)) {
-      filters.push({[key]: value});
-      appliedFilters.push({label: value, urlParam: {key, value}});
-    } else if (key.includes(variantOption)) {
-      const [name, val] = value.split(':');
-      filters.push({variantOption: {name, value: val}});
-      appliedFilters.push({label: val, urlParam: {key, value}});
-    }
-  }
-
-  // Builds min and max price filter since we can't stack them separately into
-  // the filters array. See price filters limitations:
-  // https://shopify.dev/custom-storefronts/products-collections/filter-products#limitations
-  if (searchParams.has('minPrice') || searchParams.has('maxPrice')) {
-    const price: {min?: number; max?: number} = {};
-    if (searchParams.has('minPrice')) {
-      price.min = Number(searchParams.get('minPrice')) || 0;
-      appliedFilters.push({
-        label: `Min: $${price.min}`,
-        urlParam: {key: 'minPrice', value: searchParams.get('minPrice')!},
-      });
-    }
-    if (searchParams.has('maxPrice')) {
-      price.max = Number(searchParams.get('maxPrice')) || 0;
-      appliedFilters.push({
-        label: `Max: $${price.max}`,
-        urlParam: {key: 'maxPrice', value: searchParams.get('maxPrice')!},
-      });
-    }
-    filters.push({
-      price,
-    });
-  }
-
-  const {collection, collections} = await context.storefront.query<{
-    collection: CollectionType;
-    collections: CollectionConnection;
-  }>(COLLECTION_QUERY, {
-    variables: {
-      handle: collectionHandle,
-      pageBy: PAGINATION_SIZE,
-      filters,
-      sortKey,
-      reverse,
-      country: context.storefront.i18n.country,
-      language: context.storefront.i18n.language,
-    },
-  });
-
-  if (!collection) {
-    throw new Response(null, {status: 404});
-  }
-
-  const collectionNodes = flattenConnection(collections);
-
-  return json({collection, appliedFilters, collections: collectionNodes});
-}
-
-export const meta: MetaFunction = ({
-  data,
-}: {
-  data: SerializeFrom<typeof loader> | undefined;
-}) => {
-  return {
-    title: data?.collection?.seo?.title ?? 'Collection',
-    description: data?.collection?.seo?.description,
-  };
-};
-
-export default function Collection() {
-  const {collection, collections, appliedFilters} =
-    useLoaderData<typeof loader>();
-  const breadcrumbs =
-    collection.metafield?.references &&
-    flattenConnection(collection.metafield.references)
-      .reverse()
-      .reduce<any[]>((acc, collection) => [collection, ...acc], [collection]);
-
-  return (
-    <>
-      <PageHeader heading={collection.title}>
-        {collection?.description && (
-          <div className="flex items-baseline justify-between w-full">
-            <div>
-              <Text format width="narrow" as="p" className="inline-block">
-                {collection.description}
-              </Text>
-            </div>
-          </div>
-        )}
-
-        <Breadcrumbs breadcrumbs={breadcrumbs} />
-      </PageHeader>
-      <Section>
-        <SortFilter
-          filters={collection.products.filters as Filter[]}
-          appliedFilters={appliedFilters}
-          collections={collections as CollectionType[]}
-        >
-          <ProductGrid
-            key={collection.id}
-            collection={collection as CollectionType}
-            url={`/collections/${collection.handle}`}
-            data-test="product-grid"
-          />
-        </SortFilter>
-      </Section>
-    </>
-  );
-}
-
-const COLLECTION_QUERY = `#graphql
-  ${PRODUCT_CARD_FRAGMENT}
-  query CollectionDetails(
-    $handle: String!
-    $country: CountryCode
-    $language: LanguageCode
-    $pageBy: Int!
-    $cursor: String
-    $filters: [ProductFilter!]
-    $sortKey: ProductCollectionSortKeys!
-    $reverse: Boolean
-  ) @inContext(country: $country, language: $language) {
-    collection(handle: $handle) {
-      id
-      handle
-      title
-      description
-      seo {
-        description
-        title
-      }
-      image {
-        id
-        url
-        width
-        height
-        altText
-      }
-      metafield(namespace: "breadcrumbs", key: "parents") {
-        id
-        value
-        references(first: 10) {
-          edges {
-            node {
-              ... on Collection {
-                id
-                handle
-                title
-              }
-            }
-          }
-        }
-        namespace
-        key
-      }
-      products(
-        first: $pageBy,
-        after: $cursor,
-        filters: $filters,
-        sortKey: $sortKey,
-        reverse: $reverse
-      ) {
-        filters {
-          id
-          label
-          type
-          values {
-            id
-            label
-            count
-            input
-          }
-        }
-        nodes {
-          ...ProductCard
-        }
-        pageInfo {
-          hasNextPage
-          endCursor
-        }
-      }
-    }
-    collections(first: 100) {
-      edges {
-        node {
-          title
-          handle
-        }
-      }
-    }
-  }
-`;
-
-function getSortValuesFromParam(sortParam: SortParam | null) {
-  switch (sortParam) {
-    case 'price-high-low':
-      return {
-        sortKey: 'PRICE',
-        reverse: true,
-      };
-    case 'price-low-high':
-      return {
-        sortKey: 'PRICE',
-        reverse: false,
-      };
-    case 'best-selling':
-      return {
-        sortKey: 'BEST_SELLING',
-        reverse: false,
-      };
-    case 'newest':
-      return {
-        sortKey: 'CREATED',
-        reverse: true,
-      };
-    case 'featured':
-      return {
-        sortKey: 'MANUAL',
-        reverse: false,
-      };
-    default:
-      return {
-        sortKey: 'RELEVANCE',
-        reverse: false,
-      };
-  }
-}

package/dist/templates/demo-store/app/routes/($lang)/collections/all.tsx

@@ -1,5 +0,0 @@
-import {redirect, type LoaderArgs} from '@shopify/remix-oxygen';
-
-export async function loader({params}: LoaderArgs) {
-  return redirect(params?.lang ? `${params.lang}/products` : '/products');
-}

package/dist/templates/demo-store/app/routes/($lang)/collections/index.tsx

@@ -1,188 +0,0 @@
-import {json, type MetaFunction, type LoaderArgs} from '@shopify/remix-oxygen';
-import {useLoaderData} from '@remix-run/react';
-import type {
-  Collection,
-  CollectionConnection,
-} from '@shopify/storefront-kit-react/storefront-api-types';
-import {
-  Grid,
-  Heading,
-  PageHeader,
-  Section,
-  Link,
-  Pagination,
-  getPaginationVariables,
-  Button,
-} from '~/components';
-import {getImageLoadingPriority} from '~/lib/const';
-
-const PAGINATION_SIZE = 8;
-
-export const loader = async ({request, context: {storefront}}: LoaderArgs) => {
-  const variables = getPaginationVariables(request, PAGINATION_SIZE);
-  const {collections} = await storefront.query<{
-    collections: CollectionConnection;
-  }>(COLLECTIONS_QUERY, {
-    variables: {
-      ...variables,
-      country: storefront.i18n.country,
-      language: storefront.i18n.language,
-    },
-  });
-
-  return json({collections});
-};
-
-export const meta: MetaFunction = () => {
-  return {
-    title: 'All Collections',
-  };
-};
-
-export default function Collections() {
-  const {collections} = useLoaderData<typeof loader>();
-
-  return (
-    <>
-      <PageHeader heading="Collections" />
-      <Section>
-        <Pagination connection={collections}>
-          {({
-            endCursor,
-            hasNextPage,
-            hasPreviousPage,
-            nextPageUrl,
-            nodes,
-            prevPageUrl,
-            startCursor,
-            nextLinkRef,
-            isLoading,
-          }) => (
-            <>
-              {hasPreviousPage && (
-                <div className="flex items-center justify-center mt-6">
-                  <Button
-                    to={prevPageUrl}
-                    variant="secondary"
-                    width="full"
-                    prefetch="intent"
-                    disabled={!isLoading}
-                    state={{
-                      pageInfo: {
-                        endCursor,
-                        hasNextPage,
-                        startCursor,
-                      },
-                      nodes,
-                    }}
-                  >
-                    {isLoading ? 'Loading...' : 'Previous products'}
-                  </Button>
-                </div>
-              )}
-              <Grid
-                items={nodes.length === 3 ? 3 : 2}
-                data-test="collection-grid"
-              >
-                {nodes.map((collection, i) => (
-                  <CollectionCard
-                    collection={collection as Collection}
-                    key={collection.id}
-                    loading={getImageLoadingPriority(i, 2)}
-                  />
-                ))}
-              </Grid>
-              {hasNextPage && (
-                <div className="flex items-center justify-center mt-6">
-                  <Button
-                    ref={nextLinkRef}
-                    to={nextPageUrl}
-                    variant="secondary"
-                    width="full"
-                    prefetch="intent"
-                    disabled={!isLoading}
-                    state={{
-                      pageInfo: {
-                        endCursor,
-                        hasPreviousPage,
-                        startCursor,
-                      },
-                      nodes,
-                    }}
-                  >
-                    {isLoading ? 'Loading...' : 'Next products'}
-                  </Button>
-                </div>
-              )}
-            </>
-          )}
-        </Pagination>
-      </Section>
-    </>
-  );
-}
-
-function CollectionCard({
-  collection,
-  loading,
-}: {
-  collection: Collection;
-  loading?: HTMLImageElement['loading'];
-}) {
-  return (
-    <Link to={`/collections/${collection.handle}`} className="grid gap-4">
-      <div className="card-image bg-primary/5 aspect-[3/2]">
-        {collection?.image && (
-          <img
-            alt={collection.title}
-            src={collection.image.url}
-            height={400}
-            sizes="(max-width: 32em) 100vw, 33vw"
-            width={600}
-            loading={loading}
-          />
-        )}
-      </div>
-      <Heading as="h3" size="copy">
-        {collection.title}
-      </Heading>
-    </Link>
-  );
-}
-
-const COLLECTIONS_QUERY = `#graphql
-  query Collections(
-    $country: CountryCode
-    $language: LanguageCode
-    $first: Int
-    $last: Int
-    $startCursor: String
-    $endCursor: String
-  ) @inContext(country: $country, language: $language) {
-    collections(first: $first, last: $last, before: $startCursor, after: $endCursor) {
-      nodes {
-        id
-        title
-        description
-        handle
-        seo {
-          description
-          title
-        }
-        image {
-          id
-          url
-          width
-          height
-          altText
-        }
-      }
-      pageInfo {
-        hasPreviousPage
-        hasNextPage
-        startCursor
-        endCursor
-      }
-    }
-  }
-`;

package/dist/templates/demo-store/app/routes/($lang)/discounts.$code.tsx

@@ -1,60 +0,0 @@
-import {redirect, type LoaderArgs} from '@shopify/remix-oxygen';
-import {cartCreate, cartDiscountCodesUpdate} from './cart';
-
-/**
- * Automatically applies a discount found on the url
- * If a cart exists it's updated with the discount, otherwise a cart is created with the discount already applied
- * @param ?redirect an optional path to return to otherwise return to the home page
- * @example
- * Example path applying a discount and redirecting
- * ```ts
- * /discounts/FREESHIPPING?redirect=/products
- *
- * ```
- * @preserve
- */
-export async function loader({request, context, params}: LoaderArgs) {
-  const {storefront} = context;
-  // N.B. This route will probably be removed in the future.
-  const session = context.session as any;
-  const {code} = params;
-
-  const url = new URL(request.url);
-  const searchParams = new URLSearchParams(url.search);
-  const redirectUrl =
-    searchParams.get('redirect') || searchParams.get('return_to') || '/';
-
-  const headers = new Headers();
-
-  if (!code) {
-    return redirect(redirectUrl);
-  }
-
-  let cartId = await session.get('cartId');
-
-  //! if no existing cart, create one
-  if (!cartId) {
-    const {cart, errors: graphqlCartErrors} = await cartCreate({
-      input: {},
-      storefront,
-    });
-
-    if (graphqlCartErrors?.length) {
-      return redirect(redirectUrl);
-    }
-
-    //! cart created - we only need a Set-Cookie header if we're creating
-    cartId = cart.id;
-    session.set('cartId', cartId);
-    headers.set('Set-Cookie', await session.commit());
-  }
-
-  //! apply discount to the cart
-  await cartDiscountCodesUpdate({
-    cartId,
-    discountCodes: [code],
-    storefront,
-  });
-
-  return redirect(redirectUrl, {headers});
-}

package/dist/templates/demo-store/app/routes/($lang)/featured-products.tsx

@@ -1,58 +0,0 @@
-import {json, type LoaderArgs} from '@shopify/remix-oxygen';
-import {flattenConnection} from '@shopify/storefront-kit-react';
-import type {
-  CollectionConnection,
-  ProductConnection,
-} from '@shopify/storefront-kit-react/storefront-api-types';
-import invariant from 'tiny-invariant';
-import {PRODUCT_CARD_FRAGMENT} from '~/data';
-
-export async function loader({context: {storefront}}: LoaderArgs) {
-  return json(await getFeaturedData(storefront));
-}
-
-export async function getFeaturedData(
-  storefront: LoaderArgs['context']['storefront'],
-) {
-  const data = await storefront.query<{
-    featuredCollections: CollectionConnection;
-    featuredProducts: ProductConnection;
-  }>(FEATURED_QUERY, {
-    variables: {
-      country: storefront.i18n.country,
-      language: storefront.i18n.language,
-    },
-  });
-
-  invariant(data, 'No data returned from Shopify API');
-
-  return {
-    featuredCollections: flattenConnection(data.featuredCollections),
-    featuredProducts: flattenConnection(data.featuredProducts),
-  };
-}
-
-const FEATURED_QUERY = `#graphql
-  ${PRODUCT_CARD_FRAGMENT}
-  query homepage($country: CountryCode, $language: LanguageCode)
-  @inContext(country: $country, language: $language) {
-    featuredCollections: collections(first: 3, sortKey: UPDATED_AT) {
-      nodes {
-        id
-        title
-        handle
-        image {
-          altText
-          width
-          height
-          url
-        }
-      }
-    }
-    featuredProducts: products(first: 12) {
-      nodes {
-        ...ProductCard
-      }
-    }
-  }
-`;