@shopify/cli-hydrogen 3.26.0 → 4.0.0-alpha.1

package/dist/templates/demo-store/app/routes/account/__private/address/$id.tsx

@@ -0,0 +1,320 @@
+import {json, redirect, type ActionFunction} from '@shopify/remix-oxygen';
+import {
+  Form,
+  useActionData,
+  useOutletContext,
+  useParams,
+  useTransition,
+} from '@remix-run/react';
+import {flattenConnection} from '@shopify/hydrogen-react';
+import type {MailingAddressInput} from '@shopify/hydrogen-react/storefront-api-types';
+import invariant from 'tiny-invariant';
+import {Button, Text} from '~/components';
+import {
+  createCustomerAddress,
+  deleteCustomerAddress,
+  updateCustomerAddress,
+  updateCustomerDefaultAddress,
+} from '~/data';
+import {getInputStyleClasses} from '~/lib/utils';
+import type {AccountOutletContext} from '../edit';
+
+interface ActionData {
+  formError?: string;
+}
+
+const badRequest = (data: ActionData) => json(data, {status: 400});
+
+export const handle = {
+  renderInModal: true,
+};
+
+export const action: ActionFunction = async ({request, context, params}) => {
+  const formData = await request.formData();
+
+  const customerAccessToken = await context.session.get('customerAccessToken');
+  invariant(customerAccessToken, 'You must be logged in to edit your account.');
+
+  const addressId = formData.get('addressId');
+  invariant(typeof addressId === 'string', 'You must provide an address id.');
+
+  if (request.method === 'DELETE') {
+    try {
+      await deleteCustomerAddress(context, {
+        customerAccessToken,
+        addressId,
+      });
+
+      return redirect(params.lang ? `${params.lang}/account` : '/account');
+    } catch (error: any) {
+      return badRequest({formError: error.message});
+    }
+  }
+
+  const address: MailingAddressInput = {};
+
+  const keys: (keyof MailingAddressInput)[] = [
+    'lastName',
+    'firstName',
+    'address1',
+    'address2',
+    'city',
+    'province',
+    'country',
+    'zip',
+    'phone',
+    'company',
+  ];
+
+  for (const key of keys) {
+    const value = formData.get(key);
+    if (typeof value === 'string') {
+      address[key] = value;
+    }
+  }
+
+  const defaultAddress = formData.get('defaultAddress');
+
+  if (addressId === 'add') {
+    try {
+      const id = await createCustomerAddress(context, {
+        customerAccessToken,
+        address,
+      });
+
+      if (defaultAddress) {
+        await updateCustomerDefaultAddress(context, {
+          customerAccessToken,
+          addressId: id,
+        });
+      }
+
+      return redirect(params.lang ? `${params.lang}/account` : '/account');
+    } catch (error: any) {
+      return badRequest({formError: error.message});
+    }
+  } else {
+    try {
+      await updateCustomerAddress(context, {
+        customerAccessToken,
+        addressId: decodeURIComponent(addressId),
+        address,
+      });
+
+      if (defaultAddress) {
+        await updateCustomerDefaultAddress(context, {
+          customerAccessToken,
+          addressId: decodeURIComponent(addressId),
+        });
+      }
+
+      return redirect(params.lang ? `${params.lang}/account` : '/account');
+    } catch (error: any) {
+      return badRequest({formError: error.message});
+    }
+  }
+};
+
+export default function EditAddress() {
+  const {addressId} = useParams();
+  const isNewAddress = addressId === 'add';
+  const actionData = useActionData<ActionData>();
+  const transition = useTransition();
+  const {customer} = useOutletContext<AccountOutletContext>();
+  const addresses = flattenConnection(customer.addresses);
+  const defaultAddress = customer.defaultAddress;
+  /**
+   * When a refresh happens (or a user visits this link directly), the URL
+   * is actually stale because it contains a special token. This means the data
+   * loaded by the parent and passed to the outlet contains a newer, fresher token,
+   * and we don't find a match. We update the `find` logic to just perform a match
+   * on the first (permanent) part of the ID.
+   */
+  const normalizedAddress = decodeURIComponent(addressId ?? '').split('?')[0];
+  const address = addresses.find((address) =>
+    address.id!.startsWith(normalizedAddress),
+  );
+
+  return (
+    <>
+      <Text className="mt-4 mb-6" as="h3" size="lead">
+        {isNewAddress ? 'Add address' : 'Edit address'}
+      </Text>
+      <div className="max-w-lg">
+        <Form method="post">
+          <input
+            type="hidden"
+            name="addressId"
+            value={address?.id ?? addressId}
+          />
+          {actionData?.formError && (
+            <div className="flex items-center justify-center mb-6 bg-red-100 rounded">
+              <p className="m-4 text-sm text-red-900">{actionData.formError}</p>
+            </div>
+          )}
+          <div className="mt-3">
+            <input
+              className={getInputStyleClasses()}
+              id="firstName"
+              name="firstName"
+              required
+              type="text"
+              autoComplete="given-name"
+              placeholder="First name"
+              aria-label="First name"
+              defaultValue={address?.firstName ?? ''}
+            />
+          </div>
+          <div className="mt-3">
+            <input
+              className={getInputStyleClasses()}
+              id="lastName"
+              name="lastName"
+              required
+              type="text"
+              autoComplete="family-name"
+              placeholder="Last name"
+              aria-label="Last name"
+              defaultValue={address?.lastName ?? ''}
+            />
+          </div>
+          <div className="mt-3">
+            <input
+              className={getInputStyleClasses()}
+              id="company"
+              name="company"
+              type="text"
+              autoComplete="organization"
+              placeholder="Company"
+              aria-label="Company"
+              defaultValue={address?.company ?? ''}
+            />
+          </div>
+          <div className="mt-3">
+            <input
+              className={getInputStyleClasses()}
+              id="address1"
+              name="address1"
+              type="text"
+              autoComplete="address-line1"
+              placeholder="Address line 1*"
+              required
+              aria-label="Address line 1"
+              defaultValue={address?.address1 ?? ''}
+            />
+          </div>
+          <div className="mt-3">
+            <input
+              className={getInputStyleClasses()}
+              id="address2"
+              name="address2"
+              type="text"
+              autoComplete="address-line2"
+              placeholder="Address line 2"
+              aria-label="Address line 2"
+              defaultValue={address?.address2 ?? ''}
+            />
+          </div>
+          <div className="mt-3">
+            <input
+              className={getInputStyleClasses()}
+              id="city"
+              name="city"
+              type="text"
+              required
+              autoComplete="address-level2"
+              placeholder="City"
+              aria-label="City"
+              defaultValue={address?.city ?? ''}
+            />
+          </div>
+          <div className="mt-3">
+            <input
+              className={getInputStyleClasses()}
+              id="province"
+              name="province"
+              type="text"
+              autoComplete="address-level1"
+              placeholder="State / Province"
+              required
+              aria-label="State"
+              defaultValue={address?.province ?? ''}
+            />
+          </div>
+          <div className="mt-3">
+            <input
+              className={getInputStyleClasses()}
+              id="zip"
+              name="zip"
+              type="text"
+              autoComplete="postal-code"
+              placeholder="Zip / Postal Code"
+              required
+              aria-label="Zip"
+              defaultValue={address?.zip ?? ''}
+            />
+          </div>
+          <div className="mt-3">
+            <input
+              className={getInputStyleClasses()}
+              id="country"
+              name="country"
+              type="text"
+              autoComplete="country-name"
+              placeholder="Country"
+              required
+              aria-label="Country"
+              defaultValue={address?.country ?? ''}
+            />
+          </div>
+          <div className="mt-3">
+            <input
+              className={getInputStyleClasses()}
+              id="phone"
+              name="phone"
+              type="tel"
+              autoComplete="tel"
+              placeholder="Phone"
+              aria-label="Phone"
+              defaultValue={address?.phone ?? ''}
+            />
+          </div>
+          <div className="mt-4">
+            <input
+              type="checkbox"
+              name="defaultAddress"
+              id="defaultAddress"
+              defaultChecked={defaultAddress?.id === address?.id}
+              className="border-gray-500 rounded-sm cursor-pointer border-1"
+            />
+            <label
+              className="inline-block ml-2 text-sm cursor-pointer"
+              htmlFor="defaultAddress"
+            >
+              Set as default address
+            </label>
+          </div>
+          <div className="mt-8">
+            <Button
+              className="w-full rounded focus:shadow-outline"
+              type="submit"
+              variant="primary"
+              disabled={transition.state !== 'idle'}
+            >
+              {transition.state !== 'idle' ? 'Saving' : 'Save'}
+            </Button>
+          </div>
+          <div>
+            <Button
+              to=".."
+              className="w-full mt-2 rounded focus:shadow-outline"
+              variant="secondary"
+            >
+              Cancel
+            </Button>
+          </div>
+        </Form>
+      </div>
+    </>
+  );
+}

package/dist/templates/demo-store/app/routes/account/__private/edit.tsx

@@ -0,0 +1,273 @@
+import {json, redirect, type ActionFunction} from '@shopify/remix-oxygen';
+import {
+  useActionData,
+  Form,
+  useOutletContext,
+  useTransition,
+} from '@remix-run/react';
+import type {
+  Customer,
+  CustomerUpdateInput,
+} from '@shopify/hydrogen-react/storefront-api-types';
+import clsx from 'clsx';
+import invariant from 'tiny-invariant';
+import {Button, Text} from '~/components';
+import {getCustomer, updateCustomer} from '~/data';
+import {getInputStyleClasses} from '~/lib/utils';
+
+export interface AccountOutletContext {
+  customer: Customer;
+}
+
+export interface ActionData {
+  success?: boolean;
+  formError?: string;
+  fieldErrors?: {
+    firstName?: string;
+    lastName?: string;
+    email?: string;
+    phone?: string;
+    currentPassword?: string;
+    newPassword?: string;
+    newPassword2?: string;
+  };
+}
+
+const badRequest = (data: ActionData) => json(data, {status: 400});
+
+const formDataHas = (formData: FormData, key: string) => {
+  if (!formData.has(key)) return false;
+
+  const value = formData.get(key);
+  return typeof value === 'string' && value.length > 0;
+};
+
+export const handle = {
+  renderInModal: true,
+};
+
+export const action: ActionFunction = async ({request, context, params}) => {
+  const formData = await request.formData();
+
+  const customerAccessToken = await context.session.get('customerAccessToken');
+
+  invariant(
+    customerAccessToken,
+    'You must be logged in to update your account details.',
+  );
+
+  // Double-check current user is logged in.
+  // Will throw a logout redirect if not.
+  await getCustomer(context, {customerAccessToken, request});
+
+  if (
+    formDataHas(formData, 'newPassword') &&
+    !formDataHas(formData, 'currentPassword')
+  ) {
+    return badRequest({
+      fieldErrors: {
+        currentPassword:
+          'Please enter your current password before entering a new password.',
+      },
+    });
+  }
+
+  if (
+    formData.has('newPassword') &&
+    formData.get('newPassword') !== formData.get('newPassword2')
+  ) {
+    return badRequest({
+      fieldErrors: {
+        newPassword2: 'New passwords must match.',
+      },
+    });
+  }
+
+  try {
+    const customer: CustomerUpdateInput = {};
+
+    formDataHas(formData, 'firstName') &&
+      (customer.firstName = formData.get('firstName') as string);
+    formDataHas(formData, 'lastName') &&
+      (customer.lastName = formData.get('lastName') as string);
+    formDataHas(formData, 'email') &&
+      (customer.email = formData.get('email') as string);
+    formDataHas(formData, 'phone') &&
+      (customer.phone = formData.get('phone') as string);
+    formDataHas(formData, 'newPassword') &&
+      (customer.password = formData.get('newPassword') as string);
+
+    await updateCustomer(context, {customerAccessToken, customer});
+
+    return redirect(params?.lang ? `${params.lang}/account` : '/account');
+  } catch (error: any) {
+    return badRequest({formError: error.message});
+  }
+};
+
+/**
+ * Since this component is nested in `accounts/`, it is rendered in a modal via `<Outlet>` in `account.tsx`.
+ *
+ * This allows us to:
+ * - preserve URL state (`/accounts/edit` when the modal is open)
+ * - co-locate the edit action with the edit form (rather than grouped in account.tsx)
+ * - use the `useOutletContext` hook to access the customer data from the parent route (no additional data loading)
+ * - return a simple `redirect()` from this action to close the modal :mindblown: (no useState/useEffect)
+ * - use the presence of outlet data (in `account.tsx`) to open/close the modal (no useState)
+ */
+export default function AccountDetailsEdit() {
+  const actionData = useActionData<ActionData>();
+  const {customer} = useOutletContext<AccountOutletContext>();
+  const transition = useTransition();
+
+  return (
+    <>
+      <Text className="mt-4 mb-6" as="h3" size="lead">
+        Update your profile
+      </Text>
+      <Form method="post">
+        {actionData?.formError && (
+          <div className="flex items-center justify-center mb-6 bg-red-100 rounded">
+            <p className="m-4 text-sm text-red-900">{actionData.formError}</p>
+          </div>
+        )}
+        <div className="mt-3">
+          <input
+            className={getInputStyleClasses()}
+            id="firstName"
+            name="firstName"
+            type="text"
+            autoComplete="given-name"
+            placeholder="First name"
+            aria-label="First name"
+            defaultValue={customer.firstName ?? ''}
+          />
+        </div>
+        <div className="mt-3">
+          <input
+            className={getInputStyleClasses()}
+            id="lastName"
+            name="lastName"
+            type="text"
+            autoComplete="family-name"
+            placeholder="Last name"
+            aria-label="Last name"
+            defaultValue={customer.lastName ?? ''}
+          />
+        </div>
+        <div className="mt-3">
+          <input
+            className={getInputStyleClasses()}
+            id="phone"
+            name="phone"
+            type="tel"
+            autoComplete="tel"
+            placeholder="Mobile"
+            aria-label="Mobile"
+            defaultValue={customer.phone ?? ''}
+          />
+        </div>
+        <div className="mt-3">
+          <input
+            className={getInputStyleClasses(actionData?.fieldErrors?.email)}
+            id="email"
+            name="email"
+            type="email"
+            autoComplete="email"
+            required
+            placeholder="Email address"
+            aria-label="Email address"
+            defaultValue={customer.email ?? ''}
+          />
+          {actionData?.fieldErrors?.email && (
+            <p className="text-red-500 text-xs">
+              {actionData.fieldErrors.email} &nbsp;
+            </p>
+          )}
+        </div>
+        <Text className="mb-6 mt-6" as="h3" size="lead">
+          Change your password
+        </Text>
+        <Password
+          name="currentPassword"
+          label="Current password"
+          passwordError={actionData?.fieldErrors?.currentPassword}
+        />
+        {actionData?.fieldErrors?.currentPassword && (
+          <Text size="fine" className="mt-1 text-red-500">
+            {actionData.fieldErrors.currentPassword} &nbsp;
+          </Text>
+        )}
+        <Password
+          name="newPassword"
+          label="New password"
+          passwordError={actionData?.fieldErrors?.newPassword}
+        />
+        <Password
+          name="newPassword2"
+          label="Re-enter new password"
+          passwordError={actionData?.fieldErrors?.newPassword2}
+        />
+        <Text
+          size="fine"
+          color="subtle"
+          className={clsx(
+            'mt-1',
+            actionData?.fieldErrors?.newPassword && 'text-red-500',
+          )}
+        >
+          Passwords must be at least 8 characters.
+        </Text>
+        {actionData?.fieldErrors?.newPassword2 ? <br /> : null}
+        {actionData?.fieldErrors?.newPassword2 && (
+          <Text size="fine" className="mt-1 text-red-500">
+            {actionData.fieldErrors.newPassword2} &nbsp;
+          </Text>
+        )}
+        <div className="mt-6">
+          <Button
+            className="text-sm mb-2"
+            variant="primary"
+            width="full"
+            type="submit"
+            disabled={transition.state !== 'idle'}
+          >
+            {transition.state !== 'idle' ? 'Saving' : 'Save'}
+          </Button>
+        </div>
+        <div className="mb-4">
+          <Button to=".." className="text-sm" variant="secondary" width="full">
+            Cancel
+          </Button>
+        </div>
+      </Form>
+    </>
+  );
+}
+
+function Password({
+  name,
+  passwordError,
+  label,
+}: {
+  name: string;
+  passwordError?: string;
+  label: string;
+}) {
+  return (
+    <div className="mt-3">
+      <input
+        className={getInputStyleClasses(passwordError)}
+        id={name}
+        name={name}
+        type="password"
+        autoComplete={
+          name === 'currentPassword' ? 'current-password' : undefined
+        }
+        placeholder={label}
+        aria-label={label}
+        minLength={8}
+      />
+    </div>
+  );
+}

package/dist/templates/demo-store/app/routes/account/__private/logout.ts

@@ -0,0 +1,29 @@
+import {
+  redirect,
+  type ActionFunction,
+  type AppLoadContext,
+  type LoaderArgs,
+} from '@shopify/remix-oxygen';
+import {getLocaleFromRequest} from '~/lib/utils';
+
+export async function logout(request: Request, context: AppLoadContext) {
+  const {session} = context;
+  session.unset('customerAccessToken');
+
+  const {pathPrefix} = getLocaleFromRequest(request);
+
+  return redirect(`${pathPrefix}/account/login`, {
+    headers: {
+      'Set-Cookie': await session.commit(),
+    },
+  });
+}
+
+export async function loader({request}: LoaderArgs) {
+  const {pathPrefix} = getLocaleFromRequest(request);
+  return redirect(pathPrefix);
+}
+
+export const action: ActionFunction = async ({request, context}) => {
+  return logout(request, context);
+};