@vtex/faststore-plugin-buyer-portal 2.0.8 → 2.0.9

package/src/features/budgets/layouts/BudgetsLayout/BudgetsLayout.tsx

@@ -9,6 +9,7 @@ import {
   useQueryParams,
 } from "../../../shared/hooks";
 import { FinanceTabsLayout, GlobalLayout } from "../../../shared/layouts";
+import { SumaPageLayout } from "../../../shared/layouts/SumaPageLayout/SumaPageLayout";
 import { BudgetDeleteDrawer } from "../../components/BudgetDeleteDrawer/BudgetDeleteDrawer";
 import { BudgetEditNotificationDrawer } from "../../components/BudgetEditNotificationDrawer/BudgetEditNotificationDrawer";
 import { BudgetsTable } from "../../components/BudgetsTable/BudgetsTable";
@@ -36,6 +37,7 @@ export const BudgetsLayout = ({ data }: BudgetsLayoutProps) => {
     clientContext: { cookie },
     currentOrgUnit: orgUnit,
     currentContract: contract,
+    featureFlags,
   } = useBuyerPortal();
   const [paginationLoading, setPaginationLoading] = useState<boolean>(false);
   const [loading, setLoading] = useState<boolean>(false);
@@ -161,118 +163,124 @@ export const BudgetsLayout = ({ data }: BudgetsLayoutProps) => {
     [page, contract?.id, orgUnit?.id, cookie]
   );
 
-  return (
-    <GlobalLayout>
-      <FinanceTabsLayout pageName="Finance and Compliance">
-        <section data-fs-bp-budgets-layout>
-          <main data-fs-bp-main>
-            <HeaderInside title="Budgets">
-              <HeaderInside.Button onClick={openBudgetDrawer} />
-            </HeaderInside>
-
-            {budgetContent.length === 0 ? (
-              <div data-fs-empty-state>
-                <EmptyState title="No budgets yet" iconName="Paid" />
-              </div>
-            ) : (
-              <section data-fs-bp-budgets-content>
-                <div data-fs-bp-search-container>
-                  <InternalSearch
-                    textSearch={(searchTerm) =>
-                      searchTerm
-                        ? setQueryString("search", searchTerm)
-                        : removeQueryString("search")
-                    }
-                  />
-                </div>
-
-                <BudgetsTable
-                  data={budgetContent}
-                  total={Number(total ?? 0)}
-                  onClickAllocationPage={handleAddAllocation}
-                  onClickEditBudget={handleBudgetEditPage}
-                  onClickCreateNotification={handleCreateNotification}
-                  openDeleteDrawer={(budgetId) => {
-                    setSelectedBudgetId(budgetId);
-                    openDeleteDrawer();
-                  }}
-                  loading={loading}
-                />
+  const budgetsSection = (
+    <section data-fs-bp-budgets-layout>
+      <main data-fs-bp-main>
+        <HeaderInside title="Budgets">
+          <HeaderInside.Button onClick={openBudgetDrawer} />
+        </HeaderInside>
 
-                <Pagination
-                  currentCount={budgetContent.length}
-                  total={Number(total ?? 0)}
-                  showMore={loadMore}
-                  loading={paginationLoading}
-                  variant={
-                    budgetContent.length < Number(total)
-                      ? "default"
-                      : "onlyText"
-                  }
-                />
-              </section>
-            )}
-          </main>
+        {budgetContent.length === 0 ? (
+          <div data-fs-empty-state>
+            <EmptyState title="No budgets yet" iconName="Paid" />
+          </div>
+        ) : (
+          <section data-fs-bp-budgets-content>
+            <div data-fs-bp-search-container>
+              <InternalSearch
+                textSearch={(searchTerm) =>
+                  searchTerm
+                    ? setQueryString("search", searchTerm)
+                    : removeQueryString("search")
+                }
+              />
+            </div>
 
-          {isDeleteDrawerOpen && (
-            <BudgetDeleteDrawer
-              budgetName={
-                budgetContent.find((budget) => budget.id === selectedBudgetId)
-                  ?.name ?? ""
-              }
-              budgetId={selectedBudgetId}
-              isOpen={isDeleteDrawerOpen}
-              orgUnitId={orgUnit?.id ?? ""}
-              contractId={contract?.id ?? ""}
-              close={() => {
-                closeDeleteDrawer();
-                setSelectedBudgetId("");
+            <BudgetsTable
+              data={budgetContent}
+              total={Number(total ?? 0)}
+              onClickAllocationPage={handleAddAllocation}
+              onClickEditBudget={handleBudgetEditPage}
+              onClickCreateNotification={handleCreateNotification}
+              openDeleteDrawer={(budgetId) => {
+                setSelectedBudgetId(budgetId);
+                openDeleteDrawer();
               }}
-              {...deleteDrawerProps}
-            />
-          )}
-          {isAddAllocationDrawerOpen && (
-            <CreateBudgetAllocationDrawer
-              {...addAllocationDrawerProps}
-              allocationList={budgetsAllocation?.data ?? []}
-              contractId={contract?.id ?? ""}
-              budgetId={selectedBudgetId}
-              orgUnitId={orgUnit?.id ?? ""}
-              isOpen={isAddAllocationDrawerOpen}
+              loading={loading}
             />
-          )}
-          {isCreateBudgetDrawerOpen && (
-            <CreateBudgetDrawer
-              contractId={contract?.id ?? ""}
-              unitId={orgUnit?.id ?? ""}
-              {...createBudgetDrawerProps}
-              isOpen={isCreateBudgetDrawerOpen}
-            />
-          )}
 
-          {isEditDrawerOpen && (
-            <EditBudgetDrawer
-              {...editDrawerProps}
-              isOpen={isEditDrawerOpen}
-              contractId={contract?.id ?? ""}
-              orgUnitId={orgUnit?.id ?? ""}
-              budgetId={selectedBudgetId}
-              initialBudget={budgetsToEdit}
+            <Pagination
+              currentCount={budgetContent.length}
+              total={Number(total ?? 0)}
+              showMore={loadMore}
+              loading={paginationLoading}
+              variant={
+                budgetContent.length < Number(total) ? "default" : "onlyText"
+              }
             />
-          )}
+          </section>
+        )}
+      </main>
 
-          {isNotificationDrawerOpen && budgetsToEdit && (
-            <BudgetEditNotificationDrawer
-              {...notificationDrawerProps}
-              isOpen={isNotificationDrawerOpen}
-              budget={budgetsToEdit}
-              budgetId={selectedBudgetId}
-              orgUnitId={orgUnit?.id ?? ""}
-              contractId={contract?.id ?? ""}
-            />
-          )}
-        </section>
-      </FinanceTabsLayout>
+      {isDeleteDrawerOpen && (
+        <BudgetDeleteDrawer
+          budgetName={
+            budgetContent.find((budget) => budget.id === selectedBudgetId)
+              ?.name ?? ""
+          }
+          budgetId={selectedBudgetId}
+          isOpen={isDeleteDrawerOpen}
+          orgUnitId={orgUnit?.id ?? ""}
+          contractId={contract?.id ?? ""}
+          close={() => {
+            closeDeleteDrawer();
+            setSelectedBudgetId("");
+          }}
+          {...deleteDrawerProps}
+        />
+      )}
+      {isAddAllocationDrawerOpen && (
+        <CreateBudgetAllocationDrawer
+          {...addAllocationDrawerProps}
+          allocationList={budgetsAllocation?.data ?? []}
+          contractId={contract?.id ?? ""}
+          budgetId={selectedBudgetId}
+          orgUnitId={orgUnit?.id ?? ""}
+          isOpen={isAddAllocationDrawerOpen}
+        />
+      )}
+      {isCreateBudgetDrawerOpen && (
+        <CreateBudgetDrawer
+          contractId={contract?.id ?? ""}
+          unitId={orgUnit?.id ?? ""}
+          {...createBudgetDrawerProps}
+          isOpen={isCreateBudgetDrawerOpen}
+        />
+      )}
+
+      {isEditDrawerOpen && (
+        <EditBudgetDrawer
+          {...editDrawerProps}
+          isOpen={isEditDrawerOpen}
+          contractId={contract?.id ?? ""}
+          orgUnitId={orgUnit?.id ?? ""}
+          budgetId={selectedBudgetId}
+          initialBudget={budgetsToEdit}
+        />
+      )}
+
+      {isNotificationDrawerOpen && budgetsToEdit && (
+        <BudgetEditNotificationDrawer
+          {...notificationDrawerProps}
+          isOpen={isNotificationDrawerOpen}
+          budget={budgetsToEdit}
+          budgetId={selectedBudgetId}
+          orgUnitId={orgUnit?.id ?? ""}
+          contractId={contract?.id ?? ""}
+        />
+      )}
+    </section>
+  );
+
+  return (
+    <GlobalLayout>
+      {featureFlags?.suma ? (
+        <SumaPageLayout>{budgetsSection}</SumaPageLayout>
+      ) : (
+        <FinanceTabsLayout pageName="Finance and Compliance">
+          {budgetsSection}
+        </FinanceTabsLayout>
+      )}
     </GlobalLayout>
   );
 };

package/src/features/buying-policies/layouts/BuyingPoliciesLayout/BuyingPoliciesLayout.tsx

@@ -16,6 +16,7 @@ import {
   useDrawerProps,
 } from "../../../shared/hooks";
 import { FinanceTabsLayout, GlobalLayout } from "../../../shared/layouts";
+import { SumaPageLayout } from "../../../shared/layouts/SumaPageLayout/SumaPageLayout";
 import { buyerPortalRoutes } from "../../../shared/utils/buyerPortalRoutes";
 import { BuyingPolicyDropdownMenu } from "../../components";
 import { AddBuyingPolicyDrawer } from "../../components/AddBuyingPolicyDrawer/AddBuyingPolicyDrawer";
@@ -35,7 +36,7 @@ export const BuyingPoliciesLayout = ({
   search,
   page,
 }: BuyingPoliciesLayoutProps) => {
-  const { currentContract, currentOrgUnit } = useBuyerPortal();
+  const { currentContract, currentOrgUnit, featureFlags } = useBuyerPortal();
 
   const router = useRouter();
 
@@ -142,55 +143,68 @@ export const BuyingPoliciesLayout = ({
     );
   }
 
+  const buyingPoliciesSection = (
+    <section data-fs-buying-policies-section>
+      <HeaderInside title="Buying Policies">
+        <HeaderInside.Button onClick={openAddBuyingPolicyDrawer} />
+      </HeaderInside>
+
+      <div data-fs-buying-policies-filter>
+        <InternalSearch defaultValue={searchTerm} textSearch={setSearchTerm} />
+        <Paginator.Counter
+          total={totalBuyingPolicies}
+          itemsLength={buyingPolicies.length}
+        />
+      </div>
+
+      {renderContent()}
+
+      <div data-fs-bp-buying-policies-paginator>
+        {totalBuyingPolicies > buyingPolicies.length ? (
+          <Paginator.NextPageButton onClick={increasePage} disabled={isLoading}>
+            {isLoading ? "Loading" : "Load More"}
+          </Paginator.NextPageButton>
+        ) : (
+          <span />
+        )}
+
+        <Paginator.Counter
+          total={totalBuyingPolicies}
+          itemsLength={buyingPolicies.length}
+        />
+      </div>
+    </section>
+  );
+
   return (
     <GlobalLayout>
-      <FinanceTabsLayout pageName="Finance and Compliance">
-        <section data-fs-buying-policies-section>
-          <HeaderInside title="Buying Policies">
-            <HeaderInside.Button onClick={openAddBuyingPolicyDrawer} />
-          </HeaderInside>
-
-          <div data-fs-buying-policies-filter>
-            <InternalSearch
-              defaultValue={searchTerm}
-              textSearch={setSearchTerm}
-            />
-            <Paginator.Counter
-              total={totalBuyingPolicies}
-              itemsLength={buyingPolicies.length}
+      {featureFlags?.suma ? (
+        <SumaPageLayout>
+          {buyingPoliciesSection}
+          {isAddBuyingPolicyDrawerOpen && (
+            <AddBuyingPolicyDrawer
+              orgUnitId={currentOrgUnit?.id ?? ""}
+              contractId={currentContract?.id ?? ""}
+              isOpen={isAddBuyingPolicyDrawerOpen}
+              onCreate={handleRefetchBuyingPolicies}
+              {...addBuyingPolicyDrawerProps}
             />
-          </div>
-
-          {renderContent()}
-
-          <div data-fs-bp-buying-policies-paginator>
-            {totalBuyingPolicies > buyingPolicies.length ? (
-              <Paginator.NextPageButton
-                onClick={increasePage}
-                disabled={isLoading}
-              >
-                {isLoading ? "Loading" : "Load More"}
-              </Paginator.NextPageButton>
-            ) : (
-              <span />
-            )}
-
-            <Paginator.Counter
-              total={totalBuyingPolicies}
-              itemsLength={buyingPolicies.length}
+          )}
+        </SumaPageLayout>
+      ) : (
+        <FinanceTabsLayout pageName="Finance and Compliance">
+          {buyingPoliciesSection}
+          {isAddBuyingPolicyDrawerOpen && (
+            <AddBuyingPolicyDrawer
+              orgUnitId={currentOrgUnit?.id ?? ""}
+              contractId={currentContract?.id ?? ""}
+              isOpen={isAddBuyingPolicyDrawerOpen}
+              onCreate={handleRefetchBuyingPolicies}
+              {...addBuyingPolicyDrawerProps}
             />
-          </div>
-        </section>
-        {isAddBuyingPolicyDrawerOpen && (
-          <AddBuyingPolicyDrawer
-            orgUnitId={currentOrgUnit?.id ?? ""}
-            contractId={currentContract?.id ?? ""}
-            isOpen={isAddBuyingPolicyDrawerOpen}
-            onCreate={handleRefetchBuyingPolicies}
-            {...addBuyingPolicyDrawerProps}
-          />
-        )}
-      </FinanceTabsLayout>
+          )}
+        </FinanceTabsLayout>
+      )}
     </GlobalLayout>
   );
 };

package/src/features/contracts/clients/ContractsClient.ts

@@ -47,6 +47,51 @@ class ContractsClient extends Client {
       }
     );
   }
+
+  listAttachedContracts(orgUnitId: string, cookie: string) {
+    return this.get<{ contracts: ContractData[] }>(
+      `units/${orgUnitId}/contracts/attached`,
+      {
+        headers: { Cookie: cookie },
+        params: { details: true },
+      }
+    );
+  }
+
+  listAvailableContracts(orgUnitId: string, cookie: string) {
+    return this.get<{
+      ids: string[];
+      contracts: Array<{ id: string; name: string }>;
+      total: number;
+    }>(`units/${orgUnitId}/contracts/available`, {
+      headers: { Cookie: cookie },
+      params: { details: true },
+    });
+  }
+
+  addContracts(orgUnitId: string, ids: string[], cookie: string) {
+    return this.post<unknown, { ids: string[] }>(
+      `units/${orgUnitId}/contracts/attached`,
+      { ids },
+      { headers: { Cookie: cookie } }
+    );
+  }
+
+  removeContract(orgUnitId: string, contractId: string, cookie: string) {
+    return this.request<null, never>({
+      url: `units/${orgUnitId}/contracts/attached/${contractId}`,
+      method: "DELETE",
+      headers: { Cookie: cookie },
+    });
+  }
+
+  setDefaultContract(orgUnitId: string, contractId: string, cookie: string) {
+    return this.request<null, never>({
+      url: `units/${orgUnitId}/contracts/attached/${contractId}/default`,
+      method: "PUT",
+      headers: { Cookie: cookie },
+    });
+  }
 }
 
 const contractsClient = new ContractsClient();