@vtex/faststore-plugin-buyer-portal 1.1.87 → 1.1.89

package/CHANGELOG.md

@@ -7,62 +7,73 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+-   Added responsiveness to the Payment Methods list.
+-   Implemented responsiveness across all drawers in the Payment Methods flow.
+-   Ensured responsive behavior for toasts and empty states.
+
 ### Fixed
-- Allow creation of user with no roles
+
+-   Allow creation of user with no roles
+
+### Added
+
+-   Responsiviness to Buying policies page
 
 ### Added
 
-- Credit card page responsiveness
-- Change for the store title based on the SEO
+-   Credit card page responsiveness
+-   Change for the store title based on the SEO
 
 ### Added
 
-- Standardization the sidebar menu throughout the navigation of the Organizational Account, regardless of the context.
+-   Standardization the sidebar menu throughout the navigation of the Organizational Account, regardless of the context.
 
 ### Fixed
 
-- Fix geoCordinate to be geoCoordinates
-- Adjusts in Credit Card's experience
-- Create a custom dropdown for Buying Policy criteria
+-   Fix geoCordinate to be geoCoordinates
+-   Adjusts in Credit Card's experience
+-   Create a custom dropdown for Buying Policy criteria
 
 ### Added
 
-- Send credentials
+-   Send credentials
 
 ### Added
 
-- Roles and Role Details Screen
-- Role Integration on Users
-- Setup lint
-- Add default values for Credit Cards
+-   Roles and Role Details Screen
+-   Role Integration on Users
+-   Setup lint
+-   Add default values for Credit Cards
 
 ### changed
 
-- BFF API URLs
+-   BFF API URLs
 
 ### added
 
-- Address Recipients Add & Delete Feature
-- Address Recipients Edit Feature
-- Add Buying Policy integration with BFF
-- Add default values for Address
+-   Address Recipients Add & Delete Feature
+-   Address Recipients Edit Feature
+-   Add Buying Policy integration with BFF
+-   Add default values for Address
 
 ### Fixed
 
-- UserData accepts undefined e-mail
-- Fix styles
-- Fix Address Recipients bff path
+-   UserData accepts undefined e-mail
+-   Fix styles
+-   Fix Address Recipients bff path
 
 ### Added
 
-- Add Buying Policies Page
-- Add Buying Policy Details Page
-- Add Buying Policy Drawers
-- Add Buying Policy Integrations
-- Add Pagination Tools
-- Add Address Pagination
+-   Add Buying Policies Page
+-   Add Buying Policy Details Page
+-   Add Buying Policy Drawers
+-   Add Buying Policy Integrations
+-   Add Pagination Tools
+-   Add Address Pagination
 
 ### Added
 
-- Add CHANGELOG file
-- Add README file
+-   Add CHANGELOG file
+-   Add README file

package/README.md

@@ -14,14 +14,14 @@
 - Run `yarn link @vtex/faststore-plugin-buyer-portal`
 - Run `yarn`
 - Run `yarn dev` to start your local server
-- You will acess the buyer-portal via: localhost:3000/buyer-portal
+- You will acess the Organization Account via: localhost:3000/pvt/organization-account
 
 ### Generating a Cookie
 
 - Go to `b2bdev.vtexfaststore.com/login` and log-in as a user that has already been added to an Unit. If you don't have one, contact someone on the B2B - Enabler
 - Go to copy your `VtexIdclientAutCookie_b2bfaststoredev` cookie
 - Create a cookie in your `localhost:3000` with the `VtexIdclientAutCookie_b2bfaststoredev` key and the value you just copied
-- Go to `localhost:3000/buyer-portal`
+- Go to `localhost:3000/pvt/organization-account`
 
 ## Developing
 

package/cypress/constants.ts

@@ -2,7 +2,7 @@
 export const TEST_CONFIG = {
   LOCAL_URL: "http://localhost:3000",
   ROUTES: {
-    BUYER_PORTAL: "/buyer-portal",
+    BUYER_PORTAL: "/pvt/organization-account",
   },
   PAYMENT_METHODS: {
     MASTERCARD: "Mastercard",

package/cypress/integration/collections.test.ts

@@ -27,11 +27,15 @@ describe("Collections", () => {
   });
 
   it("Should show empty state when unit has no collection", () => {
-    cy.intercept("GET", "/_next/data/**/buyer-portal/collections/**", (req) => {
-      req.reply((res) => {
-        res.body.pageProps.data.isContractEmpty = true;
-      });
-    });
+    cy.intercept(
+      "GET",
+      "/_next/data/**/pvt/organization-account/collections/**",
+      (req) => {
+        req.reply((res) => {
+          res.body.pageProps.data.isContractEmpty = true;
+        });
+      }
+    );
 
     visitCollectionsPage();
 

package/cypress/integration/credit-cards.test.ts

@@ -23,26 +23,30 @@ function interceptCreateCreditCard() {
 }
 
 function interceptGetCreditCards() {
-  cy.intercept("GET", "/_next/data/**/buyer-portal/credit-cards/**", (req) => {
-    req.reply((res) => {
-      res.body.pageProps.data.data.push({
-        accountId: "FAKE_ACCOUNT_ID",
-        paymentSystem: "1",
-        paymentSystemName: "Visa",
-        cardNumber: "************1234",
-        bin: "411111",
-        availableAddresses: [],
-        expirationDate: "12/2030",
-        isExpired: false,
-        accountStatus: null,
-        cardLabel: "Personal Card",
-        useCvvForAuthorization: true,
-        isCardToken: false,
-        isDefault: false,
-        isActive: true,
+  cy.intercept(
+    "GET",
+    "/_next/data/**/pvt/pvt/organization-account/credit-cards/**",
+    (req) => {
+      req.reply((res) => {
+        res.body.pageProps.data.data.push({
+          accountId: "FAKE_ACCOUNT_ID",
+          paymentSystem: "1",
+          paymentSystemName: "Visa",
+          cardNumber: "************1234",
+          bin: "411111",
+          availableAddresses: [],
+          expirationDate: "12/2030",
+          isExpired: false,
+          accountStatus: null,
+          cardLabel: "Personal Card",
+          useCvvForAuthorization: true,
+          isCardToken: false,
+          isDefault: false,
+          isActive: true,
+        });
       });
-    });
-  }).as("getCreditCards");
+    }
+  ).as("getCreditCards");
 }
 
 function fillInitialCreditCardData() {
@@ -175,7 +179,7 @@ describe("Credit Cards Page", () => {
     // Intercept the server-side request and modify only the data field to simulate an empty state
     cy.intercept(
       "GET",
-      "/_next/data/**/buyer-portal/credit-cards/**",
+      "/_next/data/**/pvt/pvt/organization-account/credit-cards/**",
       (req) => {
         req.reply((res) => {
           res.body.pageProps.data.data = []; // Set the data field to an empty array

package/cypress/integration/roles.test.ts

@@ -3,7 +3,9 @@ import { TEST_CONFIG } from "../constants";
 // Utility function to navigate to Roles page
 function goToRolesPage() {
   cy.visit(TEST_CONFIG.ROUTES.BUYER_PORTAL);
-  cy.get('a[data-fs-vertical-nav-menu-link][href^="/buyer-portal/roles/"]')
+  cy.get(
+    'a[data-fs-vertical-nav-menu-link][href^="/pvt/organization-account/roles/"]'
+  )
     .contains("Roles")
     .click();
 }

package/cypress/support/commands.ts

@@ -1,7 +1,7 @@
 import { TEST_CONFIG } from "../constants";
 
 Cypress.Commands.add("login", () => {
-  cy.session("buyer-portal-login", () => {
+  cy.session("organization-account-login", () => {
     const loginOrigin = new URL(TEST_CONFIG.AUTH.LOGIN_URL).origin;
     const login = Cypress.env("VTEX_ACCOUNT_LOGIN");
     const password = Cypress.env("VTEX_ACCOUNT_PASSWORD");

package/package.json

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

package/plugin.config.js

@@ -3,89 +3,89 @@ module.exports = {
   name: "poc-plugin",
   pages: {
     home: {
-      path: "/buyer-portal/[[...contractMode]]",
+      path: "/pvt/organization-account/[[...contractMode]]",
       appLayout: false,
     },
     "address-details": {
-      path: "/buyer-portal/address/[orgUnitId]/[contractId]/[addressId]",
+      path: "/pvt/organization-account/address/[orgUnitId]/[contractId]/[addressId]",
       appLayout: false,
     },
 
     // ----
     profile: {
-      path: "/buyer-portal/profile/[orgUnitId]/[contractId]",
+      path: "/pvt/organization-account/profile/[orgUnitId]/[contractId]",
       appLayout: false,
     },
     addresses: {
-      path: "/buyer-portal/addresses/[orgUnitId]/[contractId]",
+      path: "/pvt/organization-account/addresses/[orgUnitId]/[contractId]",
       appLayout: false,
     },
     budgets: {
-      path: "/buyer-portal/budgets/[orgUnitId]/[contractId]",
+      path: "/pvt/organization-account/budgets/[orgUnitId]/[contractId]",
       appLayout: false,
     },
     "budgets-details": {
-      path: "/buyer-portal/budgets/[orgUnitId]/[contractId]/[budgetId]",
+      path: "/pvt/organization-account/budgets/[orgUnitId]/[contractId]/[budgetId]",
       appLayout: false,
     },
     "payment-methods": {
-      path: "/buyer-portal/payment-methods/[orgUnitId]/[contractId]",
+      path: "/pvt/organization-account/payment-methods/[orgUnitId]/[contractId]",
       appLayout: false,
     },
     "credit-cards": {
-      path: "/buyer-portal/credit-cards/[orgUnitId]/[contractId]",
+      path: "/pvt/organization-account/credit-cards/[orgUnitId]/[contractId]",
       appLayout: false,
     },
     collections: {
-      path: "/buyer-portal/collections/[orgUnitId]/[contractId]",
+      path: "/pvt/organization-account/collections/[orgUnitId]/[contractId]",
       appLayout: false,
     },
     "po-numbers": {
-      path: "/buyer-portal/po-numbers/[orgUnitId]/[contractId]",
+      path: "/pvt/organization-account/po-numbers/[orgUnitId]/[contractId]",
       appLayout: false,
     },
     "cost-centers": {
-      path: "/buyer-portal/cost-centers/[orgUnitId]/[contractId]",
+      path: "/pvt/organization-account/cost-centers/[orgUnitId]/[contractId]",
       appLayout: false,
     },
     releases: {
-      path: "/buyer-portal/releases/[orgUnitId]/[contractId]",
+      path: "/pvt/organization-account/releases/[orgUnitId]/[contractId]",
       appLayout: false,
     },
     roles: {
-      path: "/buyer-portal/roles/[orgUnitId]",
+      path: "/pvt/organization-account/roles/[orgUnitId]",
       appLayout: false,
     },
     "role-details": {
-      path: "/buyer-portal/roles/[orgUnitId]/[roleName]",
+      path: "/pvt/organization-account/roles/[orgUnitId]/[roleName]",
       appLayout: false,
     },
     "buying-policies": {
-      path: "/buyer-portal/buying-policies/[orgUnitId]/[contractId]",
+      path: "/pvt/organization-account/buying-policies/[orgUnitId]/[contractId]",
       appLayout: false,
     },
 
     "buying-policy-details": {
-      path: "/buyer-portal/buying-policy/[orgUnitId]/[contractId]/[buyingPolicyId]",
+      path: "/pvt/organization-account/buying-policy/[orgUnitId]/[contractId]/[buyingPolicyId]",
       appLayout: false,
     },
 
     users: {
-      path: "/buyer-portal/users/[orgUnitId]",
+      path: "/pvt/organization-account/users/[orgUnitId]",
       appLayout: false,
     },
 
     "org-units": {
-      path: "/buyer-portal/org-units/[orgUnitId]",
+      path: "/pvt/organization-account/org-units/[orgUnitId]",
       appLayout: false,
     },
 
     "user-details": {
-      path: "/buyer-portal/user/[orgUnitId]/[userId]",
+      path: "/pvt/organization-account/user/[orgUnitId]/[userId]",
       appLayout: false,
     },
     "org-unit-details": {
-      path: "/buyer-portal/org-unit/[orgUnitId]",
+      path: "/pvt/organization-account/org-unit/[orgUnitId]",
       appLayout: false,
     },
   },

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

@@ -9,10 +9,17 @@ import {
 } from "../../../shared/components";
 import { useBuyerPortal } from "../../../shared/hooks";
 import { maskPostalCode } from "../../../shared/utils/postalCode";
-import { CountryOptions } from "../../data/countries";
-import { states as StateOptions } from "../../data/states";
+import { CountryOptions, type CountryOption } from "../../data/countries";
 import { useDebouncedSearchAddress } from "../../hooks/useDebouncedSearchAddress";
 import { AddressData, AddressInput } from "../../types";
+import {
+  getStateDisplayValue,
+  getStateSaveValue,
+  isStateSelected,
+  getStateDisplayOptions,
+  findStateByDisplayValue,
+  getStateDisplayFromCode,
+} from "../../utils";
 
 export type AddressFormProps = {
   address: AddressInput;
@@ -42,7 +49,11 @@ export const AddressForm = ({
 }: AddressFormProps) => {
   const addressTypeOptions = ["Shipping", "Billing"];
   const { currentOrgUnit } = useBuyerPortal();
-
+  const [selectedState, setSelectedState] = useState(
+    address.state
+      ? getStateDisplayFromCode(address.countryCode || "", address.state)
+      : ""
+  );
   const [autoCompleteAddressName, setAutoCompleteAddressName] = useState("");
 
   const { searchedAddresses } = useDebouncedSearchAddress(
@@ -66,6 +77,16 @@ export const AddressForm = ({
 
   const hideLabel = isEdit || fixedType;
 
+  const handleCountrySelect = (option: CountryOption) => {
+    setAddress({
+      ...address,
+      country: option.name,
+      countryCode: option.id,
+      state: "",
+    });
+    setSelectedState("");
+  };
+
   return (
     <>
       {!useExistingAddress ? (
@@ -79,26 +100,18 @@ export const AddressForm = ({
             value={address.country}
             options={CountryOptions}
             shouldCloseOnSelect
-            onConfirmKeyPress={(option) =>
-              setAddress({
-                ...address,
-                country: option.name,
-                countryCode: option.id,
-              })
-            }
+            onConfirmKeyPress={(option) => {
+              handleCountrySelect(option);
+            }}
             renderOption={(option, index) => (
               <AutocompleteDropdown.Item
                 key={option.id}
                 closeOnClick
                 index={index}
                 isSelected={address.country === option.name}
-                onClick={() =>
-                  setAddress({
-                    ...address,
-                    country: option.name,
-                    countryCode: option.id,
-                  })
-                }
+                onClick={() => {
+                  handleCountrySelect(option);
+                }}
               >
                 {option?.name}
                 {address.country === option?.name && (
@@ -218,32 +231,50 @@ export const AddressForm = ({
             data-fs-bp-create-address-state-selector
             label="State"
             className="address-state"
-            value={address.state}
-            options={
-              address.countryCode ? StateOptions[address.countryCode] : []
-            }
+            value={selectedState}
+            options={getStateDisplayOptions(address.countryCode || "")}
             shouldCloseOnSelect
-            onConfirmKeyPress={(option) =>
-              setAddress({ ...address, state: option })
-            }
+            onConfirmKeyPress={(option) => {
+              const stateData = findStateByDisplayValue(
+                address.countryCode || "",
+                option
+              );
+              if (stateData) {
+                setSelectedState(option);
+                setAddress({ ...address, state: getStateSaveValue(stateData) });
+              }
+            }}
             disabled={!address.countryCode}
-            renderOption={(option, index) => (
-              <AutocompleteDropdown.Item
-                key={`${option}-${index}`}
-                closeOnClick
-                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>
-            )}
+            renderOption={(option, index) => {
+              const stateData = findStateByDisplayValue(
+                address.countryCode || "",
+                option
+              );
+              const isSelected = stateData
+                ? isStateSelected(address.state, stateData)
+                : false;
+
+              return (
+                <AutocompleteDropdown.Item
+                  key={`${option}-${index}`}
+                  closeOnClick
+                  index={index}
+                  isSelected={isSelected}
+                  onClick={() => {
+                    if (stateData) {
+                      setSelectedState(getStateDisplayValue(stateData));
+                      setAddress({
+                        ...address,
+                        state: getStateSaveValue(stateData),
+                      });
+                    }
+                  }}
+                >
+                  {option}
+                  {isSelected && <Icon name="Check" width={12} height={12} />}
+                </AutocompleteDropdown.Item>
+              );
+            }}
           />
 
           <InputText

package/src/features/addresses/data/USA.ts

@@ -1,65 +1,70 @@
-export const states = [
-  "Alabama",
-  "Alaska",
-  "American Samoa",
-  "Arizona",
-  "Arkansas",
-  "Armed Forces Americas",
-  "Armed Forces Europe, the Middle East, and Canada",
-  "Armed Forces Pacific",
-  "California",
-  "Colorado",
-  "Connecticut",
-  "Delaware",
-  "District Of Columbia (Washington, D.C.)",
-  "Federated States of Micronesia",
-  "Florida",
-  "Georgia",
-  "Guam",
-  "Hawaii",
-  "Idaho",
-  "Illinois",
-  "Indiana",
-  "Iowa",
-  "Kansas",
-  "Kentucky",
-  "Louisiana",
-  "Maine",
-  "Marshall Islands",
-  "Maryland",
-  "Massachusetts",
-  "Michigan",
-  "Minnesota",
-  "Mississippi",
-  "Missouri",
-  "Montana",
-  "Nebraska",
-  "Nevada",
-  "New Hampshire",
-  "New Jersey",
-  "New Mexico",
-  "New York",
-  "North Carolina",
-  "North Dakota",
-  "Northern Mariana Islands",
-  "Ohio",
-  "Oklahoma",
-  "Oregon",
-  "Palau",
-  "Pennsylvania",
-  "Puerto Rico",
-  "Rhode Island",
-  "South Carolina",
-  "South Dakota",
-  "Tennessee",
-  "Texas",
-  "U.S. Minor Outlying Islands",
-  "U.S. Virgin Islands",
-  "Utah",
-  "Vermont",
-  "Virginia",
-  "Washington",
-  "West Virginia",
-  "Wisconsin",
-  "Wyoming",
+export type StateOption = {
+  code: string;
+  name: string;
+};
+
+export const states: StateOption[] = [
+  { code: "AL", name: "Alabama" },
+  { code: "AK", name: "Alaska" },
+  { code: "AS", name: "American Samoa" },
+  { code: "AZ", name: "Arizona" },
+  { code: "AR", name: "Arkansas" },
+  { code: "AA", name: "Armed Forces Americas" },
+  { code: "AE", name: "Armed Forces Europe, the Middle East, and Canada" },
+  { code: "AP", name: "Armed Forces Pacific" },
+  { code: "CA", name: "California" },
+  { code: "CO", name: "Colorado" },
+  { code: "CT", name: "Connecticut" },
+  { code: "DE", name: "Delaware" },
+  { code: "DC", name: "District Of Columbia (Washington, D.C.)" },
+  { code: "FM", name: "Federated States of Micronesia" },
+  { code: "FL", name: "Florida" },
+  { code: "GA", name: "Georgia" },
+  { code: "GU", name: "Guam" },
+  { code: "HI", name: "Hawaii" },
+  { code: "ID", name: "Idaho" },
+  { code: "IL", name: "Illinois" },
+  { code: "IN", name: "Indiana" },
+  { code: "IA", name: "Iowa" },
+  { code: "KS", name: "Kansas" },
+  { code: "KY", name: "Kentucky" },
+  { code: "LA", name: "Louisiana" },
+  { code: "ME", name: "Maine" },
+  { code: "MH", name: "Marshall Islands" },
+  { code: "MD", name: "Maryland" },
+  { code: "MA", name: "Massachusetts" },
+  { code: "MI", name: "Michigan" },
+  { code: "MN", name: "Minnesota" },
+  { code: "MS", name: "Mississippi" },
+  { code: "MO", name: "Missouri" },
+  { code: "MT", name: "Montana" },
+  { code: "NE", name: "Nebraska" },
+  { code: "NV", name: "Nevada" },
+  { code: "NH", name: "New Hampshire" },
+  { code: "NJ", name: "New Jersey" },
+  { code: "NM", name: "New Mexico" },
+  { code: "NY", name: "New York" },
+  { code: "NC", name: "North Carolina" },
+  { code: "ND", name: "North Dakota" },
+  { code: "MP", name: "Northern Mariana Islands" },
+  { code: "OH", name: "Ohio" },
+  { code: "OK", name: "Oklahoma" },
+  { code: "OR", name: "Oregon" },
+  { code: "PW", name: "Palau" },
+  { code: "PA", name: "Pennsylvania" },
+  { code: "PR", name: "Puerto Rico" },
+  { code: "RI", name: "Rhode Island" },
+  { code: "SC", name: "South Carolina" },
+  { code: "SD", name: "South Dakota" },
+  { code: "TN", name: "Tennessee" },
+  { code: "TX", name: "Texas" },
+  { code: "UM", name: "U.S. Minor Outlying Islands" },
+  { code: "VI", name: "U.S. Virgin Islands" },
+  { code: "UT", name: "Utah" },
+  { code: "VT", name: "Vermont" },
+  { code: "VA", name: "Virginia" },
+  { code: "WA", name: "Washington" },
+  { code: "WV", name: "West Virginia" },
+  { code: "WI", name: "Wisconsin" },
+  { code: "WY", name: "Wyoming" },
 ];