Merge pull request #63 from Shopify/@juanpprieto/order-detail

Order detail route
Shopify · Oct 7, 2022 · 51282fd · 51282fd
2 parents 9553252 + c80534e
commit 51282fd
Show file tree

Hide file tree

Showing 4 changed files with 474 additions and 5 deletions.
diff --git a/app/components/OrderCard.tsx b/app/components/OrderCard.tsx
@@ -8,14 +8,14 @@ import { statusMessage } from "~/lib/utils";
 
 export function OrderCard({ order }: { order: Order }) {
   if (!order?.id) return null;
-  const legacyOrderId = order!.id!.split("/").pop()!.split("?")[0];
+  const [legacyOrderId, key] = order!.id!.split("/").pop()!.split("?");
   const lineItems = flattenConnection<OrderLineItem>(order?.lineItems);
 
   return (
     <li className="grid text-center border rounded">
       <Link
         className="grid items-center gap-4 p-4 md:gap-6 md:p-6 md:grid-cols-2"
-        to={`/account/orders/${legacyOrderId}`}
+        to={`/account/orders/${legacyOrderId}?${key}`}
       >
         {lineItems[0].variant?.image && (
           <div className="card-image aspect-square bg-primary/5">

diff --git a/app/data/index.ts b/app/data/index.ts
@@ -13,6 +13,7 @@ import type {
   Blog,
   PageConnection,
   Shop,
+  Order,
   Localization,
   CustomerAccessTokenCreatePayload,
   Customer,
@@ -1413,6 +1414,149 @@ const CUSTOMER_QUERY = `#graphql
   }
 `;
 
+const CUSTOMER_ORDER_QUERY = `#graphql
+  fragment Money 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 {
+      ... on MoneyV2 {
+        amount
+        currencyCode
+      }
+      ... on PricingPercentageValue {
+        percentage
+      }
+    }
+  }
+  fragment Image on Image {
+    altText
+    height
+    src: url(transform: {crop: CENTER, maxHeight: 96, maxWidth: 96, scale: 2})
+    id
+    width
+  }
+  fragment ProductVariant on ProductVariant {
+    id
+    image {
+      ...Image
+    }
+    priceV2 {
+      ...Money
+    }
+    product {
+      handle
+    }
+    sku
+    title
+  }
+  fragment LineItemFull on OrderLineItem {
+    title
+    quantity
+    discountAllocations {
+      allocatedAmount {
+        ...Money
+      }
+      discountApplication {
+        ...DiscountApplication
+      }
+    }
+    originalTotalPrice {
+      ...Money
+    }
+    discountedTotalPrice {
+      ...Money
+    }
+    variant {
+      ...ProductVariant
+    }
+  }
+
+  query CustomerOrder(
+    $country: CountryCode
+    $language: LanguageCode
+    $orderId: ID!
+  ) @inContext(country: $country, language: $language) {
+    node(id: $orderId) {
+      ... on Order {
+        id
+        name
+        orderNumber
+        processedAt
+        fulfillmentStatus
+        totalTaxV2 {
+          ...Money
+        }
+        totalPriceV2 {
+          ...Money
+        }
+        subtotalPriceV2 {
+          ...Money
+        }
+        shippingAddress {
+          ...AddressFull
+        }
+        discountApplications(first: 100) {
+          nodes {
+            ...DiscountApplication
+          }
+        }
+        lineItems(first: 100) {
+          nodes {
+            ...LineItemFull
+          }
+        }
+      }
+    }
+  }
+`;
+
+export async function getCustomerOrder({
+  orderId,
+  params,
+}: {
+  orderId: string;
+  params: Params;
+}) : Promise<Order | undefined> {
+  const { language, country } = getLocalizationFromLang(params.lang);
+
+  const { data, errors } = await getStorefrontData<{
+    node: Order;
+  }>({
+    query: CUSTOMER_ORDER_QUERY,
+    variables: {
+      country,
+      language,
+      orderId
+    },
+  });
+
+  if (errors) {
+    const errorMessages = errors.map(error => error.message).join('\n')
+    throw new Error(errorMessages)
+  }
+
+  return data?.node;
+}
+
 export async function getCustomer({
   request,
   context,
@@ -1426,7 +1570,7 @@ export async function getCustomer({
 }) {
   const { language, country } = getLocalizationFromLang(params.lang);
 
-  const { data } = await getStorefrontData<{
+  const { data, errors } = await getStorefrontData<{
     customer: Customer;
   }>({
     query: CUSTOMER_QUERY,
@@ -1437,11 +1581,16 @@ export async function getCustomer({
     },
   });
 
+  if (errors) {
+    const errorMessages = errors.map(error => error.message).join('\n')
+    throw new Error(errorMessages)
+  }
+
   /**
    * If the customer failed to load, we assume their access token is invalid.
    */
   if (!data || !data.customer) {
-    throw logout(request, context);
+    throw await logout(request, context)
   }
 
   return data.customer;

diff --git a/app/hooks/useCountries.tsx b/app/hooks/useCountries.tsx
@@ -10,7 +10,7 @@ export function useCountries(): Array<Country> | undefined {
   if (rootData?.countries?._data) {
     return rootData?.countries?._data;
   }
-  // return rootData?.countries?._data
+
   throw rootData?.countries
 }