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

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/package.json

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

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" },
 ];

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

@@ -1,4 +1,9 @@
-export const CountryOptions = [
+export type CountryOption = {
+  id: string;
+  name: string;
+};
+
+export const CountryOptions: CountryOption[] = [
   { id: "BRA", name: "Brazil" },
   { id: "USA", name: "United States of America" },
   { id: "CAN", name: "Canada" },

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

@@ -1,9 +1,11 @@
 import { states as BRAStates } from "./BRA";
 import { states as CANStates } from "./CAN";
 import { states as MEXStates } from "./MEX";
-import { states as USAStates } from "./USA";
+import { states as USAStates, StateOption } from "./USA";
 
-export const states: Record<string, string[]> = {
+export type StateData = string | StateOption;
+
+export const states: Record<string, StateData[]> = {
   MEX: MEXStates,
   BRA: BRAStates,
   USA: USAStates,

package/src/features/addresses/layouts/AddressDetailsLayout/AddressDetailsLayout.tsx

@@ -22,6 +22,7 @@ import {
 } from "../../components";
 import { AddressLocationsList } from "../../components/AddressLocationsList/AddressLocationsList";
 import { AddressRecipientsList } from "../../components/AddressRecipientsList/AddressRecipientsList";
+import { getStateDisplayFromCode } from "../../utils";
 
 import type { AddressLocationsListRef } from "../../components/AddressLocationsList/AddressLocationsList";
 import type { AddressRecipientsListRef } from "../../components/AddressRecipientsList/AddressRecipientsList";
@@ -154,6 +155,14 @@ export const AddressDetailsLayout = ({
                 {props
                   .filter((prop) => addressData[prop])
                   .map((prop, index) => {
+                    const displayValue =
+                      prop === "state"
+                        ? getStateDisplayFromCode(
+                            addressData.country || "",
+                            addressData[prop] as string
+                          )
+                        : addressData[prop];
+
                     return (
                       <div
                         key={prop}
@@ -164,7 +173,7 @@ export const AddressDetailsLayout = ({
                           {addressLabelToPropMapping[prop]}
                         </span>
                         <span data-fs-address-details-info-line-value>
-                          {addressData[prop]}
+                          {displayValue}
                         </span>
                       </div>
                     );

package/src/features/addresses/utils/index.ts

@@ -0,0 +1 @@
+export * from "./stateUtils";

package/src/features/addresses/utils/stateUtils.ts

@@ -0,0 +1,63 @@
+import { states as StateOptions, StateData } from "../data/states";
+import { StateOption } from "../data/USA";
+
+export const getStateDisplayValue = (stateData: StateData): string => {
+  return typeof stateData === "string" ? stateData : stateData.name;
+};
+
+export const getStateSaveValue = (stateData: StateData): string => {
+  return typeof stateData === "string" ? stateData : stateData.code;
+};
+
+export const isStateSelected = (
+  currentState: string,
+  stateData: StateData
+): boolean => {
+  const saveValue = getStateSaveValue(stateData);
+  return currentState.toLowerCase() === saveValue.toLowerCase();
+};
+
+export const getStateDisplayOptions = (countryCode: string): string[] => {
+  if (!countryCode || !StateOptions[countryCode]) {
+    return [];
+  }
+  return StateOptions[countryCode].map(getStateDisplayValue);
+};
+
+export const getStateOptions = (countryCode: string): StateData[] => {
+  if (!countryCode || !StateOptions[countryCode]) {
+    return [];
+  }
+  return StateOptions[countryCode];
+};
+
+export const findStateByDisplayValue = (
+  countryCode: string,
+  displayValue: string
+): StateData | undefined => {
+  const stateOptions = getStateOptions(countryCode);
+  return stateOptions.find(
+    (state) => getStateDisplayValue(state) === displayValue
+  );
+};
+
+export const getStateDisplayFromCode = (
+  countryCode: string,
+  stateCode: string
+): string => {
+  if (!countryCode || !stateCode || !StateOptions[countryCode]) {
+    return stateCode;
+  }
+
+  const stateOptions = StateOptions[countryCode];
+
+  if (countryCode === "USA") {
+    const stateOption = stateOptions.find((state) => {
+      const option = state as StateOption;
+      return option.code?.toLowerCase() === stateCode.toLowerCase();
+    });
+    return stateOption ? getStateDisplayValue(stateOption) : stateCode;
+  }
+
+  return stateCode;
+};

package/src/features/budgets/components/BudgetAddForm/budget-add-form.scss

@@ -12,10 +12,14 @@
   }
   [data-fs-bp-create-budget-drawer-row-section] {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     width: 100%;
-    align-items: center;
-    gap: var(--fs-spacing-3);
+    
+    @include media(">=notebook") {
+      align-items: center;
+      flex-direction: row;
+      gap: var(--fs-spacing-3);
+    }
   }
 
   [data-fs-bp-create-budget-drawer-data-section] {
@@ -26,6 +30,8 @@
   [data-fs-bp-create-budget-renew] {
     margin-top: var(--fs-spacing-4);
     justify-content: space-between;
+    flex-direction: row;
+
     [data-fs-bp-create-budget-renew-label] {
       font-weight: var(--fs-text-weight-regular);
       font-size: var(--fs-text-size-1);

package/src/features/budgets/components/BudgetAllocationsSelection/budget-allocations-selection.scss

@@ -116,7 +116,7 @@
     [data-fs-table-row="true"] {
       [data-fs-table-cell="header"] {
         height: var(--fs-spacing-6);
-        padding: 0;
+        padding: 0 var(--fs-spacing-1);
 
         font-weight: var(--fs-text-weight-regular);
         color: #5c5c5c;
@@ -142,7 +142,7 @@
         font-weight: var(--fs-text-weight-medium);
         color: #1f1f1f;
         font-size: var(--fs-text-size-1);
-        padding: 0;
+        padding: var(--fs-spacing-1);
 
         &:nth-child(1) {
           width: var(--fs-spacing-6);

package/src/features/budgets/components/BudgetAllocationsTable/budget-allocations-table.scss

@@ -70,6 +70,12 @@
     margin-bottom: var(--fs-spacing-4);
     justify-content: space-between;
     align-items: center;
+
+    @include media("<tablet") {
+      [data-fs-buyer-portal-internal-search] {
+        width: 100%;
+      }
+    }
   }
 
   [data-fs-bp-pagination-span] {
@@ -111,6 +117,10 @@
         font-size: var(--fs-text-size-1);
         padding: 0;
 
+        @include media("<tablet") {
+          padding: 0 var(--fs-spacing-1);
+        }
+
         [data-fs-icon] {
           display: inline-block;
 
@@ -145,6 +155,20 @@
     }
   }
 
+  [data-fs-table-cell] {
+    @include media("<tablet") {
+      display: none;
+
+      &:first-child {
+        display: flex;
+      }
+
+      &:last-child {
+        display: table-cell;
+      }
+    }
+  }
+
   [data-fs-skeleton] {
     display: inline-block;
   }
@@ -154,5 +178,10 @@
     width: 32rem;
     text-align: center;
     margin: 0 auto;
+
+    @include media("<tablet") {
+      width: 100%;
+      padding: var(--fs-spacing-4);
+    }
   }
 }

package/src/features/budgets/components/BudgetDeleteDrawer/budget-delete-drawer.scss

@@ -4,6 +4,19 @@
   @import "../../../shared/components/InputText/input-text.scss";
   @import "../../../shared/components/ErrorMessage/error-message.scss";
 
+  &[data-fs-bp-basic-drawer][data-fs-slide-over-size="partial"] {
+    width: 100%;
+    max-width: none;
+
+    @include media(">=tablet") {
+      max-width: 30rem;
+    }
+
+    @include media(">=notebook") {
+      max-width: 40rem;
+    }
+  }
+
   [data-fs-bp-basic-drawer-body] {
     overflow-y: auto;
   }

package/src/features/budgets/components/BudgetRemainingBalance/BudgetRemainingBalance.tsx

@@ -25,8 +25,12 @@ export const BudgetRemainingBalance = ({
             of {formatCurrency(remaining)} used
           </span>
         </span>
+        <BudgetProgressBar
+          remaining={remaining}
+          total={total}
+          fullWidth={true}
+        />
       </div>
-      <BudgetProgressBar remaining={remaining} total={total} fullWidth={true} />
     </div>
   );
 };