@shopify/create-hydrogen 4.3.13 → 5.0.0

package/dist/assets/hydrogen/starter/app/routes/account.addresses.tsx

@@ -0,0 +1,513 @@
+import type {CustomerAddressInput} from '@shopify/hydrogen/customer-account-api-types';
+import type {
+  AddressFragment,
+  CustomerFragment,
+} from 'customer-accountapi.generated';
+import {
+  json,
+  type ActionFunctionArgs,
+  type LoaderFunctionArgs,
+} from '@shopify/remix-oxygen';
+import {
+  Form,
+  useActionData,
+  useNavigation,
+  useOutletContext,
+  type MetaFunction,
+} from '@remix-run/react';
+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: MetaFunction = () => {
+  return [{title: 'Addresses'}];
+};
+
+export async function loader({context}: LoaderFunctionArgs) {
+  await context.customerAccount.handleAuthStatus();
+
+  return json({});
+}
+
+export async function action({request, context}: ActionFunctionArgs) {
+  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 json(
+        {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},
+            },
+          );
+
+          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 json({
+            error: null,
+            createdAddress: data?.customerAddressCreate?.customerAddress,
+            defaultAddress,
+          });
+        } catch (error: unknown) {
+          if (error instanceof Error) {
+            return json(
+              {error: {[addressId]: error.message}},
+              {
+                status: 400,
+              },
+            );
+          }
+          return json(
+            {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,
+              },
+            },
+          );
+
+          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 json({
+            error: null,
+            updatedAddress: address,
+            defaultAddress,
+          });
+        } catch (error: unknown) {
+          if (error instanceof Error) {
+            return json(
+              {error: {[addressId]: error.message}},
+              {
+                status: 400,
+              },
+            );
+          }
+          return json(
+            {error: {[addressId]: error}},
+            {
+              status: 400,
+            },
+          );
+        }
+      }
+
+      case 'DELETE': {
+        // handles address deletion
+        try {
+          const {data, errors} = await customerAccount.mutate(
+            DELETE_ADDRESS_MUTATION,
+            {
+              variables: {addressId: decodeURIComponent(addressId)},
+            },
+          );
+
+          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 json({error: null, deletedAddress: addressId});
+        } catch (error: unknown) {
+          if (error instanceof Error) {
+            return json(
+              {error: {[addressId]: error.message}},
+              {
+                status: 400,
+              },
+            );
+          }
+          return json(
+            {error: {[addressId]: error}},
+            {
+              status: 400,
+            },
+          );
+        }
+      }
+
+      default: {
+        return json(
+          {error: {[addressId]: 'Method not allowed'}},
+          {
+            status: 405,
+          },
+        );
+      }
+    }
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      return json(
+        {error: error.message},
+        {
+          status: 400,
+        },
+      );
+    }
+    return json(
+      {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',
+    ) => ReturnType<typeof useNavigation>['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>
+  );
+}

package/dist/assets/hydrogen/starter/app/routes/account.orders.$id.tsx

@@ -0,0 +1,195 @@
+import {json, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
+import {useLoaderData, type MetaFunction} from '@remix-run/react';
+import {Money, Image, flattenConnection} from '@shopify/hydrogen';
+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) {
+  if (!params.id) {
+    return redirect('/account/orders');
+  }
+
+  const orderId = atob(params.id);
+  const {data, errors} = await context.customerAccount.query(
+    CUSTOMER_ORDER_QUERY,
+    {
+      variables: {orderId},
+    },
+  );
+
+  if (errors?.length || !data?.order) {
+    throw new Error('Order not found');
+  }
+
+  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;
+
+  const discountValue =
+    firstDiscount?.__typename === 'MoneyV2' && firstDiscount;
+
+  const discountPercentage =
+    firstDiscount?.__typename === 'PricingPercentageValue' &&
+    firstDiscount?.percentage;
+
+  return json({
+    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>
+      <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>
+  );
+}