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

package/.github/workflows/ci.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
 
       - name: Install dependencies in plugin
         run: yarn install

package/.github/workflows/release.yaml

@@ -21,7 +21,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: "yarn"
           registry-url: "https://registry.npmjs.org"
 

package/CHANGELOG.md

@@ -7,6 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+- Address Recipients Add & Delete Feature
+- Address Recipients Edit Feature
+
 ### Fixed
 
 - UserData accepts undefined e-mail

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "dependencies": {
     "@types/react-dom": "^19.0.3",
-    "cypress": "13",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@faststore/core": "^3.0.147",
-    "@faststore/ui": "^3.0.147",
+    "@faststore/core": "^3.41.5",
+    "@faststore/ui": "^3.41.5",
     "@types/react": "^18.2.42",
+    "cypress": "13",
     "next": "13.5.7",
     "typescript": "4.7.3"
   },

package/plugin.config.js

@@ -5,7 +5,6 @@ module.exports = {
       path: "/buyer-portal/[[...contractMode]]",
       appLayout: false,
     },
-
     "address-details": {
       path: "/buyer-portal/address/[orgUnitId]/[contractId]/[addressId]",
       appLayout: false,
@@ -18,7 +17,6 @@ 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]",
@@ -28,10 +26,10 @@ module.exports = {
       path: "/buyer-portal/credit-cards/[orgUnitId]/[contractId]",
       appLayout: false,
     },
-    // collections: {
-    //   path: "/buyer-portal/collections/[orgUnitId]/[contractId]",
-    //   appLayout: false,
-    // },
+    collections: {
+      path: "/buyer-portal/collections/[orgUnitId]/[contractId]",
+      appLayout: false,
+    },
     // "po-numbers": {
     //   path: "/buyer-portal/po-numbers/[orgUnitId]/[contractId]",
     //   appLayout: false,

package/public/buyer-portal-icons.svg

@@ -1,4 +1,14 @@
+
 <svg style="display:none">
+  <symbol 
+  id="Shapes" 
+  viewBox="0 0 19 20" 
+  fill="currentColor" 
+  xmlns="http://www.w3.org/2000/svg"
+  >
+  <path fill="currentColor" d="M3.5 9L9 0L14.5 9H3.5ZM14.5 20C13.25 20 12.1875 19.5625 11.3125 18.6875C10.4375 17.8125 10 16.75 10 15.5C10 14.25 10.4375 13.1875 11.3125 12.3125C12.1875 11.4375 13.25 11 14.5 11C15.75 11 16.8125 11.4375 17.6875 12.3125C18.5625 13.1875 19 14.25 19 15.5C19 16.75 18.5625 17.8125 17.6875 18.6875C16.8125 19.5625 15.75 20 14.5 20ZM0 19.5V11.5H8V19.5H0ZM14.5 18C15.2 18 15.7917 17.7583 16.275 17.275C16.7583 16.7917 17 16.2 17 15.5C17 14.8 16.7583 14.2083 16.275 13.725C15.7917 13.2417 15.2 13 14.5 13C13.8 13 13.2083 13.2417 12.725 13.725C12.2417 14.2083 12 14.8 12 15.5C12 16.2 12.2417 16.7917 12.725 17.275C13.2083 17.7583 13.8 18 14.5 18ZM2 17.5H6V13.5H2V17.5ZM7.05 7H10.95L9 3.85L7.05 7Z" />
+  </symbol>
+
   <symbol id="Active" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
     viewBox="0 -960 960 960">
     <path
@@ -14,6 +24,11 @@
     <path d="M440-440H200v-80h240v-240h80v240h240v80H520v240h-80v-240Z" />
   </symbol>
 
+
+<symbol id="DoNotDisturb" fill="currentColor"  viewBox="0 0 20 20"  xmlns="http://www.w3.org/2000/svg">
+<path d="M5 11H15V9H5V11ZM10 20C8.61667 20 7.31667 19.7375 6.1 19.2125C4.88333 18.6875 3.825 17.975 2.925 17.075C2.025 16.175 1.3125 15.1167 0.7875 13.9C0.2625 12.6833 0 11.3833 0 10C0 8.61667 0.2625 7.31667 0.7875 6.1C1.3125 4.88333 2.025 3.825 2.925 2.925C3.825 2.025 4.88333 1.3125 6.1 0.7875C7.31667 0.2625 8.61667 0 10 0C11.3833 0 12.6833 0.2625 13.9 0.7875C15.1167 1.3125 16.175 2.025 17.075 2.925C17.975 3.825 18.6875 4.88333 19.2125 6.1C19.7375 7.31667 20 8.61667 20 10C20 11.3833 19.7375 12.6833 19.2125 13.9C18.6875 15.1167 17.975 16.175 17.075 17.075C16.175 17.975 15.1167 18.6875 13.9 19.2125C12.6833 19.7375 11.3833 20 10 20ZM10 18C12.2333 18 14.125 17.225 15.675 15.675C17.225 14.125 18 12.2333 18 10C18 7.76667 17.225 5.875 15.675 4.325C14.125 2.775 12.2333 2 10 2C7.76667 2 5.875 2.775 4.325 4.325C2.775 5.875 2 7.76667 2 10C2 12.2333 2.775 14.125 4.325 15.675C5.875 17.225 7.76667 18 10 18Z"/>
+</symbol>
+
   <symbol
     id="Address" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"
     fill="currentColor">

package/src/features/addresses/clients/AddressesClient.ts

@@ -20,24 +20,37 @@ export default class AddressesClient extends Client {
     });
   }
 
-  getAddressesByUnitId(
+  async getAddressesByUnitId(
     orgUnitId: string,
     cookie: string,
     name?: string,
     page = 1
   ) {
-    const params = new URLSearchParams();
-    if (name) params.append("name", name);
-    if (page && page > 1) params.append("page", String(page));
-    const queryString = params.toString();
+    let allAddresses: AddressData[] = [];
+    let total = 0;
 
-    const url = `unit/addresses/${orgUnitId}?${queryString}`;
+    for (let currentPage = 1; currentPage <= page; currentPage++) {
+      const params = new URLSearchParams();
+      if (name) params.append("name", name);
+      if (currentPage > 1) params.append("page", String(currentPage));
+      const queryString = params.toString();
+      const url = queryString
+        ? `unit/addresses/${orgUnitId}?${queryString}`
+        : `unit/addresses/${orgUnitId}`;
 
-    return this.get<AddressResponse>(url, {
-      headers: {
-        Cookie: cookie,
-      },
-    });
+      const response = await this.get<AddressResponse>(url, {
+        headers: {
+          Cookie: cookie,
+        },
+      });
+
+      if (response?.addresses) {
+        allAddresses = allAddresses.concat(response.addresses);
+        total = response.total;
+      }
+    }
+
+    return { addresses: allAddresses, total };
   }
 
   getAddressById(addressId: string, cookie: string) {

package/src/features/addresses/clients/RecipientsClient.ts

@@ -0,0 +1,110 @@
+import { Client } from "../../shared/clients/Client";
+import { getApiUrl } from "../../shared/utils";
+import type { RecipientData, RecipientInput } from "../types";
+import type {
+  AddRecipientsResponse,
+  RecipientsPayload,
+  RecipientsResponse,
+} from "../types/AddressData";
+
+export default class RecipientsClient extends Client {
+  constructor() {
+    super(getApiUrl());
+  }
+
+  async getRecipientsByCustomerIdAndAddressId(
+    customerId: string,
+    addressId: string,
+    cookie: string,
+    name?: string,
+    page = 1
+  ) {
+    let recipientsData: RecipientData[] = [];
+    let total = 0;
+
+    for (let currentPage = 1; currentPage <= page; currentPage++) {
+      const params = new URLSearchParams();
+      if (name) params.append("name", name);
+      if (currentPage > 1) params.append("page", String(currentPage));
+      const queryString = params.toString();
+
+      const response = await this.get<RecipientsResponse>(
+        `customers/${customerId}/address/${addressId}/recipients?${queryString}`,
+        {
+          headers: {
+            Cookie: cookie,
+          },
+        }
+      );
+
+      if (response?.data) {
+        recipientsData = recipientsData.concat(response.data);
+        total = response.total;
+      }
+    }
+
+    return { data: recipientsData, total };
+  }
+
+  addRecipientsToAddress(
+    customerId: string,
+    addressId: string,
+    recipients: RecipientInput[],
+    cookie: string
+  ) {
+    return this.post<AddRecipientsResponse, RecipientsPayload[]>(
+      `customers/${customerId}/address/${addressId}/recipients`,
+      recipients.map((recipient) => ({
+        name: recipient.recipientName,
+        phone: recipient.recipientPhone,
+      })),
+      {
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
+
+  editRecipientsToAddress(
+    customerId: string,
+    addressId: string,
+    recipientId: string,
+    recipientData: RecipientInput,
+    cookie: string
+  ) {
+    return this.put<Response, RecipientsPayload>(
+      `customers/${customerId}/address/${addressId}/recipients/${recipientId}`,
+      {
+        name: recipientData.recipientName,
+        phone: recipientData.recipientPhone,
+      },
+      {
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
+
+  deleteRecipientFromAddress(
+    customerId: string,
+    addressId: string,
+    recipientId: string,
+    cookie: string
+  ) {
+    return this.delete(
+      `customers/${customerId}/address/${addressId}/recipients/${recipientId}`,
+      null,
+      {
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
+}
+
+const recipientsClient = new RecipientsClient();
+
+export { recipientsClient };

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

@@ -0,0 +1,87 @@
+import { useState } from "react";
+
+import { type BasicDrawerProps, BasicDrawer } from "../../../shared/components";
+import { RecipientsForm } from "..";
+import type { RecipientInput } from "../../types";
+import { useUI } from "@faststore/ui";
+import { useAddRecipientsToAddress } from "../../hooks/useAddRecipientsToAddress";
+import { useRouter } from "next/router";
+
+export type AddRecipientsDrawerProps = Omit<BasicDrawerProps, "children"> & {
+  readonly?: boolean;
+  addressId?: string;
+  refetchRecipients: () => void;
+};
+
+export const AddRecipientsDrawer = ({
+  close,
+  refetchRecipients,
+  addressId,
+  readonly,
+  ...props
+}: AddRecipientsDrawerProps) => {
+  const [recipients, setRecipients] = useState<RecipientInput[]>([]);
+  const router = useRouter();
+  const { pushToast } = useUI();
+
+  const handleAddRecipientToAddressSuccess = () => {
+    pushToast({
+      message: "Recipients added successfully ",
+      status: "INFO",
+    });
+    refetchRecipients();
+    close();
+  };
+
+  const { addRecipientsToAddress, isAddRecipientToAddressLoading } =
+    useAddRecipientsToAddress({
+      onSuccess: handleAddRecipientToAddressSuccess,
+      onError: (err) => {
+        pushToast({
+          message: "An error occurred while adding recipients",
+          status: "ERROR",
+        });
+      },
+    });
+
+  const handleConfirmClick = () => {
+    if (!isAddRecipientToAddressLoading) {
+      addRecipientsToAddress({
+        recipients,
+        contractId: router.query.contractId as string,
+        addressId: addressId ?? (router.query.addressId as string),
+      });
+    }
+  };
+
+  const isConfirmButtonEnabled =
+    recipients.length > 0 &&
+    recipients.every(
+      (recipient) =>
+        recipient.recipientName.trim() !== "" &&
+        recipient.recipientPhone.trim() !== ""
+    );
+
+  return (
+    <BasicDrawer data-fs-bp-create-address-drawer close={close} {...props}>
+      <BasicDrawer.Heading title="Add Recipients" onClose={close} />
+      <BasicDrawer.Body>
+        <RecipientsForm recipients={recipients} setRecipients={setRecipients} />
+      </BasicDrawer.Body>
+
+      <BasicDrawer.Footer>
+        <BasicDrawer.Button variant="ghost" onClick={close}>
+          Cancel
+        </BasicDrawer.Button>
+        <BasicDrawer.Button
+          variant="confirm"
+          isLoading={isAddRecipientToAddressLoading}
+          onClick={handleConfirmClick}
+          disabled={!isConfirmButtonEnabled}
+        >
+          Save
+        </BasicDrawer.Button>
+      </BasicDrawer.Footer>
+    </BasicDrawer>
+  );
+};

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

@@ -3,13 +3,14 @@ import { DropdownItem, Icon as UIIcon } from "@faststore/ui";
 import {
   EditAddressDrawer,
   LocationDrawer,
-  RecipientsDrawer,
+  AddRecipientsDrawer,
   RemoveAddressDrawer,
   DeleteAddressDrawer,
 } from "..";
 import { useDrawerProps, useBuyerPortal } from "../../../shared/hooks";
 import { BasicDropdownMenu, Icon } from "../../../shared/components";
 import type { AddressData } from "../../types";
+import { useRouter } from "next/router";
 
 export type AddressDropdownMenuProps = {
   currentAddress: AddressData;
@@ -22,10 +23,11 @@ export const AddressDropdownMenu = ({
   currentAddress,
 }: AddressDropdownMenuProps) => {
   const { currentOrgUnit } = useBuyerPortal();
+  const router = useRouter();
 
   const idsPath = currentOrgUnit?.path?.ids?.split("/") ?? [];
 
-  const isRootLevelOrgUnit = idsPath.length === 2 ?? false;
+  const isRootLevelOrgUnit = idsPath.length === 2;
 
   const {
     open: openEditDrawerProps,
@@ -110,10 +112,12 @@ export const AddressDropdownMenu = ({
         />
       )}
       {isOpenRecipientsDrawer && (
-        <RecipientsDrawer
+        <AddRecipientsDrawer
           readonly
           {...recipientDrawerProps}
           isOpen={isOpenRecipientsDrawer}
+          refetchRecipients={() => router.reload()}
+          addressId={currentAddress.id}
         />
       )}
       {isOpenRemoveAddressDrawer && (

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

@@ -0,0 +1,238 @@
+import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
+
+import { IconButton } from "@faststore/ui";
+import {
+  Icon,
+  InternalSearch,
+  Paginator,
+  Table,
+} from "../../../shared/components";
+import { EmptyState } from "../../../shared/components/EmptyState/EmptyState";
+import { usePageItems } from "../../../shared/hooks/usePageItems";
+import { RecipientData } from "../../types";
+import { maskPhoneNumber } from "../../../shared/utils/phoneNumber";
+import { useDrawerProps } from "../../../shared/hooks";
+import { DeleteRecipientAddressDrawer } from "../DeleteRecipientAddressDrawer/DeleteRecipientAddressDrawer";
+import { EditRecipientAddressDrawer } from "../EditRecipientAddressDrawer/EditRecipientAddressDrawer";
+import { useSearchAddressRecipients } from "../../hooks/useSearchAddressRecipients";
+import { useRouter } from "next/router";
+
+export type AddressRecipientsListRef = {
+  refetchRecipients: () => void;
+};
+
+export type AddressRecipientsListProps = {
+  recipients: RecipientData[];
+  total: number;
+  search: string;
+  page: number;
+  countryCode?: string;
+};
+
+export const AddressRecipientsList = forwardRef<
+  AddressRecipientsListRef,
+  AddressRecipientsListProps
+>(
+  (
+    {
+      recipients: initialRecipients,
+      search,
+      total,
+      page = 1,
+      countryCode = "",
+    }: AddressRecipientsListProps,
+    ref
+  ) => {
+    const router = useRouter();
+
+    const [totalRecipients, setTotalRecipients] = useState(total);
+
+    const {
+      isLoading,
+      items: recipients,
+      searchTerm,
+      setSearchTerm,
+      increasePage,
+      setIsLoading,
+      setItems,
+    } = usePageItems<RecipientData>({
+      initialItems: initialRecipients,
+      search,
+      page,
+    });
+
+    const [currentRecipient, setCurrentRecipient] = useState<RecipientData>();
+
+    const { searchAddressRecipients, refetchSearchAddressRecipients } =
+      useSearchAddressRecipients({
+        addressId: router.query.addressId as string,
+        contractId: router.query.contractId as string,
+        page: 1,
+        search: search ?? "",
+      });
+
+    useEffect(() => {
+      if (searchAddressRecipients?.data) {
+        setItems(searchAddressRecipients.data);
+        setTotalRecipients(searchAddressRecipients.total);
+        setIsLoading(false);
+      }
+    }, [searchAddressRecipients]);
+
+    const handleRefetchRecipients = () => {
+      setIsLoading(true);
+      refetchSearchAddressRecipients();
+    };
+
+    useImperativeHandle(ref, () => ({
+      refetchRecipients: handleRefetchRecipients,
+    }));
+
+    const {
+      open: openDeleteRecipientsAddressDrawer,
+      isOpen: isOpenDeleteRecipientAddressDrawer,
+      ...deleteRecipientAddressDrawerProps
+    } = useDrawerProps();
+
+    const {
+      open: openEditRecipientsAddressDrawer,
+      isOpen: isOpenEditRecipientAddressDrawer,
+      ...editRecipientAddressDrawerProps
+    } = useDrawerProps();
+
+    const renderActions = (recipient: RecipientData) => {
+      return (
+        <div data-fs-buyer-portal-recipients-actions>
+          <IconButton
+            data-fs-buyer-portal-recipients-actions-icon
+            icon={<Icon name="Trash" width={20} height={20} />}
+            aria-label={"remove recipient action"}
+            onClick={() => {
+              setCurrentRecipient(recipient);
+              openDeleteRecipientsAddressDrawer();
+            }}
+          />
+          <IconButton
+            data-fs-buyer-portal-recipients-actions-icon
+            icon={<Icon name="Edit" width={20} height={20} />}
+            aria-label={"Edit recipient action"}
+            onClick={() => {
+              setCurrentRecipient(recipient);
+              openEditRecipientsAddressDrawer();
+            }}
+          />
+        </div>
+      );
+    };
+
+    return (
+      <div data-fs-buyer-portal-address-recipients-list>
+        <div data-fs-buyer-portal-address-recipients-filter>
+          <InternalSearch
+            defaultValue={searchTerm}
+            textSearch={setSearchTerm}
+          />
+
+          <Paginator.Counter
+            total={totalRecipients}
+            itemsLength={recipients.length}
+          />
+        </div>
+        {!isLoading && recipients.length === 0 && searchTerm.length > 0 ? (
+          <EmptyState
+            title="No results found"
+            description="Try using different terms or filters"
+          />
+        ) : (
+          <div data-fs-address-recipients-table>
+            <Table>
+              <Table.Head
+                columns={[
+                  {
+                    key: "name",
+                    label: "Name",
+                    align: "left",
+                  },
+                  {
+                    key: "phone",
+                    label: "Phone",
+                    align: "left",
+                  },
+                  {
+                    key: "actions",
+                    label: "",
+                    align: "right",
+                    size: "large",
+                  },
+                ]}
+              />
+
+              <Table.Body>
+                {isLoading ? (
+                  <Table.Loading />
+                ) : (
+                  recipients.map((recipient) => (
+                    <Table.Row
+                      key={recipient.id}
+                      title={recipient.firstName + " " + recipient.lastName}
+                      searchTerm={search}
+                      children={
+                        recipient.phone ? (
+                          <td>
+                            <span>
+                              {maskPhoneNumber(recipient.phone, countryCode)}
+                            </span>
+                          </td>
+                        ) : null
+                      }
+                      actionIcons={renderActions(recipient as RecipientData)}
+                    />
+                  ))
+                )}
+              </Table.Body>
+            </Table>
+
+            {isOpenDeleteRecipientAddressDrawer && currentRecipient && (
+              <DeleteRecipientAddressDrawer
+                readonly
+                recipientAddressName={
+                  currentRecipient.firstName + " " + currentRecipient.lastName
+                }
+                recipientAddressId={currentRecipient.id}
+                isOpen={isOpenDeleteRecipientAddressDrawer}
+                refetchRecipients={handleRefetchRecipients}
+                {...deleteRecipientAddressDrawerProps}
+              />
+            )}
+
+            {isOpenEditRecipientAddressDrawer && currentRecipient && (
+              <EditRecipientAddressDrawer
+                readonly
+                recipient={currentRecipient}
+                isOpen={isOpenEditRecipientAddressDrawer}
+                refetchRecipients={handleRefetchRecipients}
+                {...editRecipientAddressDrawerProps}
+              />
+            )}
+
+            <div data-fs-bp-address-recipients-paginator>
+              {totalRecipients > recipients.length && (
+                <Paginator.NextPageButton
+                  onClick={increasePage}
+                  disabled={isLoading}
+                >
+                  {isLoading ? "Loading" : "Load More"}
+                </Paginator.NextPageButton>
+              )}
+
+              <Paginator.Counter
+                total={totalRecipients}
+                itemsLength={recipients.length}
+              />
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+);