@shopify/cli-hydrogen 6.0.2 → 7.0.0

package/dist/generator-templates/starter/app/routes/account.orders.$id.tsx

@@ -1,36 +1,35 @@
 import {json, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
 import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
 import {Money, Image, flattenConnection} from '@shopify/hydrogen';
-import type {OrderLineItemFullFragment} from 'storefrontapi.generated';
+import type {OrderLineItemFullFragment} from 'customer-accountapi.generated';
+import {CUSTOMER_ORDER_QUERY} from '~/graphql/customer-account/CustomerOrderQuery';
 
 export const meta: MetaFunction<typeof loader> = ({data}) => {
   return [{title: `Order ${data?.order?.name}`}];
 };
 
-export async function loader({params, context}: LoaderFunctionArgs) {
-  const {session, storefront} = context;
-
+export async function loader({params, context, request}: LoaderFunctionArgs) {
   if (!params.id) {
     return redirect('/account/orders');
   }
 
   const orderId = atob(params.id);
-  const customerAccessToken = await session.get('customerAccessToken');
+  const {data, errors} = await context.customerAccount.query(
+    CUSTOMER_ORDER_QUERY,
+    {
+      variables: {orderId},
+    },
+  );
 
-  if (!customerAccessToken) {
-    return redirect('/account/login');
+  if (errors?.length || !data?.order) {
+    throw new Error('Order not found');
   }
 
-  const {order} = await storefront.query(CUSTOMER_ORDER_QUERY, {
-    variables: {orderId},
-  });
-
-  if (!order || !('lineItems' in order)) {
-    throw new Response('Order not found', {status: 404});
-  }
+  const {order} = data;
 
   const lineItems = flattenConnection(order.lineItems);
   const discountApplications = flattenConnection(order.discountApplications);
+  const fulfillmentStatus = flattenConnection(order.fulfillments)[0].status;
 
   const firstDiscount = discountApplications[0]?.value;
 
@@ -41,17 +40,30 @@ export async function loader({params, context}: LoaderFunctionArgs) {
     firstDiscount?.__typename === 'PricingPercentageValue' &&
     firstDiscount?.percentage;
 
-  return json({
+  return json(
+    {
+      order,
+      lineItems,
+      discountValue,
+      discountPercentage,
+      fulfillmentStatus,
+    },
+    {
+      headers: {
+        'Set-Cookie': await context.session.commit(),
+      },
+    },
+  );
+}
+
+export default function OrderRoute() {
+  const {
     order,
     lineItems,
     discountValue,
     discountPercentage,
-  });
-}
-
-export default function OrderRoute() {
-  const {order, lineItems, discountValue, discountPercentage} =
-    useLoaderData<typeof loader>();
+    fulfillmentStatus,
+  } = useLoaderData<typeof loader>();
   return (
     <div className="account-order">
       <h2>Order {order.name}</h2>
@@ -100,7 +112,7 @@ export default function OrderRoute() {
                 <p>Subtotal</p>
               </th>
               <td>
-                <Money data={order.subtotalPriceV2!} />
+                <Money data={order.subtotal!} />
               </td>
             </tr>
             <tr>
@@ -111,7 +123,7 @@ export default function OrderRoute() {
                 <p>Tax</p>
               </th>
               <td>
-                <Money data={order.totalTaxV2!} />
+                <Money data={order.totalTax!} />
               </td>
             </tr>
             <tr>
@@ -122,7 +134,7 @@ export default function OrderRoute() {
                 <p>Total</p>
               </th>
               <td>
-                <Money data={order.totalPriceV2!} />
+                <Money data={order.totalPrice!} />
               </td>
             </tr>
           </tfoot>
@@ -131,17 +143,16 @@ export default function OrderRoute() {
           <h3>Shipping Address</h3>
           {order?.shippingAddress ? (
             <address>
-              <p>
-                {order.shippingAddress.firstName &&
-                  order.shippingAddress.firstName + ' '}
-                {order.shippingAddress.lastName}
-              </p>
-              {order?.shippingAddress?.formatted ? (
-                order.shippingAddress.formatted.map((line: string) => (
-                  <p key={line}>{line}</p>
-                ))
+              <p>{order.shippingAddress.name}</p>
+              {order.shippingAddress.formatted ? (
+                <p>{order.shippingAddress.formatted}</p>
               ) : (
-                <></>
+                ''
+              )}
+              {order.shippingAddress.formattedArea ? (
+                <p>{order.shippingAddress.formattedArea}</p>
+              ) : (
+                ''
               )}
             </address>
           ) : (
@@ -149,13 +160,13 @@ export default function OrderRoute() {
           )}
           <h3>Status</h3>
           <div>
-            <p>{order.fulfillmentStatus}</p>
+            <p>{fulfillmentStatus}</p>
           </div>
         </div>
       </div>
       <br />
       <p>
-        <a target="_blank" href={order.statusUrl} rel="noreferrer">
+        <a target="_blank" href={order.statusPageUrl} rel="noreferrer">
           View Order Status →
         </a>
       </p>
@@ -165,145 +176,27 @@ export default function OrderRoute() {
 
 function OrderLineRow({lineItem}: {lineItem: OrderLineItemFullFragment}) {
   return (
-    <tr key={lineItem.variant!.id}>
+    <tr key={lineItem.id}>
       <td>
         <div>
-          <Link to={`/products/${lineItem.variant!.product!.handle}`}>
-            {lineItem?.variant?.image && (
-              <div>
-                <Image data={lineItem.variant.image} width={96} height={96} />
-              </div>
-            )}
-          </Link>
+          {lineItem?.image && (
+            <div>
+              <Image data={lineItem.image} width={96} height={96} />
+            </div>
+          )}
           <div>
             <p>{lineItem.title}</p>
-            <small>{lineItem.variant!.title}</small>
+            <small>{lineItem.variantTitle}</small>
           </div>
         </div>
       </td>
       <td>
-        <Money data={lineItem.variant!.price!} />
+        <Money data={lineItem.price!} />
       </td>
       <td>{lineItem.quantity}</td>
       <td>
-        <Money data={lineItem.discountedTotalPrice!} />
+        <Money data={lineItem.totalDiscount!} />
       </td>
     </tr>
   );
 }
-
-// NOTE: https://shopify.dev/docs/api/storefront/latest/objects/Order
-const CUSTOMER_ORDER_QUERY = `#graphql
-  fragment OrderMoney on MoneyV2 {
-    amount
-    currencyCode
-  }
-  fragment AddressFull on MailingAddress {
-    address1
-    address2
-    city
-    company
-    country
-    countryCodeV2
-    firstName
-    formatted
-    id
-    lastName
-    name
-    phone
-    province
-    provinceCode
-    zip
-  }
-  fragment DiscountApplication on DiscountApplication {
-    value {
-      __typename
-      ... on MoneyV2 {
-        ...OrderMoney
-      }
-      ... on PricingPercentageValue {
-        percentage
-      }
-    }
-  }
-  fragment OrderLineProductVariant on ProductVariant {
-    id
-    image {
-      altText
-      height
-      url
-      id
-      width
-    }
-    price {
-      ...OrderMoney
-    }
-    product {
-      handle
-    }
-    sku
-    title
-  }
-  fragment OrderLineItemFull on OrderLineItem {
-    title
-    quantity
-    discountAllocations {
-      allocatedAmount {
-        ...OrderMoney
-      }
-      discountApplication {
-        ...DiscountApplication
-      }
-    }
-    originalTotalPrice {
-      ...OrderMoney
-    }
-    discountedTotalPrice {
-      ...OrderMoney
-    }
-    variant {
-      ...OrderLineProductVariant
-    }
-  }
-  fragment Order on Order {
-    id
-    name
-    orderNumber
-    statusUrl
-    processedAt
-    fulfillmentStatus
-    totalTaxV2 {
-      ...OrderMoney
-    }
-    totalPriceV2 {
-      ...OrderMoney
-    }
-    subtotalPriceV2 {
-      ...OrderMoney
-    }
-    shippingAddress {
-      ...AddressFull
-    }
-    discountApplications(first: 100) {
-      nodes {
-        ...DiscountApplication
-      }
-    }
-    lineItems(first: 100) {
-      nodes {
-        ...OrderLineItemFull
-      }
-    }
-  }
-  query Order(
-    $country: CountryCode
-    $language: LanguageCode
-    $orderId: ID!
-  ) @inContext(country: $country, language: $language) {
-    order: node(id: $orderId) {
-      ... on Order {
-        ...Order
-      }
-    }
-  }
-` as const;

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

@@ -1,60 +1,54 @@
 import {Link, useLoaderData, type MetaFunction} from '@remix-run/react';
-import {Money, Pagination, getPaginationVariables} from '@shopify/hydrogen';
+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 'storefrontapi.generated';
+} from 'customer-accountapi.generated';
 
 export const meta: MetaFunction = () => {
   return [{title: 'Orders'}];
 };
 
 export async function loader({request, context}: LoaderFunctionArgs) {
-  const {session, storefront} = context;
+  const paginationVariables = getPaginationVariables(request, {
+    pageBy: 20,
+  });
 
-  const customerAccessToken = await session.get('customerAccessToken');
-  if (!customerAccessToken?.accessToken) {
-    return redirect('/account/login');
-  }
-
-  try {
-    const paginationVariables = getPaginationVariables(request, {
-      pageBy: 20,
-    });
-
-    const {customer} = await storefront.query(CUSTOMER_ORDERS_QUERY, {
+  const {data, errors} = await context.customerAccount.query(
+    CUSTOMER_ORDERS_QUERY,
+    {
       variables: {
-        customerAccessToken: customerAccessToken.accessToken,
-        country: storefront.i18n.country,
-        language: storefront.i18n.language,
         ...paginationVariables,
       },
-      cache: storefront.CacheNone(),
-    });
-
-    if (!customer) {
-      throw new Error('Customer not found');
-    }
+    },
+  );
 
-    return json({customer});
-  } catch (error: unknown) {
-    if (error instanceof Error) {
-      return json({error: error.message}, {status: 400});
-    }
-    return json({error}, {status: 400});
+  if (errors?.length || !data?.customer) {
+    throw Error('Customer orders not found');
   }
+
+  return json(
+    {customer: data.customer},
+    {
+      headers: {
+        'Set-Cookie': await context.session.commit(),
+      },
+    },
+  );
 }
 
 export default function Orders() {
   const {customer} = useLoaderData<{customer: CustomerOrdersFragment}>();
-  const {orders, numberOfOrders} = customer;
+  const {orders} = customer;
   return (
     <div className="orders">
-      <h2>
-        Orders <small>({numberOfOrders})</small>
-      </h2>
-      <br />
       {orders.nodes.length ? <OrdersTable orders={orders} /> : <EmptyOrders />}
     </div>
   );
@@ -101,91 +95,20 @@ function EmptyOrders() {
 }
 
 function OrderItem({order}: {order: OrderItemFragment}) {
+  const fulfillmentStatus = flattenConnection(order.fulfillments)[0].status;
   return (
     <>
       <fieldset>
         <Link to={`/account/orders/${order.id}`}>
-          <strong>#{order.orderNumber}</strong>
+          <strong>#{order.number}</strong>
         </Link>
         <p>{new Date(order.processedAt).toDateString()}</p>
         <p>{order.financialStatus}</p>
-        <p>{order.fulfillmentStatus}</p>
-        <Money data={order.currentTotalPrice} />
+        <p>{fulfillmentStatus}</p>
+        <Money data={order.totalPrice} />
         <Link to={`/account/orders/${btoa(order.id)}`}>View Order →</Link>
       </fieldset>
       <br />
     </>
   );
 }
-
-const ORDER_ITEM_FRAGMENT = `#graphql
-  fragment OrderItem on Order {
-    currentTotalPrice {
-      amount
-      currencyCode
-    }
-    financialStatus
-    fulfillmentStatus
-    id
-    lineItems(first: 10) {
-      nodes {
-        title
-        variant {
-          image {
-            url
-            altText
-            height
-            width
-          }
-        }
-      }
-    }
-    orderNumber
-    customerUrl
-    statusUrl
-    processedAt
-  }
-` as const;
-
-export const CUSTOMER_FRAGMENT = `#graphql
-  fragment CustomerOrders on Customer {
-    numberOfOrders
-    orders(
-      sortKey: PROCESSED_AT,
-      reverse: true,
-      first: $first,
-      last: $last,
-      before: $startCursor,
-      after: $endCursor
-    ) {
-      nodes {
-        ...OrderItem
-      }
-      pageInfo {
-        hasPreviousPage
-        hasNextPage
-        endCursor
-        startCursor
-      }
-    }
-  }
-  ${ORDER_ITEM_FRAGMENT}
-` as const;
-
-// NOTE: https://shopify.dev/docs/api/storefront/latest/queries/customer
-const CUSTOMER_ORDERS_QUERY = `#graphql
-  ${CUSTOMER_FRAGMENT}
-  query CustomerOrders(
-    $country: CountryCode
-    $customerAccessToken: String!
-    $endCursor: String
-    $first: Int
-    $language: LanguageCode
-    $last: Int
-    $startCursor: String
-  ) @inContext(country: $country, language: $language) {
-    customer(customerAccessToken: $customerAccessToken) {
-      ...CustomerOrders
-    }
-  }
-` as const;