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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.0.38",
+  "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/contracts/clients/ContractsClient.ts

@@ -7,17 +7,6 @@ class ContractsClient extends Client {
     super(getApiUrl());
   }
 
-  getContractsByCustomerId(customerId: string, cookie: string) {
-    return this.get<{ data: { contracts: ContractData[]; total: number } }>(
-      `contracts/${customerId}/list`,
-      {
-        headers: {
-          Cookie: cookie,
-        },
-      }
-    );
-  }
-
   getContractsByOrgUnitId(orgUnitId: string, cookie: string) {
     return this.get<{ contracts: ContractData[]; total: number }>(
       `contracts/${orgUnitId}`,

package/src/features/contracts/services/index.ts

@@ -1,8 +1,3 @@
-export {
-  getContractsByCustomerIdService,
-  type GetContractsByCustomerIdServiceProps,
-} from "./get-contracts-by-customer-id.service";
-
 export {
   getContractsByOrgUnitIdService,
   type GetContractsByOrgUnitIdServiceProps,

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