hydrogen-forge 0.1.0

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

@@ -0,0 +1,222 @@
+import {redirect, useLoaderData} from 'react-router';
+import type {Route} from './+types/account.orders.$id';
+import {Money, Image} from '@shopify/hydrogen';
+import type {
+  OrderLineItemFullFragment,
+  OrderQuery,
+} from 'customer-accountapi.generated';
+import {CUSTOMER_ORDER_QUERY} from '~/graphql/customer-account/CustomerOrderQuery';
+
+export const meta: Route.MetaFunction = ({data}) => {
+  return [{title: `Order ${data?.order?.name}`}];
+};
+
+export async function loader({params, context}: Route.LoaderArgs) {
+  const {customerAccount} = context;
+  if (!params.id) {
+    return redirect('/account/orders');
+  }
+
+  const orderId = atob(params.id);
+  const {data, errors}: {data: OrderQuery; errors?: Array<{message: string}>} =
+    await customerAccount.query(CUSTOMER_ORDER_QUERY, {
+      variables: {
+        orderId,
+        language: customerAccount.i18n.language,
+      },
+    });
+
+  if (errors?.length || !data?.order) {
+    throw new Error('Order not found');
+  }
+
+  const {order} = data;
+
+  // Extract line items directly from nodes array
+  const lineItems = order.lineItems.nodes;
+
+  // Extract discount applications directly from nodes array
+  const discountApplications = order.discountApplications.nodes;
+
+  // Get fulfillment status from first fulfillment node
+  const fulfillmentStatus = order.fulfillments.nodes[0]?.status ?? 'N/A';
+
+  // Get first discount value with proper type checking
+  const firstDiscount = discountApplications[0]?.value;
+
+  // Type guard for MoneyV2 discount
+  const discountValue =
+    firstDiscount?.__typename === 'MoneyV2'
+      ? (firstDiscount as Extract<
+          typeof firstDiscount,
+          {__typename: 'MoneyV2'}
+        >)
+      : null;
+
+  // Type guard for percentage discount
+  const discountPercentage =
+    firstDiscount?.__typename === 'PricingPercentageValue'
+      ? (
+          firstDiscount as Extract<
+            typeof firstDiscount,
+            {__typename: 'PricingPercentageValue'}
+          >
+        ).percentage
+      : null;
+
+  return {
+    order,
+    lineItems,
+    discountValue,
+    discountPercentage,
+    fulfillmentStatus,
+  };
+}
+
+export default function OrderRoute() {
+  const {
+    order,
+    lineItems,
+    discountValue,
+    discountPercentage,
+    fulfillmentStatus,
+  } = useLoaderData<typeof loader>();
+  return (
+    <div className="account-order">
+      <h2>Order {order.name}</h2>
+      <p>Placed on {new Date(order.processedAt!).toDateString()}</p>
+      {order.confirmationNumber && (
+        <p>Confirmation: {order.confirmationNumber}</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.subtotal!} />
+              </td>
+            </tr>
+            <tr>
+              <th scope="row" colSpan={3}>
+                Tax
+              </th>
+              <th scope="row">
+                <p>Tax</p>
+              </th>
+              <td>
+                <Money data={order.totalTax!} />
+              </td>
+            </tr>
+            <tr>
+              <th scope="row" colSpan={3}>
+                Total
+              </th>
+              <th scope="row">
+                <p>Total</p>
+              </th>
+              <td>
+                <Money data={order.totalPrice!} />
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+        <div>
+          <h3>Shipping Address</h3>
+          {order?.shippingAddress ? (
+            <address>
+              <p>{order.shippingAddress.name}</p>
+              {order.shippingAddress.formatted ? (
+                <p>{order.shippingAddress.formatted}</p>
+              ) : (
+                ''
+              )}
+              {order.shippingAddress.formattedArea ? (
+                <p>{order.shippingAddress.formattedArea}</p>
+              ) : (
+                ''
+              )}
+            </address>
+          ) : (
+            <p>No shipping address defined</p>
+          )}
+          <h3>Status</h3>
+          <div>
+            <p>{fulfillmentStatus}</p>
+          </div>
+        </div>
+      </div>
+      <br />
+      <p>
+        <a target="_blank" href={order.statusPageUrl} rel="noreferrer">
+          View Order Status →
+        </a>
+      </p>
+    </div>
+  );
+}
+
+function OrderLineRow({lineItem}: {lineItem: OrderLineItemFullFragment}) {
+  return (
+    <tr key={lineItem.id}>
+      <td>
+        <div>
+          {lineItem?.image && (
+            <div>
+              <Image data={lineItem.image} width={96} height={96} />
+            </div>
+          )}
+          <div>
+            <p>{lineItem.title}</p>
+            <small>{lineItem.variantTitle}</small>
+          </div>
+        </div>
+      </td>
+      <td>
+        <Money data={lineItem.price!} />
+      </td>
+      <td>{lineItem.quantity}</td>
+      <td>
+        <Money data={lineItem.totalDiscount!} />
+      </td>
+    </tr>
+  );
+}

package/templates/starter/app/routes/account.orders._index.tsx

@@ -0,0 +1,222 @@
+import {
+  Link,
+  useLoaderData,
+  useNavigation,
+  useSearchParams,
+} from 'react-router';
+import type {Route} from './+types/account.orders._index';
+import {useRef} from 'react';
+import {
+  Money,
+  getPaginationVariables,
+  flattenConnection,
+} from '@shopify/hydrogen';
+import {
+  buildOrderSearchQuery,
+  parseOrderFilters,
+  ORDER_FILTER_FIELDS,
+  type OrderFilterParams,
+} from '~/lib/orderFilters';
+import {CUSTOMER_ORDERS_QUERY} from '~/graphql/customer-account/CustomerOrdersQuery';
+import type {
+  CustomerOrdersFragment,
+  OrderItemFragment,
+} from 'customer-accountapi.generated';
+import {PaginatedResourceSection} from '~/components/PaginatedResourceSection';
+
+type OrdersLoaderData = {
+  customer: CustomerOrdersFragment;
+  filters: OrderFilterParams;
+};
+
+export const meta: Route.MetaFunction = () => {
+  return [{title: 'Orders'}];
+};
+
+export async function loader({request, context}: Route.LoaderArgs) {
+  const {customerAccount} = context;
+  const paginationVariables = getPaginationVariables(request, {
+    pageBy: 20,
+  });
+
+  const url = new URL(request.url);
+  const filters = parseOrderFilters(url.searchParams);
+  const query = buildOrderSearchQuery(filters);
+
+  const {data, errors} = await customerAccount.query(CUSTOMER_ORDERS_QUERY, {
+    variables: {
+      ...paginationVariables,
+      query,
+      language: customerAccount.i18n.language,
+    },
+  });
+
+  if (errors?.length || !data?.customer) {
+    throw Error('Customer orders not found');
+  }
+
+  return {customer: data.customer, filters};
+}
+
+export default function Orders() {
+  const {customer, filters} = useLoaderData<OrdersLoaderData>();
+  const {orders} = customer;
+
+  return (
+    <div className="orders">
+      <OrderSearchForm currentFilters={filters} />
+      <OrdersTable orders={orders} filters={filters} />
+    </div>
+  );
+}
+
+function OrdersTable({
+  orders,
+  filters,
+}: {
+  orders: CustomerOrdersFragment['orders'];
+  filters: OrderFilterParams;
+}) {
+  const hasFilters = !!(filters.name || filters.confirmationNumber);
+
+  return (
+    <div className="acccount-orders" aria-live="polite">
+      {orders?.nodes.length ? (
+        <PaginatedResourceSection connection={orders}>
+          {({node: order}) => <OrderItem key={order.id} order={order} />}
+        </PaginatedResourceSection>
+      ) : (
+        <EmptyOrders hasFilters={hasFilters} />
+      )}
+    </div>
+  );
+}
+
+function EmptyOrders({hasFilters = false}: {hasFilters?: boolean}) {
+  return (
+    <div>
+      {hasFilters ? (
+        <>
+          <p>No orders found matching your search.</p>
+          <br />
+          <p>
+            <Link to="/account/orders">Clear filters →</Link>
+          </p>
+        </>
+      ) : (
+        <>
+          <p>You haven&apos;t placed any orders yet.</p>
+          <br />
+          <p>
+            <Link to="/collections">Start Shopping →</Link>
+          </p>
+        </>
+      )}
+    </div>
+  );
+}
+
+function OrderSearchForm({
+  currentFilters,
+}: {
+  currentFilters: OrderFilterParams;
+}) {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const navigation = useNavigation();
+  const isSearching =
+    navigation.state !== 'idle' &&
+    navigation.location?.pathname?.includes('orders');
+  const formRef = useRef<HTMLFormElement>(null);
+
+  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    const formData = new FormData(event.currentTarget);
+    const params = new URLSearchParams();
+
+    const name = formData.get(ORDER_FILTER_FIELDS.NAME)?.toString().trim();
+    const confirmationNumber = formData
+      .get(ORDER_FILTER_FIELDS.CONFIRMATION_NUMBER)
+      ?.toString()
+      .trim();
+
+    if (name) params.set(ORDER_FILTER_FIELDS.NAME, name);
+    if (confirmationNumber)
+      params.set(ORDER_FILTER_FIELDS.CONFIRMATION_NUMBER, confirmationNumber);
+
+    setSearchParams(params);
+  };
+
+  const hasFilters = currentFilters.name || currentFilters.confirmationNumber;
+
+  return (
+    <form
+      ref={formRef}
+      onSubmit={handleSubmit}
+      className="order-search-form"
+      aria-label="Search orders"
+    >
+      <fieldset className="order-search-fieldset">
+        <legend className="order-search-legend">Filter Orders</legend>
+
+        <div className="order-search-inputs">
+          <input
+            type="search"
+            name={ORDER_FILTER_FIELDS.NAME}
+            placeholder="Order #"
+            aria-label="Order number"
+            defaultValue={currentFilters.name || ''}
+            className="order-search-input"
+          />
+          <input
+            type="search"
+            name={ORDER_FILTER_FIELDS.CONFIRMATION_NUMBER}
+            placeholder="Confirmation #"
+            aria-label="Confirmation number"
+            defaultValue={currentFilters.confirmationNumber || ''}
+            className="order-search-input"
+          />
+        </div>
+
+        <div className="order-search-buttons">
+          <button type="submit" disabled={isSearching}>
+            {isSearching ? 'Searching' : 'Search'}
+          </button>
+          {hasFilters && (
+            <button
+              type="button"
+              disabled={isSearching}
+              onClick={() => {
+                setSearchParams(new URLSearchParams());
+                formRef.current?.reset();
+              }}
+            >
+              Clear
+            </button>
+          )}
+        </div>
+      </fieldset>
+    </form>
+  );
+}
+
+function OrderItem({order}: {order: OrderItemFragment}) {
+  const fulfillmentStatus = flattenConnection(order.fulfillments)[0]?.status;
+  return (
+    <>
+      <fieldset>
+        <Link to={`/account/orders/${btoa(order.id)}`}>
+          <strong>#{order.number}</strong>
+        </Link>
+        <p>{new Date(order.processedAt).toDateString()}</p>
+        {order.confirmationNumber && (
+          <p>Confirmation: {order.confirmationNumber}</p>
+        )}
+        <p>{order.financialStatus}</p>
+        {fulfillmentStatus && <p>{fulfillmentStatus}</p>}
+        <Money data={order.totalPrice} />
+        <Link to={`/account/orders/${btoa(order.id)}`}>View Order →</Link>
+      </fieldset>
+      <br />
+    </>
+  );
+}

package/templates/starter/app/routes/account.profile.tsx

@@ -0,0 +1,133 @@
+import type {CustomerFragment} from 'customer-accountapi.generated';
+import type {CustomerUpdateInput} from '@shopify/hydrogen/customer-account-api-types';
+import {CUSTOMER_UPDATE_MUTATION} from '~/graphql/customer-account/CustomerUpdateMutation';
+import {
+  data,
+  Form,
+  useActionData,
+  useNavigation,
+  useOutletContext,
+} from 'react-router';
+import type {Route} from './+types/account.profile';
+
+export type ActionResponse = {
+  error: string | null;
+  customer: CustomerFragment | null;
+};
+
+export const meta: Route.MetaFunction = () => {
+  return [{title: 'Profile'}];
+};
+
+export async function loader({context}: Route.LoaderArgs) {
+  context.customerAccount.handleAuthStatus();
+
+  return {};
+}
+
+export async function action({request, context}: Route.ActionArgs) {
+  const {customerAccount} = context;
+
+  if (request.method !== 'PUT') {
+    return data({error: 'Method not allowed'}, {status: 405});
+  }
+
+  const form = await request.formData();
+
+  try {
+    const customer: CustomerUpdateInput = {};
+    const validInputKeys = ['firstName', 'lastName'] as const;
+    for (const [key, value] of form.entries()) {
+      if (!validInputKeys.includes(key as any)) {
+        continue;
+      }
+      if (typeof value === 'string' && value.length) {
+        customer[key as (typeof validInputKeys)[number]] = value;
+      }
+    }
+
+    // update customer and possibly password
+    const {data, errors} = await customerAccount.mutate(
+      CUSTOMER_UPDATE_MUTATION,
+      {
+        variables: {
+          customer,
+          language: customerAccount.i18n.language,
+        },
+      },
+    );
+
+    if (errors?.length) {
+      throw new Error(errors[0].message);
+    }
+
+    if (!data?.customerUpdate?.customer) {
+      throw new Error('Customer profile update failed.');
+    }
+
+    return {
+      error: null,
+      customer: data?.customerUpdate?.customer,
+    };
+  } catch (error: any) {
+    return data(
+      {error: error.message, customer: null},
+      {
+        status: 400,
+      },
+    );
+  }
+}
+
+export default function AccountProfile() {
+  const account = useOutletContext<{customer: CustomerFragment}>();
+  const {state} = useNavigation();
+  const action = useActionData<ActionResponse>();
+  const customer = action?.customer ?? account?.customer;
+
+  return (
+    <div className="account-profile">
+      <h2>My profile</h2>
+      <br />
+      <Form method="PUT">
+        <legend>Personal information</legend>
+        <fieldset>
+          <label htmlFor="firstName">First name</label>
+          <input
+            id="firstName"
+            name="firstName"
+            type="text"
+            autoComplete="given-name"
+            placeholder="First name"
+            aria-label="First name"
+            defaultValue={customer.firstName ?? ''}
+            minLength={2}
+          />
+          <label htmlFor="lastName">Last name</label>
+          <input
+            id="lastName"
+            name="lastName"
+            type="text"
+            autoComplete="family-name"
+            placeholder="Last name"
+            aria-label="Last name"
+            defaultValue={customer.lastName ?? ''}
+            minLength={2}
+          />
+        </fieldset>
+        {action?.error ? (
+          <p>
+            <mark>
+              <small>{action.error}</small>
+            </mark>
+          </p>
+        ) : (
+          <br />
+        )}
+        <button type="submit" disabled={state !== 'idle'}>
+          {state !== 'idle' ? 'Updating' : 'Update'}
+        </button>
+      </Form>
+    </div>
+  );
+}

package/templates/starter/app/routes/account.tsx

@@ -0,0 +1,97 @@
+import {
+  data as remixData,
+  Form,
+  NavLink,
+  Outlet,
+  useLoaderData,
+} from 'react-router';
+import type {Route} from './+types/account';
+import {CUSTOMER_DETAILS_QUERY} from '~/graphql/customer-account/CustomerDetailsQuery';
+
+export function shouldRevalidate() {
+  return true;
+}
+
+export async function loader({context}: Route.LoaderArgs) {
+  const {customerAccount} = context;
+  const {data, errors} = await customerAccount.query(CUSTOMER_DETAILS_QUERY, {
+    variables: {
+      language: customerAccount.i18n.language,
+    },
+  });
+
+  if (errors?.length || !data?.customer) {
+    throw new Error('Customer not found');
+  }
+
+  return remixData(
+    {customer: data.customer},
+    {
+      headers: {
+        'Cache-Control': 'no-cache, no-store, must-revalidate',
+      },
+    },
+  );
+}
+
+export default function AccountLayout() {
+  const {customer} = useLoaderData<typeof loader>();
+
+  const heading = customer
+    ? customer.firstName
+      ? `Welcome, ${customer.firstName}`
+      : `Welcome to your account.`
+    : 'Account Details';
+
+  return (
+    <div className="account">
+      <h1>{heading}</h1>
+      <br />
+      <AccountMenu />
+      <br />
+      <br />
+      <Outlet context={{customer}} />
+    </div>
+  );
+}
+
+function AccountMenu() {
+  function isActiveStyle({
+    isActive,
+    isPending,
+  }: {
+    isActive: boolean;
+    isPending: boolean;
+  }) {
+    return {
+      fontWeight: isActive ? 'bold' : undefined,
+      color: isPending ? 'grey' : 'black',
+    };
+  }
+
+  return (
+    <nav role="navigation">
+      <NavLink to="/account/orders" style={isActiveStyle}>
+        Orders &nbsp;
+      </NavLink>
+      &nbsp;|&nbsp;
+      <NavLink to="/account/profile" style={isActiveStyle}>
+        &nbsp; Profile &nbsp;
+      </NavLink>
+      &nbsp;|&nbsp;
+      <NavLink to="/account/addresses" style={isActiveStyle}>
+        &nbsp; Addresses &nbsp;
+      </NavLink>
+      &nbsp;|&nbsp;
+      <Logout />
+    </nav>
+  );
+}
+
+function Logout() {
+  return (
+    <Form className="account-logout" method="POST" action="/account/logout">
+      &nbsp;<button type="submit">Sign out</button>
+    </Form>
+  );
+}

package/templates/starter/app/routes/account_.authorize.tsx

@@ -0,0 +1,5 @@
+import type {Route} from './+types/account_.authorize';
+
+export async function loader({context}: Route.LoaderArgs) {
+  return context.customerAccount.authorize();
+}

package/templates/starter/app/routes/account_.login.tsx

@@ -0,0 +1,7 @@
+import type {Route} from './+types/account_.login';
+
+export async function loader({request, context}: Route.LoaderArgs) {
+  return context.customerAccount.login({
+    countryCode: context.storefront.i18n.country,
+  });
+}

package/templates/starter/app/routes/account_.logout.tsx

@@ -0,0 +1,11 @@
+import {redirect} from 'react-router';
+import type {Route} from './+types/account_.logout';
+
+// if we don't implement this, /account/logout will get caught by account.$.tsx to do login
+export async function loader() {
+  return redirect('/');
+}
+
+export async function action({context}: Route.ActionArgs) {
+  return context.customerAccount.logout();
+}