@shopify/cli-hydrogen 5.0.2 → 5.1.0

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

@@ -0,0 +1,309 @@
+import {json, redirect, type LoaderArgs} from '@shopify/remix-oxygen';
+import {Link, useLoaderData, type V2_MetaFunction} from '@remix-run/react';
+import {Money, Image, flattenConnection} from '@shopify/hydrogen';
+import type {OrderLineItemFullFragment} from 'storefrontapi.generated';
+
+export const meta: V2_MetaFunction<typeof loader> = ({data}) => {
+  return [{title: `Order ${data?.order?.name}`}];
+};
+
+export async function loader({params, context}: LoaderArgs) {
+  const {session, storefront} = context;
+
+  if (!params.id) {
+    return redirect('/account/orders');
+  }
+
+  const orderId = atob(params.id);
+  const customerAccessToken = await session.get('customerAccessToken');
+
+  if (!customerAccessToken) {
+    return redirect('/account/login');
+  }
+
+  const {order} = await storefront.query(CUSTOMER_ORDER_QUERY, {
+    variables: {orderId},
+  });
+
+  if (!order || !('lineItems' in order)) {
+    throw new Response('Order not found', {status: 404});
+  }
+
+  const lineItems = flattenConnection(order.lineItems);
+  const discountApplications = flattenConnection(order.discountApplications);
+
+  const firstDiscount = discountApplications[0]?.value;
+
+  const discountValue =
+    firstDiscount?.__typename === 'MoneyV2' && firstDiscount;
+
+  const discountPercentage =
+    firstDiscount?.__typename === 'PricingPercentageValue' &&
+    firstDiscount?.percentage;
+
+  return json({
+    order,
+    lineItems,
+    discountValue,
+    discountPercentage,
+  });
+}
+
+export default function OrderRoute() {
+  const {order, lineItems, discountValue, discountPercentage} =
+    useLoaderData<typeof loader>();
+  return (
+    <div className="account-order">
+      <h2>Order {order.name}</h2>
+      <p>Placed on {new Date(order.processedAt!).toDateString()}</p>
+      <br />
+      <div>
+        <table>
+          <thead>
+            <tr>
+              <th scope="col">Product</th>
+              <th scope="col">Price</th>
+              <th scope="col">Quantity</th>
+              <th scope="col">Total</th>
+            </tr>
+          </thead>
+          <tbody>
+            {lineItems.map((lineItem, lineItemIndex) => (
+              // eslint-disable-next-line react/no-array-index-key
+              <OrderLineRow key={lineItemIndex} lineItem={lineItem} />
+            ))}
+          </tbody>
+          <tfoot>
+            {((discountValue && discountValue.amount) ||
+              discountPercentage) && (
+              <tr>
+                <th scope="row" colSpan={3}>
+                  <p>Discounts</p>
+                </th>
+                <th scope="row">
+                  <p>Discounts</p>
+                </th>
+                <td>
+                  {discountPercentage ? (
+                    <span>-{discountPercentage}% OFF</span>
+                  ) : (
+                    discountValue && <Money data={discountValue!} />
+                  )}
+                </td>
+              </tr>
+            )}
+            <tr>
+              <th scope="row" colSpan={3}>
+                <p>Subtotal</p>
+              </th>
+              <th scope="row">
+                <p>Subtotal</p>
+              </th>
+              <td>
+                <Money data={order.subtotalPriceV2!} />
+              </td>
+            </tr>
+            <tr>
+              <th scope="row" colSpan={3}>
+                Tax
+              </th>
+              <th scope="row">
+                <p>Tax</p>
+              </th>
+              <td>
+                <Money data={order.totalTaxV2!} />
+              </td>
+            </tr>
+            <tr>
+              <th scope="row" colSpan={3}>
+                Total
+              </th>
+              <th scope="row">
+                <p>Total</p>
+              </th>
+              <td>
+                <Money data={order.totalPriceV2!} />
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+        <div>
+          <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>
+                ))
+              ) : (
+                <></>
+              )}
+            </address>
+          ) : (
+            <p>No shipping address defined</p>
+          )}
+          <h3>Status</h3>
+          <div>
+            <p>{order.fulfillmentStatus}</p>
+          </div>
+        </div>
+      </div>
+      <br />
+      <p>
+        <a target="_blank" href={order.statusUrl} rel="noreferrer">
+          View Order Status →
+        </a>
+      </p>
+    </div>
+  );
+}
+
+function OrderLineRow({lineItem}: {lineItem: OrderLineItemFullFragment}) {
+  return (
+    <tr key={lineItem.variant!.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>
+          <div>
+            <p>{lineItem.title}</p>
+            <small>{lineItem.variant!.title}</small>
+          </div>
+        </div>
+      </td>
+      <td>
+        <Money data={lineItem.variant!.price!} />
+      </td>
+      <td>{lineItem.quantity}</td>
+      <td>
+        <Money data={lineItem.discountedTotalPrice!} />
+      </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

@@ -0,0 +1,196 @@
+import {Link, useLoaderData} from '@remix-run/react';
+import {Money, Pagination, getPaginationVariables} from '@shopify/hydrogen';
+import {
+  json,
+  redirect,
+  type LoaderArgs,
+  type V2_MetaFunction,
+} from '@shopify/remix-oxygen';
+import type {
+  CustomerOrdersFragment,
+  OrderItemFragment,
+} from 'storefrontapi.generated';
+
+export const meta: V2_MetaFunction = () => {
+  return [{title: 'Orders'}];
+};
+
+export async function loader({request, context}: LoaderArgs) {
+  const {session, storefront} = context;
+
+  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, {
+      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});
+  }
+}
+
+export default function Orders() {
+  const {customer} = useLoaderData<{customer: CustomerOrdersFragment}>();
+  const {orders, numberOfOrders} = customer;
+  return (
+    <div className="orders">
+      <h2>
+        Orders <small>({numberOfOrders})</small>
+      </h2>
+      <br />
+      {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}) {
+  return (
+    <>
+      <fieldset>
+        <Link to={`/account/orders/${order.id}`}>
+          <strong>#{order.orderNumber}</strong>
+        </Link>
+        <p>{new Date(order.processedAt).toDateString()}</p>
+        <p>{order.financialStatus}</p>
+        <p>{order.fulfillmentStatus}</p>
+        <Money data={order.currentTotalPrice} />
+        <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
+        hasNextPage
+        endCursor
+      }
+    }
+  }
+  ${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;