feat(core): add update customer form

.changeset/calm-rivers-admire.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": minor
+---
+
+add update customer form

core/app/[locale]/(default)/account/[tab]/_components/addresses-content/index.tsx

@@ -3,7 +3,6 @@ import { getLocale, getTranslations } from 'next-intl/server';
 import { getCustomerAddresses } from '~/client/queries/get-customer-addresses';
 
 import { Pagination } from '../../../../(faceted)/_components/pagination';
-import { TabType } from '../../layout';
 import { TabHeading } from '../tab-heading';
 
 import { AddressBook } from './address-book';
@@ -16,15 +15,13 @@ interface Props {
   addressesCount: number;
   customerAction?: 'add-new-address';
   pageInfo: CustomerAddresses['pageInfo'];
-  title: TabType;
 }
 
 export const AddressesContent = async ({
   addresses,
   addressesCount,
   customerAction,
   pageInfo,
-  title,
 }: Props) => {
   const locale = await getLocale();
   const t = await getTranslations({ locale, namespace: 'Account.Home' });
@@ -42,7 +39,7 @@ export const AddressesContent = async ({
 
   return (
     <>
-      <TabHeading heading={title} locale={locale} />
+      <TabHeading heading="addresses" />
       <AddressBook addressesCount={addressesCount} customerAddresses={addresses} key={endCursor} />
       <Pagination
         endCursor={endCursor}

core/app/[locale]/(default)/account/[tab]/_components/settings-content.tsx

@@ -1,30 +1,38 @@
 import { NextIntlClientProvider } from 'next-intl';
 import { getLocale, getMessages } from 'next-intl/server';
 
-import { TabType } from '../layout';
+import { getCustomerSettingsQuery } from '../page-data';
 
 import { ChangePasswordForm } from './change-password-form';
 import { TabHeading } from './tab-heading';
+import { UpdateSettingsForm } from './update-settings-form';
 
 interface Props {
-  title: TabType;
   action?: string | string[];
+  customerSettings: CustomerSettings;
 }
 
-export const SettingsContent = async ({ title, action }: Props) => {
+type CustomerSettings = NonNullable<Awaited<ReturnType<typeof getCustomerSettingsQuery>>>;
+
+export const SettingsContent = async ({ action, customerSettings }: Props) => {
   const locale = await getLocale();
   const messages = await getMessages({ locale });
 
-  if (action === 'change-password') {
+  if (action === 'change_password') {
     return (
       <div className="mx-auto lg:w-2/3">
-        <TabHeading heading={action} locale={locale} />
+        <TabHeading heading={action} />
         <NextIntlClientProvider locale={locale} messages={{ Account: messages.Account ?? {} }}>
           <ChangePasswordForm />
         </NextIntlClientProvider>
       </div>
     );
   }
 
-  return <TabHeading heading={title} locale={locale} />;
+  return (
+    <div className="mx-auto lg:w-2/3">
+      <TabHeading heading="settings" />
+      <UpdateSettingsForm {...customerSettings} />
+    </div>
+  );
 };

core/app/[locale]/(default)/account/[tab]/_components/tab-heading.tsx

@@ -1,17 +1,12 @@
-import { getTranslations } from 'next-intl/server';
+import { getLocale, getTranslations } from 'next-intl/server';
 
 import { TabType } from '../layout';
 
-export const TabHeading = async ({
-  heading,
-  locale,
-}: {
-  heading: TabType | 'change-password';
-  locale: string;
-}) => {
+export const TabHeading = async ({ heading }: { heading: TabType | 'change_password' }) => {
+  const locale = await getLocale();
   const t = await getTranslations({ locale, namespace: 'Account.Home' });
   const tab = heading === 'recently-viewed' ? 'recentlyViewed' : heading;
-  const title = tab === 'change-password' ? 'changePassword' : tab;
+  const title = tab === 'change_password' ? 'changePassword' : tab;
 
   return <h2 className="mb-8 text-3xl font-black lg:text-4xl">{t(title)}</h2>;
 };

core/app/[locale]/(default)/account/[tab]/_components/update-settings-form/_actions/update-customer.ts

@@ -0,0 +1,36 @@
+'use server';
+
+import { updateCustomer as updateCustomerClient } from '~/client/mutations/update-customer';
+
+interface UpdateCustomerForm {
+  formData: FormData;
+  reCaptchaToken?: string;
+}
+
+export const updateCustomer = async ({ formData, reCaptchaToken }: UpdateCustomerForm) => {
+  formData.delete('g-recaptcha-response');
+
+  const formFields = Object.fromEntries(formData.entries());
+
+  const response = await updateCustomerClient({ formFields, reCaptchaToken });
+
+  if (response.errors.length === 0) {
+    const { customer } = response;
+
+    if (!customer) {
+      return {
+        status: 'error',
+        error: 'Customer does not exist',
+      };
+    }
+
+    const { firstName, lastName } = customer;
+
+    return { status: 'success', data: { firstName, lastName } };
+  }
+
+  return {
+    status: 'error',
+    error: response.errors.map((error) => error.message).join('\n'),
+  };
+};

core/app/[locale]/(default)/account/[tab]/_components/update-settings-form/fields/text.tsx

@@ -0,0 +1,58 @@
+import { useTranslations } from 'next-intl';
+import { ChangeEvent } from 'react';
+
+import { Field, FieldControl, FieldLabel, FieldMessage } from '~/components/ui/form';
+import { Input } from '~/components/ui/input';
+
+import { FieldNameToFieldId } from '..';
+
+interface TextProps {
+  defaultValue?: string;
+  entityId: number;
+  isRequired?: boolean;
+  isValid?: boolean;
+  label: string;
+  onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+  type?: 'text' | 'email';
+}
+
+export const Text = ({
+  defaultValue,
+  entityId,
+  isRequired = false,
+  isValid,
+  label,
+  onChange,
+  type = 'text',
+}: TextProps) => {
+  const t = useTranslations('Account.Settings.validationMessages');
+  const fieldName = FieldNameToFieldId[entityId];
+  const name = fieldName ?? `field-${entityId}`;
+
+  return (
+    <Field className="relative space-y-2 pb-7" name={name}>
+      <FieldLabel htmlFor={name} isRequired={isRequired}>
+        {label}
+      </FieldLabel>
+      <FieldControl asChild>
+        <Input
+          defaultValue={defaultValue}
+          id={`field-${entityId}`}
+          onChange={isRequired ? onChange : undefined}
+          onInvalid={isRequired ? onChange : undefined}
+          required={isRequired}
+          type={type}
+          variant={isValid === false ? 'error' : undefined}
+        />
+      </FieldControl>
+      {isRequired && (
+        <FieldMessage
+          className="absolute inset-x-0 bottom-0 inline-flex w-full text-xs font-normal text-error-secondary"
+          match="valueMissing"
+        >
+          {t(fieldName ?? 'empty')}
+        </FieldMessage>
+      )}
+    </Field>
+  );
+};