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

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>
   );
 };

package/src/features/budgets/components/BudgetRemainingBalance/budget-remaining-balance.scss

@@ -8,11 +8,28 @@
   }
 
   [data-fs-bp-budget-remaining-balance-header-content] {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr auto;
     justify-content: space-between;
     align-items: baseline;
+    gap: var(--fs-spacing-3);
+
     margin-bottom: var(--fs-spacing-3);
 
+    @include media("<tablet") {
+      grid-template-columns: 1fr;
+      gap: var(--fs-spacing-2);
+    }
+
+    [data-fs-bp-budgets-progress-bar] {
+      grid-column: span 2;
+
+      @include media("<tablet") {
+        grid-column: 1;
+        grid-row: 2;
+      }
+    }
+
     [data-fs-bp-budget-remaining-balance-label-remaining] {
       font-weight: var(--fs-text-weight-semibold);
       font-size: var(--fs-text-size-6);

package/src/features/budgets/components/BudgetSettingsInfo/budget-settings-info.scss

@@ -12,6 +12,12 @@
 
   [data-fs-bp-budget-settings-divider] {
     border: calc(var(--fs-border-width) / 2) solid #e0e0e0;
+
+    &:first-of-type {
+      @include media("<tablet") {
+        border: none;
+      }
+    }
   }
 
   [data-fs-bp-budget-settings-details-row] {
@@ -21,17 +27,30 @@
     font-size: var(--fs-text-size-1);
     line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
 
+    @include media("<tablet") {
+      flex-direction: column;
+      padding: var(--fs-spacing-2) 0;
+    }
+
     [data-fs-bp-budget-settings-details-row-label] {
       width: 12.5rem;
       color: #707070;
       font-size: var(--fs-text-size-1);
       font-weight: var(--fs-text-weight-regular);
+
+      @include media("<tablet") {
+        font-size: var(--fs-text-size-0);
+      }
     }
 
     [data-fs-bp-budget-settings-details-row-value] {
       color: #000;
       font-size: var(--fs-text-size-1);
       font-weight: var(--fs-text-weight-medium);
+
+      @include media("<tablet") {
+        font-weight: var(--fs-text-weight-regular);
+      }
     }
   }
 

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

@@ -48,6 +48,7 @@ export function BudgetsTable({
             </TableCell>
             <TableCell
               data-fs-table-cell-width
+              data-fs-bp-cell-remaining
               scope="col"
               variant="data"
               align="left"
@@ -57,7 +58,12 @@ export function BudgetsTable({
             <TableCell scope="col" variant="data" align="center">
               Expiration date
             </TableCell>
-            <TableCell scope="col" variant="data" align="center">
+            <TableCell
+              scope="col"
+              variant="data"
+              align="center"
+              data-fs-bp-cell-currency
+            >
               Total (USD)
             </TableCell>
             <TableCell scope="col" variant="data" align="right" />
@@ -95,7 +101,11 @@ export function BudgetsTable({
                     new Date(item.expirationDate)
                   )}
                 </TableCell>
-                <TableCell align="center" data-fs-bp-text-medium>
+                <TableCell
+                  align="center"
+                  data-fs-bp-text-medium
+                  data-fs-bp-cell-currency
+                >
                   {formatCurrency(item.total)}
                 </TableCell>
                 <TableCell

package/src/features/budgets/components/BudgetsTable/budgets-table.scss

@@ -6,7 +6,7 @@
   [data-fs-table] {
     overflow-x: visible;
   }
-  [data-fs-bp-table-row]{
+  [data-fs-bp-table-row] {
     cursor: pointer;
   }
 
@@ -64,6 +64,35 @@
       cursor: pointer;
       align-items: center;
     }
+
+    @include media("<tablet") {
+      [data-fs-table-cell] {
+        display: none;
+
+        &:first-child {
+          display: flex;
+        }
+
+        &:last-child {
+          display: table-cell;
+          padding-right: 0;
+        }
+      }
+    }
+
+    @include media("<notebook") {
+      [data-fs-table-cell="data"]:not(:first-of-type) {
+        text-align: right;
+      }
+
+      [data-fs-bp-cell-remaining] {
+        opacity: 0;
+      }
+
+      [data-fs-bp-cell-currency] {
+        display: none;
+      }
+    }
   }
   [data-fs-table-cell-width] {
     width: 13.75rem;

package/src/features/budgets/components/CreateBudgetAllocationDrawer/create-budget-allocation-drawer.scss

@@ -16,24 +16,36 @@
   }
 
   &[data-fs-bp-basic-drawer] {
-    max-width: 60rem !important;
     width: 100% !important;
+    max-width: none !important;
+
+    @include media(">=tablet") {
+      max-width: 32rem !important;
+    }
+
+    @include media(">=notebook") {
+      max-width: 60rem !important;
+      width: 100% !important;
+    }
+
     & > [data-fs-bp-basic-drawer-footer] {
       justify-content: flex-end !important;
       gap: var(--fs-spacing-1);
     }
-  }
 
-  [data-fs-bp-create-budget-drawer-step-success="true"] {
-    border-bottom: none !important;
-  }
-  &[data-fs-bp-basic-drawer] {
     [data-fs-bp-create-budget-drawer-header-arrow] {
       display: flex;
       flex-direction: row;
       align-items: center;
       gap: var(--fs-spacing-3);
       cursor: pointer;
+
+      @include media("<tablet") {
+        [data-fs-icon] {
+          width: var(--fs-spacing-3);
+          height: var(--fs-spacing-3);
+        }
+      }
     }
 
     [data-fs-bp-basic-drawer-button-variant="confirm"][disabled] {
@@ -45,6 +57,10 @@
     }
   }
 
+  [data-fs-bp-create-budget-drawer-step-success="true"] {
+    border-bottom: none !important;
+  }
+
   [data-fs-bp-basic-drawer-button-variant="confirm"][disabled] {
     background-color: #0068d7;
     cursor: not-allowed;

package/src/features/budgets/components/CreateBudgetDrawer/create-budget-drawer.scss

@@ -17,18 +17,23 @@
   }
 
   &[data-fs-bp-basic-drawer] {
-    max-width: 60rem !important;
     width: 100% !important;
+    max-width: none !important;
+
+    @include media(">=tablet") {
+      max-width: 30rem !important;
+      min-width: 30rem !important;
+    }
+    
+    @include media(">=notebook") {
+      max-width: 40rem !important;
+    }
+
     & > [data-fs-bp-basic-drawer-footer] {
       justify-content: flex-end !important;
       gap: var(--fs-spacing-1);
     }
-  }
 
-  [data-fs-bp-create-budget-drawer-step-success="true"] {
-    border-bottom: none !important;
-  }
-  &[data-fs-bp-basic-drawer] {
     [data-fs-bp-create-budget-drawer-header-arrow] {
       display: flex;
       flex-direction: row;
@@ -46,6 +51,10 @@
     }
   }
 
+  [data-fs-bp-create-budget-drawer-step-success="true"] {
+    border-bottom: none !important;
+  }
+
   [data-fs-bp-basic-drawer-button-variant="confirm"][disabled] {
     background-color: #0068d7;
     cursor: not-allowed;

package/src/features/budgets/components/DeleteBudgetAllocationDrawer/delete-budget-allocations.scss

@@ -1,5 +1,19 @@
 @import "../../../shared/components/BasicDrawer/basic-drawer.scss";
 
-[data-fs-bp-delete-user-drawer] {
+[data-fs-bp-delete-allocation-drawer] {
   @import "../../../shared/components/InputText/input-text.scss";
+
+  &[data-fs-bp-basic-drawer] {
+    width: 100% !important;
+    max-width: none !important;
+
+    @include media(">=tablet") {
+      max-width: 30rem !important;
+      min-width: 30rem !important;
+    }
+    
+    @include media(">=notebook") {
+      max-width: 40rem !important;
+    }
+  }
 }

package/src/features/budgets/components/EditBudgetDrawer/edit-budget-drawer.scss

@@ -7,8 +7,18 @@
   @import "../../../shared/components/ErrorMessage/error-message.scss";
 
   &[data-fs-bp-basic-drawer] {
-    max-width: 60rem !important;
     width: 100% !important;
+    max-width: none !important;
+
+    @include media(">=tablet") {
+      max-width: 30rem !important;
+      min-width: 30rem !important;
+    }
+    
+    @include media(">=notebook") {
+      max-width: 40rem !important;
+    }
+    
     & > [data-fs-bp-basic-drawer-footer] {
       justify-content: flex-end !important;
       gap: var(--fs-spacing-1);