@vtex/faststore-plugin-buyer-portal 1.3.40 → 1.3.42

package/src/features/addresses/components/CreateAddressSettingsDrawer/CreateAddressSettingsDrawer.tsx

@@ -7,11 +7,14 @@ import { useUI, Skeleton } from "@faststore/ui";
 import {
   type BasicDrawerProps,
   AutocompleteDropdown,
-  BasicDrawer,
+  DEFAULT_LIST_TYPE_OPTIONS,
   Icon,
+  ListTypeOption,
+  SettingsDrawer,
 } from "../../../shared/components";
 import { OptionSelected } from "../../../shared/components/OptionSelected/OptionSelected";
 import { SearchHighlight } from "../../../shared/components/SearchHighlight/SearchHighlight";
+import { useSetScopeConfig, SCOPE_KEYS } from "../../../shared/hooks";
 import { ADDRESS_MESSAGES } from "../../constants/messages";
 import { useDebouncedSearchAddressByUnitId } from "../../hooks/useDebouncedSearchAddressByUnitId";
 import { useGetDefaultAddress } from "../../hooks/useGetDefaultAddresses";
@@ -28,14 +31,27 @@ export type CreateAddressSettingsDrawerProps = Omit<
   onUpdate?: () => void;
 };
 
+export const ADDRESS_LIST_TYPE_OPTIONS: ListTypeOption[] = [
+  {
+    ...DEFAULT_LIST_TYPE_OPTIONS[0],
+    description: "Manage a unique list of addresses for this organization.",
+  },
+  {
+    ...DEFAULT_LIST_TYPE_OPTIONS[1],
+    description:
+      "Use the shared list of addresses defined by the contract. Updates are automatic.",
+  },
+];
+
 export const CreateAddressSettingsDrawer = ({
   close,
   onUpdate,
-  ...props
+  ...otherProps
 }: CreateAddressSettingsDrawerProps) => {
   const { pushToast } = useUI();
   const router = useRouter();
 
+  const [listType, setListType] = useState<"sync" | "custom">("custom");
   const [searchValue, setSearchValue] = useState("");
   const [activeField, setActiveField] = useState<"Shipping" | "Billing" | null>(
     "Shipping"
@@ -103,6 +119,21 @@ export const CreateAddressSettingsDrawer = ({
       },
     });
 
+  const { setScopeConfig, isSetScopeConfigLoading } = useSetScopeConfig({
+    onSuccess: () => {
+      pushToast({
+        message: "Scope configuration updated successfully",
+        status: "INFO",
+      });
+    },
+    onError: () => {
+      pushToast({
+        message: "Failed to update scope configuration",
+        status: "ERROR",
+      });
+    },
+  });
+
   const isConfirmButtonEnabled = Boolean(
     shippingAddress?.id || billingAddress?.id
   );
@@ -125,6 +156,15 @@ export const CreateAddressSettingsDrawer = ({
   }
 
   const handleConfirmClick = () => {
+    // Update scope config if listType changed
+    setScopeConfig({
+      customerId: router.query.contractId as string,
+      unitId: router.query.orgUnitId as string,
+      scopeName: SCOPE_KEYS.ADDRESSES,
+      type: listType,
+    });
+
+    // Set default addresses
     setDefaultAddresses({
       orgUnitId: router.query.orgUnitId as string,
       customerId: router.query.contractId as string,
@@ -133,16 +173,29 @@ export const CreateAddressSettingsDrawer = ({
   };
 
   return (
-    <BasicDrawer
-      data-fs-bp-create-address-settings-drawer
+    <SettingsDrawer
+      title="Address settings"
+      {...otherProps}
       close={close}
-      {...props}
+      onPrimaryAction={handleConfirmClick}
+      isPrimaryButtonLoading={
+        isSetDefaultAddressesLoading || isSetScopeConfigLoading
+      }
+      isPrimaryButtonDisabled={!isConfirmButtonEnabled}
+      scopeName={SCOPE_KEYS.ADDRESSES}
+      onDismiss={close}
+      data-fs-bp-create-address-settings-drawer
     >
-      <BasicDrawer.Heading title="Address settings" onClose={close} />
+      <SettingsDrawer.ListType
+        title="List type"
+        name="listType"
+        value={listType}
+        onChange={setListType}
+        options={ADDRESS_LIST_TYPE_OPTIONS}
+      />
 
-      <BasicDrawer.Body>
-        <h3>Default addresses</h3>
-        <h4>Select the default addresses for this unit</h4>
+      <div data-fs-bp-default-addresses-section>
+        <h4 data-fs-bp-default-addresses-title>Default addresses</h4>
 
         <p data-fs-bp-default-address-label>
           Default shipping address (optional)
@@ -248,21 +301,7 @@ export const CreateAddressSettingsDrawer = ({
             )}
           />
         )}
-      </BasicDrawer.Body>
-
-      <BasicDrawer.Footer>
-        <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
-        </BasicDrawer.Button>
-        <BasicDrawer.Button
-          variant="confirm"
-          disabled={!isConfirmButtonEnabled}
-          onClick={handleConfirmClick}
-          isLoading={isSetDefaultAddressesLoading}
-        >
-          Save
-        </BasicDrawer.Button>
-      </BasicDrawer.Footer>
-    </BasicDrawer>
+      </div>
+    </SettingsDrawer>
   );
 };

package/src/features/addresses/components/CreateAddressSettingsDrawer/create-address-settings-drawer.scss

@@ -1,9 +1,10 @@
-@import "../../../shared/components/BasicDrawer/basic-drawer.scss";
+@import "../../../shared/components/SettingsDrawer/settings-drawer.scss";
 
 [data-fs-bp-create-address-settings-drawer] {
   @import "../../../shared/components/InputText/input-text.scss";
   @import "../../../shared/components/ErrorMessage/error-message.scss";
   @import "../../../shared/components/SearchHighlight/search-highlight.scss";
+
   @import "../ExistingAddress/existing-address.scss";
   @import "../LocationForm/location-form.scss";
   @import "../RecipientsForm/recipients-form.scss";
@@ -12,33 +13,32 @@
   @import "@faststore/ui/src/components/atoms/Button/styles.scss";
   @import "@faststore/ui/src/components/molecules/Alert/styles.scss";
 
-  [data-fs-bp-basic-drawer-body] {
+  [data-fs-bp-settings-drawer-body] {
     padding-bottom: 90px;
 
-    h3 {
-      font-weight: var(--fs-text-weight-semibold);
-      font-size: var(--fs-text-size-2);
-      line-height: var(--fs-spacing-4);
-      margin-top: var(--fs-spacing-6);
-
-      &:first-of-type {
+    [data-fs-bp-default-addresses-section] {
+      [data-fs-bp-default-addresses-title] {
+        font-weight: var(--fs-text-weight-semibold);
+        font-size: var(--fs-text-size-1);
+        line-height: 1.25rem;
+        letter-spacing: -0.01em;
+        margin-bottom: var(--fs-spacing-4);
         margin-top: 0;
+        color: #000000;
       }
-    }
 
-    h4 {
-      font-weight: var(--fs-text-weight-regular);
-      font-size: var(--fs-text-size-1);
-      line-height: calc(var(--fs-spacing-0) + var(--fs-spacing-3));
-      margin-bottom: calc(var(--fs-spacing-0) + var(--fs-spacing-3));
-    }
+      [data-fs-bp-default-address-label] {
+        font-weight: var(--fs-text-weight-regular);
+        font-size: var(--fs-text-size-1);
+        line-height: 1.5;
+        color: #1f1f1f;
+        margin-bottom: var(--fs-spacing-1);
+        margin-top: var(--fs-spacing-4);
 
-    [data-fs-bp-default-address-label] {
-      font-weight: var(--fs-text-weight-regular);
-      font-size: var(--fs-text-size-0);
-      line-height: calc(var(--fs-spacing-0) + var(--fs-spacing-3));
-      color: #1f1f1f;
-      margin-bottom: var(--fs-spacing-0);
+        &:first-of-type {
+          margin-top: 0;
+        }
+      }
     }
   }
 

package/src/features/addresses/services/default-values/get-default-address.service.ts

@@ -13,7 +13,7 @@ const mapDefaultAddressToAddressData = (
   response: DefaultAddressResponse
 ): AddressData => {
   return {
-    id: response.userId || "",
+    id: response.id,
     name: response.addressLabel,
     types: [response.addressType],
     isActive: response.isActive,

package/src/features/addresses/types/AddressData.ts

@@ -184,4 +184,5 @@ export type DefaultAddressResponse = Pick<
     geoCoordinate: string | null;
     isActive: boolean;
     userId?: string;
+    id: string;
   };

package/src/features/payment-methods/layouts/PaymentMethodsLayout/PaymentMethodsLayout.tsx

@@ -45,7 +45,7 @@ export const PaymentMethodsLayout = ({
     setSelectedMethod(undefined);
   });
 
-  const isLastPage = data.paging.pages === page || data.paging.pages === 0;
+  const isLastPage = data.paging?.pages === page || data.paging?.pages === 0;
 
   const {
     isLoading,
@@ -171,9 +171,9 @@ export const PaymentMethodsLayout = ({
               textSearch={setSearchTerm}
             />
             <Paginator.Counter
-              total={data.paging.total}
+              total={data.paging?.total ?? 0}
               itemsLength={
-                isLastPage ? data.paging.total : page * data.paging.perPage
+                isLastPage ? data.paging?.total : page * data.paging?.perPage
               }
             />
           </div>
@@ -182,7 +182,7 @@ export const PaymentMethodsLayout = ({
 
           {!isLoading && paymentMethods.length > 0 && (
             <div data-fs-bp-payment-methods-paginator>
-              {data.paging.page > 1 ? (
+              {(data.paging?.page ?? 1) > 1 ? (
                 <Paginator.NextPageButton
                   onClick={decreasePage}
                   disabled={isLoading}
@@ -204,9 +204,11 @@ export const PaymentMethodsLayout = ({
               )}
 
               <Paginator.Counter
-                total={data.paging.total}
+                total={data.paging?.total ?? 0}
                 itemsLength={
-                  isLastPage ? data.paging.total : page * data.paging.perPage
+                  isLastPage
+                    ? data.paging?.total ?? 0
+                    : page * (data.paging?.perPage ?? 0)
                 }
               />
             </div>

package/src/features/shared/clients/ScopeClient.ts

@@ -1,4 +1,4 @@
-import { getApiUrl } from "../../shared/utils";
+import { getApiUrl, SCOPE_KEYS } from "../../shared/utils";
 
 import { Client } from "./Client";
 
@@ -32,8 +32,44 @@ export default class ScopeClient extends Client {
       }
     );
   }
+
+  getScopeConfig(
+    customerId: string,
+    unitId: string,
+    scopeName: string,
+    cookie: string
+  ) {
+    return this.get<{ type: "sync" | "custom" }>(
+      `customers/${customerId}/units/${unitId}/scopes/configs`,
+      {
+        params: { scopeName },
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
+
+  setScopeConfig(
+    customerId: string,
+    unitId: string,
+    scopeName: string,
+    type: "sync" | "custom",
+    cookie: string
+  ) {
+    return this.post<{ message: string }, { type: "sync" | "custom" }>(
+      `customers/${customerId}/units/${unitId}/scopes/configs`,
+      { type },
+      {
+        params: { scopeName },
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
 }
 
 const scopesClient = new ScopeClient();
 
-export { scopesClient };
+export { scopesClient, SCOPE_KEYS };

package/src/features/shared/components/Error/Error.tsx

@@ -1,4 +1,4 @@
-// import { isDevelopment } from "../../utils/environment";
+import { isDevelopment } from "../../utils/environment";
 import { Icon } from "../Icon";
 
 export type ErrorProps = {
@@ -20,18 +20,20 @@ export default function Error({ error }: ErrorProps) {
       <button data-fs-bp-error-button onClick={() => window.location.reload()}>
         Try again
       </button>
-      <div data-fs-bp-error-details>
-        <span data-fs-bp-error-details-type>{error?.tags?.errorType}</span>
-        <h2 data-fs-bp-error-details-title>Error Details</h2>
-        <p data-fs-bp-error-details-message>{error?.error.message}</p>
-        <p data-fs-bp-error-details-stack>Stack: {error?.error.stack}</p>
-        <p data-fs-bp-error-details-component>
-          Component: {error?.tags?.component}
-        </p>
-        <p data-fs-bp-error-details-query>
-          Query: {JSON.stringify(error?.query)}
-        </p>
-      </div>
+      {isDevelopment() && (
+        <div data-fs-bp-error-details>
+          <span data-fs-bp-error-details-type>{error?.tags?.errorType}</span>
+          <h2 data-fs-bp-error-details-title>Error Details</h2>
+          <p data-fs-bp-error-details-message>{error?.error.message}</p>
+          <p data-fs-bp-error-details-stack>Stack: {error?.error.stack}</p>
+          <p data-fs-bp-error-details-component>
+            Component: {error?.tags?.component}
+          </p>
+          <p data-fs-bp-error-details-query>
+            Query: {JSON.stringify(error?.query)}
+          </p>
+        </div>
+      )}
     </div>
   );
 }

package/src/features/shared/components/SettingsDrawer/SettingsDrawer.tsx

@@ -0,0 +1,106 @@
+import React from "react";
+
+import { useBuyerPortal } from "../../hooks";
+import { BasicDrawer, type BasicDrawerProps } from "../BasicDrawer/BasicDrawer";
+
+import {
+  SettingsDrawerContext,
+  type SettingsDrawerContextType,
+} from "./SettingsDrawerContext";
+import {
+  SettingsDrawerListType,
+  type ListTypeOption,
+  type SettingsDrawerListTypeProps,
+  DEFAULT_LIST_TYPE_OPTIONS,
+} from "./SettingsDrawerListType";
+
+export type { ListTypeOption, SettingsDrawerListTypeProps };
+export { DEFAULT_LIST_TYPE_OPTIONS };
+
+export type SettingsDrawerProps = Omit<BasicDrawerProps, "children"> & {
+  title: string;
+  subtitle?: string;
+  children: React.ReactNode;
+  primaryButtonLabel?: string;
+  secondaryButtonLabel?: string;
+  onPrimaryAction?: () => void;
+  onSecondaryAction?: () => void;
+  isPrimaryButtonLoading?: boolean;
+  isPrimaryButtonDisabled?: boolean;
+  isSecondaryButtonDisabled?: boolean;
+  scopeName?: string;
+  customerId?: string;
+  unitId?: string;
+  onScopeConfigChange?: (type: "sync" | "custom") => void;
+};
+
+export const SettingsDrawer = ({
+  title,
+  subtitle,
+  children,
+  primaryButtonLabel = "Save",
+  secondaryButtonLabel = "Cancel",
+  onPrimaryAction,
+  onSecondaryAction,
+  isPrimaryButtonLoading = false,
+  isPrimaryButtonDisabled = false,
+  isSecondaryButtonDisabled = false,
+  scopeName,
+  customerId,
+  unitId,
+  onScopeConfigChange,
+  onDismiss,
+  ...otherProps
+}: SettingsDrawerProps) => {
+  const { clientContext, currentOrgUnit, currentContract } = useBuyerPortal();
+
+  const resolvedCustomerId =
+    customerId || currentContract?.id || clientContext.customerId;
+  const resolvedUnitId = unitId || currentOrgUnit?.id || "";
+
+  const handleClose = () => {
+    onDismiss?.();
+  };
+
+  const contextValue: SettingsDrawerContextType = {
+    scopeName,
+    customerId: resolvedCustomerId,
+    unitId: resolvedUnitId,
+    onScopeConfigChange,
+  };
+
+  return (
+    <SettingsDrawerContext.Provider value={contextValue}>
+      <BasicDrawer
+        data-fs-bp-settings-drawer
+        onDismiss={handleClose}
+        {...otherProps}
+      >
+        <BasicDrawer.Heading title={title} onClose={handleClose} />
+        <BasicDrawer.Body data-fs-bp-settings-drawer-body>
+          {subtitle && <p data-fs-bp-settings-drawer-subtitle>{subtitle}</p>}
+          {children}
+        </BasicDrawer.Body>
+        <BasicDrawer.Footer>
+          <BasicDrawer.Button
+            variant="ghost"
+            onClick={onSecondaryAction || handleClose}
+            disabled={isSecondaryButtonDisabled}
+          >
+            {secondaryButtonLabel}
+          </BasicDrawer.Button>
+          <BasicDrawer.Button
+            variant="confirm"
+            onClick={onPrimaryAction}
+            isLoading={isPrimaryButtonLoading}
+            disabled={isPrimaryButtonDisabled}
+          >
+            {primaryButtonLabel}
+          </BasicDrawer.Button>
+        </BasicDrawer.Footer>
+      </BasicDrawer>
+    </SettingsDrawerContext.Provider>
+  );
+};
+
+SettingsDrawer.ListType = SettingsDrawerListType;

package/src/features/shared/components/SettingsDrawer/SettingsDrawerContext.tsx

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+
+export type SettingsDrawerContextType = {
+  scopeName?: string;
+  customerId?: string;
+  unitId?: string;
+  onScopeConfigChange?: (type: "sync" | "custom") => void;
+};
+
+export const SettingsDrawerContext = createContext<
+  SettingsDrawerContextType | undefined
+>(undefined);
+
+export const useSettingsDrawerContext = (): SettingsDrawerContextType => {
+  const context = useContext(SettingsDrawerContext);
+  return context || {};
+};

package/src/features/shared/components/SettingsDrawer/SettingsDrawerListType.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+
+import { RadioGroup, RadioOption } from "@faststore/ui";
+
+import { useGetScopeConfig } from "../../hooks";
+
+import { useSettingsDrawerContext } from "./SettingsDrawerContext";
+
+export type ListTypeOption = {
+  value: string;
+  label: string;
+  description: string;
+};
+
+export const DEFAULT_LIST_TYPE_OPTIONS: ListTypeOption[] = [
+  {
+    value: "custom",
+    label: "Custom list",
+    description: "Manage a unique for this organization.",
+  },
+  {
+    value: "sync",
+    label: "Synchronized List",
+    description:
+      "Use the shared list defined by the contract. Updates are automatic.",
+  },
+];
+
+export type SettingsDrawerListTypeProps = {
+  title: string;
+  name: string;
+  value?: "sync" | "custom";
+  options?: ListTypeOption[];
+  onChange?: (value: "sync" | "custom") => void;
+  disabled?: boolean;
+};
+
+export const SettingsDrawerListType = ({
+  title,
+  name,
+  value: controlledValue,
+  options = DEFAULT_LIST_TYPE_OPTIONS,
+  onChange: controlledOnChange,
+  disabled = false,
+}: SettingsDrawerListTypeProps) => {
+  const { scopeName, customerId, unitId } = useSettingsDrawerContext();
+  const [internalValue, setInternalValue] = useState<"sync" | "custom">(
+    "custom"
+  );
+
+  const { isScopeConfigLoading } = useGetScopeConfig(
+    {
+      customerId: customerId ?? "",
+      unitId: unitId ?? "",
+      scopeName: scopeName ?? "",
+    },
+    {
+      lazy: !scopeName || !customerId || !unitId,
+      onSuccess: (data) => {
+        if (data?.type) {
+          setInternalValue(data.type);
+          controlledOnChange?.(data.type);
+        }
+      },
+    }
+  );
+
+  const value = controlledValue ?? internalValue;
+  const isLoading = isScopeConfigLoading;
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = e.target.value as "sync" | "custom";
+    setInternalValue(newValue);
+
+    if (controlledOnChange) {
+      controlledOnChange(newValue);
+    }
+  };
+
+  return (
+    <div data-fs-bp-settings-drawer-list-type>
+      <h4 data-fs-bp-settings-drawer-list-type-title>{title}</h4>
+      <RadioGroup name={name} selectedValue={value} onChange={handleChange}>
+        {options.map((option) => (
+          <div key={option.value} data-fs-bp-settings-drawer-list-type-option>
+            <RadioOption
+              value={option.value}
+              label={option.label}
+              name={name}
+              disabled={disabled || isLoading}
+            />
+            <p data-fs-bp-settings-drawer-list-type-description>
+              {option.description}
+            </p>
+          </div>
+        ))}
+      </RadioGroup>
+    </div>
+  );
+};

package/src/features/shared/components/SettingsDrawer/settings-drawer.scss

@@ -0,0 +1,61 @@
+[data-fs-bp-settings-drawer] {
+  @import "@faststore/ui/src/components/atoms/Radio/styles.scss";
+
+  [data-fs-bp-settings-drawer-body] {
+    color: #1f1f1f;
+    font-size: var(--fs-text-size-1);
+
+    [data-fs-bp-settings-drawer-subtitle] {
+      margin-bottom: var(--fs-spacing-5);
+      color: #1f1f1f;
+    }
+
+    [data-fs-bp-settings-drawer-list-type] {
+      display: flex;
+      flex-direction: column;
+      margin-bottom: var(--fs-spacing-4);
+
+      h4[data-fs-bp-settings-drawer-list-type-title] {
+        color: #000000;
+        font-weight: var(--fs-text-weight-semibold);
+        font-size: var(--fs-text-size-1);
+        line-height: 1.25rem;
+        letter-spacing: -0.01em;
+        margin-bottom: var(--fs-spacing-4);
+        margin-top: 0;
+      }
+
+      [data-fs-bp-settings-drawer-list-type-option] {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: var(--fs-spacing-4);
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        [data-fs-radio-group-option] {
+          display: flex;
+          align-items: flex-start;
+          gap: var(--fs-spacing-2);
+
+          label {
+            font-weight: var(--fs-text-weight-regular);
+            font-size: var(--fs-text-size-1);
+            color: #1f1f1f;
+          }
+        }
+
+        [data-fs-bp-settings-drawer-list-type-description] {
+          margin-left: var(--fs-spacing-5);
+          margin-bottom: 0;
+          color: #707070;
+          font-weight: var(--fs-text-weight-regular);
+          font-size: var(--fs-bp-text-size-0);
+          line-height: var(--fs-bp-text-size-2);
+          letter-spacing: 0;
+        }
+      }
+    }
+  }
+}

package/src/features/shared/components/index.ts

@@ -7,6 +7,13 @@ export {
 export { useAutocompletePosition } from "./AutocompleteDropdown/useAutocompletePosition";
 export { BasicCard, type BasicCardProps } from "./BasicCard/BasicCard";
 export { BasicDrawer, type BasicDrawerProps } from "./BasicDrawer/BasicDrawer";
+export {
+  SettingsDrawer,
+  type SettingsDrawerProps,
+  type ListTypeOption,
+  type SettingsDrawerListTypeProps,
+  DEFAULT_LIST_TYPE_OPTIONS,
+} from "./SettingsDrawer/SettingsDrawer";
 export {
   BasicDropdownMenu,
   type BasicDropdownMenuProps,

package/src/features/shared/hooks/index.ts

@@ -15,3 +15,5 @@ export { useRouterLoading } from "./useRouterLoading";
 export { useLogger } from "./useLogger";
 export { useGetDependenciesVersion } from "./useGetDependenciesVersion";
 export { useAnalytics } from "./analytics/useAnalytics";
+export { useGetScopeConfig, SCOPE_KEYS } from "./useGetScopeConfig";
+export { useSetScopeConfig } from "./useSetScopeConfig";