@vtex/faststore-plugin-buyer-portal 1.1.3 → 1.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "dependencies": {

package/plugin.config.js

@@ -17,11 +17,10 @@ module.exports = {
       path: "/buyer-portal/addresses/[orgUnitId]/[contractId]",
       appLayout: false,
     },
-    // Theses Routes will be added in the future
-    // "payment-methods": {
-    //   path: "/buyer-portal/payment-methods/[orgUnitId]/[contractId]",
-    //   appLayout: false,
-    // },
+    "payment-methods": {
+      path: "/buyer-portal/payment-methods/[orgUnitId]/[contractId]",
+      appLayout: false,
+    },
     "credit-cards": {
       path: "/buyer-portal/credit-cards/[orgUnitId]/[contractId]",
       appLayout: false,
@@ -30,6 +29,7 @@ module.exports = {
       path: "/buyer-portal/collections/[orgUnitId]/[contractId]",
       appLayout: false,
     },
+    // Theses Routes will be added in the future
     // "po-numbers": {
     //   path: "/buyer-portal/po-numbers/[orgUnitId]/[contractId]",
     //   appLayout: false,

package/public/buyer-portal-icons.svg

@@ -363,10 +363,18 @@
       fill="currentColor" />
   </symbol>
 
+  <symbol
+    id="AccountBalanceWallet"
+    viewBox="0 0 19 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M2 18C1.45 18 0.979167 17.8042 0.5875 17.4125C0.195833 17.0208 0 16.55 0 16V2C0 1.45 0.195833 0.979167 0.5875 0.5875C0.979167 0.195833 1.45 0 2 0H16C16.55 0 17.0208 0.195833 17.4125 0.5875C17.8042 0.979167 18 1.45 18 2V4.5H16V2H2V16H16V13.5H18V16C18 16.55 17.8042 17.0208 17.4125 17.4125C17.0208 17.8042 16.55 18 16 18H2ZM10 14C9.45 14 8.97917 13.8042 8.5875 13.4125C8.19583 13.0208 8 12.55 8 12V6C8 5.45 8.19583 4.97917 8.5875 4.5875C8.97917 4.19583 9.45 4 10 4H17C17.55 4 18.0208 4.19583 18.4125 4.5875C18.8042 4.97917 19 5.45 19 6V12C19 12.55 18.8042 13.0208 18.4125 13.4125C18.0208 13.8042 17.55 14 17 14H10ZM17 12V6H10V12H17ZM13 10.5C13.4167 10.5 13.7708 10.3542 14.0625 10.0625C14.3542 9.77083 14.5 9.41667 14.5 9C14.5 8.58333 14.3542 8.22917 14.0625 7.9375C13.7708 7.64583 13.4167 7.5 13 7.5C12.5833 7.5 12.2292 7.64583 11.9375 7.9375C11.6458 8.22917 11.5 8.58333 11.5 9C11.5 9.41667 11.6458 9.77083 11.9375 10.0625C12.2292 10.3542 12.5833 10.5 13 10.5Z" fill="currentColor"/>
+  </symbol>
+
   <symbol id="MinusCircle" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
     <path
       d="M7 13H17V11H7V13ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z"
       fill="currentColor" />
   </symbol>
 
-</svg>
+</svg>

package/src/features/payment-methods/clients/PaymentMethodsClient.ts

@@ -0,0 +1,87 @@
+import { Client } from "../../shared/clients/Client";
+import type {
+    PaymentMethodResponse,
+    PaymentMethodsIdArray,
+    PaymentMethodsReqCommonParams,
+} from "../../shared/types";
+import { getApiUrl } from "../../shared/utils";
+import type { PaymentMethodData } from "../types";
+
+export default class PaymentMethodsClient extends Client {
+    constructor() {
+        super(getApiUrl());
+    }
+
+    async getPaymentMethodsByUnitId(
+        data: PaymentMethodsReqCommonParams & {
+            options?: {
+                filterByScope?: boolean;
+                name?: string;
+            };
+        }
+    ) {
+        const { customerId, unitId, cookie, options } = data;
+
+        const queryParams = new URLSearchParams();
+
+        if (options?.filterByScope) {
+            queryParams.append("filterByScope", options.filterByScope.toString());
+        }
+
+        if (options?.name) {
+            queryParams.append("name", options.name);
+        }
+
+        const queryString = queryParams.toString();
+        const url = `customers/${customerId}/units/${unitId}/payment-methods${
+            queryString ? `?${queryString}` : ""
+        }`;
+
+        return await this.get<PaymentMethodData[]>(url, {
+            headers: {
+                Cookie: cookie,
+            },
+        });
+    }
+
+    async addPaymentMethodsToUnit(
+        data: PaymentMethodsReqCommonParams & {
+            paymentMethodsIds: PaymentMethodsIdArray;
+        }
+    ) {
+        const { customerId, unitId, cookie, paymentMethodsIds } = data;
+
+        return await this.post<PaymentMethodResponse, PaymentMethodsIdArray>(
+            `customers/${customerId}/units/${unitId}/payment-methods`,
+            paymentMethodsIds,
+            {
+                headers: {
+                    Cookie: cookie,
+                    "Content-Type": "application/json",
+                },
+            }
+        );
+    }
+
+    async removePaymentMethodFromUnit(
+        data: PaymentMethodsReqCommonParams & {
+            paymentMethodId: number;
+        }
+    ) {
+        const { customerId, unitId, cookie, paymentMethodId } = data;
+
+        return await this.delete(
+            `customers/${customerId}/units/${unitId}/payment-methods/${paymentMethodId}`,
+            null,
+            {
+                headers: {
+                    Cookie: cookie,
+                },
+            }
+        );
+    }
+}
+
+const paymentMethodsClient = new PaymentMethodsClient();
+
+export { paymentMethodsClient };

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

@@ -0,0 +1,178 @@
+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { useUI, Checkbox, Skeleton } from "@faststore/ui";
+import { useRouter } from "next/router";
+import { type BasicDrawerProps, BasicDrawer, Icon, Table } from "../../../shared/components";
+import { SearchPaymentMethods } from "../SearchPaymentMethods/SearchPaymentMethods";
+import { useBuyerPortal } from "../../../shared/hooks";
+import { useAddPaymentMethodsToUnit } from "../../hooks";
+import { useDebouncedSearchPaymentMethods } from "../../hooks/useDebouncedSearchPaymentMethods";
+
+export type AddPaymentMethodsDrawerProps = Omit<BasicDrawerProps, "children"> & {
+    readonly?: boolean;
+};
+
+export const AddPaymentMethodsDrawer = ({
+    close,
+    readonly,
+    ...props
+}: AddPaymentMethodsDrawerProps) => {
+    const [querySearch, setQuerySearch] = useState("");
+    const [selectedMethods, setSelectedMethods] = useState<Set<number>>(new Set());
+
+    const { pushToast } = useUI();
+    const router = useRouter();
+    const selectAllRef = useRef<HTMLInputElement>(null);
+
+    const { currentOrgUnit: orgUnit, currentContract: contract } = useBuyerPortal();
+
+    const customerId = contract?.id ?? "";
+    const unitId = orgUnit?.id ?? "";
+
+    const { paymentMethods, isLoadingPaymentMethods } = useDebouncedSearchPaymentMethods({
+        customerId,
+        unitId,
+        filterByScope: false,
+        search: querySearch,
+    });
+
+    const availableMethods = paymentMethods?.filter((method) => !method?.isEnabled);
+
+    const handleSuccess = () => {
+        pushToast({ message: "Payment methods added successfully", status: "INFO" });
+        router.reload();
+        close();
+    };
+
+    const { addPaymentMethods, isAddPaymentMethodsLoading } = useAddPaymentMethodsToUnit({
+        onSuccess: handleSuccess,
+        onError: (err) => {
+            pushToast({
+                message: err?.message ?? "An error occurred while adding the payment methods",
+                status: "ERROR",
+            });
+        },
+    });
+
+    const allSelected = useMemo(
+        () => availableMethods.length > 0 && selectedMethods.size === availableMethods.length,
+        [availableMethods, selectedMethods]
+    );
+
+    const someSelected = useMemo(
+        () => selectedMethods.size > 0 && !allSelected,
+        [selectedMethods, allSelected]
+    );
+
+    useEffect(() => {
+        if (selectAllRef.current) {
+            selectAllRef.current.indeterminate = someSelected;
+        }
+    }, [someSelected]);
+
+    const toggleItem = useCallback((id: number) => {
+        setSelectedMethods((prev) => {
+            const newSet = new Set(prev);
+            newSet.has(id) ? newSet.delete(id) : newSet.add(id);
+            return newSet;
+        });
+    }, []);
+
+    const toggleAll = useCallback(() => {
+        setSelectedMethods(allSelected ? new Set() : new Set(availableMethods.map((m) => m.id)));
+    }, [allSelected, availableMethods]);
+
+    const handleSubmit = () => {
+        const paymentMethodsIds = Array.from(selectedMethods, (id) => ({ id }));
+        addPaymentMethods({ customerId, unitId, paymentMethodsIds });
+    };
+
+    return (
+        <BasicDrawer data-fs-bp-add-payment-methods-drawer close={close} {...props}>
+            <BasicDrawer.Heading title="Add payment methods" onClose={close} />
+
+            <BasicDrawer.Body>
+                <section data-fs-payment-methods-drawer>
+                    <p data-fs-bp-add-payment-methods-drawer-description>
+                        Add payment methods
+                        {orgUnit?.name && <span>{` to ${orgUnit.name}`}</span>}
+                    </p>
+
+                    <SearchPaymentMethods
+                        data={selectedMethods.size}
+                        paymentMethodsData={availableMethods}
+                        defaultValue={querySearch}
+                        textSearch={setQuerySearch}
+                    />
+
+                    {isLoadingPaymentMethods ? (
+                        <div data-fs-payment-methods-loading>
+                            {Array.from({ length: 5 }).map((_, index) => (
+                                <Skeleton key={index} size={{ width: "100%", height: "1.5rem" }} />
+                            ))}
+                        </div>
+                    ) : (
+                        <ul data-fs-payment-methods-list>
+                            <div
+                                data-fs-bp-payment-methods-list-title
+                                data-fs-bp-payment-methods-list-title-drawer
+                            >
+                                <Checkbox
+                                    data-fs-bp-payment-methods-checkbox
+                                    ref={selectAllRef}
+                                    checked={allSelected}
+                                    onChange={toggleAll}
+                                    disabled={readonly}
+                                    aria-label="Select all payment methods"
+                                />
+                                Name
+                            </div>
+
+                            {availableMethods.map(({ id, name }) => (
+                                <li key={id} data-fs-payment-methods-line>
+                                    <div
+                                        data-fs-payment-methods-row
+                                        data-fs-payment-methods-row-selected={selectedMethods.has(
+                                            id
+                                        )}
+                                    >
+                                        <div data-fs-payment-methods-row-information>
+                                            <Checkbox
+                                                data-fs-bp-payment-methods-checkbox
+                                                checked={selectedMethods.has(id)}
+                                                onChange={() => toggleItem(id)}
+                                                disabled={readonly}
+                                                aria-label={`Select ${name}`}
+                                            />
+                                            <span data-fs-payment-methods-row-icon-wrapper>
+                                                <Icon
+                                                    name="AccountBalanceWallet"
+                                                    width={20}
+                                                    height={20}
+                                                />
+                                            </span>
+                                            <div data-fs-payment-methods-name>{name}</div>
+                                        </div>
+                                    </div>
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+                </section>
+            </BasicDrawer.Body>
+
+            <BasicDrawer.Footer data-fs-bp-add-payment-methods-drawer-footer>
+                <BasicDrawer.Button variant="ghost" onClick={close}>
+                    Cancel
+                </BasicDrawer.Button>
+                <BasicDrawer.Button
+                    variant="confirm"
+                    isLoading={isAddPaymentMethodsLoading}
+                    onClick={handleSubmit}
+                    disabled={!selectedMethods.size}
+                >
+                    Add
+                </BasicDrawer.Button>
+            </BasicDrawer.Footer>
+        </BasicDrawer>
+    );
+};

package/src/features/payment-methods/components/AddPaymentMethodsDrawer/add-payment-methods-drawer.scss

@@ -0,0 +1,44 @@
+@import "../SearchPaymentMethods/search-payment-methods.scss";
+
+[data-fs-bp-add-payment-methods-drawer] {
+    min-width: 66% !important;
+
+    [data-fs-payment-methods-drawer] {
+        @import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
+        @import "@faststore/ui/src/components/atoms/Skeleton/styles.scss";
+
+        [data-fs-bp-add-payment-methods-drawer-description] {
+            color: #1f1f1f;
+            margin-bottom: var(--fs-spacing-3);
+
+            span {
+                color: #0366dd;
+            }
+        }
+
+        [data-fs-bp-payment-methods-checkbox] {
+            border-color: #e5e5e5;
+        }
+
+        [data-fs-bp-payment-methods-checkbox]:checked {
+            background-color: #0366dd;
+        }
+
+        [data-fs-bp-basic-drawer-button-loading-indicator] {
+            position: relative;
+        }
+
+        [data-fs-payment-methods-loading] {
+            * {
+                margin-top: var(--fs-spacing-1);
+                padding: var(--fs-spacing-2) 0;
+            }
+        }
+    }
+
+    [data-fs-bp-add-payment-methods-drawer-footer] {
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--fs-spacing-3);
+    }
+}

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

@@ -0,0 +1,45 @@
+import { Tooltip, Icon as UIIcon } from "@faststore/ui";
+import type { ComponentProps } from "react";
+import { Icon } from "../../../shared/components";
+
+export type RemoveMethodButtonProps = {
+    isLoading: boolean;
+    disabled: boolean;
+    onClick?: () => void;
+} & ComponentProps<"button">;
+
+export const RemoveMethodButton = ({
+    isLoading,
+    disabled,
+    onClick,
+    ...props
+}: RemoveMethodButtonProps) => {
+    return (
+        <Tooltip
+            data-fs-payment-methods-tooltip
+            placement={disabled ? "left-center" : "top-center"}
+            content={
+                disabled
+                    ? "This payment method can't be removed. Each unit must have at least one active payment method. Add another one to proceed with the removal."
+                    : "Remove from unit"
+            }
+        >
+            <button
+                {...props}
+                type="button"
+                data-fs-payment-methods-row-action-button
+                aria-label={"remove payment method action"}
+                disabled={disabled}
+                onClick={onClick}
+            >
+                <Icon
+                    data-fs-icon
+                    data-fs-icon-loading={isLoading}
+                    name={isLoading ? "LoadingIndicator" : "MinusCircle"}
+                    width={20}
+                    height={20}
+                />
+            </button>
+        </Tooltip>
+    );
+};

package/src/features/payment-methods/components/RemoveMethodButton/remove-method-button.scss

@@ -0,0 +1,42 @@
+[data-fs-payment-methods-row-action-button] {
+    margin: 0 var(--fs-spacing-1);
+    border-radius: var(--fs-border-radius-pill);
+    width: var(--fs-spacing-5);
+    aspect-ratio: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    &:disabled {
+        cursor: not-allowed;
+
+        [data-fs-icon] {
+            color: #adadad;
+
+            &[data-fs-icon-loading="true"] {
+                @keyframes rotate {
+                    from {
+                        transform: rotate(0deg);
+                    }
+                    to {
+                        transform: rotate(360deg);
+                    }
+                }
+                animation: rotate 2s linear infinite;
+            }
+        }
+    }
+
+    &:hover {
+        background-color: #e0e0e0;
+    }
+
+    &:active {
+        opacity: 0.8;
+    }
+
+    [data-fs-icon] {
+        color: #000;
+    }
+}

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

@@ -0,0 +1,81 @@
+import { CheckboxField } from "@faststore/ui";
+import { type BasicDrawerProps, BasicDrawer } from "../../../shared/components";
+import type { PaymentMethodData } from "../../types";
+import { useBuyerPortal } from "../../../shared/hooks";
+import { useCookiePreferenceHideDrawer } from "../../hooks/useCookiePreferenceHideDrawer";
+import { useState } from "react";
+import { useRemovePaymentMethod } from "../../hooks/useRemovePaymentMethodSubmit";
+
+export type RemovePaymentMethodsDrawerProps = Omit<BasicDrawerProps, "children"> & {
+    paymentMethod: PaymentMethodData;
+    readonly?: boolean;
+};
+
+export const RemovePaymentMethodsDrawer = ({
+    close,
+    paymentMethod,
+    readonly,
+    ...props
+}: RemovePaymentMethodsDrawerProps) => {
+    const { currentOrgUnit: orgUnit } = useBuyerPortal();
+    const { hideMessage, isMessageHidden } = useCookiePreferenceHideDrawer();
+
+    const [dontShowAgain, setDontShowAgain] = useState<boolean>(isMessageHidden || false);
+
+    const handleSuccess = () => {
+        close();
+        if (dontShowAgain) {
+            hideMessage();
+        }
+    };
+
+    const { remove, isRemovingPaymentMethod } = useRemovePaymentMethod(handleSuccess);
+
+    const handleSubmit = (paymentMethodId: number) => {
+        remove(paymentMethodId);
+    };
+
+    if (!paymentMethod || isMessageHidden) {
+        return null;
+    }
+
+    return (
+        <BasicDrawer data-fs-bp-remove-payment-methods-drawer close={close} {...props}>
+            <BasicDrawer.Heading title="Remove payment method from unit" onClose={close} />
+            <BasicDrawer.Body>
+                <section data-fs-payment-methods-drawer>
+                    <p data-fs-bp-remove-payment-methods-drawer-description>
+                        Remove <span>{paymentMethod?.name}</span> contract from{" "}
+                        <span>{orgUnit?.name}</span> organizational unit?
+                    </p>
+                    <p data-fs-bp-remove-payment-methods-drawer-description>
+                        This action will prevent users in this unit from acessing this payment
+                        method during checkout.
+                    </p>
+                    <CheckboxField
+                        data-fs-checkbox-field-content
+                        data-fs-bp-payment-methods-checkbox
+                        label="Don't show this message again"
+                        id="prevent-message"
+                        checked={dontShowAgain}
+                        onChange={(e) => setDontShowAgain(e.target.checked)}
+                    />
+                </section>
+            </BasicDrawer.Body>
+
+            <BasicDrawer.Footer data-fs-bp-add-payment-methods-drawer-footer>
+                <BasicDrawer.Button variant="ghost" onClick={close}>
+                    Cancel
+                </BasicDrawer.Button>
+                <BasicDrawer.Button
+                    variant="confirm"
+                    isLoading={isRemovingPaymentMethod}
+                    onClick={() => handleSubmit(paymentMethod.id)}
+                    disabled={readonly}
+                >
+                    Remove
+                </BasicDrawer.Button>
+            </BasicDrawer.Footer>
+        </BasicDrawer>
+    );
+};

package/src/features/payment-methods/components/RemovePaymentMethodsDrawer/remove-payment-methods-drawer.scss

@@ -0,0 +1,40 @@
+[data-fs-bp-remove-payment-methods-drawer] {
+    [data-fs-payment-methods-drawer] {
+        @import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
+        @import "@faststore/ui/src/components/molecules/CheckboxField/styles.scss";
+
+        [data-fs-bp-remove-payment-methods-drawer-description] {
+            color: #1f1f1f;
+            margin-bottom: var(--fs-spacing-3);
+
+            span {
+                color: #0366dd;
+            }
+        }
+
+        [data-fs-bp-payment-methods-checkbox] {
+            border-color: #e5e5e5;
+        }
+
+        [data-fs-bp-payment-methods-checkbox]:checked {
+            background-color: #0366dd;
+        }
+
+        [data-fs-bp-basic-drawer-button-loading-indicator] {
+            position: relative;
+        }
+
+        [data-fs-checkbox-field-content] {
+            label {
+                color: #000;
+                font-size: var(--fs-text-size-1);
+            }
+        }
+    }
+
+    [data-fs-bp-add-payment-methods-drawer-footer] {
+        display: flex;
+        justify-content: flex-end;
+        gap: var(--fs-spacing-3);
+    }
+}

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

@@ -0,0 +1,40 @@
+import { InternalSearch } from "../../../shared/components";
+import { InternalSearchProps } from "../../../shared/components/InternalSearch/InternalSearch";
+import { useQueryParams } from "../../../shared/hooks";
+import type { PaymentMethodData } from "../../types";
+
+export type SearchPaymentMethodsProps = InternalSearchProps & {
+    data: PaymentMethodData[] | number;
+    paymentMethodsData: PaymentMethodData[] | number;
+};
+
+export const SearchPaymentMethods = ({
+    data,
+    paymentMethodsData,
+    ...props
+}: SearchPaymentMethodsProps) => {
+    const { setQueryString, removeQueryString } = useQueryParams();
+
+    const getCount = (value: PaymentMethodData[] | number) =>
+        typeof value === "number" ? value : value?.length ?? 0;
+
+    return (
+        <div data-fs-bp-payment-methods-search-container>
+            <InternalSearch
+                // TODO: Corrigir warning do componente InternalSearch ( A component contains an input of type undefined with both value and defaultValue props. Input elements must be either controlled or uncontrolled )
+                textSearch={
+                    props.textSearch
+                        ? (searchTerm) => props.textSearch(searchTerm)
+                        : (searchTerm) => {
+                              searchTerm
+                                  ? setQueryString("search", searchTerm)
+                                  : removeQueryString("search");
+                          }
+                }
+            />
+            <p data-fs-bp-payment-methods-search-container-counter>
+                {`${getCount(data)} of ${getCount(paymentMethodsData)}`}
+            </p>
+        </div>
+    );
+};

package/src/features/payment-methods/components/SearchPaymentMethods/search-payment-methods.scss

@@ -0,0 +1,15 @@
+@import "../../../shared/components/InternalSearch/internal-search.scss";
+
+[data-fs-bp-payment-methods-search-container] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--fs-spacing-1);
+    padding-bottom: var(--fs-spacing-5);
+    width: 100%;
+
+    [data-fs-bp-payment-methods-search-container-counter] {
+        font-size: var(--fs-text-size-1);
+        color: #5c5c5c;
+    }
+}

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

@@ -0,0 +1,4 @@
+export { AddPaymentMethodsDrawer } from "./AddPaymentMethodsDrawer/AddPaymentMethodsDrawer";
+export { RemovePaymentMethodsDrawer } from "./RemovePaymentMethodsDrawer/RemovePaymentMethodsDrawer";
+export { RemoveMethodButton } from "./RemoveMethodButton/RemoveMethodButton";
+export { SearchPaymentMethods } from "./SearchPaymentMethods/SearchPaymentMethods";

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

@@ -0,0 +1,3 @@
+export * from "./useAddPaymentMethodsToUnit";
+export * from "./useGetPaymentMethodsByUnitId";
+export * from "./useRemovePaymentMethodsFromUnit";

package/src/features/payment-methods/hooks/useAddPaymentMethodsToUnit.ts

@@ -0,0 +1,27 @@
+import { type MutationOptions, useMutation } from "../../shared/hooks";
+import {
+    addPaymentMethodsToUnitService,
+    type AddPaymentMethodsToUnitServiceProps,
+} from "../services";
+
+export const useAddPaymentMethodsToUnit = (
+    options?: MutationOptions<AwaitedType<typeof addPaymentMethodsToUnitService>>
+) => {
+    const { mutate, isLoading, error } = useMutation<
+        AwaitedType<typeof addPaymentMethodsToUnitService>,
+        Omit<AddPaymentMethodsToUnitServiceProps, "cookie">
+    >(
+        (variables, clientContext) =>
+            addPaymentMethodsToUnitService({
+                ...variables,
+                cookie: clientContext.cookie,
+            }),
+        options
+    );
+
+    return {
+        addPaymentMethods: mutate,
+        isAddPaymentMethodsLoading: isLoading,
+        hasAddPaymentMethodsError: error,
+    };
+};