@shopify/cli-hydrogen 6.0.2 → 7.0.0

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

@@ -1,5 +1,6 @@
-import type {CustomerFragment} from 'storefrontapi.generated';
-import type {CustomerUpdateInput} from '@shopify/hydrogen/storefront-api-types';
+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 {
   json,
   redirect,
@@ -24,86 +25,78 @@ export const meta: MetaFunction = () => {
 };
 
 export async function loader({context}: LoaderFunctionArgs) {
-  const customerAccessToken = await context.session.get('customerAccessToken');
-  if (!customerAccessToken) {
-    return redirect('/account/login');
-  }
-  return json({});
+  await context.customerAccount.handleAuthStatus();
+
+  return json(
+    {},
+    {
+      headers: {
+        'Set-Cookie': await context.session.commit(),
+      },
+    },
+  );
 }
 
 export async function action({request, context}: ActionFunctionArgs) {
-  const {session, storefront} = context;
+  const {customerAccount} = 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;
+    const validInputKeys = ['firstName', 'lastName'] 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,
+    const {data, errors} = await customerAccount.mutate(
+      CUSTOMER_UPDATE_MUTATION,
+      {
+        variables: {
+          customer,
+        },
       },
-    });
+    );
 
-    // check for mutation errors
-    if (updated.customerUpdate?.customerUserErrors?.length) {
-      return json(
-        {error: updated.customerUpdate?.customerUserErrors[0]},
-        {status: 400},
-      );
+    if (errors?.length) {
+      throw new Error(errors[0].message);
     }
 
-    // update session with the updated access token
-    if (updated.customerUpdate?.customerAccessToken?.accessToken) {
-      session.set(
-        'customerAccessToken',
-        updated.customerUpdate?.customerAccessToken,
-      );
+    if (!data?.customerUpdate?.customer) {
+      throw new Error('Customer profile update failed.');
     }
 
     return json(
-      {error: null, customer: updated.customerUpdate?.customer},
+      {
+        error: null,
+        customer: data?.customerUpdate?.customer,
+      },
       {
         headers: {
-          'Set-Cookie': await session.commit(),
+          'Set-Cookie': await context.session.commit(),
         },
       },
     );
   } catch (error: any) {
-    return json({error: error.message, customer: null}, {status: 400});
+    return json(
+      {error: error.message, customer: null},
+      {
+        status: 400,
+        headers: {
+          'Set-Cookie': await context.session.commit(),
+        },
+      },
+    );
   }
 }
 
@@ -142,75 +135,6 @@ export default function AccountProfile() {
             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>
@@ -228,67 +152,3 @@ export default function AccountProfile() {
     </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

@@ -1,104 +1,34 @@
-import {Form, NavLink, Outlet, useLoaderData} from '@remix-run/react';
 import {json, redirect, type LoaderFunctionArgs} from '@shopify/remix-oxygen';
-import type {CustomerFragment} from 'storefrontapi.generated';
+import {Form, NavLink, Outlet, useLoaderData} from '@remix-run/react';
+import {CUSTOMER_DETAILS_QUERY} from '~/graphql/customer-account/CustomerDetailsQuery';
 
 export function shouldRevalidate() {
   return true;
 }
 
-export async function loader({request, context}: LoaderFunctionArgs) {
-  const {session, storefront} = context;
-  const {pathname} = new URL(request.url);
-  const customerAccessToken = await session.get('customerAccessToken');
-  const isLoggedIn = !!customerAccessToken?.accessToken;
-  const isAccountHome = pathname === '/account' || pathname === '/account/';
-  const isPrivateRoute =
-    /^\/account\/(orders|orders\/.*|profile|addresses|addresses\/.*)$/.test(
-      pathname,
-    );
+export async function loader({context}: LoaderFunctionArgs) {
+  const {data, errors} = await context.customerAccount.query(
+    CUSTOMER_DETAILS_QUERY,
+  );
 
-  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');
-    }
+  if (errors?.length || !data?.customer) {
+    throw new Error('Customer not found');
   }
 
-  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', {
+  return json(
+    {customer: data.customer},
+    {
       headers: {
-        'Set-Cookie': await session.commit(),
+        'Cache-Control': 'no-cache, no-store, must-revalidate',
+        'Set-Cookie': await context.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;
-}) {
+export default function AccountLayout() {
+  const {customer} = useLoaderData<typeof loader>();
+
   const heading = customer
     ? customer.firstName
       ? `Welcome, ${customer.firstName}`
@@ -110,7 +40,9 @@ function AccountLayout({
       <h1>{heading}</h1>
       <br />
       <AccountMenu />
-      {children}
+      <br />
+      <br />
+      <Outlet context={{customer}} />
     </div>
   );
 }
@@ -155,50 +87,3 @@ function Logout() {
     </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_.authorize.tsx

@@ -0,0 +1,5 @@
+import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
+
+export async function loader({context}: LoaderFunctionArgs) {
+  return context.customerAccount.authorize();
+}

package/dist/generator-templates/starter/app/routes/account_.login.tsx

@@ -1,142 +1,5 @@
-import {
-  json,
-  redirect,
-  type ActionFunctionArgs,
-  type LoaderFunctionArgs,
-} from '@shopify/remix-oxygen';
-import {Form, Link, useActionData, type MetaFunction} from '@remix-run/react';
+import type {LoaderFunctionArgs} from '@shopify/remix-oxygen';
 
-type ActionResponse = {
-  error: string | null;
-};
-
-export const meta: MetaFunction = () => {
-  return [{title: 'Login'}];
-};
-
-export async function loader({context}: LoaderFunctionArgs) {
-  if (await context.session.get('customerAccessToken')) {
-    return redirect('/account');
-  }
-  return json({});
+export async function loader({request, context}: LoaderFunctionArgs) {
+  return context.customerAccount.login();
 }
-
-export async function action({request, context}: ActionFunctionArgs) {
-  const {session, storefront} = context;
-
-  if (request.method !== 'POST') {
-    return json({error: 'Method not allowed'}, {status: 405});
-  }
-
-  try {
-    const form = await request.formData();
-    const email = String(form.has('email') ? form.get('email') : '');
-    const password = String(form.has('password') ? form.get('password') : '');
-    const validInputs = Boolean(email && password);
-
-    if (!validInputs) {
-      throw new Error('Please provide both an email and a password.');
-    }
-
-    const {customerAccessTokenCreate} = await storefront.mutate(
-      LOGIN_MUTATION,
-      {
-        variables: {
-          input: {email, password},
-        },
-      },
-    );
-
-    if (!customerAccessTokenCreate?.customerAccessToken?.accessToken) {
-      throw new Error(customerAccessTokenCreate?.customerUserErrors[0].message);
-    }
-
-    const {customerAccessToken} = customerAccessTokenCreate;
-    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 Login() {
-  const data = useActionData<ActionResponse>();
-  const error = data?.error || null;
-
-  return (
-    <div className="login">
-      <h1>Sign in.</h1>
-      <Form method="POST">
-        <fieldset>
-          <label htmlFor="email">Email address</label>
-          <input
-            id="email"
-            name="email"
-            type="email"
-            autoComplete="email"
-            required
-            placeholder="Email address"
-            aria-label="Email address"
-            // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus
-          />
-          <label htmlFor="password">Password</label>
-          <input
-            id="password"
-            name="password"
-            type="password"
-            autoComplete="current-password"
-            placeholder="Password"
-            aria-label="Password"
-            minLength={8}
-            required
-          />
-        </fieldset>
-        {error ? (
-          <p>
-            <mark>
-              <small>{error}</small>
-            </mark>
-          </p>
-        ) : (
-          <br />
-        )}
-        <button type="submit">Sign in</button>
-      </Form>
-      <br />
-      <div>
-        <p>
-          <Link to="/account/recover">Forgot password →</Link>
-        </p>
-        <p>
-          <Link to="/account/register">Register →</Link>
-        </p>
-      </div>
-    </div>
-  );
-}
-
-// NOTE: https://shopify.dev/docs/api/storefront/latest/mutations/customeraccesstokencreate
-const LOGIN_MUTATION = `#graphql
-  mutation login($input: CustomerAccessTokenCreateInput!) {
-    customerAccessTokenCreate(input: $input) {
-      customerUserErrors {
-        code
-        field
-        message
-      }
-      customerAccessToken {
-        accessToken
-        expiresAt
-      }
-    }
-  }
-` as const;

package/dist/generator-templates/starter/app/routes/account_.logout.tsx

@@ -1,29 +1,10 @@
-import {json, redirect, type ActionFunctionArgs} from '@shopify/remix-oxygen';
-import {type MetaFunction} from '@remix-run/react';
-
-export const meta: MetaFunction = () => {
-  return [{title: 'Logout'}];
-};
+import {redirect, type ActionFunctionArgs} from '@shopify/remix-oxygen';
 
+// if we dont implement this, /account/logout will get caught by account.$.tsx to do login
 export async function loader() {
-  return redirect('/account/login');
-}
-
-export async function action({request, context}: ActionFunctionArgs) {
-  const {session} = context;
-  session.unset('customerAccessToken');
-
-  if (request.method !== 'POST') {
-    return json({error: 'Method not allowed'}, {status: 405});
-  }
-
-  return redirect('/', {
-    headers: {
-      'Set-Cookie': await session.commit(),
-    },
-  });
+  return redirect('/');
 }
 
-export default function Logout() {
-  return null;
+export async function action({context}: ActionFunctionArgs) {
+  return context.customerAccount.logout();
 }

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

@@ -1,6 +1,6 @@
 import {Await, type MetaFunction} from '@remix-run/react';
 import {Suspense} from 'react';
-import type {CartQueryData} from '@shopify/hydrogen';
+import type {CartQueryDataReturn} from '@shopify/hydrogen';
 import {CartForm} from '@shopify/hydrogen';
 import {json, type ActionFunctionArgs} from '@shopify/remix-oxygen';
 import {CartMain} from '~/components/Cart';
@@ -11,11 +11,11 @@ export const meta: MetaFunction = () => {
 };
 
 export async function action({request, context}: ActionFunctionArgs) {
-  const {session, cart} = context;
+  const {cart} = context;
 
   const [formData, customerAccessToken] = await Promise.all([
     request.formData(),
-    session.get('customerAccessToken'),
+    await context.customerAccount.getAccessToken(),
   ]);
 
   const {action, inputs} = CartForm.getFormInput(formData);
@@ -25,7 +25,7 @@ export async function action({request, context}: ActionFunctionArgs) {
   }
 
   let status = 200;
-  let result: CartQueryData;
+  let result: CartQueryDataReturn;
 
   switch (action) {
     case CartForm.ACTIONS.LinesAdd:
@@ -54,7 +54,7 @@ export async function action({request, context}: ActionFunctionArgs) {
     case CartForm.ACTIONS.BuyerIdentityUpdate: {
       result = await cart.updateBuyerIdentity({
         ...inputs.buyerIdentity,
-        customerAccessToken: customerAccessToken?.accessToken,
+        customerAccessToken,
       });
       break;
     }
@@ -72,6 +72,8 @@ export async function action({request, context}: ActionFunctionArgs) {
     headers.set('Location', redirectTo);
   }
 
+  headers.append('Set-Cookie', await context.session.commit());
+
   return json(
     {
       cart: cartResult,