hydrogen-forge 0.1.0

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

@@ -0,0 +1,167 @@
+import {Await, useLoaderData, Link} from 'react-router';
+import type {Route} from './+types/_index';
+import {Suspense} from 'react';
+import {Image} from '@shopify/hydrogen';
+import type {
+  FeaturedCollectionFragment,
+  RecommendedProductsQuery,
+} from 'storefrontapi.generated';
+import {ProductItem} from '~/components/ProductItem';
+
+export const meta: Route.MetaFunction = () => {
+  return [{title: 'Hydrogen | Home'}];
+};
+
+export async function loader(args: Route.LoaderArgs) {
+  // Start fetching non-critical data without blocking time to first byte
+  const deferredData = loadDeferredData(args);
+
+  // Await the critical data required to render initial state of the page
+  const criticalData = await loadCriticalData(args);
+
+  return {...deferredData, ...criticalData};
+}
+
+/**
+ * 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}: Route.LoaderArgs) {
+  const [{collections}] = await Promise.all([
+    context.storefront.query(FEATURED_COLLECTION_QUERY),
+    // Add other queries here, so that they are loaded in parallel
+  ]);
+
+  return {
+    featuredCollection: collections.nodes[0],
+  };
+}
+
+/**
+ * Load data for rendering content below the fold. This data is deferred and will be
+ * 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}: Route.LoaderArgs) {
+  const recommendedProducts = context.storefront
+    .query(RECOMMENDED_PRODUCTS_QUERY)
+    .catch((error: Error) => {
+      // Log query errors, but don't throw them so the page can still render
+      console.error(error);
+      return null;
+    });
+
+  return {
+    recommendedProducts,
+  };
+}
+
+export default function Homepage() {
+  const data = useLoaderData<typeof loader>();
+  return (
+    <div className="home">
+      <FeaturedCollection collection={data.featuredCollection} />
+      <RecommendedProducts products={data.recommendedProducts} />
+    </div>
+  );
+}
+
+function FeaturedCollection({
+  collection,
+}: {
+  collection: FeaturedCollectionFragment;
+}) {
+  if (!collection) return null;
+  const image = collection?.image;
+  return (
+    <Link
+      className="featured-collection"
+      to={`/collections/${collection.handle}`}
+    >
+      {image && (
+        <div className="featured-collection-image">
+          <Image data={image} sizes="100vw" />
+        </div>
+      )}
+      <h1>{collection.title}</h1>
+    </Link>
+  );
+}
+
+function RecommendedProducts({
+  products,
+}: {
+  products: Promise<RecommendedProductsQuery | null>;
+}) {
+  return (
+    <div className="recommended-products">
+      <h2>Recommended Products</h2>
+      <Suspense fallback={<div>Loading...</div>}>
+        <Await resolve={products}>
+          {(response) => (
+            <div className="recommended-products-grid">
+              {response
+                ? response.products.nodes.map((product) => (
+                    <ProductItem key={product.id} product={product} />
+                  ))
+                : null}
+            </div>
+          )}
+        </Await>
+      </Suspense>
+      <br />
+    </div>
+  );
+}
+
+const FEATURED_COLLECTION_QUERY = `#graphql
+  fragment FeaturedCollection on Collection {
+    id
+    title
+    image {
+      id
+      url
+      altText
+      width
+      height
+    }
+    handle
+  }
+  query FeaturedCollection($country: CountryCode, $language: LanguageCode)
+    @inContext(country: $country, language: $language) {
+    collections(first: 1, sortKey: UPDATED_AT, reverse: true) {
+      nodes {
+        ...FeaturedCollection
+      }
+    }
+  }
+` as const;
+
+const RECOMMENDED_PRODUCTS_QUERY = `#graphql
+  fragment RecommendedProduct on Product {
+    id
+    title
+    handle
+    priceRange {
+      minVariantPrice {
+        amount
+        currencyCode
+      }
+    }
+    featuredImage {
+      id
+      url
+      altText
+      width
+      height
+    }
+  }
+  query RecommendedProducts ($country: CountryCode, $language: LanguageCode)
+    @inContext(country: $country, language: $language) {
+    products(first: 4, sortKey: UPDATED_AT, reverse: true) {
+      nodes {
+        ...RecommendedProduct
+      }
+    }
+  }
+` as const;

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

@@ -0,0 +1,9 @@
+import {redirect} from 'react-router';
+import type {Route} from './+types/account.$';
+
+// fallback wild card for all unauthenticated routes in account section
+export async function loader({context}: Route.LoaderArgs) {
+  context.customerAccount.handleAuthStatus();
+
+  return redirect('/account');
+}

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

@@ -0,0 +1,5 @@
+import {redirect} from 'react-router';
+
+export async function loader() {
+  return redirect('/account/orders');
+}

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

@@ -0,0 +1,516 @@
+import type {CustomerAddressInput} from '@shopify/hydrogen/customer-account-api-types';
+import type {
+  AddressFragment,
+  CustomerFragment,
+} from 'customer-accountapi.generated';
+import {
+  data,
+  Form,
+  useActionData,
+  useNavigation,
+  useOutletContext,
+  type Fetcher,
+} from 'react-router';
+import type {Route} from './+types/account.addresses';
+import {
+  UPDATE_ADDRESS_MUTATION,
+  DELETE_ADDRESS_MUTATION,
+  CREATE_ADDRESS_MUTATION,
+} from '~/graphql/customer-account/CustomerAddressMutations';
+
+export type ActionResponse = {
+  addressId?: string | null;
+  createdAddress?: AddressFragment;
+  defaultAddress?: string | null;
+  deletedAddress?: string | null;
+  error: Record<AddressFragment['id'], string> | null;
+  updatedAddress?: AddressFragment;
+};
+
+export const meta: Route.MetaFunction = () => {
+  return [{title: 'Addresses'}];
+};
+
+export async function loader({context}: Route.LoaderArgs) {
+  context.customerAccount.handleAuthStatus();
+
+  return {};
+}
+
+export async function action({request, context}: Route.ActionArgs) {
+  const {customerAccount} = context;
+
+  try {
+    const form = await request.formData();
+
+    const addressId = form.has('addressId')
+      ? String(form.get('addressId'))
+      : null;
+    if (!addressId) {
+      throw new Error('You must provide an address id.');
+    }
+
+    // this will ensure redirecting to login never happen for mutatation
+    const isLoggedIn = await customerAccount.isLoggedIn();
+    if (!isLoggedIn) {
+      return data(
+        {error: {[addressId]: 'Unauthorized'}},
+        {
+          status: 401,
+        },
+      );
+    }
+
+    const defaultAddress = form.has('defaultAddress')
+      ? String(form.get('defaultAddress')) === 'on'
+      : false;
+    const address: CustomerAddressInput = {};
+    const keys: (keyof CustomerAddressInput)[] = [
+      'address1',
+      'address2',
+      'city',
+      'company',
+      'territoryCode',
+      'firstName',
+      'lastName',
+      'phoneNumber',
+      'zoneCode',
+      'zip',
+    ];
+
+    for (const key of keys) {
+      const value = form.get(key);
+      if (typeof value === 'string') {
+        address[key] = value;
+      }
+    }
+
+    switch (request.method) {
+      case 'POST': {
+        // handle new address creation
+        try {
+          const {data, errors} = await customerAccount.mutate(
+            CREATE_ADDRESS_MUTATION,
+            {
+              variables: {
+                address,
+                defaultAddress,
+                language: customerAccount.i18n.language,
+              },
+            },
+          );
+
+          if (errors?.length) {
+            throw new Error(errors[0].message);
+          }
+
+          if (data?.customerAddressCreate?.userErrors?.length) {
+            throw new Error(data?.customerAddressCreate?.userErrors[0].message);
+          }
+
+          if (!data?.customerAddressCreate?.customerAddress) {
+            throw new Error('Customer address create failed.');
+          }
+
+          return {
+            error: null,
+            createdAddress: data?.customerAddressCreate?.customerAddress,
+            defaultAddress,
+          };
+        } catch (error: unknown) {
+          if (error instanceof Error) {
+            return data(
+              {error: {[addressId]: error.message}},
+              {
+                status: 400,
+              },
+            );
+          }
+          return data(
+            {error: {[addressId]: error}},
+            {
+              status: 400,
+            },
+          );
+        }
+      }
+
+      case 'PUT': {
+        // handle address updates
+        try {
+          const {data, errors} = await customerAccount.mutate(
+            UPDATE_ADDRESS_MUTATION,
+            {
+              variables: {
+                address,
+                addressId: decodeURIComponent(addressId),
+                defaultAddress,
+                language: customerAccount.i18n.language,
+              },
+            },
+          );
+
+          if (errors?.length) {
+            throw new Error(errors[0].message);
+          }
+
+          if (data?.customerAddressUpdate?.userErrors?.length) {
+            throw new Error(data?.customerAddressUpdate?.userErrors[0].message);
+          }
+
+          if (!data?.customerAddressUpdate?.customerAddress) {
+            throw new Error('Customer address update failed.');
+          }
+
+          return {
+            error: null,
+            updatedAddress: address,
+            defaultAddress,
+          };
+        } catch (error: unknown) {
+          if (error instanceof Error) {
+            return data(
+              {error: {[addressId]: error.message}},
+              {
+                status: 400,
+              },
+            );
+          }
+          return data(
+            {error: {[addressId]: error}},
+            {
+              status: 400,
+            },
+          );
+        }
+      }
+
+      case 'DELETE': {
+        // handles address deletion
+        try {
+          const {data, errors} = await customerAccount.mutate(
+            DELETE_ADDRESS_MUTATION,
+            {
+              variables: {
+                addressId: decodeURIComponent(addressId),
+                language: customerAccount.i18n.language,
+              },
+            },
+          );
+
+          if (errors?.length) {
+            throw new Error(errors[0].message);
+          }
+
+          if (data?.customerAddressDelete?.userErrors?.length) {
+            throw new Error(data?.customerAddressDelete?.userErrors[0].message);
+          }
+
+          if (!data?.customerAddressDelete?.deletedAddressId) {
+            throw new Error('Customer address delete failed.');
+          }
+
+          return {error: null, deletedAddress: addressId};
+        } catch (error: unknown) {
+          if (error instanceof Error) {
+            return data(
+              {error: {[addressId]: error.message}},
+              {
+                status: 400,
+              },
+            );
+          }
+          return data(
+            {error: {[addressId]: error}},
+            {
+              status: 400,
+            },
+          );
+        }
+      }
+
+      default: {
+        return data(
+          {error: {[addressId]: 'Method not allowed'}},
+          {
+            status: 405,
+          },
+        );
+      }
+    }
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      return data(
+        {error: error.message},
+        {
+          status: 400,
+        },
+      );
+    }
+    return data(
+      {error},
+      {
+        status: 400,
+      },
+    );
+  }
+}
+
+export default function Addresses() {
+  const {customer} = useOutletContext<{customer: CustomerFragment}>();
+  const {defaultAddress, addresses} = customer;
+
+  return (
+    <div className="account-addresses">
+      <h2>Addresses</h2>
+      <br />
+      {!addresses.nodes.length ? (
+        <p>You have no addresses saved.</p>
+      ) : (
+        <div>
+          <div>
+            <legend>Create address</legend>
+            <NewAddressForm />
+          </div>
+          <br />
+          <hr />
+          <br />
+          <ExistingAddresses
+            addresses={addresses}
+            defaultAddress={defaultAddress}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+function NewAddressForm() {
+  const newAddress = {
+    address1: '',
+    address2: '',
+    city: '',
+    company: '',
+    territoryCode: '',
+    firstName: '',
+    id: 'new',
+    lastName: '',
+    phoneNumber: '',
+    zoneCode: '',
+    zip: '',
+  } as CustomerAddressInput;
+
+  return (
+    <AddressForm
+      addressId={'NEW_ADDRESS_ID'}
+      address={newAddress}
+      defaultAddress={null}
+    >
+      {({stateForMethod}) => (
+        <div>
+          <button
+            disabled={stateForMethod('POST') !== 'idle'}
+            formMethod="POST"
+            type="submit"
+          >
+            {stateForMethod('POST') !== 'idle' ? 'Creating' : 'Create'}
+          </button>
+        </div>
+      )}
+    </AddressForm>
+  );
+}
+
+function ExistingAddresses({
+  addresses,
+  defaultAddress,
+}: Pick<CustomerFragment, 'addresses' | 'defaultAddress'>) {
+  return (
+    <div>
+      <legend>Existing addresses</legend>
+      {addresses.nodes.map((address) => (
+        <AddressForm
+          key={address.id}
+          addressId={address.id}
+          address={address}
+          defaultAddress={defaultAddress}
+        >
+          {({stateForMethod}) => (
+            <div>
+              <button
+                disabled={stateForMethod('PUT') !== 'idle'}
+                formMethod="PUT"
+                type="submit"
+              >
+                {stateForMethod('PUT') !== 'idle' ? 'Saving' : 'Save'}
+              </button>
+              <button
+                disabled={stateForMethod('DELETE') !== 'idle'}
+                formMethod="DELETE"
+                type="submit"
+              >
+                {stateForMethod('DELETE') !== 'idle' ? 'Deleting' : 'Delete'}
+              </button>
+            </div>
+          )}
+        </AddressForm>
+      ))}
+    </div>
+  );
+}
+
+export function AddressForm({
+  addressId,
+  address,
+  defaultAddress,
+  children,
+}: {
+  addressId: AddressFragment['id'];
+  address: CustomerAddressInput;
+  defaultAddress: CustomerFragment['defaultAddress'];
+  children: (props: {
+    stateForMethod: (method: 'PUT' | 'POST' | 'DELETE') => Fetcher['state'];
+  }) => React.ReactNode;
+}) {
+  const {state, formMethod} = useNavigation();
+  const action = useActionData<ActionResponse>();
+  const error = action?.error?.[addressId];
+  const isDefaultAddress = defaultAddress?.id === addressId;
+  return (
+    <Form id={addressId}>
+      <fieldset>
+        <input type="hidden" name="addressId" defaultValue={addressId} />
+        <label htmlFor="firstName">First name*</label>
+        <input
+          aria-label="First name"
+          autoComplete="given-name"
+          defaultValue={address?.firstName ?? ''}
+          id="firstName"
+          name="firstName"
+          placeholder="First name"
+          required
+          type="text"
+        />
+        <label htmlFor="lastName">Last name*</label>
+        <input
+          aria-label="Last name"
+          autoComplete="family-name"
+          defaultValue={address?.lastName ?? ''}
+          id="lastName"
+          name="lastName"
+          placeholder="Last name"
+          required
+          type="text"
+        />
+        <label htmlFor="company">Company</label>
+        <input
+          aria-label="Company"
+          autoComplete="organization"
+          defaultValue={address?.company ?? ''}
+          id="company"
+          name="company"
+          placeholder="Company"
+          type="text"
+        />
+        <label htmlFor="address1">Address line*</label>
+        <input
+          aria-label="Address line 1"
+          autoComplete="address-line1"
+          defaultValue={address?.address1 ?? ''}
+          id="address1"
+          name="address1"
+          placeholder="Address line 1*"
+          required
+          type="text"
+        />
+        <label htmlFor="address2">Address line 2</label>
+        <input
+          aria-label="Address line 2"
+          autoComplete="address-line2"
+          defaultValue={address?.address2 ?? ''}
+          id="address2"
+          name="address2"
+          placeholder="Address line 2"
+          type="text"
+        />
+        <label htmlFor="city">City*</label>
+        <input
+          aria-label="City"
+          autoComplete="address-level2"
+          defaultValue={address?.city ?? ''}
+          id="city"
+          name="city"
+          placeholder="City"
+          required
+          type="text"
+        />
+        <label htmlFor="zoneCode">State / Province*</label>
+        <input
+          aria-label="State/Province"
+          autoComplete="address-level1"
+          defaultValue={address?.zoneCode ?? ''}
+          id="zoneCode"
+          name="zoneCode"
+          placeholder="State / Province"
+          required
+          type="text"
+        />
+        <label htmlFor="zip">Zip / Postal Code*</label>
+        <input
+          aria-label="Zip"
+          autoComplete="postal-code"
+          defaultValue={address?.zip ?? ''}
+          id="zip"
+          name="zip"
+          placeholder="Zip / Postal Code"
+          required
+          type="text"
+        />
+        <label htmlFor="territoryCode">Country Code*</label>
+        <input
+          aria-label="territoryCode"
+          autoComplete="country"
+          defaultValue={address?.territoryCode ?? ''}
+          id="territoryCode"
+          name="territoryCode"
+          placeholder="Country"
+          required
+          type="text"
+          maxLength={2}
+        />
+        <label htmlFor="phoneNumber">Phone</label>
+        <input
+          aria-label="Phone Number"
+          autoComplete="tel"
+          defaultValue={address?.phoneNumber ?? ''}
+          id="phoneNumber"
+          name="phoneNumber"
+          placeholder="+16135551111"
+          pattern="^\+?[1-9]\d{3,14}$"
+          type="tel"
+        />
+        <div>
+          <input
+            defaultChecked={isDefaultAddress}
+            id="defaultAddress"
+            name="defaultAddress"
+            type="checkbox"
+          />
+          <label htmlFor="defaultAddress">Set as default address</label>
+        </div>
+        {error ? (
+          <p>
+            <mark>
+              <small>{error}</small>
+            </mark>
+          </p>
+        ) : (
+          <br />
+        )}
+        {children({
+          stateForMethod: (method) => (formMethod === method ? state : 'idle'),
+        })}
+      </fieldset>
+    </Form>
+  );
+}