@vtex/faststore-plugin-buyer-portal 1.0.39 → 1.0.40

package/package.json

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

package/plugin.config.js

@@ -24,10 +24,10 @@ module.exports = {
     //   path: "/buyer-portal/payment-methods/[orgUnitId]/[contractId]",
     //   appLayout: false,
     // },
-    // "credit-cards": {
-    //   path: "/buyer-portal/credit-cards/[orgUnitId]/[contractId]",
-    //   appLayout: false,
-    // },
+    "credit-cards": {
+      path: "/buyer-portal/credit-cards/[orgUnitId]/[contractId]",
+      appLayout: false,
+    },
     // collections: {
     //   path: "/buyer-portal/collections/[orgUnitId]/[contractId]",
     //   appLayout: false,

package/public/buyer-portal-icons.svg

@@ -337,4 +337,14 @@
       fill="currentColor" />
 
   </symbol>
-</svg>
+
+  <symbol
+  id="Rename"
+  viewBox="0 0 17 13"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg">
+    <path d="M10.0712 12.6473V2.64734H6.0712V0.647339H16.0712V2.64734H12.0712V12.6473H10.0712ZM2.5712 12.6473V6.64734H0.0711975V4.64734H7.0712V6.64734H4.5712V12.6473H2.5712Z" fill="currentColor"/>
+  </symbol>
+
+
+</svg>

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

@@ -25,6 +25,7 @@ export type AddressFormProps = {
   completedAddress?: AddressData;
   setCompletedAddress?: (completedAddress: AddressData) => void;
   isEdit?: boolean;
+  fixedType?: boolean;
 };
 
 export const AddressForm = ({
@@ -37,6 +38,7 @@ export const AddressForm = ({
   setUseExistingAddress,
   completedAddress,
   setCompletedAddress,
+  fixedType = false,
 }: AddressFormProps) => {
   const addressTypeOptions = ["Shipping", "Billing", "Sold To"];
 
@@ -60,11 +62,13 @@ export const AddressForm = ({
     });
   };
 
+  const hideLabel = isEdit || fixedType;
+
   return (
     <>
       {!useExistingAddress ? (
         <div>
-          {!isEdit && <span>Fill in the address details</span>}
+          {!hideLabel && <span>Fill in the address details</span>}
 
           <AutocompleteDropdown
             data-fs-bp-create-address-country-selector
@@ -242,32 +246,34 @@ export const AddressForm = ({
             />
           )}
 
-          <AutocompleteDropdown
-            label="Address Type"
-            value={address.types}
-            options={addressTypeOptions}
-            onConfirmKeyPress={(option) =>
-              setAddress({ ...address, types: [option] })
-            }
-            renderOption={(option, index) => (
-              <AutocompleteDropdown.Item
-                key={`${option}-${index}`}
-                closeOnClick={true}
-                index={index}
-                isSelected={
-                  address?.types[0]?.toLocaleLowerCase() ===
-                  option.toLocaleLowerCase()
-                }
-                onClick={() => setAddress({ ...address, types: [option] })}
-              >
-                {option}
-                {address?.types[0]?.toLowerCase() ===
-                  option.toLocaleLowerCase() && (
-                  <Icon name="Check" width={12} height={12} />
-                )}
-              </AutocompleteDropdown.Item>
-            )}
-          />
+          {!fixedType && (
+            <AutocompleteDropdown
+              label="Address Type"
+              value={address.types}
+              options={addressTypeOptions}
+              onConfirmKeyPress={(option) =>
+                setAddress({ ...address, types: [option] })
+              }
+              renderOption={(option, index) => (
+                <AutocompleteDropdown.Item
+                  key={`${option}-${index}`}
+                  closeOnClick={true}
+                  index={index}
+                  isSelected={
+                    address?.types[0]?.toLocaleLowerCase() ===
+                    option.toLocaleLowerCase()
+                  }
+                  onClick={() => setAddress({ ...address, types: [option] })}
+                >
+                  {option}
+                  {address?.types[0]?.toLowerCase() ===
+                    option.toLocaleLowerCase() && (
+                    <Icon name="Check" width={12} height={12} />
+                  )}
+                </AutocompleteDropdown.Item>
+              )}
+            />
+          )}
         </div>
       ) : (
         <ExistingAddress

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

@@ -1,4 +1,4 @@
-import { Toggle, Dropdown, DropdownButton } from "@faststore/ui";
+import { Dropdown } from "@faststore/ui";
 import Link from "next/link";
 import { BasicDropdownMenu, Icon, Tag } from "../../../shared/components";
 import type { AddressData } from "../../types";

package/src/features/credit-cards/components/CreateCreditCardDrawer/CreateCreditCardDrawer.tsx

@@ -0,0 +1,135 @@
+import { useState } from "react";
+
+import { useUI } from "@faststore/ui";
+import { useRouter } from "next/router";
+import {
+  type BasicDrawerProps,
+  BasicDrawer,
+  InputText,
+} from "../../../shared/components";
+import { AddressForm } from "../../../addresses/components";
+import type { AddressInput, AddressData } from "../../../addresses/types";
+import type { CreditCard } from "../../types";
+import { CreditCardForm } from "../CreditCardForm/CreditCardForm";
+
+export type CreateCreditCardDrawerProps = Omit<BasicDrawerProps, "children"> & {
+  readonly?: boolean;
+};
+
+export const CreateCreditCardDrawer = ({
+  close,
+  readonly,
+  ...props
+}: CreateCreditCardDrawerProps) => {
+  const { pushToast } = useUI();
+  const [isTouched, setIsTouched] = useState(false);
+  const [useExistingAddress, setUseExistingAddress] = useState(false);
+  const [completedAddress, setCompletedAddress] = useState<AddressData>(
+    {} as AddressData
+  );
+
+  const router = useRouter();
+
+  const [address, setAddress] = useState<AddressInput>({
+    name: "",
+    streetAddress: "",
+    streetAddress2: "",
+    country: "",
+    countryCode: "",
+    zip: "",
+    state: "",
+    geoCordinates: "",
+    city: "",
+    types: ["Billing"],
+    neighborhood: "",
+  });
+
+  const [newCard, setNewCard] = useState<CreditCard>({} as CreditCard);
+
+  const [invalidAddress, setInvalidAddress] = useState(false);
+
+  const handleConfirmClick = () => {
+    pushToast({
+      message: "Credit card added successfully",
+      status: "INFO",
+    });
+    router.reload();
+    close();
+  };
+
+  const hasMinimumAddressInformation = () => {
+    return (
+      (address.name &&
+        address.streetAddress &&
+        address.country &&
+        address.zip &&
+        address.state &&
+        address.city &&
+        address.types.length > 0) ||
+      useExistingAddress
+    );
+  };
+
+  const hasCardInformation = () => {
+    return (
+      newCard.cardholder &&
+      newCard.nickname &&
+      newCard.cvv &&
+      newCard.expirationDate &&
+      newCard.number
+    );
+  };
+
+  const isConfirmButtonEnabled =
+    hasMinimumAddressInformation() && hasCardInformation();
+
+  return (
+    <BasicDrawer data-fs-bp-create-credit-card-drawer close={close} {...props}>
+      <BasicDrawer.Heading title="Add credit card" onClose={close} />
+      <BasicDrawer.Body>
+        <div data-fs-bp-create-credit-card-drawer-section-label>
+          <span>Card nickname</span>
+        </div>
+        <InputText
+          label="Card nickname"
+          value={newCard.nickname}
+          wrapperProps={{ style: { marginTop: 16 } }}
+          onChange={(event) =>
+            setNewCard({ ...newCard, nickname: event.target.value })
+          }
+        />
+
+        <CreditCardForm creditCard={newCard} setNewCard={setNewCard} />
+
+        <div data-fs-bp-create-credit-card-drawer-section-label>
+          <span>Billing Address</span>
+        </div>
+        <AddressForm
+          address={address}
+          setAddress={setAddress}
+          isTouched={isTouched}
+          setInvalidAddress={setInvalidAddress}
+          useExistingAddress={useExistingAddress}
+          setUseExistingAddress={setUseExistingAddress}
+          completedAddress={completedAddress}
+          setCompletedAddress={setCompletedAddress}
+          fixedType={true}
+        />
+      </BasicDrawer.Body>
+
+      <BasicDrawer.Footer>
+        <BasicDrawer.Button variant="ghost" onClick={close}>
+          Cancel
+        </BasicDrawer.Button>
+        <BasicDrawer.Button
+          variant="confirm"
+          disabled={!isConfirmButtonEnabled}
+          onClick={handleConfirmClick}
+          isLoading={false}
+        >
+          Save
+        </BasicDrawer.Button>
+      </BasicDrawer.Footer>
+    </BasicDrawer>
+  );
+};

package/src/features/credit-cards/components/CreateCreditCardDrawer/create-credit-card-drawer.scss

@@ -0,0 +1,21 @@
+@import "../../../shared/components/BasicDrawer/basic-drawer.scss";
+@import "../../../shared/components/InputText/input-text.scss";
+@import "../../../shared/components/ErrorMessage/error-message.scss";
+@import "@faststore/ui/src/components/atoms/Select/styles.scss";
+@import "@faststore/ui/src/components/atoms/Button/styles.scss";
+@import "@faststore/ui/src/components/molecules/Alert/styles.scss";
+@import "../CreditCardForm/credit-card-form.scss";
+
+[data-fs-bp-create-credit-card-drawer] {
+  @import "../../../addresses/components/ExistingAddress/existing-address.scss";
+
+  [data-fs-bp-create-credit-card-drawer-section-label] {
+    font-weight: bold;
+    margin-top: var(--fs-spacing-3);
+  }
+
+  [data-fs-bp-autocomplete-dropdown] {
+    margin-top: var(--fs-spacing-3);
+    margin-bottom: var(--fs-spacing-3);
+  }
+}

package/src/features/credit-cards/components/CreditCardDropdownMenu/CreditCardDropdownMenu.tsx

@@ -0,0 +1,103 @@
+import { DropdownItem, Icon as UIIcon } from "@faststore/ui";
+
+import {
+  DeleteCreditCardDrawer,
+  EditCreditCardDrawer,
+  RemoveCreditCardDrawer,
+} from "..";
+import { useDrawerProps, useBuyerPortal } from "../../../shared/hooks";
+import { BasicDropdownMenu, Icon } from "../../../shared/components";
+import type { CreditCardData } from "../../types";
+
+export type CreditCardDropdownMenuProps = {
+  currentCreditCard: CreditCardData;
+  onUpdate?: () => void;
+  onCreate?: () => void;
+  isComplete?: boolean;
+};
+
+export const CreditCardDropdownMenu = ({
+  currentCreditCard,
+}: CreditCardDropdownMenuProps) => {
+  const { currentOrgUnit } = useBuyerPortal();
+
+  const idsPath = currentOrgUnit?.path?.ids?.split("/") ?? [];
+
+  const isRootLevelOrgUnit = idsPath.length === 2 ?? false;
+
+  const {
+    open: openEditDrawerProps,
+    isOpen: isEditDrawerOpen,
+    ...editDrawerProps
+  } = useDrawerProps();
+
+  const {
+    open: openRemoveDrawer,
+    isOpen: isOpenRemoveDrawer,
+    ...removeDrawerProps
+  } = useDrawerProps();
+
+  const {
+    open: openDeleteDrawer,
+    isOpen: isOpenDeleteDrawer,
+    ...deleteDrawerProps
+  } = useDrawerProps();
+
+  const sizeProps = { width: 20, height: 20 };
+
+  return (
+    <>
+      <BasicDropdownMenu data-fs-bp-dropdown-menu>
+        <DropdownItem onClick={openEditDrawerProps}>
+          <Icon name="Rename" {...sizeProps} />
+          Rename
+        </DropdownItem>
+        <DropdownItem onClick={() => {}}>
+          <Icon name="BookmarkAdd" {...sizeProps} />
+          Set as Default
+        </DropdownItem>
+
+        <BasicDropdownMenu.Separator />
+        <DropdownItem onClick={openRemoveDrawer}>
+          <UIIcon name="MinusCircle" {...sizeProps} />
+          Remove from Unit
+        </DropdownItem>
+        {isRootLevelOrgUnit && (
+          <DropdownItem
+            onClick={openDeleteDrawer}
+            data-fs-bp-dropdown-menu-item-mode="danger"
+          >
+            <Icon name="Delete" {...sizeProps} data-fs-bp-delete-dropdown />
+            <span data-fs-bp-delete-dropdown>Delete</span>
+          </DropdownItem>
+        )}
+      </BasicDropdownMenu>
+      {isEditDrawerOpen && (
+        <EditCreditCardDrawer
+          readonly
+          {...editDrawerProps}
+          isOpen={isEditDrawerOpen}
+          creditCard={currentCreditCard}
+        />
+      )}
+      {isOpenRemoveDrawer && (
+        <RemoveCreditCardDrawer
+          readonly
+          cardName={currentCreditCard.nickname}
+          cardId={currentCreditCard.id}
+          {...removeDrawerProps}
+          isOpen={isOpenRemoveDrawer}
+        />
+      )}
+      {isOpenDeleteDrawer && (
+        <DeleteCreditCardDrawer
+          readonly
+          cardName={currentCreditCard.nickname}
+          cardId={currentCreditCard.id}
+          isOpen={isOpenDeleteDrawer}
+          {...deleteDrawerProps}
+        />
+      )}
+    </>
+  );
+};

package/src/features/credit-cards/components/CreditCardForm/CreditCardForm.tsx

@@ -0,0 +1,79 @@
+import { InputText } from "../../../shared/components";
+import type { CreditCard } from "../../types";
+import {
+  maskCardNumber,
+  maskExpirationDate,
+  maskCVV,
+} from "../../../shared/utils";
+
+export type CreditCardFormProps = {
+  creditCard: CreditCard;
+  setNewCard: (newCard: CreditCard) => void;
+};
+
+export const CreditCardForm = ({
+  creditCard,
+  setNewCard,
+}: CreditCardFormProps) => {
+  const handleChangeNumber = (cardNumber: string) => {
+    setNewCard({
+      ...creditCard,
+      number: maskCardNumber(cardNumber),
+    });
+  };
+
+  const handleChangeExpirationDate = (expirationDate: string) => {
+    setNewCard({
+      ...creditCard,
+      expirationDate: maskExpirationDate(expirationDate),
+    });
+  };
+
+  const handleChangeVerificationCode = (verificationCode: string) => {
+    setNewCard({
+      ...creditCard,
+      cvv: maskCVV(verificationCode),
+    });
+  };
+
+  return (
+    <>
+      <div data-fs-bp-create-credit-card-drawer-section-label>
+        <span>Card Details</span>
+      </div>
+
+      <InputText
+        label="Card number"
+        value={creditCard.number}
+        wrapperProps={{ style: { marginTop: 16 } }}
+        onChange={(event) => handleChangeNumber(event.target.value)}
+      />
+
+      <div data-fs-bp-create-credit-card-security-line>
+        <InputText
+          label="Exp MM/YY"
+          value={creditCard.expirationDate}
+          wrapperProps={{ style: { marginTop: 16 } }}
+          onChange={(event) => handleChangeExpirationDate(event.target.value)}
+        />
+
+        <InputText
+          label="CVV"
+          value={creditCard.cvv}
+          wrapperProps={{ style: { marginTop: 16 } }}
+          onChange={(event) => handleChangeVerificationCode(event.target.value)}
+          type="number"
+        />
+      </div>
+
+      <InputText
+        label="Cardholder name"
+        value={creditCard.cardholder}
+        wrapperProps={{ style: { marginTop: 16 } }}
+        onChange={(event) =>
+          setNewCard({ ...creditCard, cardholder: event.target.value })
+        }
+      />
+    </>
+  );
+};

package/src/features/credit-cards/components/CreditCardForm/credit-card-form.scss

@@ -0,0 +1,5 @@
+[data-fs-bp-create-credit-card-security-line] {
+  display: inline-flex;
+  width: 100%;
+  gap: var(--fs-spacing-3);
+}

package/src/features/credit-cards/components/DeleteCreditCardDrawer/DeleteCreditCardDrawer.tsx

@@ -0,0 +1,82 @@
+import { useUI } from "@faststore/ui";
+import { useRouter } from "next/router";
+
+import {
+  type BasicDrawerProps,
+  BasicDrawer,
+  InputText,
+} from "../../../shared/components";
+import { useState } from "react";
+
+export type DeleteCreditCardDrawerProps = Omit<BasicDrawerProps, "children"> & {
+  readonly?: boolean;
+  cardName: string;
+  cardId: string;
+};
+
+export const DeleteCreditCardDrawer = ({
+  close,
+  cardName,
+  cardId,
+  readonly,
+  ...props
+}: DeleteCreditCardDrawerProps) => {
+  const { pushToast } = useUI();
+  const router = useRouter();
+  const [creditCardNameConfirmation, setCreditCardNameConfirmation] =
+    useState("");
+
+  const handleConfirmClick = () => {
+    pushToast({
+      message: "Credit card deleted successfully",
+      status: "INFO",
+    });
+    router.reload();
+    close();
+  };
+
+  const isDeleteButtonEnabled = creditCardNameConfirmation === cardName;
+
+  return (
+    <BasicDrawer data-fs-bp-remove-credit-card-drawer close={close} {...props}>
+      <BasicDrawer.Heading title="Delete credit card" onClose={close} />
+      <BasicDrawer.Body>
+        <div>
+          <p>
+            Permanently delete <span data-fs-bp-drawer-label>{cardName} </span>?
+          </p>
+          <br />
+          <p>
+            This credit card may be used by multiple units. Deleting it will
+            permanently remove it and all iits data from all associated units,
+            though usage history will be kept for audit. This action can't be
+            undone
+          </p>
+          <br />
+          <p>Confirm by typing the card nickname below:</p>
+          <br />
+          <InputText
+            label="Card nickname"
+            value={creditCardNameConfirmation}
+            onChange={(event) =>
+              setCreditCardNameConfirmation(event.currentTarget.value)
+            }
+          />
+        </div>
+      </BasicDrawer.Body>
+
+      <BasicDrawer.Footer>
+        <BasicDrawer.Button variant="ghost" onClick={close}>
+          Cancel
+        </BasicDrawer.Button>
+        <BasicDrawer.Button
+          variant="confirm"
+          onClick={handleConfirmClick}
+          disabled={!isDeleteButtonEnabled}
+        >
+          Delete
+        </BasicDrawer.Button>
+      </BasicDrawer.Footer>
+    </BasicDrawer>
+  );
+};

package/src/features/credit-cards/components/EditCreditCardDrawer/EditCreditCardDrawer.tsx

@@ -0,0 +1,90 @@
+import { useState } from "react";
+
+import { useUI } from "@faststore/ui";
+import { useRouter } from "next/router";
+import {
+  type BasicDrawerProps,
+  BasicDrawer,
+  InputText,
+} from "../../../shared/components";
+import type { CreditCardData } from "../../types";
+
+export type EditCreditCardDrawerProps = Omit<BasicDrawerProps, "children"> & {
+  readonly?: boolean;
+  creditCard: CreditCardData;
+};
+
+export const EditCreditCardDrawer = ({
+  close,
+  readonly,
+  creditCard,
+  ...props
+}: EditCreditCardDrawerProps) => {
+  const { pushToast } = useUI();
+
+  const router = useRouter();
+
+  const [cardToModify, setCardToModify] = useState<CreditCardData>(creditCard);
+  const [onConfirmationStep, setOnConfirmationStep] = useState(false);
+
+  const drawerTitle = onConfirmationStep
+    ? "Confirm credit card update"
+    : "Rename credit card";
+
+  const handleConfirmClick = () => {
+    if (onConfirmationStep) {
+      pushToast({
+        message: "Credit edited added successfully",
+        status: "INFO",
+      });
+      router.reload();
+      close();
+    } else {
+      setOnConfirmationStep(true);
+    }
+  };
+
+  const isEdited = cardToModify.nickname !== creditCard.nickname;
+
+  return (
+    <BasicDrawer data-fs-bp-edit-credit-card-drawer close={close} {...props}>
+      <BasicDrawer.Heading title={drawerTitle} onClose={close} />
+      <BasicDrawer.Body>
+        {onConfirmationStep ? (
+          <div>
+            <p>
+              Thid credit card may be used by multiple units. Updates will
+              affect all of them
+            </p>
+            <br />
+            <p>Proceed with the update?</p>
+            <br />
+          </div>
+        ) : (
+          <InputText
+            label="Card nickname"
+            value={cardToModify.nickname}
+            wrapperProps={{ style: { marginTop: 16 } }}
+            onChange={(event) =>
+              setCardToModify({ ...cardToModify, nickname: event.target.value })
+            }
+          />
+        )}
+      </BasicDrawer.Body>
+
+      <BasicDrawer.Footer>
+        <BasicDrawer.Button variant="ghost" onClick={close}>
+          Cancel
+        </BasicDrawer.Button>
+        <BasicDrawer.Button
+          variant="confirm"
+          disabled={!isEdited}
+          onClick={handleConfirmClick}
+          isLoading={false}
+        >
+          {onConfirmationStep ? "Confirm" : "Save"}
+        </BasicDrawer.Button>
+      </BasicDrawer.Footer>
+    </BasicDrawer>
+  );
+};

package/src/features/credit-cards/components/EditCreditCardDrawer/edit-credit-card-drawer.scss

@@ -0,0 +1,4 @@
+@import "../../../shared/components/BasicDrawer/basic-drawer.scss";
+@import "../../../shared/components/InputText/input-text.scss";
+@import "../../../shared/components/ErrorMessage/error-message.scss";
+@import "@faststore/ui/src/components/atoms/Button/styles.scss";

package/src/features/credit-cards/components/RemoveCreditCardDrawer/RemoveCreditCardDrawer.tsx

@@ -0,0 +1,84 @@
+import { useUI } from "@faststore/ui";
+import { useRouter } from "next/router";
+
+import { type BasicDrawerProps, BasicDrawer } from "../../../shared/components";
+import { useRemoveFromScope, useBuyerPortal } from "../../../shared/hooks";
+
+export type RemoveCreditCardDrawerProps = Omit<BasicDrawerProps, "children"> & {
+  readonly?: boolean;
+  cardId: string;
+  cardName: string;
+};
+
+export const RemoveCreditCardDrawer = ({
+  close,
+  cardId,
+  cardName,
+  readonly,
+  ...props
+}: RemoveCreditCardDrawerProps) => {
+  const { pushToast } = useUI();
+  const router = useRouter();
+  const { currentOrgUnit } = useBuyerPortal();
+
+  const handeRemoveFromScopeSuccess = () => {
+    pushToast({
+      message: "Credit card removed successfully",
+      status: "INFO",
+    });
+    router.reload();
+    close();
+  };
+
+  const { removeFromScope } = useRemoveFromScope({
+    onSuccess: handeRemoveFromScopeSuccess,
+    onError: () => {
+      pushToast({
+        message:
+          "An error occurred while removing the credit card from the unit",
+        status: "ERROR",
+      });
+    },
+  });
+
+  const handleConfirmClick = () => {
+    removeFromScope({
+      scopeName: "creditCards",
+      unitId: currentOrgUnit?.id ?? "",
+      fieldId: cardId,
+    });
+  };
+
+  return (
+    <BasicDrawer data-fs-bp-remove-credit-card-drawer close={close} {...props}>
+      <BasicDrawer.Heading
+        title="Remove credit card from unit"
+        onClose={close}
+      />
+      <BasicDrawer.Body>
+        <div>
+          <p>
+            {" "}
+            Remove <span data-fs-bp-drawer-label>{cardName}</span> credit card
+            from <span data-fs-bp-drawer-label>{currentOrgUnit?.name} </span>{" "}
+            organizational unit?
+          </p>
+          <br />
+          <p>
+            This action will prevent users in this unit from accessing this
+            credit card during checkout
+          </p>
+        </div>
+      </BasicDrawer.Body>
+
+      <BasicDrawer.Footer>
+        <BasicDrawer.Button variant="ghost" onClick={close}>
+          Cancel
+        </BasicDrawer.Button>
+        <BasicDrawer.Button variant="confirm" onClick={handleConfirmClick}>
+          Confirm
+        </BasicDrawer.Button>
+      </BasicDrawer.Footer>
+    </BasicDrawer>
+  );
+};

package/src/features/credit-cards/components/RemoveCreditCardDrawer/remove-credit-card-drawer.scss

@@ -0,0 +1,9 @@
+@import "../../../shared/components/BasicDrawer/basic-drawer.scss";
+
+[data-fs-bp-remove-credit-card-drawer] {
+  @import "@faststore/ui/src/components/atoms/Button/styles.scss";
+
+  [data-fs-bp-drawer-label] {
+    color: #0366dd;
+  }
+}

package/src/features/credit-cards/components/index.ts

@@ -0,0 +1,24 @@
+export {
+  CreateCreditCardDrawer,
+  type CreateCreditCardDrawerProps,
+} from "./CreateCreditCardDrawer/CreateCreditCardDrawer";
+export {
+  CreditCardForm,
+  type CreditCardFormProps,
+} from "./CreditCardForm/CreditCardForm";
+export {
+  EditCreditCardDrawer,
+  type EditCreditCardDrawerProps,
+} from "./EditCreditCardDrawer/EditCreditCardDrawer";
+export {
+  CreditCardDropdownMenu,
+  type CreditCardDropdownMenuProps,
+} from "./CreditCardDropdownMenu/CreditCardDropdownMenu";
+export {
+  RemoveCreditCardDrawer,
+  type RemoveCreditCardDrawerProps,
+} from "./RemoveCreditCardDrawer/RemoveCreditCardDrawer";
+export {
+  DeleteCreditCardDrawer,
+  type DeleteCreditCardDrawerProps,
+} from "./DeleteCreditCardDrawer/DeleteCreditCardDrawer";

package/src/features/credit-cards/layouts/CreditCardsLayout/CreditCardLayout.tsx

@@ -0,0 +1,100 @@
+import { Dropdown } from "@faststore/ui";
+
+import {
+  InternalSearch,
+  Icon,
+  HeaderInside,
+  BasicDropdownMenu,
+} from "../../../shared/components";
+
+import {
+  useQueryParams,
+  useDrawerProps,
+  useBuyerPortal,
+} from "../../../shared/hooks";
+import { ContractTabsLayout, GlobalLayout } from "../../../shared/layouts";
+import { CreditCardData } from "../../types";
+import {
+  CreateCreditCardDrawer,
+  CreditCardDropdownMenu,
+} from "../../components";
+
+export type CreditCardsLayoutProps = {
+  data: CreditCardData[];
+};
+
+export const CreditCardLayout = ({ data }: CreditCardsLayoutProps) => {
+  const { setQueryString, removeQueryString } = useQueryParams();
+  const {
+    open: openCreateDrawer,
+    isOpen: isCreateCreditCardDrawerOpen,
+    ...createDrawerProps
+  } = useDrawerProps();
+
+  const {
+    currentOrgUnit: orgUnit,
+    currentUser: user,
+    currentContract: contract,
+  } = useBuyerPortal();
+
+  return (
+    <GlobalLayout>
+      <ContractTabsLayout
+        orgUnitName={orgUnit?.name ?? ""}
+        orgUnitId={orgUnit?.id ?? ""}
+        contractName={contract?.name ?? ""}
+        contractId={contract?.id ?? ""}
+        pageName="Contract"
+        person={{
+          image: undefined,
+          name: user?.name ?? "",
+          role: user?.role ?? "",
+        }}
+      >
+        <section data-fs-credit-card-section>
+          <HeaderInside title="Credit cards">
+            <HeaderInside.Button onClick={openCreateDrawer} />
+          </HeaderInside>
+          <div data-fs-bp-credit-card-search-container>
+            <InternalSearch
+              textSearch={(searchTerm) => {
+                searchTerm
+                  ? setQueryString("search", searchTerm)
+                  : removeQueryString("search");
+              }}
+            />
+          </div>
+
+          <ul data-fs-credit-card-list>
+            <div data-fs-bp-credit-card-list-title> Card Nickname </div>
+            {data.map((creditCard) => (
+              <li data-fs-credit-card-line key={creditCard.id}>
+                <div data-fs-credit-card-row>
+                  <div data-fs-credit-card-row-information>
+                    <span data-fs-credit-card-row-icon-wrapper>
+                      <Icon name="CreditCard" width={24} height={24} />
+                    </span>
+                    <div data-fs-credit-card-name>{creditCard.nickname}</div>
+                  </div>
+                  <div data-fs-credit-card-row-action>
+                    <Dropdown>
+                      <BasicDropdownMenu.Trigger />
+                      <CreditCardDropdownMenu currentCreditCard={creditCard} />
+                    </Dropdown>
+                  </div>
+                </div>
+              </li>
+            ))}
+          </ul>
+          {isCreateCreditCardDrawerOpen && (
+            <CreateCreditCardDrawer
+              readonly
+              {...createDrawerProps}
+              isOpen={isCreateCreditCardDrawerOpen}
+            />
+          )}
+        </section>
+      </ContractTabsLayout>
+    </GlobalLayout>
+  );
+};

package/src/features/credit-cards/layouts/CreditCardsLayout/credit-card-layout.scss

@@ -0,0 +1,140 @@
+@import "../../../shared/components/MainLinksDropdownMenu/main-links-dropdown-menu.scss";
+@import "../../components/CreateCreditCardDrawer/create-credit-card-drawer.scss";
+@import "../../components/EditCreditCardDrawer/edit-credit-card-drawer.scss";
+@import "../../components/RemoveCreditCardDrawer/remove-credit-card-drawer.scss";
+
+[data-fs-credit-card-section] {
+  @import "../../../shared/components/InternalSearch/internal-search.scss";
+  @import "../../../shared/components/DropdownFilter/dropdown-filter.scss";
+  @import "../../../shared/components/HeaderInside/header-inside.scss";
+
+  padding: 0 calc(var(--fs-spacing-9) - var(--fs-spacing-0));
+
+  [data-fs-topbar-actions-wrapper] {
+    display: flex;
+    flex-direction: row;
+    [data-fs-topbar-dropdown-filter-trigger] {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+
+      [data-fs-topbar-dropdown-filter-trigger-label] {
+        font-weight: var(--fs-text-weight-medium);
+        font-size: var(--fs-text-size-2);
+        color: #1f1f1f;
+      }
+
+      [data-fs-topbar-dropdown-filter-trigger-icon] {
+        color: #707070;
+      }
+    }
+
+    [data-fs-topbar-dropdown-add-trigger] {
+      background-color: #0366dd;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: calc(var(--fs-spacing-2) - var(--fs-spacing-0))
+        var(--fs-spacing-2);
+      border-radius: var(--fs-border-radius-pill);
+      color: white;
+      cursor: pointer;
+
+      [data-fs-topbar-dropdown-add-trigger-label] {
+        font-weight: var(--fs-text-weight-semibold);
+        font-size: var(--fs-text-size-1);
+        line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+      }
+
+      svg {
+        color: white;
+      }
+    }
+  }
+
+  [data-fs-bp-credit-card-search-container] {
+    display: flex;
+    gap: var(--fs-spacing-1);
+    padding-bottom: 2rem;
+  }
+
+  [data-fs-credit-card-divider] {
+    border: calc(var(--fs-border-width) / 2) solid #e0e0e0;
+  }
+
+  [data-fs-credit-card-list] {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    [data-fs-bp-credit-card-list-title] {
+      color: #5c5c5c;
+      margin-bottom: 0.5rem;
+    }
+
+    [data-fs-credit-card-line] {
+      border-top: var(--fs-border-width) solid #e5e5e5;
+    }
+
+    [data-fs-credit-card-row] {
+      display: flex;
+      justify-content: space-between;
+
+      &:hover {
+        background-color: #f5f5f5;
+      }
+
+      &:visited {
+        color: red;
+      }
+
+      [data-fs-credit-card-row-information] {
+        display: flex;
+        align-items: center;
+        margin-left: var(--fs-spacing-3);
+        padding: var(--fs-spacing-2) 0;
+        size: var(--fs-text-size-1);
+        color: #0366dd;
+        text-decoration: none;
+        flex: 1;
+
+        [data-fs-credit-card-row-icon-wrapper] {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: var(--fs-spacing-6);
+          height: var(--fs-spacing-6);
+
+          margin-right: calc(var(--fs-spacing-2) - var(--fs-spacing-0));
+        }
+
+        [data-fs-credit-card-name] {
+          width: var(--data-fs-users-table-width);
+          font-weight: 500;
+          font-size: var(--fs-text-size-1);
+          line-height: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+          text-decoration: none;
+          color: #000;
+        }
+      }
+
+      [data-fs-credit-card-row-action] {
+        align-items: center;
+        display: flex;
+
+        [data-fs-credit-card-row-dropdown-button] {
+          height: var(--fs-spacing-6);
+          width: var(--fs-spacing-6);
+          border-radius: var(--fs-border-radius-pill);
+          color: #5c5c5c;
+          margin-left: calc(var(--fs-spacing-3) + var(--fs-spacing-0));
+
+          &:hover {
+            background-color: #e0e0e0;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+}

package/src/features/credit-cards/layouts/index.ts

@@ -0,0 +1 @@
+export { CreditCardLayout } from "./CreditCardsLayout/CreditCardLayout";

package/src/features/credit-cards/types/CreditCard.ts

@@ -0,0 +1,12 @@
+export type CreditCard = {
+  nickname: string;
+  number: string;
+  expirationDate: string;
+  cvv: string;
+  cardholder: string;
+};
+
+export type CreditCardData = {
+  nickname: string;
+  id: string;
+};

package/src/features/credit-cards/types/index.ts

@@ -0,0 +1 @@
+export type { CreditCard, CreditCardData } from "./CreditCard";

package/src/features/org-units/components/AddAllToOrgUnitDropdown/AddAllToOrgUnitDropdown.tsx

@@ -1,5 +1,7 @@
 import { DropdownItem } from "@faststore/ui";
 import { BasicDropdownMenu, Icon } from "../../../shared/components";
+import { useDrawerProps } from "../../../shared/hooks";
+import { CreateCreditCardDrawer } from "../../../credit-cards/components";
 
 export type AddAllToOrgUnitDropdownProps = {
   isSingleContract: boolean;
@@ -10,56 +12,71 @@ export const AddAllToOrgUnitDropdown = ({
 }: AddAllToOrgUnitDropdownProps) => {
   const sizeProps = { width: 20, height: 20 };
 
+  const {
+    open: openCreditCardDrawer,
+    isOpen: isOpenCreditCardDrawer,
+    ...creditCardDrawerProps
+  } = useDrawerProps();
+
   return (
-    <BasicDropdownMenu>
-      <DropdownItem>
-        <Icon name="Description" {...sizeProps} />
-        Add contract
-      </DropdownItem>
-      {isSingleContract && (
-        <>
-          <DropdownItem>
-            <Icon name="LocalPostOffice" {...sizeProps} />
-            Add address
-          </DropdownItem>
-          <DropdownItem>
-            <Icon name="CreditCard" {...sizeProps} />
-            Add credit card
-          </DropdownItem>
-          <DropdownItem>
-            <Icon name="TableEdit" {...sizeProps} />
-            Add cost center
-          </DropdownItem>
-          <DropdownItem>
-            <Icon name="TableEdit" {...sizeProps} />
-            Add PO number
-          </DropdownItem>
-          <DropdownItem>
-            <Icon name="TableEdit" {...sizeProps} />
-            Add release
-          </DropdownItem>
-        </>
-      )}
-      <BasicDropdownMenu.Separator />
+    <>
+      <BasicDropdownMenu>
+        <DropdownItem>
+          <Icon name="Description" {...sizeProps} />
+          Add contract
+        </DropdownItem>
+        {isSingleContract && (
+          <>
+            <DropdownItem>
+              <Icon name="LocalPostOffice" {...sizeProps} />
+              Add address
+            </DropdownItem>
+            <DropdownItem onClick={openCreditCardDrawer}>
+              <Icon name="CreditCard" {...sizeProps} />
+              Add credit card
+            </DropdownItem>
+            <DropdownItem>
+              <Icon name="TableEdit" {...sizeProps} />
+              Add cost center
+            </DropdownItem>
+            <DropdownItem>
+              <Icon name="TableEdit" {...sizeProps} />
+              Add PO number
+            </DropdownItem>
+            <DropdownItem>
+              <Icon name="TableEdit" {...sizeProps} />
+              Add release
+            </DropdownItem>
+          </>
+        )}
+        <BasicDropdownMenu.Separator />
 
-      <DropdownItem>
-        <Icon name="Profile" {...sizeProps} />
-        Add user
-      </DropdownItem>
-      <DropdownItem>
-        <Icon name="Folder" {...sizeProps} />
-        Add organization unit
-      </DropdownItem>
-      <BasicDropdownMenu.Separator />
+        <DropdownItem>
+          <Icon name="Profile" {...sizeProps} />
+          Add user
+        </DropdownItem>
+        <DropdownItem>
+          <Icon name="Folder" {...sizeProps} />
+          Add organization unit
+        </DropdownItem>
+        <BasicDropdownMenu.Separator />
 
-      <DropdownItem>
-        <Icon name="Paid" {...sizeProps} />
-        Add budget
-      </DropdownItem>
-      <DropdownItem>
-        <Icon name="Rebase" {...sizeProps} />
-        Add buying policy
-      </DropdownItem>
-    </BasicDropdownMenu>
+        <DropdownItem>
+          <Icon name="Paid" {...sizeProps} />
+          Add budget
+        </DropdownItem>
+        <DropdownItem>
+          <Icon name="Rebase" {...sizeProps} />
+          Add buying policy
+        </DropdownItem>
+      </BasicDropdownMenu>
+      {isOpenCreditCardDrawer && (
+        <CreateCreditCardDrawer
+          readonly
+          {...creditCardDrawerProps}
+          isOpen={isOpenCreditCardDrawer}
+        />
+      )}
+    </>
   );
 };

package/src/features/org-units/layouts/OrgUnitDetailsLayout/org-units-details.scss

@@ -1,6 +1,7 @@
 @import "@faststore/ui/src/components/molecules/Dropdown/styles.scss";
 @import "../../../shared/components/BasicDropdownMenu/basic-dropdown-menu.scss";
 @import "../../components/OrgUnitDetailsNavbar/org-unit-details-navbar.scss";
+@import "../../../credit-cards/components/CreateCreditCardDrawer/create-credit-card-drawer.scss";
 
 [data-fs-org-units-details-section] {
   @import "../../../shared/components/BasicCard/basic-card.scss";

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

@@ -0,0 +1,16 @@
+import mask from "./mask";
+
+export const maskCardNumber = (creditCardNumber: string) => {
+  return mask(
+    creditCardNumber.replace(/[^0-9 ]/g, ""),
+    "9999 9999 9999 9999 999"
+  ).substring(0, 23);
+};
+
+export const maskExpirationDate = (expDate: string) => {
+  return mask(expDate.replace(/[^0-9\/]/g, ""), "12/99").substring(0, 5);
+};
+
+export const maskCVV = (verificationCode: string) => {
+  return mask(verificationCode, "999").substring(0, 3);
+};

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

@@ -24,3 +24,4 @@ export { toQueryParams } from "./toQueryParams";
 export { roles, type Role } from "./roles";
 export { getContractSettingsLinks } from "./getContractSettingsLinks";
 export { getOrganizationSettingsLinks } from "./getOrganizationSettingsLinks";
+export { maskCardNumber, maskCVV, maskExpirationDate } from "./creditCard";

package/src/pages/credit-cards.tsx

@@ -0,0 +1,71 @@
+import { type ClientContext, getClientContext } from "../features/shared/utils";
+import { BuyerPortalProvider } from "../features/shared/components";
+import type { LoaderData } from "../features/shared/types";
+import type { OrgUnitBasicData } from "../features/org-units/types";
+import { getOrgUnitBasicDataService } from "../features/org-units/services";
+import { getUserByIdService } from "../features/users/services";
+import type { UserData } from "../features/users/types";
+import type { ContractData } from "../features/contracts/types";
+import { getContractDetailsService } from "../features/contracts/services";
+import { CreditCardData } from "../features/credit-cards/types";
+import { CreditCardLayout } from "../features/credit-cards/layouts";
+
+export type CreditCardPageData = {
+  data: CreditCardData[];
+  context: {
+    currentContract: ContractData | null;
+    clientContext: ClientContext;
+    currentOrgUnit: OrgUnitBasicData | null;
+    currentUser: UserData | null;
+  };
+};
+
+export type CreditCardPageQuery = {
+  orgUnitId: string;
+  contractId: string;
+};
+
+export async function loader(
+  data: LoaderData<CreditCardPageQuery>
+): Promise<CreditCardPageData> {
+  const { contractId, orgUnitId } = data.query;
+
+  const { cookie, userId, ...clientContext } = await getClientContext(data);
+
+  const currentOrgUnit = await getOrgUnitBasicDataService({
+    id: orgUnitId,
+    cookie,
+  });
+
+  const user = await getUserByIdService({ userId, cookie });
+
+  const contract = await getContractDetailsService({
+    contractId,
+    cookie,
+  });
+
+  const mockCreditCards = [
+    {
+      id: "123-123",
+      nickname: "Credit Card Teste",
+    },
+  ];
+
+  return {
+    data: mockCreditCards,
+    context: {
+      clientContext: { cookie, userId, ...clientContext },
+      currentOrgUnit,
+      currentUser: user,
+      currentContract: contract,
+    },
+  };
+}
+
+const CreditCardsPage = ({ data, context }: CreditCardPageData) => (
+  <BuyerPortalProvider {...context}>
+    <CreditCardLayout data={data} />
+  </BuyerPortalProvider>
+);
+
+export default CreditCardsPage;

package/src/themes/layouts.scss

@@ -18,3 +18,6 @@
 // Org Units
 @import "../features/org-units/layouts/OrgUnitsLayout/org-units-layout.scss";
 @import "../features/org-units/layouts/OrgUnitDetailsLayout/org-units-details.scss";
+
+// Credit Cards
+@import "../features/credit-cards/layouts/CreditCardsLayout/credit-card-layout.scss";