@vtex/faststore-plugin-buyer-portal 1.3.36 → 1.3.38

package/src/features/product-assortment/layouts/ProductAssortmentLayout/ProductAssortmentLayout.tsx

@@ -14,7 +14,7 @@ import { ProductAssortmentTable } from "../../components/ProductAssortmentTable/
 
 import type {
   ProductAssortmentLayoutProps,
-  ScopeProductAssortment,
+  ProductAssortmentWithAdditionalInformation,
 } from "../../types";
 
 export const ProductAssortmentLayout = ({
@@ -36,20 +36,23 @@ export const ProductAssortmentLayout = ({
     searchTerm,
     setSearchTerm,
     increasePage,
-  } = usePageItems<ScopeProductAssortment>({
-    initialItems: initialProductAssortment,
+    decreasePage,
+  } = usePageItems<ProductAssortmentWithAdditionalInformation>({
+    initialItems: initialProductAssortment.items,
     search,
     page,
   });
 
+  const isLastPage = initialProductAssortment.paging.pages === page;
+
   const {
     open: openAddProductAssortmentDrawer,
     isOpen: isOpenAddProductAssortmentDrawer,
     ...addProductAssortmentDrawerProps
   } = useDrawerProps();
 
-  const enabledAssortment = productAssortment.filter((p) => p.isEnabled);
-  const hasAllAssortment = drawerProductAssortment.length === 0;
+  //const enabledAssortment = productAssortment.filter((p) => p.isEnabled);
+  const hasAllAssortment = drawerProductAssortment.items.length === 0;
 
   return (
     <GlobalLayout>
@@ -102,8 +105,12 @@ export const ProductAssortmentLayout = ({
                   textSearch={setSearchTerm}
                 />
                 <Paginator.Counter
-                  total={enabledAssortment.length}
-                  itemsLength={enabledAssortment.length}
+                  total={initialProductAssortment.paging.total}
+                  itemsLength={
+                    isLastPage
+                      ? initialProductAssortment.paging.total
+                      : page * initialProductAssortment.paging.perPage
+                  }
                 />
               </div>
 
@@ -111,20 +118,34 @@ export const ProductAssortmentLayout = ({
                 <ProductAssortmentTable productAssortment={productAssortment} />
 
                 <div data-fs-bp-product-assortment-paginator>
-                  {enabledAssortment.length > productAssortment.length ? (
+                  {initialProductAssortment.paging.page > 1 ? (
+                    <Paginator.NextPageButton
+                      onClick={decreasePage}
+                      disabled={isLoading}
+                    >
+                      {isLoading ? "Loading" : "Previous Page"}
+                    </Paginator.NextPageButton>
+                  ) : (
+                    <></>
+                  )}
+                  {!isLastPage ? (
                     <Paginator.NextPageButton
                       onClick={increasePage}
                       disabled={isLoading}
                     >
-                      {isLoading ? "Loading" : "Load More"}
+                      {isLoading ? "Loading" : "Next Page"}
                     </Paginator.NextPageButton>
                   ) : (
-                    <span />
+                    <></>
                   )}
 
                   <Paginator.Counter
-                    total={enabledAssortment.length}
-                    itemsLength={enabledAssortment.length}
+                    total={initialProductAssortment.paging.total}
+                    itemsLength={
+                      isLastPage
+                        ? initialProductAssortment.paging.total
+                        : page * initialProductAssortment.paging.perPage
+                    }
                   />
                 </div>
               </section>
@@ -134,7 +155,6 @@ export const ProductAssortmentLayout = ({
 
         {isOpenAddProductAssortmentDrawer && (
           <AddProductAssortmentDrawer
-            productAssortment={drawerProductAssortment}
             isOpen={isOpenAddProductAssortmentDrawer}
             {...addProductAssortmentDrawerProps}
           />

package/src/features/product-assortment/services/get-product-assortment-from-contract.service.ts

@@ -2,12 +2,11 @@ import { productAssortmentClient } from "../clients/ProductAssortmentClient";
 
 export const getProductAssortmentFromContractService = async (
   params: Parameters<
-    typeof productAssortmentClient.getProductAssortmentFromContract
+    typeof productAssortmentClient.getProductAssortmentsInfoInContract
   >[0]
 ) => {
-  const data = await productAssortmentClient.getProductAssortmentFromContract(
-    params
-  );
+  const data =
+    await productAssortmentClient.getProductAssortmentsInfoInContract(params);
 
-  return data;
+  return data.paging;
 };

package/src/features/product-assortment/services/get-product-assortment-from-scope.service.ts

@@ -1,11 +1,16 @@
 import { isRightFormat } from "../../shared/utils/isRightFormat";
 import { productAssortmentClient } from "../clients/ProductAssortmentClient";
+import { GetProductAssortmentFromContractResponse } from "../types";
 
-export const getProductAssortmentFromScopeService = async (
+export interface GetProductAssortmentFromScopeServiceProps {
   args: Parameters<
     typeof productAssortmentClient.getProductAssortmentListInScope
-  >[0]
-) => {
+  >[0];
+}
+
+export const getProductAssortmentFromScopeService = async ({
+  args,
+}: GetProductAssortmentFromScopeServiceProps) => {
   try {
     const data = await productAssortmentClient.getProductAssortmentListInScope(
       args
@@ -19,7 +24,7 @@ export const getProductAssortmentFromScopeService = async (
         isRightFormat(err) &&
         err.message.startsWith("No Product assortment found for the name")
       ) {
-        return [];
+        return {} as GetProductAssortmentFromContractResponse;
       }
     }
 

package/src/features/product-assortment/services/index.ts

@@ -0,0 +1,4 @@
+export {
+  getProductAssortmentFromScopeService,
+  type GetProductAssortmentFromScopeServiceProps,
+} from "./get-product-assortment-from-scope.service";

package/src/features/product-assortment/types/index.ts

@@ -9,19 +9,26 @@ export type ProductAssortmentSummary = {
   name: string;
 };
 
-export type ContractProductAssortment = ProductAssortmentSummary & {
-  isEnabled: boolean;
-};
-export type ScopeProductAssortment = ProductAssortmentSummary & {
-  isEnabled: boolean;
+export type ProductAssortmentWithAdditionalInformation =
+  ProductAssortmentSummary & {
+    isEnabled: boolean;
+  };
+
+export type PageControl = {
+  page: number;
+  perPage: number;
+  total: number;
+  pages: number;
+  limit: number;
 };
 
 export type GetProductAssortmentFromContractResponse = {
-  collections: Array<ContractProductAssortment>;
+  items: Array<ProductAssortmentWithAdditionalInformation>;
+  paging: PageControl;
 };
 
 export type GetProductAssortmentFromScopeResponse = {
-  collections: Array<ScopeProductAssortment>;
+  collections: Array<ProductAssortmentWithAdditionalInformation>;
 };
 
 export type AddProductAssortmentResponse = {
@@ -34,9 +41,7 @@ export type AddProductAssortmentPayload = Array<{ name: string }>;
 export type AddProductAssortmentDrawerProps = Omit<
   BasicDrawerProps,
   "children"
-> & {
-  productAssortment: ScopeProductAssortment[];
-};
+>;
 
 export type RemoveProductAssortmentDrawerProps = Omit<
   BasicDrawerProps,
@@ -50,16 +55,16 @@ export interface ProductAssortmentSelectedProps {
 }
 
 export type ProductAssortmentLayoutProps = {
-  initialProductAssortment: ScopeProductAssortment[];
-  drawerProductAssortment: ScopeProductAssortment[];
+  initialProductAssortment: GetProductAssortmentFromContractResponse;
+  drawerProductAssortment: GetProductAssortmentFromContractResponse;
   page: number;
   search: string;
   isContractEmpty: boolean;
 };
 
 export type ProductAssortmentData = {
-  productAssortment: ScopeProductAssortment[];
-  drawerProductAssortment: ScopeProductAssortment[];
+  productAssortment: GetProductAssortmentFromContractResponse;
+  drawerProductAssortment: GetProductAssortmentFromContractResponse;
   isContractEmpty: boolean;
   search: string;
   page: number;

package/src/features/shared/utils/constants.ts

@@ -13,4 +13,4 @@ export const LOCAL_STORAGE_LOCATION_EDIT_KEY = "bp_hide_edit_location_confirm";
 export const LOCAL_STORAGE_RECIPIENT_EDIT_KEY =
   "bp_hide_edit_recipient_confirm";
 
-export const CURRENT_VERSION = "1.3.36";
+export const CURRENT_VERSION = "1.3.38";

package/src/features/shared/utils/creditCard.ts

@@ -14,7 +14,7 @@ export const maskExpirationDate = (expDate: string) => {
 };
 
 export const maskCVV = (verificationCode: string) => {
-  return mask(verificationCode, "999").substring(0, 3);
+  return mask(verificationCode, "9999").substring(0, 4);
 };
 
 export const findCardNetwork = (

package/src/pages/payment-methods.tsx

@@ -13,18 +13,20 @@ import {
   withLoaderErrorBoundary,
   withAuthLoader,
   withProviders,
+  getValidPage,
 } from "../features/shared/utils";
 import { getUserByIdService } from "../features/users/services";
 
 import type { ContractData } from "../features/contracts/types";
 import type { OrgUnitBasicData } from "../features/org-units/types";
-import type { PaymentMethodData } from "../features/payment-methods/types";
+import type { PaginatedPaymentMethod } from "../features/payment-methods/types";
 import type { AuthRouteProps, LoaderData } from "../features/shared/types";
 import type { UserData } from "../features/users/types";
 
 export type PaymentMethodsPageData = {
-  data: PaymentMethodData[];
+  data: PaginatedPaymentMethod;
   search?: string;
+  totalPaymentMethods: number;
   context: {
     currentContract: ContractData | null;
     clientContext: ClientContext;
@@ -38,12 +40,15 @@ export type PaymentMethodsPageData = {
 export type PaymentMethodsPageQuery = GetPaymentMethodsByUnitIdServiceProps & {
   orgUnitId: string;
   contractId: string;
+  page: string;
 };
 
 const loaderFunction = async (
   data: LoaderData<PaymentMethodsPageQuery>
 ): Promise<AuthRouteProps<PaymentMethodsPageData>> => {
-  const { contractId, orgUnitId, search } = data.query;
+  const { contractId, orgUnitId, search, page: pageString } = data.query;
+
+  const page = getValidPage(pageString);
 
   return withAuthLoader(data, async ({ cookie, userId, ...clientContext }) => {
     const currentOrgUnit = await getOrgUnitBasicDataService({
@@ -63,11 +68,21 @@ const loaderFunction = async (
       customerId: contractId,
       unitId: currentOrgUnit.id,
       cookie,
+      search,
+      page,
+      filterByScope: true,
+    });
+
+    const contractPaymentMethods = await getPaymentMethodsByUnitIdService({
+      customerId: contractId,
+      unitId: currentOrgUnit.id,
+      cookie,
     });
 
     return {
       data: paymentMethods,
       search: search ?? "",
+      totalPaymentMethods: contractPaymentMethods.paging.total,
       context: {
         clientContext: { cookie, userId, ...clientContext },
         currentOrgUnit,
@@ -85,6 +100,7 @@ export const loader = withLoaderErrorBoundary(loaderFunction, {
 
 const PaymentMethodsPage = ({
   data,
+  totalPaymentMethods,
   hasError,
   error,
 }: PaymentMethodsPageData) => (
@@ -92,7 +108,10 @@ const PaymentMethodsPage = ({
     {hasError ? (
       <ErrorTabsLayout error={error} />
     ) : (
-      <PaymentMethodsLayout data={data} />
+      <PaymentMethodsLayout
+        data={data}
+        totalPaymentMethods={totalPaymentMethods}
+      />
     )}
   </>
 );

package/src/pages/productAssortment.tsx

@@ -31,22 +31,26 @@ const loaderFunction = async (
       getContractDetailsService({ contractId, cookie, unitId: orgUnitId }),
     ]);
 
-    const [enabledAssortment, allAssortment, contractAssortment] =
+    const [enabledAssortment, notAddedAssortments, contractAssortment] =
       await Promise.all([
         getProductAssortmentFromScopeService({
-          cookie,
-          contractId,
-          unitId: orgUnitId,
-          filterByScope: true,
-          name: search,
-          page,
+          args: {
+            cookie,
+            contractId,
+            unitId: orgUnitId,
+            filterByScope: true,
+            name: search,
+            page,
+          },
         }),
         getProductAssortmentFromScopeService({
-          cookie,
-          contractId,
-          unitId: orgUnitId,
-          filterByScope: false,
-          page: 1,
+          args: {
+            cookie,
+            contractId,
+            unitId: orgUnitId,
+            filterByScope: false,
+            page: 1,
+          },
         }),
         getProductAssortmentFromContractService({
           contractId,
@@ -56,14 +60,11 @@ const loaderFunction = async (
       ]);
 
     const isContractEmpty =
-      !Array.isArray(contractAssortment) || contractAssortment?.length === 0;
-    const drawerProductAssortment = allAssortment.filter(
-      (col) => !col.isEnabled
-    );
+      !contractAssortment || contractAssortment.total === 0;
 
     return {
       productAssortment: enabledAssortment,
-      drawerProductAssortment,
+      drawerProductAssortment: notAddedAssortments,
       isContractEmpty,
       search,
       page,