@shopify/cli-hydrogen 5.0.2 → 5.1.0

package/dist/generator-templates/starter/app/routes/account.profile.tsx

@@ -0,0 +1,289 @@
+import type {CustomerFragment} from 'storefrontapi.generated';
+import type {CustomerUpdateInput} from '@shopify/hydrogen/storefront-api-types';
+import type {ActionArgs, LoaderArgs} from '@shopify/remix-oxygen';
+import {json, redirect, type V2_MetaFunction} from '@shopify/remix-oxygen';
+import {
+  Form,
+  useActionData,
+  useNavigation,
+  useOutletContext,
+} from '@remix-run/react';
+
+export type ActionResponse = {
+  error: string | null;
+  customer: CustomerFragment | null;
+};
+
+export const meta: V2_MetaFunction = () => {
+  return [{title: 'Profile'}];
+};
+
+export async function loader({context}: LoaderArgs) {
+  const customerAccessToken = await context.session.get('customerAccessToken');
+  if (!customerAccessToken) {
+    return redirect('/account/login');
+  }
+  return json({});
+}
+
+export async function action({request, context}: ActionArgs) {
+  const {session, storefront} = context;
+
+  if (request.method !== 'PUT') {
+    return json({error: 'Method not allowed'}, {status: 405});
+  }
+
+  const form = await request.formData();
+  const customerAccessToken = await session.get('customerAccessToken');
+  if (!customerAccessToken) {
+    return json({error: 'Unauthorized'}, {status: 401});
+  }
+
+  try {
+    const password = getPassword(form);
+    const customer: CustomerUpdateInput = {};
+    const validInputKeys = [
+      'firstName',
+      'lastName',
+      'email',
+      'password',
+      'phone',
+    ] as const;
+    for (const [key, value] of form.entries()) {
+      if (!validInputKeys.includes(key as any)) {
+        continue;
+      }
+      if (key === 'acceptsMarketing') {
+        customer.acceptsMarketing = value === 'on';
+      }
+      if (typeof value === 'string' && value.length) {
+        customer[key as (typeof validInputKeys)[number]] = value;
+      }
+    }
+
+    if (password) {
+      customer.password = password;
+    }
+
+    // update customer and possibly password
+    const updated = await storefront.mutate(CUSTOMER_UPDATE_MUTATION, {
+      variables: {
+        customerAccessToken: customerAccessToken.accessToken,
+        customer,
+      },
+    });
+
+    // check for mutation errors
+    if (updated.customerUpdate?.customerUserErrors?.length) {
+      return json(
+        {error: updated.customerUpdate?.customerUserErrors[0]},
+        {status: 400},
+      );
+    }
+
+    // update session with the updated access token
+    if (updated.customerUpdate?.customerAccessToken?.accessToken) {
+      session.set(
+        'customerAccessToken',
+        updated.customerUpdate?.customerAccessToken,
+      );
+    }
+
+    return json(
+      {error: null, customer: updated.customerUpdate?.customer},
+      {
+        headers: {
+          'Set-Cookie': await session.commit(),
+        },
+      },
+    );
+  } catch (error: any) {
+    return json({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}
+          />
+          <label htmlFor="phone">Mobile</label>
+          <input
+            id="phone"
+            name="phone"
+            type="tel"
+            autoComplete="tel"
+            placeholder="Mobile"
+            aria-label="Mobile"
+            defaultValue={customer.phone ?? ''}
+          />
+          <label htmlFor="email">Email address</label>
+          <input
+            id="email"
+            name="email"
+            type="email"
+            autoComplete="email"
+            required
+            placeholder="Email address"
+            aria-label="Email address"
+            defaultValue={customer.email ?? ''}
+          />
+          <div className="account-profile-marketing">
+            <input
+              id="acceptsMarketing"
+              name="acceptsMarketing"
+              type="checkbox"
+              placeholder="Accept marketing"
+              aria-label="Accept marketing"
+              defaultChecked={customer.acceptsMarketing}
+            />
+            <label htmlFor="acceptsMarketing">
+              &nbsp; Subscribed to marketing communications
+            </label>
+          </div>
+        </fieldset>
+        <br />
+        <legend>Change password (optional)</legend>
+        <fieldset>
+          <label htmlFor="currentPassword">Current password</label>
+          <input
+            id="currentPassword"
+            name="currentPassword"
+            type="password"
+            autoComplete="current-password"
+            placeholder="Current password"
+            aria-label="Current password"
+            minLength={8}
+          />
+
+          <label htmlFor="newPassword">New password</label>
+          <input
+            id="newPassword"
+            name="newPassword"
+            type="password"
+            placeholder="New password"
+            aria-label="New password"
+            minLength={8}
+          />
+
+          <label htmlFor="newPasswordConfirm">New password (confirm)</label>
+          <input
+            id="newPasswordConfirm"
+            name="newPasswordConfirm"
+            type="password"
+            placeholder="New password (confirm)"
+            aria-label="New password confirm"
+            minLength={8}
+          />
+          <small>Passwords must be at least 8 characters.</small>
+        </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>
+  );
+}
+
+function getPassword(form: FormData): string | undefined {
+  let password;
+  const currentPassword = form.get('currentPassword');
+  const newPassword = form.get('newPassword');
+  const newPasswordConfirm = form.get('newPasswordConfirm');
+
+  let passwordError;
+  if (newPassword && !currentPassword) {
+    passwordError = new Error('Current password is required.');
+  }
+
+  if (newPassword && newPassword !== newPasswordConfirm) {
+    passwordError = new Error('New passwords must match.');
+  }
+
+  if (newPassword && currentPassword && newPassword === currentPassword) {
+    passwordError = new Error(
+      'New password must be different than current password.',
+    );
+  }
+
+  if (passwordError) {
+    throw passwordError;
+  }
+
+  if (currentPassword && newPassword) {
+    password = newPassword;
+  } else {
+    password = currentPassword;
+  }
+
+  return String(password);
+}
+
+const CUSTOMER_UPDATE_MUTATION = `#graphql
+  # https://shopify.dev/docs/api/storefront/latest/mutations/customerUpdate
+  mutation customerUpdate(
+    $customerAccessToken: String!,
+    $customer: CustomerUpdateInput!
+    $country: CountryCode
+    $language: LanguageCode
+  ) @inContext(language: $language, country: $country) {
+    customerUpdate(customerAccessToken: $customerAccessToken, customer: $customer) {
+      customer {
+        acceptsMarketing
+        email
+        firstName
+        id
+        lastName
+        phone
+      }
+      customerAccessToken {
+        accessToken
+        expiresAt
+      }
+      customerUserErrors {
+        code
+        field
+        message
+      }
+    }
+  }
+` as const;

package/dist/generator-templates/starter/app/routes/account.tsx

@@ -0,0 +1,203 @@
+import {Form, NavLink, Outlet, useLoaderData} from '@remix-run/react';
+import {json, redirect, type LoaderArgs} from '@shopify/remix-oxygen';
+import type {CustomerFragment} from 'storefrontapi.generated';
+
+export function shouldRevalidate() {
+  return true;
+}
+
+export async function loader({request, context}: LoaderArgs) {
+  const {session, storefront} = context;
+  const {pathname} = new URL(request.url);
+  const customerAccessToken = await session.get('customerAccessToken');
+  const isLoggedIn = Boolean(customerAccessToken?.accessToken);
+  const isAccountHome = pathname === '/account' || pathname === '/account/';
+  const isPrivateRoute =
+    /^\/account\/(orders|orders\/.*|profile|addresses|addresses\/.*)$/.test(
+      pathname,
+    );
+
+  if (!isLoggedIn) {
+    if (isPrivateRoute || isAccountHome) {
+      session.unset('customerAccessToken');
+      return redirect('/account/login', {
+        headers: {
+          'Set-Cookie': await session.commit(),
+        },
+      });
+    } else {
+      // public subroute such as /account/login...
+      return json({
+        isLoggedIn: false,
+        isAccountHome,
+        isPrivateRoute,
+        customer: null,
+      });
+    }
+  } else {
+    // loggedIn, default redirect to the orders page
+    if (isAccountHome) {
+      return redirect('/account/orders');
+    }
+  }
+
+  try {
+    const {customer} = await storefront.query(CUSTOMER_QUERY, {
+      variables: {
+        customerAccessToken: customerAccessToken.accessToken,
+        country: storefront.i18n.country,
+        language: storefront.i18n.language,
+      },
+      cache: storefront.CacheNone(),
+    });
+
+    if (!customer) {
+      throw new Error('Customer not found');
+    }
+
+    return json(
+      {isLoggedIn, isPrivateRoute, isAccountHome, customer},
+      {
+        headers: {
+          'Cache-Control': 'no-cache, no-store, must-revalidate',
+        },
+      },
+    );
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.error('There was a problem loading account', error);
+    session.unset('customerAccessToken');
+    return redirect('/account/login', {
+      headers: {
+        'Set-Cookie': await session.commit(),
+      },
+    });
+  }
+}
+
+export default function Acccount() {
+  const {customer, isPrivateRoute, isAccountHome} =
+    useLoaderData<typeof loader>();
+
+  if (!isPrivateRoute && !isAccountHome) {
+    return <Outlet context={{customer}} />;
+  }
+
+  return (
+    <AccountLayout customer={customer as CustomerFragment}>
+      <br />
+      <br />
+      <Outlet context={{customer}} />
+    </AccountLayout>
+  );
+}
+
+function AccountLayout({
+  customer,
+  children,
+}: {
+  customer: CustomerFragment;
+  children: React.ReactNode;
+}) {
+  const heading = customer
+    ? customer.firstName
+      ? `Welcome, ${customer.firstName}`
+      : `Welcome to your account.`
+    : 'Account Details';
+
+  return (
+    <div className="account">
+      <h1>{heading}</h1>
+      <br />
+      <AcccountMenu />
+      {children}
+    </div>
+  );
+}
+
+function AcccountMenu() {
+  function isActiveStyle({
+    isActive,
+    isPending,
+  }: {
+    isActive: boolean;
+    isPending: boolean;
+  }) {
+    return {
+      fontWeight: isActive ? 'bold' : '',
+      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>
+  );
+}
+
+export const CUSTOMER_FRAGMENT = `#graphql
+  fragment Customer on Customer {
+    acceptsMarketing
+    addresses(first: 6) {
+      nodes {
+        ...Address
+      }
+    }
+    defaultAddress {
+      ...Address
+    }
+    email
+    firstName
+    lastName
+    numberOfOrders
+    phone
+  }
+  fragment Address on MailingAddress {
+    id
+    formatted
+    firstName
+    lastName
+    company
+    address1
+    address2
+    country
+    province
+    city
+    zip
+    phone
+  }
+` as const;
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/queries/customer
+const CUSTOMER_QUERY = `#graphql
+  query Customer(
+    $customerAccessToken: String!
+    $country: CountryCode
+    $language: LanguageCode
+  ) @inContext(country: $country, language: $language) {
+    customer(customerAccessToken: $customerAccessToken) {
+      ...Customer
+    }
+  }
+  ${CUSTOMER_FRAGMENT}
+` as const;

package/dist/generator-templates/starter/app/routes/account_.activate.$id.$activationToken.tsx

@@ -0,0 +1,157 @@
+import type {ActionArgs, LoaderArgs} from '@shopify/remix-oxygen';
+import {json, redirect} from '@shopify/remix-oxygen';
+import {Form, useActionData, type V2_MetaFunction} from '@remix-run/react';
+
+type ActionResponse = {
+  error: string | null;
+};
+
+export const meta: V2_MetaFunction = () => {
+  return [{title: 'Activate Account'}];
+};
+
+export async function loader({context}: LoaderArgs) {
+  if (await context.session.get('customerAccessToken')) {
+    return redirect('/account');
+  }
+  return json({});
+}
+
+export async function action({request, context, params}: ActionArgs) {
+  const {session, storefront} = context;
+  const {id, activationToken} = params;
+
+  if (request.method !== 'POST') {
+    return json({error: 'Method not allowed'}, {status: 405});
+  }
+
+  try {
+    if (!id || !activationToken) {
+      throw new Error('Missing token. The link you followed might be wrong.');
+    }
+
+    const form = await request.formData();
+    const password = form.has('password') ? String(form.get('password')) : null;
+    const passwordConfirm = form.has('passwordConfirm')
+      ? String(form.get('passwordConfirm'))
+      : null;
+
+    const validPasswords =
+      password && passwordConfirm && password === passwordConfirm;
+
+    if (!validPasswords) {
+      throw new Error('Passwords do not match');
+    }
+
+    const {customerActivate} = await storefront.mutate(
+      CUSTOMER_ACTIVATE_MUTATION,
+      {
+        variables: {
+          id: `gid://shopify/Customer/${id}`,
+          input: {
+            password,
+            activationToken,
+          },
+        },
+      },
+    );
+
+    if (customerActivate?.customerUserErrors?.length) {
+      throw new Error(customerActivate.customerUserErrors[0].message);
+    }
+
+    const {customerAccessToken} = customerActivate ?? {};
+    if (!customerAccessToken) {
+      throw new Error('Could not activate account.');
+    }
+    session.set('customerAccessToken', customerAccessToken);
+
+    return redirect('/account', {
+      headers: {
+        'Set-Cookie': await session.commit(),
+      },
+    });
+  } catch (error: unknown) {
+    if (error instanceof Error) {
+      return json({error: error.message}, {status: 400});
+    }
+    return json({error}, {status: 400});
+  }
+}
+
+export default function Activate() {
+  const action = useActionData<ActionResponse>();
+  const error = action?.error ?? null;
+
+  return (
+    <div className="account-activate">
+      <h1>Activate Account.</h1>
+      <p>Create your password to activate your account.</p>
+      <Form method="POST">
+        <fieldset>
+          <label htmlFor="password">Password</label>
+          <input
+            id="password"
+            name="password"
+            type="password"
+            autoComplete="current-password"
+            placeholder="Password"
+            aria-label="Password"
+            minLength={8}
+            required
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus
+          />
+          <label htmlFor="passwordConfirm">Re-enter password</label>
+          <input
+            id="passwordConfirm"
+            name="passwordConfirm"
+            type="password"
+            autoComplete="current-password"
+            placeholder="Re-enter password"
+            aria-label="Re-enter password"
+            minLength={8}
+            required
+          />
+        </fieldset>
+        {error ? (
+          <p>
+            <mark>
+              <small>{error}</small>
+            </mark>
+          </p>
+        ) : (
+          <br />
+        )}
+        <button
+          className="bg-primary text-contrast rounded py-2 px-4 focus:shadow-outline block w-full"
+          type="submit"
+        >
+          Save
+        </button>
+      </Form>
+    </div>
+  );
+}
+
+// NOTE: https://shopify.dev/docs/api/storefront/latest/mutations/customeractivate
+const CUSTOMER_ACTIVATE_MUTATION = `#graphql
+  mutation customerActivate(
+    $id: ID!,
+    $input: CustomerActivateInput!,
+    $country: CountryCode,
+    $language: LanguageCode
+  ) @inContext(country: $country, language: $language) {
+    customerActivate(id: $id, input: $input) {
+      customerAccessToken {
+        accessToken
+        expiresAt
+      }
+      customerUserErrors {
+        code
+        field
+        message
+      }
+    }
+  }
+` as const;