@shopify/cli 3.85.2 → 3.85.4

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

@@ -1,21 +1,20 @@
-import { type MetaFunction, useLoaderData } from 'react-router';
-import type {CartQueryDataReturn} from '@shopify/hydrogen';
-import {CartForm} from '@shopify/hydrogen';
 import {
+  useLoaderData,
   data,
-  type LoaderFunctionArgs,
-  type ActionFunctionArgs,
   type HeadersFunction,
-} from '@shopify/remix-oxygen';
+} from 'react-router';
+import type {Route} from './+types/cart';
+import type {CartQueryDataReturn} from '@shopify/hydrogen';
+import {CartForm} from '@shopify/hydrogen';
 import {CartMain} from '~/components/CartMain';
 
-export const meta: MetaFunction = () => {
+export const meta: Route.MetaFunction = () => {
   return [{title: `Hydrogen | Cart`}];
 };
 
 export const headers: HeadersFunction = ({actionHeaders}) => actionHeaders;
 
-export async function action({request, context}: ActionFunctionArgs) {
+export async function action({request, context}: Route.ActionArgs) {
   const {cart} = context;
 
   const formData = await request.formData();
@@ -67,6 +66,11 @@ export async function action({request, context}: ActionFunctionArgs) {
       result = await cart.updateGiftCardCodes(giftCardCodes);
       break;
     }
+    case CartForm.ACTIONS.GiftCardCodesRemove: {
+      const appliedGiftCardIds = inputs.giftCardCodes as string[];
+      result = await cart.removeGiftCardCodes(appliedGiftCardIds);
+      break;
+    }
     case CartForm.ACTIONS.BuyerIdentityUpdate: {
       result = await cart.updateBuyerIdentity({
         ...inputs.buyerIdentity,
@@ -100,7 +104,7 @@ export async function action({request, context}: ActionFunctionArgs) {
   );
 }
 
-export async function loader({context}: LoaderFunctionArgs) {
+export async function loader({context}: Route.LoaderArgs) {
   const {cart} = context;
   return await cart.get();
 }

package/dist/assets/hydrogen/starter/app/routes/collections.$handle.tsx

@@ -1,15 +1,16 @@
-import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, type MetaFunction} from 'react-router';
+import {redirect, useLoaderData} from 'react-router';
+import type {Route} from './+types/collections.$handle';
 import {getPaginationVariables, Analytics} from '@shopify/hydrogen';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
 import {redirectIfHandleIsLocalized} from '~/lib/redirect';
 import {ProductItem} from '~/components/ProductItem';
+import type {ProductItemFragment} from 'storefrontapi.generated';
 
-export const meta: MetaFunction<typeof loader> = ({data}) => {
+export const meta: Route.MetaFunction = ({data}) => {
   return [{title: `Hydrogen | ${data?.collection.title ?? ''} Collection`}];
 };
 
-export async function loader(args: LoaderFunctionArgs) {
+export async function loader(args: Route.LoaderArgs) {
   // Start fetching non-critical data without blocking time to first byte
   const deferredData = loadDeferredData(args);
 
@@ -23,11 +24,7 @@ export async function loader(args: LoaderFunctionArgs) {
  * Load data necessary for rendering content above the fold. This is the critical data
  * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
  */
-async function loadCriticalData({
-  context,
-  params,
-  request,
-}: LoaderFunctionArgs) {
+async function loadCriticalData({context, params, request}: Route.LoaderArgs) {
   const {handle} = params;
   const {storefront} = context;
   const paginationVariables = getPaginationVariables(request, {
@@ -64,7 +61,7 @@ async function loadCriticalData({
  * fetched after the initial page load. If it's unavailable, the page should still 200.
  * Make sure to not throw any errors here, as it will cause the page to 500.
  */
-function loadDeferredData({context}: LoaderFunctionArgs) {
+function loadDeferredData({context}: Route.LoaderArgs) {
   return {};
 }
 
@@ -75,7 +72,7 @@ export default function Collection() {
     <div className="collection">
       <h1>{collection.title}</h1>
       <p className="collection-description">{collection.description}</p>
-      <PaginatedResourceSection
+      <PaginatedResourceSection<ProductItemFragment>
         connection={collection.products}
         resourcesClassName="products-grid"
       >

package/dist/assets/hydrogen/starter/app/routes/collections._index.tsx

@@ -1,10 +1,10 @@
-import { useLoaderData, Link } from 'react-router';
-import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {useLoaderData, Link} from 'react-router';
+import type {Route} from './+types/collections._index';
 import {getPaginationVariables, Image} from '@shopify/hydrogen';
 import type {CollectionFragment} from 'storefrontapi.generated';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
 
-export async function loader(args: LoaderFunctionArgs) {
+export async function loader(args: Route.LoaderArgs) {
   // Start fetching non-critical data without blocking time to first byte
   const deferredData = loadDeferredData(args);
 
@@ -18,7 +18,7 @@ export async function loader(args: LoaderFunctionArgs) {
  * Load data necessary for rendering content above the fold. This is the critical data
  * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
  */
-async function loadCriticalData({context, request}: LoaderFunctionArgs) {
+async function loadCriticalData({context, request}: Route.LoaderArgs) {
   const paginationVariables = getPaginationVariables(request, {
     pageBy: 4,
   });
@@ -38,7 +38,7 @@ async function loadCriticalData({context, request}: LoaderFunctionArgs) {
  * fetched after the initial page load. If it's unavailable, the page should still 200.
  * Make sure to not throw any errors here, as it will cause the page to 500.
  */
-function loadDeferredData({context}: LoaderFunctionArgs) {
+function loadDeferredData({context}: Route.LoaderArgs) {
   return {};
 }
 
@@ -48,7 +48,7 @@ export default function Collections() {
   return (
     <div className="collections">
       <h1>Collections</h1>
-      <PaginatedResourceSection
+      <PaginatedResourceSection<CollectionFragment>
         connection={collections}
         resourcesClassName="collections-grid"
       >

package/dist/assets/hydrogen/starter/app/routes/collections.all.tsx

@@ -1,14 +1,17 @@
-import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import {useLoaderData, type MetaFunction} from 'react-router';
+import type {Route} from './+types/collections.all';
+import {
+  useLoaderData,
+} from 'react-router';
 import {getPaginationVariables, Image, Money} from '@shopify/hydrogen';
 import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
 import {ProductItem} from '~/components/ProductItem';
+import type {CollectionItemFragment} from 'storefrontapi.generated';
 
-export const meta: MetaFunction<typeof loader> = () => {
+export const meta: Route.MetaFunction = () => {
   return [{title: `Hydrogen | Products`}];
 };
 
-export async function loader(args: LoaderFunctionArgs) {
+export async function loader(args: Route.LoaderArgs) {
   // Start fetching non-critical data without blocking time to first byte
   const deferredData = loadDeferredData(args);
 
@@ -22,7 +25,7 @@ export async function loader(args: LoaderFunctionArgs) {
  * Load data necessary for rendering content above the fold. This is the critical data
  * needed to render the page. If it's unavailable, the whole page should 400 or 500 error.
  */
-async function loadCriticalData({context, request}: LoaderFunctionArgs) {
+async function loadCriticalData({context, request}: Route.LoaderArgs) {
   const {storefront} = context;
   const paginationVariables = getPaginationVariables(request, {
     pageBy: 8,
@@ -42,7 +45,7 @@ async function loadCriticalData({context, request}: LoaderFunctionArgs) {
  * fetched after the initial page load. If it's unavailable, the page should still 200.
  * Make sure to not throw any errors here, as it will cause the page to 500.
  */
-function loadDeferredData({context}: LoaderFunctionArgs) {
+function loadDeferredData({context}: Route.LoaderArgs) {
   return {};
 }
 
@@ -52,7 +55,7 @@ export default function Collection() {
   return (
     <div className="collection">
       <h1>Products</h1>
-      <PaginatedResourceSection
+      <PaginatedResourceSection<CollectionItemFragment>
         connection={products}
         resourcesClassName="products-grid"
       >

package/dist/assets/hydrogen/starter/app/routes/discount.$code.tsx

@@ -1,4 +1,5 @@
-import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {redirect} from 'react-router';
+import type {Route} from './+types/discount.$code';
 
 /**
  * Automatically applies a discount found on the url
@@ -11,7 +12,7 @@ import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
  *
  * ```
  */
-export async function loader({request, context, params}: LoaderFunctionArgs) {
+export async function loader({request, context, params}: Route.LoaderArgs) {
   const {cart} = context;
   const {code} = params;
 

package/dist/assets/hydrogen/starter/app/routes/pages.$handle.tsx

@@ -1,12 +1,14 @@
-import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import { useLoaderData, type MetaFunction } from 'react-router';
+import {
+  useLoaderData,
+} from 'react-router';
+import type {Route} from './+types/pages.$handle';
 import {redirectIfHandleIsLocalized} from '~/lib/redirect';
 
-export const meta: MetaFunction<typeof loader> = ({data}) => {
+export const meta: Route.MetaFunction = ({data}) => {
   return [{title: `Hydrogen | ${data?.page.title ?? ''}`}];
 };
 
-export async function loader(args: LoaderFunctionArgs) {
+export async function loader(args: Route.LoaderArgs) {
   // Start fetching non-critical data without blocking time to first byte
   const deferredData = loadDeferredData(args);
 
@@ -24,7 +26,7 @@ async function loadCriticalData({
   context,
   request,
   params,
-}: LoaderFunctionArgs) {
+}: Route.LoaderArgs) {
   if (!params.handle) {
     throw new Error('Missing page handle');
   }
@@ -54,7 +56,7 @@ async function loadCriticalData({
  * fetched after the initial page load. If it's unavailable, the page should still 200.
  * Make sure to not throw any errors here, as it will cause the page to 500.
  */
-function loadDeferredData({context}: LoaderFunctionArgs) {
+function loadDeferredData({context}: Route.LoaderArgs) {
   return {};
 }
 

package/dist/assets/hydrogen/starter/app/routes/policies.$handle.tsx

@@ -1,5 +1,8 @@
-import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import { Link, useLoaderData, type MetaFunction } from 'react-router';
+import {
+  Link,
+  useLoaderData,
+} from 'react-router';
+import type {Route} from './+types/policies.$handle';
 import {type Shop} from '@shopify/hydrogen/storefront-api-types';
 
 type SelectedPolicies = keyof Pick<
@@ -7,11 +10,11 @@ type SelectedPolicies = keyof Pick<
   'privacyPolicy' | 'shippingPolicy' | 'termsOfService' | 'refundPolicy'
 >;
 
-export const meta: MetaFunction<typeof loader> = ({data}) => {
+export const meta: Route.MetaFunction = ({data}) => {
   return [{title: `Hydrogen | ${data?.policy.title ?? ''}`}];
 };
 
-export async function loader({params, context}: LoaderFunctionArgs) {
+export async function loader({params, context}: Route.LoaderArgs) {
   if (!params.handle) {
     throw new Response('No handle was passed in', {status: 404});
   }

package/dist/assets/hydrogen/starter/app/routes/policies._index.tsx

@@ -1,9 +1,18 @@
-import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import { useLoaderData, Link } from 'react-router';
+import {useLoaderData, Link} from 'react-router';
+import type {Route} from './+types/policies._index';
+import type {PoliciesQuery, PolicyItemFragment} from 'storefrontapi.generated';
 
-export async function loader({context}: LoaderFunctionArgs) {
-  const data = await context.storefront.query(POLICIES_QUERY);
-  const policies = Object.values(data.shop || {});
+export async function loader({context}: Route.LoaderArgs) {
+  const data: PoliciesQuery = await context.storefront.query(POLICIES_QUERY);
+  
+  const shopPolicies = data.shop;
+  const policies: PolicyItemFragment[] = [
+    shopPolicies?.privacyPolicy,
+    shopPolicies?.shippingPolicy,
+    shopPolicies?.termsOfService,
+    shopPolicies?.refundPolicy,
+    shopPolicies?.subscriptionPolicy,
+  ].filter((policy): policy is PolicyItemFragment => policy != null);
 
   if (!policies.length) {
     throw new Response('No policies found', {status: 404});
@@ -19,14 +28,11 @@ export default function Policies() {
     <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>
-          );
-        })}
+        {policies.map((policy) => (
+          <fieldset key={policy.id}>
+            <Link to={`/policies/${policy.handle}`}>{policy.title}</Link>
+          </fieldset>
+        ))}
       </div>
     </div>
   );

package/dist/assets/hydrogen/starter/app/routes/products.$handle.tsx

@@ -1,5 +1,8 @@
-import {redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import { useLoaderData, type MetaFunction } from 'react-router';
+import {
+  redirect,
+  useLoaderData,
+} from 'react-router';
+import type {Route} from './+types/products.$handle';
 import {
   getSelectedProductOptions,
   Analytics,
@@ -13,7 +16,7 @@ import {ProductImage} from '~/components/ProductImage';
 import {ProductForm} from '~/components/ProductForm';
 import {redirectIfHandleIsLocalized} from '~/lib/redirect';
 
-export const meta: MetaFunction<typeof loader> = ({data}) => {
+export const meta: Route.MetaFunction = ({data}) => {
   return [
     {title: `Hydrogen | ${data?.product.title ?? ''}`},
     {
@@ -23,7 +26,7 @@ export const meta: MetaFunction<typeof loader> = ({data}) => {
   ];
 };
 
-export async function loader(args: LoaderFunctionArgs) {
+export async function loader(args: Route.LoaderArgs) {
   // Start fetching non-critical data without blocking time to first byte
   const deferredData = loadDeferredData(args);
 
@@ -41,7 +44,7 @@ async function loadCriticalData({
   context,
   params,
   request,
-}: LoaderFunctionArgs) {
+}: Route.LoaderArgs) {
   const {handle} = params;
   const {storefront} = context;
 
@@ -73,7 +76,7 @@ async function loadCriticalData({
  * fetched after the initial page load. If it's unavailable, the page should still 200.
  * Make sure to not throw any errors here, as it will cause the page to 500.
  */
-function loadDeferredData({context, params}: LoaderFunctionArgs) {
+function loadDeferredData({context, params}: Route.LoaderArgs) {
   // Put any API calls that is not critical to be available on first page render
   // For example: product reviews, product recommendations, social feeds.
 

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

@@ -1,8 +1,7 @@
 import {
-  type LoaderFunctionArgs,
-  type ActionFunctionArgs,
-} from '@shopify/remix-oxygen';
-import { useLoaderData, type MetaFunction } from 'react-router';
+  useLoaderData,
+} from 'react-router';
+import type {Route} from './+types/search';
 import {getPaginationVariables, Analytics} from '@shopify/hydrogen';
 import {SearchForm} from '~/components/SearchForm';
 import {SearchResults} from '~/components/SearchResults';
@@ -11,12 +10,13 @@ import {
   type PredictiveSearchReturn,
   getEmptyPredictiveSearchResult,
 } from '~/lib/search';
+import type {RegularSearchQuery, PredictiveSearchQuery} from 'storefrontapi.generated';
 
-export const meta: MetaFunction = () => {
+export const meta: Route.MetaFunction = () => {
   return [{title: `Hydrogen | Search`}];
 };
 
-export async function loader({request, context}: LoaderFunctionArgs) {
+export async function loader({request, context}: Route.LoaderArgs) {
   const url = new URL(request.url);
   const isPredictive = url.searchParams.has('predictive');
   const searchPromise: Promise<PredictiveSearchReturn | RegularSearchReturn> =
@@ -216,7 +216,7 @@ async function regularSearch({
   request,
   context,
 }: Pick<
-  LoaderFunctionArgs,
+  Route.LoaderArgs,
   'request' | 'context'
 >): Promise<RegularSearchReturn> {
   const {storefront} = context;
@@ -225,7 +225,7 @@ async function regularSearch({
   const term = String(url.searchParams.get('q') || '');
 
   // Search articles, pages, and products for the `q` term
-  const {errors, ...items} = await storefront.query(SEARCH_QUERY, {
+  const {errors, ...items}: {errors?: Array<{message: string}>} & RegularSearchQuery = await storefront.query(SEARCH_QUERY, {
     variables: {...variables, term},
   });
 
@@ -234,12 +234,12 @@ async function regularSearch({
   }
 
   const total = Object.values(items).reduce(
-    (acc, {nodes}) => acc + nodes.length,
+    (acc: number, {nodes}: {nodes: Array<unknown>}) => acc + nodes.length,
     0,
   );
 
   const error = errors
-    ? errors.map(({message}) => message).join(', ')
+    ? errors.map(({message}: {message: string}) => message).join(', ')
     : undefined;
 
   return {type: 'regular', term, error, result: {total, items}};
@@ -377,7 +377,7 @@ async function predictiveSearch({
   request,
   context,
 }: Pick<
-  ActionFunctionArgs,
+  Route.ActionArgs,
   'request' | 'context'
 >): Promise<PredictiveSearchReturn> {
   const {storefront} = context;
@@ -389,7 +389,7 @@ async function predictiveSearch({
   if (!term) return {type, term, result: getEmptyPredictiveSearchResult()};
 
   // Predictively search articles, collections, pages, products, and queries (suggestions)
-  const {predictiveSearch: items, errors} = await storefront.query(
+  const {predictiveSearch: items, errors}: PredictiveSearchQuery & {errors?: Array<{message: string}>} = await storefront.query(
     PREDICTIVE_SEARCH_QUERY,
     {
       variables: {
@@ -403,7 +403,7 @@ async function predictiveSearch({
 
   if (errors) {
     throw new Error(
-      `Shopify API errors: ${errors.map(({message}) => message).join(', ')}`,
+      `Shopify API errors: ${errors.map(({message}: {message: string}) => message).join(', ')}`,
     );
   }
 
@@ -412,7 +412,7 @@ async function predictiveSearch({
   }
 
   const total = Object.values(items).reduce(
-    (acc, item) => acc + item.length,
+    (acc: number, item: Array<unknown>) => acc + item.length,
     0,
   );
 

package/dist/assets/hydrogen/starter/app/routes/sitemap.$type.$page[.xml].tsx

@@ -1,11 +1,11 @@
-import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import type {Route} from './+types/sitemap.$type.$page[.xml]';
 import {getSitemap} from '@shopify/hydrogen';
 
 export async function loader({
   request,
   params,
   context: {storefront},
-}: LoaderFunctionArgs) {
+}: Route.LoaderArgs) {
   const response = await getSitemap({
     storefront,
     request,
@@ -21,4 +21,3 @@ export async function loader({
 
   return response;
 }
-

package/dist/assets/hydrogen/starter/app/routes.ts

@@ -5,5 +5,5 @@ import {hydrogenRoutes} from '@shopify/hydrogen';
 export default hydrogenRoutes([
   ...(await flatRoutes()),
   // Manual route definitions can be added to this array, in addition to or instead of using the `flatRoutes` file-based routing convention.
-  // See https://remix.run/docs/en/main/guides/routing for more details
+  // See https://reactrouter.com/api/framework-conventions/routes.ts#routests
 ]) satisfies RouteConfig;

package/dist/assets/hydrogen/starter/app/styles/app.css

@@ -210,7 +210,6 @@ button.reset:hover:not(:has(> *)) {
   min-width: fit-content;
 }
 
-
 /*
 * --------------------------------------------------
 * components/Footer
@@ -520,3 +519,56 @@ button.reset:hover:not(:has(> *)) {
 .account-logout {
   display: inline-block;
 }
+
+/*
+* --------------------------------------------------
+* Order Search Form - Minimal & Responsive
+* --------------------------------------------------
+*/
+.order-search-form {
+  margin-bottom: 1.5rem;
+}
+
+.order-search-fieldset {
+  border: 1px solid #e5e5e5;
+  border-radius: 4px;
+  padding: 1rem;
+}
+
+.order-search-legend {
+  font-weight: 600;
+  padding: 0 0.5rem;
+}
+
+.order-search-active {
+  font-weight: normal;
+  opacity: 0.7;
+  margin-left: 0.5rem;
+}
+
+.order-search-inputs {
+  display: grid;
+  gap: 1rem;
+  margin: 0.25rem 0 1rem;
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 640px) {
+  .order-search-inputs {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.order-search-input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 1rem;
+}
+
+.order-search-buttons {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}