@vtex/faststore-plugin-buyer-portal 1.1.39 → 1.1.40

package/cypress/constants.ts

@@ -44,4 +44,14 @@ export const TEST_DATA = {
       ACTION_TYPE: "Bypass all buying policies",
     },
   },
+  ADDRESS: {
+    EXISTING_ADDRESS: "Existing Test Address",
+    NEW_ADDRESS_NAME: "VTEX RJ",
+    NEW_ADDRESS_STREET: "Praia de Botafogo, 300",
+    EDIT_ADDRESS_STREET: "Praia de Botafogo, 400",
+    NEW_ADDRESS_COMPLEMENT: "Segundo Andar",
+    NEW_ADDRESS_CITY: "Rio de Janeiro",
+    NEW_ADDRESS_STATE: "RJ",
+    NEW_ADDRESS_POSTAL_CODE: "22250-905",
+  },
 };

package/cypress/integration/addresses.test.ts

@@ -0,0 +1,275 @@
+import { TEST_CONFIG, TEST_DATA } from "../constants";
+import { clickConfirmButton } from "../shared";
+
+function navigateToAddressByName(addressName: string) {
+  cy.get("[data-fs-addresses-table]").within(() => {
+    cy.contains(addressName).should("be.visible").parent().parent().click();
+  });
+
+  cy.wait(8000);
+}
+
+function goToAddressPage() {
+  // Navigate to Addresses page
+  cy.contains("Addresses").click();
+
+  // Address Page is loading slowly, custom wait untill we get the request optimized
+  cy.wait(10000);
+
+  // Check to see if the address section loaded
+  cy.get("[data-fs-addresses-section]", { timeout: 100000 }).should("exist");
+
+  // Check to see if contract details loaded correctly
+  cy.get("[data-fs-bp-header-inside]").should("exist");
+  cy.contains(TEST_DATA.PROFILE.TEST_CONTRACT_NAME).should("be.visible");
+}
+
+function openCreateAddressDrawer() {
+  cy.get("[data-fs-bp-header-inside]").within(() => {
+    cy.get("button").eq(1).click(); // Dropdown triggers
+  });
+
+  cy.get("[data-fs-bp-create-address-drawer]").should("be.visible");
+}
+
+function openActionsDropdown(addressName: string) {
+  cy.get("[data-fs-addresses-table]")
+    .contains(addressName)
+    .parent()
+    .parent()
+    .find("[data-fs-bp-basic-dropdown-menu-trigger]")
+    .click();
+}
+
+describe("Address Page", () => {
+  beforeEach(() => {
+    cy.login();
+  });
+  it("Should load current addresses, create a new one and be able to see it's details", () => {
+    // Visit the homepage
+    cy.visit(TEST_CONFIG.ROUTES.BUYER_PORTAL);
+
+    goToAddressPage();
+
+    // Check Existing Address
+    cy.get("[data-fs-addresses-table]").within(() => {
+      cy.contains(TEST_DATA.ADDRESS.EXISTING_ADDRESS).should("exist");
+    });
+
+    openCreateAddressDrawer();
+
+    // Fill The Address Form
+    // Open Country Selector
+    cy.get("[data-fs-bp-autocomplete-dropdown]")
+      .eq(0)
+      .click()
+      .within(() => {
+        cy.get("[data-fs-bp-autocomplete-dropdown-option]").eq(0).click();
+      });
+
+    // Address Name
+    cy.get("[data-fs-bp-autocomplete-dropdown]")
+      .eq(1)
+      .type(TEST_DATA.ADDRESS.NEW_ADDRESS_NAME);
+
+    // Street
+    cy.get("[class=street-address]").type(TEST_DATA.ADDRESS.NEW_ADDRESS_STREET);
+
+    // Complement
+    cy.get("[class=street-address2]").type(
+      TEST_DATA.ADDRESS.NEW_ADDRESS_COMPLEMENT
+    );
+
+    // City
+    cy.get("[class=address-city]").type(TEST_DATA.ADDRESS.NEW_ADDRESS_CITY);
+
+    // Rio de Janeiro as State
+    cy.get("[data-fs-bp-autocomplete-dropdown]")
+      .eq(2)
+      .click()
+      .within(() => {
+        cy.get("[data-fs-bp-autocomplete-dropdown-option]").eq(18).click();
+      });
+
+    // Postal Code
+    cy.get("[class=address-postal-code]")
+      .click()
+      .type(TEST_DATA.ADDRESS.NEW_ADDRESS_POSTAL_CODE);
+
+    // Mark as Shipping Address
+    cy.get("[data-fs-bp-autocomplete-dropdown]")
+      .eq(3)
+      .click()
+      .within(() => {
+        cy.get("[data-fs-bp-autocomplete-dropdown-option]").eq(0).click();
+      });
+
+    clickConfirmButton();
+
+    cy.wait(TEST_CONFIG.TIMEOUTS.PAGE_LOAD);
+
+    //Sometimes masterdata has cache, the reload helps with that
+    cy.reload();
+
+    // Check to see if address was created
+    cy.get("[data-fs-addresses-table]")
+      .contains(TEST_DATA.ADDRESS.NEW_ADDRESS_NAME)
+      .should("be.visible");
+  });
+  it("Should be able to edit street in specific Address via address details", () => {
+    // Visit the homepage
+    cy.visit(TEST_CONFIG.ROUTES.BUYER_PORTAL);
+
+    // Navigate to Addresses page
+    goToAddressPage();
+
+    // Navigate to Address Details
+    navigateToAddressByName(TEST_DATA.ADDRESS.NEW_ADDRESS_NAME);
+
+    // // Check if sections are rendered correctly
+    cy.contains(TEST_DATA.ADDRESS.NEW_ADDRESS_NAME).should("be.visible");
+    cy.contains(TEST_DATA.ADDRESS.NEW_ADDRESS_STREET).should("be.visible");
+    cy.contains(TEST_DATA.ADDRESS.NEW_ADDRESS_COMPLEMENT).should("be.visible");
+    cy.contains(TEST_DATA.ADDRESS.NEW_ADDRESS_POSTAL_CODE).should("be.visible");
+
+    // Open Edit Drawer
+    cy.get("[data-fs-address-details-button]").click();
+
+    cy.wait(TEST_CONFIG.TIMEOUTS.PAGE_LOAD);
+
+    // Edit street
+    cy.get("[class=street-address]")
+      .clear()
+      .type(TEST_DATA.ADDRESS.EDIT_ADDRESS_STREET);
+
+    clickConfirmButton();
+
+    cy.wait(TEST_CONFIG.TIMEOUTS.PAGE_LOAD);
+    cy.reload();
+
+    // Check to see if information is edited
+    cy.contains(TEST_DATA.ADDRESS.NEW_ADDRESS_NAME).should("be.visible");
+    cy.contains(TEST_DATA.ADDRESS.EDIT_ADDRESS_STREET).should("be.visible");
+    cy.contains(TEST_DATA.ADDRESS.NEW_ADDRESS_COMPLEMENT).should("be.visible");
+    cy.contains(TEST_DATA.ADDRESS.NEW_ADDRESS_POSTAL_CODE).should("be.visible");
+  });
+  it("Should be able to edit the address from the address list page", () => {
+    // Visit the homepage
+    cy.visit(TEST_CONFIG.ROUTES.BUYER_PORTAL);
+
+    // Navigate to Addresses page
+    goToAddressPage();
+
+    openActionsDropdown(TEST_DATA.ADDRESS.NEW_ADDRESS_NAME);
+
+    cy.contains("Edit details").click();
+
+    // Edit street
+    cy.get("[class=street-address]")
+      .clear()
+      .type(TEST_DATA.ADDRESS.NEW_ADDRESS_STREET);
+
+    clickConfirmButton();
+    cy.wait(TEST_CONFIG.TIMEOUTS.PAGE_LOAD);
+  });
+
+  it("Should be able to set the address as default", () => {
+    // Visit the homepage
+    cy.visit(TEST_CONFIG.ROUTES.BUYER_PORTAL);
+
+    // Navigate to Addresses page
+    goToAddressPage();
+
+    openActionsDropdown(TEST_DATA.ADDRESS.NEW_ADDRESS_NAME);
+
+    cy.contains("Set as default").click();
+
+    cy.wait(TEST_CONFIG.TIMEOUTS.PAGE_LOAD);
+
+    // Check to see if is set as default
+    cy.get("[data-fs-addresses-table]")
+      .contains(TEST_DATA.ADDRESS.NEW_ADDRESS_NAME)
+      .parent()
+      .parent()
+      .get("[data-fs-bp-table-row-default-icon]")
+      .should("be.visible");
+  });
+  it("Should be able to Remove the address from the unit", () => {
+    // Visit the homepage
+    cy.visit(TEST_CONFIG.ROUTES.BUYER_PORTAL);
+
+    // Navigate to Addresses page
+    goToAddressPage();
+
+    openActionsDropdown(TEST_DATA.ADDRESS.NEW_ADDRESS_NAME);
+
+    // Inside the Action dropdown, remove from unit
+    cy.contains("Remove from Unit").click();
+
+    clickConfirmButton();
+
+    cy.wait(TEST_CONFIG.TIMEOUTS.PAGE_LOAD);
+    cy.reload();
+
+    // Check to see if the address has been removed
+    cy.contains(TEST_DATA.ADDRESS.NEW_ADDRESS_NAME).should("not.exist");
+  });
+
+  it("Should be able to Add existing Address", () => {
+    // Visit the homepage
+    cy.visit(TEST_CONFIG.ROUTES.BUYER_PORTAL);
+
+    // Navigate to Addresses page
+    goToAddressPage();
+
+    // Check to see if address is really absent
+    cy.contains(TEST_DATA.ADDRESS.NEW_ADDRESS_NAME).should("not.exist");
+
+    openCreateAddressDrawer();
+
+    // Address Name with existing address
+    cy.get('[data-fs-bp-input-text="true"]')
+      .eq(1)
+      .should("be.visible")
+      .type(TEST_DATA.ADDRESS.NEW_ADDRESS_NAME, { delay: 500 });
+
+    // Select existing address
+    cy.get('[data-fs-bp-autocomplete-dropdown-menu="true"]')
+      .contains(TEST_DATA.ADDRESS.NEW_ADDRESS_NAME)
+      .should("exist")
+      .click();
+
+    clickConfirmButton();
+    cy.wait(TEST_CONFIG.TIMEOUTS.PAGE_LOAD);
+
+    cy.reload();
+
+    // Check to see if address has been added
+    cy.contains(TEST_DATA.ADDRESS.NEW_ADDRESS_NAME).should("be.visible");
+  });
+
+  it("Should be able to delete the address", () => {
+    // Visit the homepage
+    cy.visit(TEST_CONFIG.ROUTES.BUYER_PORTAL);
+
+    // Navigate to Addresses page
+    goToAddressPage();
+
+    openActionsDropdown(TEST_DATA.ADDRESS.NEW_ADDRESS_NAME);
+
+    cy.contains("Delete").click();
+
+    // Fill check to allow deletion
+    cy.get("[class=address-name-confirmation]").type(
+      TEST_DATA.ADDRESS.NEW_ADDRESS_NAME
+    );
+
+    cy.get('[data-fs-bp-basic-drawer-button-variant="danger"]').click();
+
+    cy.wait(TEST_CONFIG.TIMEOUTS.PAGE_LOAD);
+    cy.reload();
+
+    // Check if address has been deleted
+    cy.contains(TEST_DATA.ADDRESS.NEW_ADDRESS_NAME).should("not.exist");
+  });
+});

package/cypress/shared.ts

@@ -0,0 +1,3 @@
+export function clickConfirmButton() {
+  cy.get('[data-fs-bp-basic-drawer-button-variant="confirm"]').click();
+}

package/package.json

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

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

@@ -10,7 +10,7 @@ import {
   DeleteAddressDrawer,
 } from "..";
 import { BasicDropdownMenu, Icon } from "../../../shared/components";
-import { useDrawerProps, useBuyerPortal } from "../../../shared/hooks";
+import { useDrawerProps } from "../../../shared/hooks";
 import { ADDRESS_MESSAGES } from "../../constants/messages";
 import { useSetDefaultAddress } from "../../hooks/useSetDefaultAddress";
 import { useUnsetDefaultAddress } from "../../hooks/useUnsetDefaultAddress";
@@ -28,7 +28,6 @@ export const AddressDropdownMenu = ({
   currentAddress,
   onUpdate,
 }: AddressDropdownMenuProps) => {
-  const { currentOrgUnit } = useBuyerPortal();
   const router = useRouter();
   const { pushToast } = useUI();
 
@@ -107,9 +106,8 @@ export const AddressDropdownMenu = ({
     });
   };
 
-  const idsPath = currentOrgUnit?.path?.ids?.split("/") ?? [];
-
-  const isRootLevelOrgUnit = idsPath.length === 2;
+  // const idsPath = currentOrgUnit?.path?.ids?.split("/") ?? [];
+  // const isRootLevelOrgUnit = idsPath.length === 2;
 
   const {
     open: openEditDrawerProps,
@@ -175,15 +173,16 @@ export const AddressDropdownMenu = ({
           <UIIcon name="MinusCircle" {...sizeProps} />
           Remove from Unit
         </DropdownItem>
-        {isRootLevelOrgUnit && (
-          <DropdownItem
-            onClick={openDeleteAddressDrawer}
-            data-fs-bp-dropdown-menu-item-mode="danger"
-          >
-            <Icon name="Delete" {...sizeProps} data-fs-bp-delete-address />
-            <span data-fs-bp-delete-address>Delete</span>
-          </DropdownItem>
-        )}
+        {/* Remove validation while we reevaluate the rule */}
+        {/* {isRootLevelOrgUnit && ( */}
+        <DropdownItem
+          onClick={openDeleteAddressDrawer}
+          data-fs-bp-dropdown-menu-item-mode="danger"
+        >
+          <Icon name="Delete" {...sizeProps} data-fs-bp-delete-address />
+          <span data-fs-bp-delete-address>Delete</span>
+        </DropdownItem>
+        {/* )} */}
       </BasicDropdownMenu>
       {isEditDrawerOpen && (
         <EditAddressDrawer

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

@@ -11,7 +11,7 @@ import { useBuyerPortal } from "../../../shared/hooks";
 import { maskPostalCode } from "../../../shared/utils/postalCode";
 import { CountryOptions } from "../../data/countries";
 import { states as StateOptions } from "../../data/states";
-import { useDebouncedSearchAddressByUnitId } from "../../hooks/useDebouncedSearchAddressByUnitId";
+import { useDebouncedSearchAddress } from "../../hooks/useDebouncedSearchAddress";
 import { AddressData, AddressInput } from "../../types";
 
 export type AddressFormProps = {
@@ -45,10 +45,10 @@ export const AddressForm = ({
 
   const [autoCompleteAddressName, setAutoCompleteAddressName] = useState("");
 
-  const { searchedAddresses } = useDebouncedSearchAddressByUnitId({
-    orgUnitId: currentOrgUnit?.id ?? "",
-    search: autoCompleteAddressName,
-  });
+  const { searchedAddresses } = useDebouncedSearchAddress(
+    autoCompleteAddressName,
+    currentOrgUnit?.id ?? ""
+  );
 
   const cleanCompletedAddress = () => {
     if (setCompletedAddress && setUseExistingAddress) {
@@ -75,6 +75,7 @@ export const AddressForm = ({
           <AutocompleteDropdown
             data-fs-bp-create-address-country-selector
             label="Country"
+            className="address-country"
             value={address.country}
             options={CountryOptions}
             onConfirmKeyPress={(option) =>
@@ -110,6 +111,7 @@ export const AddressForm = ({
             <InputText
               label="Address Name"
               value={address.name}
+              className="address-name"
               wrapperProps={{ style: { marginTop: 16 } }}
               hasError={isTouched && !address.name?.trim()}
               onChange={(event) =>
@@ -120,6 +122,7 @@ export const AddressForm = ({
             <AutocompleteDropdown
               label="Address Name"
               value={autoCompleteAddressName}
+              className="address-name"
               options={searchedAddresses}
               onChange={(event) => {
                 setAutoCompleteAddressName(event.currentTarget.value);
@@ -157,6 +160,7 @@ export const AddressForm = ({
           <InputText
             label="Street Address"
             value={address.streetAddress}
+            className="street-address"
             wrapperProps={{ style: { marginTop: 16 } }}
             hasError={isTouched && !address.streetAddress?.trim()}
             onChange={(event) =>
@@ -171,6 +175,7 @@ export const AddressForm = ({
 
           <InputText
             label="Apt, Suite, Building (optional)"
+            className="street-address2"
             value={address.streetAddress2}
             wrapperProps={{ style: { marginTop: 16, marginBottom: 16 } }}
             onChange={(event) =>
@@ -180,6 +185,7 @@ export const AddressForm = ({
 
           <InputText
             label="City"
+            className="address-city"
             value={address.city}
             wrapperProps={{ style: { marginTop: 16 } }}
             hasError={isTouched && !address.city?.trim()}
@@ -191,6 +197,7 @@ export const AddressForm = ({
           <AutocompleteDropdown
             data-fs-bp-create-address-state-selector
             label="State"
+            className="address-state"
             value={address.state}
             options={
               address.countryCode ? StateOptions[address.countryCode] : []
@@ -221,6 +228,7 @@ export const AddressForm = ({
           <InputText
             label="Postal Code"
             value={address.zip}
+            className="address-postal-code"
             wrapperProps={{ style: { marginTop: 16, marginBottom: 16 } }}
             hasError={isTouched && !address.zip?.trim()}
             onChange={(event) => handleChangePostalCode(event.target.value)}
@@ -252,6 +260,7 @@ export const AddressForm = ({
             <AutocompleteDropdown
               label="Address Type"
               value={address.types}
+              className="address-type"
               options={addressTypeOptions}
               onConfirmKeyPress={(option) =>
                 setAddress({ ...address, types: [option] })

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

@@ -77,6 +77,7 @@ export const DeleteAddressDrawer = ({
           <br />
           <InputText
             label="Address name"
+            className="address-name-confirmation"
             value={addressNameConfirmation}
             onChange={(event) =>
               setAddressNameConfirmation(event.currentTarget.value)

package/src/features/addresses/services/create-new-address.service.ts

@@ -1,3 +1,4 @@
+import { scopesClient } from "../../shared/clients/ScopeClient";
 import { addressesClient } from "../clients/AddressesClient";
 
 import type { AddressInput } from "../types";
@@ -8,14 +9,26 @@ export type CreateNewAddressServiceProps = {
   unitId: string;
 } & AddressInput;
 
+type NewAddress = {
+  newAddressId: string;
+};
+
 export const createNewAddressService = async ({
   cookie,
   ...data
 }: CreateNewAddressServiceProps) => {
-  return addressesClient.createNewAddress(
+  const newAddress = (await addressesClient.createNewAddress(
     data,
     data.unitId,
     data.customerId,
     cookie
+  )) as NewAddress;
+
+  await scopesClient.addToScope(
+    data.unitId,
+    { scopeName: "addresses", ids: [newAddress.newAddressId] },
+    cookie
   );
+
+  return newAddress;
 };

package/src/features/addresses/services/search-address-by-name.service.ts

@@ -20,8 +20,8 @@ export const searchAddressByNameService = async (
   }
 
   const { addresses } = await addressesClient.searchAddressesByName(
-    customerId,
     unitId,
+    customerId,
     name,
     cookie
   );

package/src/features/collections/types/index.ts

@@ -3,7 +3,7 @@ export type CollectionsSummary = {
   name: string;
 };
 
-export type ContractCollection = CollectionsSummary & { inContract: boolean };
+export type ContractCollection = CollectionsSummary & { isEnabled: boolean };
 export type ScopeCollection = CollectionsSummary & { isEnabled: boolean };
 
 export type GetCollectionsFromContractResponse = {

package/src/pages/collections.tsx

@@ -73,7 +73,7 @@ export async function loader(
       }),
     ]);
 
-  const isContractEmpty = contractCollections.every((c) => !c.inContract);
+  const isContractEmpty = contractCollections.every((c) => !c.isEnabled);
   const drawerCollections = allCollections.filter((col) => !col.isEnabled);
 
   return {