sync: TRAC-1236 sync integrations/b2b-makeswift with integrations/makeswift@1.9.0

.changeset/sync-makeswift-1-9-0.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-b2b-makeswift": minor
+---
+
+Pulls in changes from the `@bigcommerce/catalyst-makeswift@1.9.0` release. For more information, see the [changelog entry](https://github.com/bigcommerce/catalyst/blob/da09e6304d1467ac6193f4d5eb07107a8933e0dc/core/CHANGELOG.md#190).

core/.gitignore

@@ -54,3 +54,6 @@ build-config.json
 # OpenNext
 .open-next
 .wrangler
+
+# Catalyst CLI config
+.bigcommerce

core/app/[locale]/(default)/(faceted)/category/[slug]/page-data.ts

@@ -13,6 +13,7 @@ const CategoryPageQuery = graphql(
           entityId
           name
           path
+          defaultProductSort
           ...BreadcrumbsFragment
           seo {
             pageTitle

core/app/[locale]/(default)/(faceted)/category/[slug]/page.tsx

@@ -133,6 +133,11 @@ export default async function Category(props: Props) {
 
   const taxDisplay = settings?.tax?.plp;
 
+  const categoryDefaultSort =
+    category.defaultProductSort && category.defaultProductSort !== 'DEFAULT'
+      ? category.defaultProductSort.toLowerCase()
+      : 'featured';
+
   const streamableFacetedSearch = Streamable.from(async () => {
     const searchParams = await props.searchParams;
     const currencyCode = await getPreferredCurrencyCode();
@@ -142,12 +147,14 @@ export default async function Category(props: Props) {
       customerAccessToken,
     );
     const parsedSearchParams = loadSearchParams?.(searchParams) ?? {};
+    const sort = typeof searchParams.sort === 'string' ? searchParams.sort : categoryDefaultSort;
 
     const search = await fetchFacetedSearch(
       {
         ...searchParams,
         ...parsedSearchParams,
         category: categoryId,
+        sort,
       },
       currencyCode,
       customerAccessToken,
@@ -279,7 +286,7 @@ export default async function Category(props: Props) {
         resetFiltersLabel={t('FacetedSearch.resetFilters')}
         showCompare={productComparisonsEnabled}
         showRating={showRating}
-        sortDefaultValue="featured"
+        sortDefaultValue={categoryDefaultSort}
         sortLabel={t('SortBy.sortBy')}
         sortOptions={[
           { value: 'featured', label: t('SortBy.featuredItems') },

core/app/[locale]/(default)/(faceted)/fetch-faceted-search.ts

@@ -189,7 +189,11 @@ const getProductSearchResults = cache(
 
     const response = await client.fetch({
       document: GetProductSearchResultsQuery,
-      variables: { ...filterArgs, ...paginationArgs, currencyCode },
+      variables: {
+        ...filterArgs,
+        ...paginationArgs,
+        currencyCode,
+      },
       customerAccessToken,
       fetchOptions: customerAccessToken ? { cache: 'no-store' } : { next: { revalidate: 300 } },
     });

core/app/[locale]/(default)/(faceted)/search/page-data.ts

@@ -27,6 +27,9 @@ const SearchPageQuery = graphql(`
         tax {
           plp
         }
+        search {
+          defaultSearchProductSort
+        }
       }
     }
   }

core/app/[locale]/(default)/(faceted)/search/page.tsx

@@ -88,6 +88,8 @@ export default async function Search(props: Props) {
 
   const taxDisplay = settings?.tax?.plp;
 
+  const defaultProductSort = settings?.search.defaultSearchProductSort;
+
   const streamableFacetedSearch = Streamable.from(async () => {
     const searchParams = await props.searchParams;
     const customerAccessToken = await getSessionCustomerAccessToken();
@@ -98,11 +100,13 @@ export default async function Search(props: Props) {
       customerAccessToken,
     );
     const parsedSearchParams = loadSearchParams?.(searchParams) ?? {};
+    const sort = typeof searchParams.sort === 'string' ? searchParams.sort : defaultProductSort;
 
     const search = await fetchFacetedSearch(
       {
         ...searchParams,
         ...parsedSearchParams,
+        sort,
       },
       currencyCode,
       customerAccessToken,
@@ -261,7 +265,7 @@ export default async function Search(props: Props) {
       resetFiltersLabel={t('FacetedSearch.resetFilters')}
       showCompare={productComparisonsEnabled}
       showRating={showRating}
-      sortDefaultValue="featured"
+      sortDefaultValue={defaultProductSort?.toLowerCase() ?? 'featured'}
       sortLabel={t('SortBy.sortBy')}
       sortOptions={[
         { value: 'featured', label: t('SortBy.featuredItems') },

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

@@ -5,11 +5,12 @@ import { parseWithZod } from '@conform-to/zod';
 import { revalidateTag } from 'next/cache';
 import { getTranslations } from 'next-intl/server';
 
+import { Field, FieldGroup } from '@/vibes/soul/form/dynamic-form/schema';
 import { updateAccountSchema } from '@/vibes/soul/sections/account-settings/schema';
-import { UpdateAccountAction } from '@/vibes/soul/sections/account-settings/update-account-form';
+import { State } from '@/vibes/soul/sections/account-settings/update-account-form';
 import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
-import { graphql } from '~/client/graphql';
+import { graphql, VariablesOf } from '~/client/graphql';
 import { TAGS } from '~/client/tags';
 
 const UpdateCustomerMutation = graphql(`
@@ -19,6 +20,8 @@ const UpdateCustomerMutation = graphql(`
         customer {
           firstName
           lastName
+          email
+          company
         }
         errors {
           __typename
@@ -43,11 +46,81 @@ const UpdateCustomerMutation = graphql(`
   }
 `);
 
-export const updateCustomer: UpdateAccountAction = async (prevState, formData) => {
+type FormFieldsInput = NonNullable<
+  VariablesOf<typeof UpdateCustomerMutation>['input']['formFields']
+>;
+
+/*
+ * BigCommerce re-validates every required custom customer field on every updateCustomer call,
+ * even ones already satisfied by a prior save (see issue #3074) - so any required custom field
+ * rendered in the form must always be resent here, not just the ones the user actually changed.
+ */
+function buildFormFieldsInput(
+  fields: Array<Field | FieldGroup<Field>>,
+  value: Record<string, unknown>,
+): FormFieldsInput {
+  const flatFields = fields.flatMap((field) => (Array.isArray(field) ? field : [field]));
+
+  return {
+    checkboxes: flatFields
+      .filter((field) => field.type === 'checkbox-group')
+      .filter((field) => Boolean(value[field.name]))
+      .map((field) => {
+        const rawValue = value[field.name];
+        const rawValues = Array.isArray(rawValue) ? rawValue : [rawValue];
+
+        return {
+          fieldEntityId: Number(field.id),
+          fieldValueEntityIds: rawValues.map(Number),
+        };
+      }),
+    multipleChoices: flatFields
+      .filter((field) => ['radio-group', 'button-radio-group', 'select'].includes(field.type))
+      .filter((field) => Boolean(value[field.name]))
+      .map((field) => ({
+        fieldEntityId: Number(field.id),
+        fieldValueEntityId: Number(value[field.name]),
+      })),
+    numbers: flatFields
+      .filter((field) => field.type === 'number')
+      .filter((field) => Boolean(value[field.name]))
+      .map((field) => ({
+        fieldEntityId: Number(field.id),
+        number: Number(value[field.name]),
+      })),
+    dates: flatFields
+      .filter((field) => field.type === 'date')
+      .filter((field) => Boolean(value[field.name]))
+      .map((field) => ({
+        fieldEntityId: Number(field.id),
+        date: new Date(String(value[field.name])).toISOString(),
+      })),
+    multilineTexts: flatFields
+      .filter((field) => field.type === 'textarea')
+      .filter((field) => Boolean(value[field.name]))
+      .map((field) => ({
+        fieldEntityId: Number(field.id),
+        multilineText: String(value[field.name]),
+      })),
+    texts: flatFields
+      .filter((field) => field.type === 'text' || field.type === 'email')
+      .filter((field) => Boolean(value[field.name]))
+      .map((field) => ({
+        fieldEntityId: Number(field.id),
+        text: String(value[field.name]),
+      })),
+  };
+}
+
+export async function updateCustomer(
+  { fields }: { fields: Array<Field | FieldGroup<Field>> },
+  prevState: Awaited<State>,
+  formData: FormData,
+): Promise<State> {
   const t = await getTranslations('Account.Settings');
   const customerAccessToken = await getSessionCustomerAccessToken();
 
-  const submission = parseWithZod(formData, { schema: updateAccountSchema });
+  const submission = parseWithZod(formData, { schema: updateAccountSchema(fields) });
 
   if (submission.status !== 'success') {
     return {
@@ -56,12 +129,20 @@ export const updateCustomer: UpdateAccountAction = async (prevState, formData) =
     };
   }
 
+  const { firstName, lastName, email, company, ...customFieldValues } = submission.value;
+
   try {
     const response = await client.fetch({
       document: UpdateCustomerMutation,
       customerAccessToken,
       variables: {
-        input: submission.value,
+        input: {
+          firstName,
+          lastName,
+          email,
+          company,
+          formFields: buildFormFieldsInput(fields, customFieldValues),
+        },
       },
       fetchOptions: { cache: 'no-store' },
     });
@@ -107,4 +188,4 @@ export const updateCustomer: UpdateAccountAction = async (prevState, formData) =
       lastResult: submission.reply({ formErrors: [t('somethingWentWrong')] }),
     };
   }
-};
+}

core/app/[locale]/(default)/account/settings/page-data.tsx

@@ -4,7 +4,10 @@ import { getSessionCustomerAccessToken } from '~/auth';
 import { client } from '~/client';
 import { graphql, VariablesOf } from '~/client/graphql';
 import { TAGS } from '~/client/tags';
-import { FormFieldsFragment } from '~/data-transformers/form-field-transformer/fragment';
+import {
+  FormFieldsFragment,
+  FormFieldValuesFragment,
+} from '~/data-transformers/form-field-transformer/fragment';
 
 const AccountSettingsQuery = graphql(
   `
@@ -21,6 +24,9 @@ const AccountSettingsQuery = graphql(
         lastName
         company
         isSubscribedToNewsletter
+        formFields {
+          ...FormFieldValuesFragment
+        }
       }
       site {
         settings {
@@ -50,7 +56,7 @@ const AccountSettingsQuery = graphql(
       }
     }
   `,
-  [FormFieldsFragment],
+  [FormFieldsFragment, FormFieldValuesFragment],
 );
 
 type Variables = VariablesOf<typeof AccountSettingsQuery>;
@@ -96,6 +102,7 @@ export const getAccountSettingsQuery = cache(async ({ address, customer }: Props
   return {
     addressFields,
     customerFields,
+    customerFormFieldValues: customerInfo.formFields,
     customerInfo,
     newsletterSettings,
     passwordComplexitySettings,

core/app/[locale]/(default)/account/settings/page.tsx

@@ -3,13 +3,49 @@ import { Metadata } from 'next';
 import { notFound } from 'next/navigation';
 import { getTranslations, setRequestLocale } from 'next-intl/server';
 
+import { Field } from '@/vibes/soul/form/dynamic-form/schema';
 import { AccountSettingsSection } from '@/vibes/soul/sections/account-settings';
+import { formFieldTransformer } from '~/data-transformers/form-field-transformer';
+import {
+  ACCOUNT_SETTINGS_FIELDS_TO_EXCLUDE,
+  mapFormFieldValueToName,
+} from '~/data-transformers/form-field-transformer/utils';
+import { exists } from '~/lib/utils';
 
 import { changePassword } from './_actions/change-password';
 import { updateCustomer } from './_actions/update-customer';
 import { updateNewsletterSubscription } from './_actions/update-newsletter-subscription';
 import { getAccountSettingsQuery } from './page-data';
 
+function withDefaultValue(field: Field, value: unknown): Field {
+  if (field.type === 'checkbox-group') {
+    return { ...field, defaultValue: Array.isArray(value) ? value.map(String) : undefined };
+  }
+
+  if (typeof value !== 'string') {
+    return field;
+  }
+
+  switch (field.type) {
+    case 'radio-group':
+    case 'select':
+    case 'swatch-radio-group':
+    case 'card-radio-group':
+    case 'button-radio-group':
+    case 'checkbox':
+    case 'number':
+    case 'text':
+    case 'textarea':
+    case 'date':
+    case 'email':
+    case 'hidden':
+      return { ...field, defaultValue: value };
+
+    default:
+      return field;
+  }
+}
+
 interface Props {
   params: Promise<{ locale: string }>;
 }
@@ -47,6 +83,21 @@ export default async function Settings({ params }: Props) {
     },
   );
 
+  const customFieldValues = accountSettings.customerFormFieldValues.reduce<Record<string, unknown>>(
+    (acc, field) => ({ ...acc, ...mapFormFieldValueToName(field) }),
+    {},
+  );
+
+  const updateAccountCustomFields = accountSettings.customerFields
+    .filter((field) => !ACCOUNT_SETTINGS_FIELDS_TO_EXCLUDE.includes(field.entityId))
+    .map(formFieldTransformer)
+    .filter(exists)
+    .map((field) => withDefaultValue(field, customFieldValues[field.name]));
+
+  const updateCustomerWithFields = updateCustomer.bind(null, {
+    fields: updateAccountCustomFields,
+  });
+
   return (
     <AccountSettingsSection
       account={accountSettings.customerInfo}
@@ -63,7 +114,8 @@ export default async function Settings({ params }: Props) {
       newsletterSubscriptionTitle={t('NewsletterSubscription.title')}
       passwordComplexitySettings={accountSettings.passwordComplexitySettings}
       title={t('title')}
-      updateAccountAction={updateCustomer}
+      updateAccountAction={updateCustomerWithFields}
+      updateAccountCustomFields={updateAccountCustomFields}
       updateAccountSubmitLabel={t('cta')}
       updateNewsletterSubscriptionAction={updateNewsletterSubscriptionActionWithCustomerInfo}
     />