@vtex/faststore-plugin-buyer-portal 1.0.35 → 1.0.36

package/package.json

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

package/public/buyer-portal-icons.svg

@@ -247,4 +247,25 @@
       d="M3 18C2.45 18 1.97917 17.8042 1.5875 17.4125C1.19583 17.0208 1 16.55 1 16V3H0V1H5V0H11V1H16V3H15V16C15 16.55 14.8042 17.0208 14.4125 17.4125C14.0208 17.8042 13.55 18 13 18H3ZM13 3H3V16H13V3ZM5 14H7V5H5V14ZM9 14H11V5H9V14Z"
       fill="currentColor" />
   </symbol>
-</svg>
+
+  <symbol
+    id="ErrorX"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 -960 960 960"
+    fill="currentColor">
+    <path
+      d="m336-280 144-144 144 144 56-56-144-144 144-144-56-56-144 144-144-144-56 56 144 144-144 144 56 56ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z"/>
+  </symbol>
+
+
+  <symbol
+    id="BookmarkAdd"
+    viewBox="0 0 13 15"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg">
+    <path d="M0 15V2.5C0 2.08181 0.145833 1.72375 0.4375 1.42583C0.729167 1.12806 1.08333 0.986111 1.5 1H6V2.5H1.5V12.7708L5 11.375L8.5 12.7708V7H10V15L5 13L0 15ZM9.25 5.25V3.75H7.75V2.25H9.25V0.75H10.75V2.25H12.25V3.75H10.75V5.25H9.25Z"/>
+  </symbol>
+
+
+</svg>
+

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

@@ -1,6 +1,10 @@
 import { Client } from "../../shared/clients/Client";
 import { getApiUrl } from "../../shared/utils";
-import type { AddressData } from "../types";
+import type { AddressData, AddressInput } from "../types";
+
+type AddressList = {
+  addresses: AddressData[];
+};
 
 export default class AddressesClient extends Client {
   constructor() {
@@ -8,7 +12,87 @@ export default class AddressesClient extends Client {
   }
 
   getAddressesByCustomerId(customerId: string, cookie: string) {
-    return this.get<{ addresses: AddressData[] }>(`addresses/${customerId}`, {
+    return this.get<AddressList>(`addresses/${customerId}`, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
+
+  getAddressById(addressId: string, cookie: string) {
+    return this.get<AddressData>(`address/${addressId}`, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
+
+  searchAddressesByName(customerId: string, name: string, cookie: string) {
+    return this.get<AddressList>(
+      `search/addresses/${customerId}?name=${name}`,
+      {
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
+
+  createNewAddress(data: AddressInput, customerId: string, cookie: string) {
+    const formatedAddress = {
+      name: data.name,
+      zip: data.zip,
+      streetAddress: data.streetAddress,
+      neighborhood: data.neighborhood,
+      streetAddress2: data.streetAddress2,
+      city: data.city,
+      state: data.state,
+      country: data.countryCode,
+      geoCordinates: data.geoCordinates,
+      types: data.types,
+      userId: customerId,
+      isActive: true,
+    };
+
+    return this.post(
+      `addresses/${customerId}`,
+      { ...formatedAddress },
+      {
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
+
+  editAddress(data: AddressInput, addressId: string, cookie: string) {
+    const formatedAddress = {
+      name: data.name,
+      zip: data.zip,
+      streetAddress: data.streetAddress,
+      neighborhood: data.neighborhood,
+      streetAddress2: data.streetAddress2,
+      city: data.city,
+      state: data.state,
+      country: data.countryCode,
+      geoCordinates: data.geoCordinates,
+      types: data.types,
+      isActive: true,
+    };
+
+    return this.patch(
+      `address/${addressId}`,
+      { ...formatedAddress },
+      {
+        headers: {
+          Cookie: cookie,
+        },
+      }
+    );
+  }
+
+  deleteAddress(addressId: string, cookie: string) {
+    return this.delete(`address/${addressId}`, null, {
       headers: {
         Cookie: cookie,
       },

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

@@ -0,0 +1,19 @@
+import { Client } from "../../shared/clients/Client";
+import { getPostalCodeApiUrl } from "../../shared/utils";
+import type { CheckoutAddress } from "../types";
+
+export default class PostalCodeClient extends Client {
+  constructor() {
+    super(getPostalCodeApiUrl());
+  }
+
+  getAutoCompleteAddress(countryCode: string, postalCode: string) {
+    return this.get<CheckoutAddress>(`${countryCode}/${postalCode}`, {
+      ignoreContentType: true,
+    });
+  }
+}
+
+const postalCodeClient = new PostalCodeClient();
+
+export { postalCodeClient };

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

@@ -0,0 +1,136 @@
+import { DropdownItem, Icon as UIIcon } from "@faststore/ui";
+
+import {
+  EditAddressDrawer,
+  LocationDrawer,
+  RecipientsDrawer,
+  RemoveAddressDrawer,
+  DeleteAddressDrawer,
+} from "..";
+import { useDrawerProps, useBuyerPortal } from "../../../shared/hooks";
+import { BasicDropdownMenu, Icon } from "../../../shared/components";
+import type { AddressData } from "../../types";
+
+export type AddressDropdownMenuProps = {
+  currentAddress: AddressData;
+  onUpdate?: () => void;
+  onCreate?: () => void;
+  isComplete?: boolean;
+};
+
+export const AddressDropdownMenu = ({
+  currentAddress,
+}: AddressDropdownMenuProps) => {
+  const { currentOrgUnit } = useBuyerPortal();
+
+  const idsPath = currentOrgUnit?.path?.ids?.split("/") ?? [];
+
+  const isRootLevelOrgUnit = idsPath.length === 2 ?? false;
+
+  const {
+    open: openEditDrawerProps,
+    isOpen: isEditDrawerOpen,
+    ...editDrawerProps
+  } = useDrawerProps();
+
+  const {
+    open: openLocationDrawer,
+    isOpen: isOpenLocationDrawer,
+    ...locationDrawerProps
+  } = useDrawerProps();
+
+  const {
+    open: openRecipientsDrawer,
+    isOpen: isOpenRecipientsDrawer,
+    ...recipientDrawerProps
+  } = useDrawerProps();
+
+  const {
+    open: openRemoveAddressDrawer,
+    isOpen: isOpenRemoveAddressDrawer,
+    ...removeAddressDrawerProps
+  } = useDrawerProps();
+
+  const {
+    open: openDeleteAddressDrawer,
+    isOpen: isOpenDeleteAddressDrawer,
+    ...deleteAddressDrawerProps
+  } = useDrawerProps();
+
+  const sizeProps = { width: 20, height: 20 };
+
+  return (
+    <>
+      <BasicDropdownMenu data-fs-bp-dropdown-menu>
+        <DropdownItem onClick={openEditDrawerProps}>
+          <Icon name="Edit" {...sizeProps} />
+          Edit details
+        </DropdownItem>
+        <DropdownItem onClick={openLocationDrawer}>
+          <UIIcon name="PlusCircle" {...sizeProps} />
+          Add Locations
+        </DropdownItem>
+        <DropdownItem onClick={openRecipientsDrawer}>
+          <UIIcon name="PlusCircle" {...sizeProps} />
+          Add Recipients
+        </DropdownItem>
+        <DropdownItem onClick={() => {}}>
+          <Icon name="BookmarkAdd" {...sizeProps} />
+          Set as Default
+        </DropdownItem>
+
+        <BasicDropdownMenu.Separator />
+        <DropdownItem onClick={openRemoveAddressDrawer}>
+          <UIIcon name="MinusCircle" {...sizeProps} />
+          Remove from Unit
+        </DropdownItem>
+        {isRootLevelOrgUnit && (
+          <DropdownItem onClick={openDeleteAddressDrawer}>
+            <Icon name="Trash" {...sizeProps} data-fs-bp-delete-address />
+            <span data-fs-bp-delete-address>Delete</span>
+          </DropdownItem>
+        )}
+      </BasicDropdownMenu>
+      {isEditDrawerOpen && (
+        <EditAddressDrawer
+          readonly
+          {...editDrawerProps}
+          isOpen={isEditDrawerOpen}
+          currentAddress={currentAddress}
+        />
+      )}
+      {isOpenLocationDrawer && (
+        <LocationDrawer
+          readonly
+          {...locationDrawerProps}
+          isOpen={isOpenLocationDrawer}
+        />
+      )}
+      {isOpenRecipientsDrawer && (
+        <RecipientsDrawer
+          readonly
+          {...recipientDrawerProps}
+          isOpen={isOpenRecipientsDrawer}
+        />
+      )}
+      {isOpenRemoveAddressDrawer && (
+        <RemoveAddressDrawer
+          readonly
+          addressName={currentAddress.name}
+          addressId={currentAddress.id}
+          {...removeAddressDrawerProps}
+          isOpen={isOpenRemoveAddressDrawer}
+        />
+      )}
+      {isOpenDeleteAddressDrawer && (
+        <DeleteAddressDrawer
+          readonly
+          addressName={currentAddress.name}
+          addressId={currentAddress.id}
+          isOpen={isOpenDeleteAddressDrawer}
+          {...deleteAddressDrawerProps}
+        />
+      )}
+    </>
+  );
+};

package/src/features/addresses/components/AddressDropdownMenu/address-dropdown-menu.scss

@@ -0,0 +1,5 @@
+[data-fs-dropdown-menu][data-fs-bp-basic-dropdown-menu]
+  [data-fs-dropdown-item]
+  [data-fs-bp-delete-address] {
+  color: #d32420 !important;
+}

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

@@ -0,0 +1,280 @@
+import {
+  InputText,
+  ErrorMessage,
+  AutocompleteDropdown,
+  Icon,
+} from "../../../shared/components";
+import { CountryOptions } from "../../data/countries";
+import { states as StateOptions } from "../../data/states";
+import {
+  maskPostalCode,
+  validatePostalCode,
+} from "../../../shared/utils/postalCode";
+import { AddressData, AddressInput } from "../../types";
+import { useState } from "react";
+import { useDebouncedSearchAddress } from "../../hooks/useDebouncedSearchAddress";
+import { ExistingAddress } from "../";
+
+export type AddressFormProps = {
+  address: AddressInput;
+  isTouched: boolean;
+  setAddress: (address: AddressInput) => void;
+  setInvalidAddress: (hasError: boolean) => void;
+  useExistingAddress?: boolean;
+  setUseExistingAddress?: (useExistingAddress: boolean) => void;
+  completedAddress?: AddressData;
+  setCompletedAddress?: (completedAddress: AddressData) => void;
+  isEdit?: boolean;
+};
+
+export const AddressForm = ({
+  address,
+  isTouched,
+  setAddress,
+  setInvalidAddress,
+  isEdit = false,
+  useExistingAddress,
+  setUseExistingAddress,
+  completedAddress,
+  setCompletedAddress,
+}: AddressFormProps) => {
+  const addressTypeOptions = ["Shipping", "Billing", "Sold To"];
+
+  const [autoCompleteAddressName, setAutoCompleteAddressName] = useState("");
+
+  const { searchedAddresses } = useDebouncedSearchAddress(
+    autoCompleteAddressName
+  );
+
+  const cleanCompletedAddress = () => {
+    if (setCompletedAddress && setUseExistingAddress) {
+      setCompletedAddress({} as AddressData);
+      setUseExistingAddress(false);
+    }
+  };
+
+  const handleChangePostalCode = (postalCode: string) => {
+    setAddress({
+      ...address,
+      zip: maskPostalCode(postalCode, address.countryCode),
+    });
+  };
+
+  return (
+    <>
+      {!useExistingAddress ? (
+        <div>
+          {!isEdit && <span>Fill in the address details</span>}
+
+          <AutocompleteDropdown
+            data-fs-bp-create-address-country-selector
+            label="Country"
+            value={address.country}
+            options={CountryOptions}
+            onConfirmKeyPress={(option) =>
+              setAddress({
+                ...address,
+                country: option.name,
+                countryCode: option.id,
+              })
+            }
+            renderOption={(option, index) => (
+              <AutocompleteDropdown.Item
+                key={option.id}
+                closeOnClick={true}
+                index={index}
+                isSelected={address.country === option.name}
+                onClick={() =>
+                  setAddress({
+                    ...address,
+                    country: option.name,
+                    countryCode: option.id,
+                  })
+                }
+              >
+                {option?.name}
+                {address.country === option?.name && (
+                  <Icon name="Check" width={12} height={12} />
+                )}
+              </AutocompleteDropdown.Item>
+            )}
+          />
+
+          {isEdit ? (
+            <InputText
+              label="Address Name"
+              value={address.name}
+              wrapperProps={{ style: { marginTop: 16 } }}
+              hasError={isTouched && !address.name?.trim()}
+              onChange={(event) =>
+                setAddress({ ...address, name: event.target.value })
+              }
+            />
+          ) : (
+            <AutocompleteDropdown
+              label="Address Name"
+              value={autoCompleteAddressName}
+              options={searchedAddresses}
+              onChange={(event) => {
+                setAutoCompleteAddressName(event.currentTarget.value);
+                setAddress({ ...address, name: event.target.value });
+              }}
+              renderOption={(option, index) => (
+                <AutocompleteDropdown.Item
+                  key={option.id}
+                  closeOnClick
+                  index={index}
+                  isSelected={completedAddress?.id === option?.id}
+                  onClick={() => {
+                    if (setCompletedAddress && setUseExistingAddress) {
+                      setCompletedAddress(option);
+                      setUseExistingAddress(true);
+                    }
+                  }}
+                >
+                  {option?.name}
+                  <br />
+                  {option?.streetAddress}
+                  {completedAddress?.id === option?.id && (
+                    <Icon name="Check" width={12} height={12} />
+                  )}
+                </AutocompleteDropdown.Item>
+              )}
+            />
+          )}
+
+          <ErrorMessage
+            show={isTouched && !address.name?.trim()}
+            message="Address Name is required"
+          />
+
+          <InputText
+            label="Street Address"
+            value={address.streetAddress}
+            wrapperProps={{ style: { marginTop: 16 } }}
+            hasError={isTouched && !address.streetAddress?.trim()}
+            onChange={(event) =>
+              setAddress({ ...address, streetAddress: event.target.value })
+            }
+          />
+
+          <ErrorMessage
+            show={isTouched && !address.streetAddress?.trim()}
+            message="Street Address is required"
+          />
+
+          <InputText
+            label="Apt, Suite, Building (optional)"
+            value={address.streetAddress2}
+            wrapperProps={{ style: { marginTop: 16, marginBottom: 16 } }}
+            onChange={(event) =>
+              setAddress({ ...address, streetAddress2: event.target.value })
+            }
+          />
+
+          <InputText
+            label="City"
+            value={address.city}
+            wrapperProps={{ style: { marginTop: 16 } }}
+            hasError={isTouched && !address.city?.trim()}
+            onChange={(event) =>
+              setAddress({ ...address, city: event.target.value })
+            }
+          />
+
+          <AutocompleteDropdown
+            data-fs-bp-create-address-state-selector
+            label="State"
+            value={address.state}
+            options={
+              address.countryCode ? StateOptions[address.countryCode] : []
+            }
+            onConfirmKeyPress={(option) =>
+              setAddress({ ...address, state: option })
+            }
+            disabled={!address.countryCode}
+            renderOption={(option, index) => (
+              <AutocompleteDropdown.Item
+                key={`${option}-${index}`}
+                closeOnClick={true}
+                index={index}
+                isSelected={
+                  address.state.toLocaleLowerCase() ===
+                  option.toLocaleLowerCase()
+                }
+                onClick={() => setAddress({ ...address, state: option })}
+              >
+                {option}
+                {address.state.toLowerCase() === option.toLocaleLowerCase() && (
+                  <Icon name="Check" width={12} height={12} />
+                )}
+              </AutocompleteDropdown.Item>
+            )}
+          />
+
+          <InputText
+            label="Postal Code"
+            value={address.zip}
+            wrapperProps={{ style: { marginTop: 16, marginBottom: 16 } }}
+            hasError={isTouched && !address.zip?.trim()}
+            onChange={(event) => handleChangePostalCode(event.target.value)}
+            disabled={!address.countryCode}
+          />
+
+          <ErrorMessage
+            show={isTouched && !address.zip?.trim()}
+            message="Postal Code is required"
+          />
+
+          <ErrorMessage
+            show={isTouched && !address.city?.trim()}
+            message="City is required"
+          />
+
+          {isEdit && (
+            <InputText
+              label="Geo coordinates (Optional)"
+              value={address.geoCordinates}
+              wrapperProps={{ style: { marginTop: 16, marginBottom: 16 } }}
+              onChange={(event) =>
+                setAddress({ ...address, geoCordinates: event.target.value })
+              }
+            />
+          )}
+
+          <AutocompleteDropdown
+            label="Address Type"
+            value={address.types}
+            options={addressTypeOptions}
+            onConfirmKeyPress={(option) =>
+              setAddress({ ...address, types: [option] })
+            }
+            renderOption={(option, index) => (
+              <AutocompleteDropdown.Item
+                key={`${option}-${index}`}
+                closeOnClick={true}
+                index={index}
+                isSelected={
+                  address?.types[0]?.toLocaleLowerCase() ===
+                  option.toLocaleLowerCase()
+                }
+                onClick={() => setAddress({ ...address, types: [option] })}
+              >
+                {option}
+                {address?.types[0]?.toLowerCase() ===
+                  option.toLocaleLowerCase() && (
+                  <Icon name="Check" width={12} height={12} />
+                )}
+              </AutocompleteDropdown.Item>
+            )}
+          />
+        </div>
+      ) : (
+        <ExistingAddress
+          addressName={completedAddress?.name ?? ""}
+          removeExistingAddress={cleanCompletedAddress}
+        />
+      )}
+    </>
+  );
+};

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

@@ -1,12 +1,15 @@
-import { Toggle } from "@faststore/ui";
+import { Toggle, Dropdown, DropdownButton } from "@faststore/ui";
 import Link from "next/link";
 import { Icon, Tag } from "../../../shared/components";
+import type { AddressData } from "../../types";
+import { AddressDropdownMenu } from "..";
 
 export type AddressLineProps = {
   id: string;
   name: string;
   types: string[];
   isActive: boolean;
+  currentAddress: AddressData;
   href: string;
 };
 
@@ -16,6 +19,7 @@ export const AddressLine = ({
   id,
   href,
   isActive,
+  currentAddress,
 }: AddressLineProps) => (
   <li data-fs-addresses-line>
     <Link href={href} data-fs-addresses-line-link>
@@ -35,13 +39,11 @@ export const AddressLine = ({
     </Link>
 
     <Toggle id={id} defaultChecked={isActive} />
-    <button type="button" data-fs-addresses-dropdown-trigger>
-      <Icon
-        name="MoreVert"
-        width={20}
-        height={20}
-        data-fs-addresses-dropdown-trigger-icon
-      />
-    </button>
+    <Dropdown>
+      <DropdownButton data-fs-addresses-dropdown-trigger>
+        <Icon name="MoreVert" data-fs-addresses-dropdown-trigger-icon />
+      </DropdownButton>
+      <AddressDropdownMenu currentAddress={currentAddress} />
+    </Dropdown>
   </li>
 );