@vtex/faststore-plugin-buyer-portal 1.3.49 → 1.3.51

package/src/features/credit-cards/components/CreditCardSettingsDrawer/CreditCardSettingsDrawer.tsx

@@ -6,11 +6,10 @@ import { useUI } from "@faststore/ui";
 
 import {
   type BasicDrawerProps,
-  BasicDrawer,
-  InputText,
+  SettingsDrawer,
+  createListTypeOptions,
 } from "../../../shared/components";
-
-import type { CreditCard } from "../../types";
+import { useSetScopeConfig, SCOPE_KEYS } from "../../../shared/hooks";
 
 export type CreditCardSettingsDrawerProps = Omit<
   BasicDrawerProps,
@@ -19,70 +18,60 @@ export type CreditCardSettingsDrawerProps = Omit<
   readonly?: boolean;
 };
 
+const CREDIT_CARD_LIST_TYPE_OPTIONS = createListTypeOptions("credit cards");
+
 export const CreditCardSettingsDrawer = ({
   close,
-  ...props
+  ...otherProps
 }: CreditCardSettingsDrawerProps) => {
   const { pushToast } = useUI();
-
   const router = useRouter();
-  const [newCard, setNewCard] = useState<CreditCard>({} as CreditCard);
+
+  const [listType, setListType] = useState<"sync" | "custom">("custom");
+
+  const { setScopeConfig, isSetScopeConfigLoading } = useSetScopeConfig({
+    onSuccess: () => {
+      pushToast({
+        message: "Scope configuration updated successfully",
+        status: "INFO",
+      });
+      close();
+    },
+    onError: () => {
+      pushToast({
+        message: "Failed to update scope configuration",
+        status: "ERROR",
+      });
+    },
+  });
 
   const handleConfirmClick = () => {
-    pushToast({
-      message: "Credit card added successfully",
-      status: "INFO",
+    setScopeConfig({
+      customerId: router.query.contractId as string,
+      unitId: router.query.orgUnitId as string,
+      scopeName: SCOPE_KEYS.CREDIT_CARDS,
+      type: listType,
     });
-    router.reload();
-    close();
   };
 
-  const hasCardInformation = () => {
-    return (
-      newCard.cardholder &&
-      newCard.cardLabel &&
-      newCard.cvv &&
-      newCard.expirationDate &&
-      newCard.number
-    );
-  };
-
-  const isConfirmButtonEnabled = hasCardInformation();
-
   return (
-    <BasicDrawer
-      data-fs-bp-edit-credit-card-settings-drawer
+    <SettingsDrawer
+      title="Credit cards settings"
+      {...otherProps}
       close={close}
-      {...props}
+      onPrimaryAction={handleConfirmClick}
+      isPrimaryButtonLoading={isSetScopeConfigLoading}
+      scopeName={SCOPE_KEYS.CREDIT_CARDS}
+      onDismiss={close}
+      data-fs-bp-edit-credit-card-settings-drawer
     >
-      <BasicDrawer.Heading title="Credit card settings" onClose={close} />
-      <BasicDrawer.Body>
-        <div data-fs-bp-edit-credit-card-settings-drawer-section-label>
-          <span>Default credit card</span>
-        </div>
-        <InputText
-          label="Search Card nickname"
-          value={newCard.cardLabel}
-          wrapperProps={{ style: { marginTop: 16 } }}
-          onChange={(event) =>
-            setNewCard({ ...newCard, cardLabel: event.target.value })
-          }
-        />
-      </BasicDrawer.Body>
-
-      <BasicDrawer.Footer>
-        <BasicDrawer.Button variant="ghost" onClick={close}>
-          Cancel
-        </BasicDrawer.Button>
-        <BasicDrawer.Button
-          variant="confirm"
-          disabled={!isConfirmButtonEnabled}
-          onClick={handleConfirmClick}
-          isLoading={false}
-        >
-          Save
-        </BasicDrawer.Button>
-      </BasicDrawer.Footer>
-    </BasicDrawer>
+      <SettingsDrawer.ListType
+        title="List type"
+        name="credit-card-list-type"
+        value={listType}
+        onChange={setListType}
+        options={CREDIT_CARD_LIST_TYPE_OPTIONS}
+      />
+    </SettingsDrawer>
   );
 };

package/src/features/credit-cards/layouts/CreditCardsLayout/CreditCardLayout.tsx

@@ -19,6 +19,7 @@ import {
   CreateCreditCardDrawer,
   CreditCardDropdownMenu,
 } from "../../components";
+import { CreditCardSettingsDrawer } from "../../components/CreditCardSettingsDrawer/CreditCardSettingsDrawer";
 import { useChangeCardScope } from "../../hooks";
 import { useGetCreditCards } from "../../hooks/useGetCreditCards";
 
@@ -35,6 +36,12 @@ export const CreditCardLayout = ({ data }: CreditCardsLayoutProps) => {
     ...createDrawerProps
   } = useDrawerProps();
 
+  const {
+    open: openCreateCreditCardSettingsDrawer,
+    isOpen: isCreateCreditCardSettingsDrawerOpen,
+    ...createCreditCardSettingsDrawerProps
+  } = useDrawerProps();
+
   const {
     currentOrgUnit: orgUnit,
     currentUser: user,
@@ -137,6 +144,11 @@ export const CreditCardLayout = ({ data }: CreditCardsLayoutProps) => {
       >
         <section data-fs-credit-card-section>
           <HeaderInside title="Credit cards">
+            <HeaderInside.Button
+              iconName="EditSettings"
+              style={{ backgroundColor: "transparent", color: "#1f1f1f" }}
+              onClick={openCreateCreditCardSettingsDrawer}
+            />
             <HeaderInside.Button onClick={openCreateDrawer} />
           </HeaderInside>
           {data.length === 0 ? (
@@ -173,6 +185,12 @@ export const CreditCardLayout = ({ data }: CreditCardsLayoutProps) => {
               isOpen={isCreateCreditCardDrawerOpen}
             />
           )}
+          {isCreateCreditCardSettingsDrawerOpen && (
+            <CreditCardSettingsDrawer
+              isOpen={isCreateCreditCardSettingsDrawerOpen}
+              {...createCreditCardSettingsDrawerProps}
+            />
+          )}
         </section>
       </ContractTabsLayout>
     </GlobalLayout>

package/src/features/custom-fields/components/CustomFieldSettingsDrawer/CustomFieldSettingsDrawer.tsx

@@ -1,10 +1,19 @@
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
-import { useUI } from "@faststore/ui";
+import { RadioGroup, RadioOption, useUI } from "@faststore/ui";
 
-import { BasicDrawerProps } from "../../../shared/components";
-import { CustomFieldSettingsDrawer as CustomFieldSettingsDrawerComponent } from "../../../shared/components/CustomField";
-import { useBuyerPortal, useDebounce } from "../../../shared/hooks";
+import {
+  AutocompleteDropdown,
+  SettingsDrawer,
+  type BasicDrawerProps,
+  createListTypeOptions,
+} from "../../../shared/components";
+import { CustomFieldSelectedCardItem } from "../../../shared/components/CustomField/selected-card-item/CustomFieldSelectedCardItem";
+import {
+  useBuyerPortal,
+  useDebounce,
+  useSetScopeConfig,
+} from "../../../shared/hooks";
 import {
   useAddDefaultValue,
   useCustomFieldValues,
@@ -15,6 +24,12 @@ import {
 import { useCustomFieldSettings } from "../../../shared/hooks/custom-field/useCustomFieldSettings";
 import { CustomFieldData } from "../../types";
 
+type FormState = {
+  level: string;
+  required: boolean;
+  defaultValue: CustomFieldData | null;
+};
+
 export interface CustomFieldSettingsDrawerProps
   extends Omit<BasicDrawerProps, "children"> {
   contractId: string;
@@ -30,6 +45,8 @@ export function CustomFieldSettingsDrawer({
   unitId,
   close,
   refetch,
+  loading = false,
+  onDismiss,
   ...props
 }: CustomFieldSettingsDrawerProps) {
   const {
@@ -40,8 +57,23 @@ export function CustomFieldSettingsDrawer({
     CustomFieldData[]
   >([]);
   const [search, setSearch] = useState<string>("");
+  const [formData, setFormData] = useState<FormState>({
+    level: "",
+    required: false,
+    defaultValue: null,
+  });
+  const [autoCompleteValue, setAutocompleteValue] = useState<string>("");
+  const [listType, setListType] = useState<"sync" | "custom">("custom");
 
   const debouncedSearchValue = useDebounce(search, 200);
+  const customFieldScopeName = useMemo(
+    () => `custom-fields/${customField}`,
+    [customField]
+  );
+  const customFieldPlural = useMemo(
+    () => `${customField.toLowerCase()}s`,
+    [customField]
+  );
 
   const {
     data: customFieldSettings,
@@ -72,7 +104,7 @@ export function CustomFieldSettingsDrawer({
 
   const {
     mutate: updateCustomFieldSettings,
-    isLoading: isLoadginUpdateCustomFieldSettings,
+    isLoading: isLoadingUpdateCustomFieldSettings,
   } = useUpdateCustomFieldSettings({
     options: {
       onSuccess: () =>
@@ -114,6 +146,14 @@ export function CustomFieldSettingsDrawer({
       },
     });
 
+  const { setScopeConfig, isSetScopeConfigLoading } = useSetScopeConfig({
+    onError: () =>
+      pushToast({
+        status: "ERROR",
+        message: "Failed to update scope configuration",
+      }),
+  });
+
   useCustomFieldValues({
     keys: `default-values/options/${debouncedSearchValue}`,
     data: {
@@ -140,63 +180,199 @@ export function CustomFieldSettingsDrawer({
     },
   });
 
-  async function onSave(
-    level: string,
-    required: boolean,
-    defaulValue: CustomFieldData | null
-  ) {
-    if (defaulValue) {
+  const listTypeOptions = useMemo(
+    () => createListTypeOptions(customFieldPlural),
+    [customFieldPlural]
+  );
+
+  useEffect(() => {
+    setFormData({
+      level: customFieldSettings?.level ?? "",
+      required: !!customFieldSettings?.required,
+      defaultValue: defaultValueData
+        ? { ...defaultValueData, isDefault: true }
+        : null,
+    });
+  }, [customFieldSettings, defaultValueData]);
+
+  const handleClose = () => {
+    onDismiss?.();
+    close();
+    setSearch("");
+    setAutocompleteValue("");
+  };
+
+  const handleSave = async () => {
+    if (formData.defaultValue) {
       await updateDefaultValue({
         contractId,
         customField,
-        customFieldValueId: defaulValue.id,
+        customFieldValueId: formData.defaultValue.id,
         unitId,
       });
     } else {
       await removeDefaultValue({ contractId, customField, unitId });
     }
 
-    updateCustomFieldSettings({
-      cookie,
-      data: {
-        contractId,
+    await Promise.all([
+      updateCustomFieldSettings({
+        cookie,
+        data: {
+          contractId,
+          unitId,
+          customField,
+          level: formData.level,
+          required: formData.required,
+        },
+      }),
+      setScopeConfig({
+        customerId: contractId,
         unitId,
-        customField,
-        level,
-        required,
-      },
-    });
-  }
+        scopeName: customFieldScopeName,
+        type: listType,
+      }),
+    ]);
+
+    handleClose();
+    refetch();
+  };
+
+  const isSavingSettings =
+    isLoadingUpdateDefaultValue ||
+    isLoadingRemoveDefaultValue ||
+    isLoadingUpdateCustomFieldSettings ||
+    isSetScopeConfigLoading ||
+    loading;
+
+  const isPrimaryButtonDisabled =
+    (!formData.defaultValue?.id && !!autoCompleteValue) || isSavingSettings;
 
   if (isLoading || isLoadingDefaultValue || error) return null;
 
   return (
-    <CustomFieldSettingsDrawerComponent
-      initialValue={{
-        level: customFieldSettings?.level ?? "",
-        required: !!customFieldSettings?.required,
-        defaultValue: defaultValueData
-          ? { ...defaultValueData, isDefault: true }
-          : null,
-      }}
-      close={() => {
-        close();
-        setSearch("");
-      }}
-      onSave={async ({ level, required, defaultValue }) => {
-        await onSave(level, required, defaultValue);
-        close();
-        refetch();
-      }}
-      loading={
-        isLoadingUpdateDefaultValue ||
-        isLoadingRemoveDefaultValue ||
-        isLoadginUpdateCustomFieldSettings
-      }
-      onSearch={setSearch}
-      customFieldOptions={customFieldOptions}
-      customFieldLabel={customField}
+    <SettingsDrawer
+      title={`${customField} settings`}
+      close={close}
+      onPrimaryAction={handleSave}
+      onSecondaryAction={handleClose}
+      onDismiss={handleClose}
+      isPrimaryButtonLoading={isSavingSettings}
+      isPrimaryButtonDisabled={isPrimaryButtonDisabled}
+      scopeName={customFieldScopeName}
+      customerId={contractId}
+      unitId={unitId}
+      data-bp-custom-fields-settings-drawer
       {...props}
-    />
+    >
+      <div data-bp-settings-drawer-body>
+        <p>
+          Set how buyers in this unit should enter {customField}s during
+          checkout
+        </p>
+
+        <SettingsDrawer.ListType
+          title="List type"
+          name={`${customField}-list-type`}
+          value={listType}
+          onChange={setListType}
+          options={listTypeOptions}
+        />
+
+        <form data-bp-custom-fields-settings-drawer-form>
+          <div>
+            <h4>Input level</h4>
+            <RadioGroup
+              name="inputLevel"
+              selectedValue={formData.level}
+              onChange={(e) => {
+                setFormData((curr) => ({
+                  ...curr,
+                  level: e.target.value,
+                }));
+              }}
+            >
+              <RadioOption value="order" label="Order level" name="inputLevel">
+                Order level
+              </RadioOption>
+
+              <RadioOption value="item" label="Item level" name="inputLevel">
+                Item level
+              </RadioOption>
+            </RadioGroup>
+          </div>
+
+          <div>
+            <h4>Input requirement</h4>
+            <RadioGroup
+              name="requirement"
+              selectedValue={formData.required.toString()}
+              onChange={(e) => {
+                setFormData((curr) => ({
+                  ...curr,
+                  required: e.target.value === "true",
+                }));
+              }}
+            >
+              <RadioOption value="true" label="Required" name="requirement">
+                Required
+              </RadioOption>
+
+              <RadioOption value="false" label="Optional" name="requirement">
+                Optional
+              </RadioOption>
+            </RadioGroup>
+          </div>
+
+          <div data-bp-settings-drawer-autocomplete-dropdown-container>
+            <h4>Default {customField}</h4>
+            <span>Select the default {customField} for this unit.</span>
+
+            {formData.defaultValue?.id ? (
+              <CustomFieldSelectedCardItem
+                text={formData.defaultValue.value}
+                onCancel={() => {
+                  setFormData((curr) => ({
+                    ...curr,
+                    defaultValue: null,
+                  }));
+                  setAutocompleteValue("");
+                  setSearch("");
+                }}
+              />
+            ) : (
+              <AutocompleteDropdown
+                label=""
+                value={autoCompleteValue}
+                options={customFieldOptions}
+                shouldOpenOnFocus={false}
+                autoComplete="off"
+                shouldShowArrowDown={false}
+                onChange={(v) => {
+                  setAutocompleteValue(v.target.value);
+                  setSearch(v.target.value);
+                }}
+                placeholder={`Search by ${customField} name`}
+                renderOption={(option, index) => (
+                  <AutocompleteDropdown.Item
+                    key={option.id}
+                    closeOnClick
+                    index={index}
+                    isSelected={formData.defaultValue?.id === option?.id}
+                    onClick={() => {
+                      setFormData((curr) => ({
+                        ...curr,
+                        defaultValue: option,
+                      }));
+                    }}
+                  >
+                    {option?.value}
+                  </AutocompleteDropdown.Item>
+                )}
+              />
+            )}
+          </div>
+        </form>
+      </div>
+    </SettingsDrawer>
   );
 }

package/src/features/payment-methods/components/PaymentMethodSettingsDrawer/PaymentMethodSettingsDrawer.tsx

@@ -0,0 +1,78 @@
+import { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import { useUI } from "@faststore/ui";
+
+import {
+  type BasicDrawerProps,
+  SettingsDrawer,
+  createListTypeOptions,
+} from "../../../shared/components";
+import { useSetScopeConfig, SCOPE_KEYS } from "../../../shared/hooks";
+
+export type PaymentMethodSettingsDrawerProps = Omit<
+  BasicDrawerProps,
+  "children"
+> & {
+  readonly?: boolean;
+};
+
+const PAYMENT_METHOD_LIST_TYPE_OPTIONS =
+  createListTypeOptions("payment methods");
+
+export const PaymentMethodSettingsDrawer = ({
+  close,
+  ...otherProps
+}: PaymentMethodSettingsDrawerProps) => {
+  const { pushToast } = useUI();
+  const router = useRouter();
+
+  const [listType, setListType] = useState<"sync" | "custom">("custom");
+
+  const { setScopeConfig, isSetScopeConfigLoading } = useSetScopeConfig({
+    onSuccess: () => {
+      pushToast({
+        message: "Scope configuration updated successfully",
+        status: "INFO",
+      });
+      close();
+    },
+    onError: () => {
+      pushToast({
+        message: "Failed to update scope configuration",
+        status: "ERROR",
+      });
+    },
+  });
+
+  const handleConfirmClick = () => {
+    setScopeConfig({
+      customerId: router.query.contractId as string,
+      unitId: router.query.orgUnitId as string,
+      scopeName: SCOPE_KEYS.PAYMENT_SYSTEMS,
+      type: listType,
+    });
+  };
+
+  return (
+    <SettingsDrawer
+      title="Payment method settings"
+      {...otherProps}
+      close={close}
+      onPrimaryAction={handleConfirmClick}
+      isPrimaryButtonLoading={isSetScopeConfigLoading}
+      scopeName={SCOPE_KEYS.PAYMENT_SYSTEMS}
+      onDismiss={close}
+      data-fs-bp-payment-method-settings-drawer
+    >
+      <SettingsDrawer.ListType
+        title="List type"
+        name="payment-method-list-type"
+        value={listType}
+        onChange={setListType}
+        options={PAYMENT_METHOD_LIST_TYPE_OPTIONS}
+      />
+    </SettingsDrawer>
+  );
+};

package/src/features/payment-methods/components/index.ts

@@ -2,3 +2,7 @@ export { AddPaymentMethodsDrawer } from "./AddPaymentMethodsDrawer/AddPaymentMet
 export { RemovePaymentMethodsDrawer } from "./RemovePaymentMethodsDrawer/RemovePaymentMethodsDrawer";
 export { RemoveMethodButton } from "./RemoveMethodButton/RemoveMethodButton";
 export { SearchPaymentMethods } from "./SearchPaymentMethods/SearchPaymentMethods";
+export {
+  PaymentMethodSettingsDrawer,
+  type PaymentMethodSettingsDrawerProps,
+} from "./PaymentMethodSettingsDrawer/PaymentMethodSettingsDrawer";

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

@@ -19,6 +19,7 @@ import {
   AddPaymentMethodsDrawer,
   RemoveMethodButton,
   RemovePaymentMethodsDrawer,
+  PaymentMethodSettingsDrawer,
 } from "../../components";
 import { useRemovePaymentMethod } from "../../hooks/useRemovePaymentMethodSubmit";
 
@@ -66,6 +67,12 @@ export const PaymentMethodsLayout = ({
     ...addDrawerProps
   } = useDrawerProps();
 
+  const {
+    open: openPaymentMethodSettingsDrawer,
+    isOpen: isPaymentMethodSettingsDrawerOpen,
+    ...paymentMethodSettingsDrawerProps
+  } = useDrawerProps();
+
   const {
     open: openRemoveDrawer,
     isOpen: isRemovePaymentMethodDrawerOpen,
@@ -153,6 +160,11 @@ export const PaymentMethodsLayout = ({
       >
         <section data-fs-payment-methods-section>
           <HeaderInside title="Payment methods">
+            <HeaderInside.Button
+              iconName="EditSettings"
+              style={{ backgroundColor: "transparent", color: "#1f1f1f" }}
+              onClick={openPaymentMethodSettingsDrawer}
+            />
             <ConditionalTooltip
               condition={allPaymentMethodsSelected}
               placement="left-center"
@@ -227,6 +239,13 @@ export const PaymentMethodsLayout = ({
             />
           )}
 
+          {isPaymentMethodSettingsDrawerOpen && (
+            <PaymentMethodSettingsDrawer
+              isOpen={isPaymentMethodSettingsDrawerOpen}
+              {...paymentMethodSettingsDrawerProps}
+            />
+          )}
+
           {isRemovePaymentMethodDrawerOpen && selectedMethod && (
             <RemovePaymentMethodsDrawer
               {...removeDrawerProps}